http://www.bildirgec.org/ tr-tr 40 bildirgec.org - graphizm - beğendikleri graphizm <div class="imajsag"><img src='http://www.bildirgec.org/imaj/pinkfloyd/44-00.png' alt="\"\"" border="0"><br></div>Internet Explorer'la çalışmak her seviyeden web tasarımcısı için bazen sorun olabilir. Ancak bu sorun olmak zorunda olacağı anlamına gelmiyor. Hepsi olmasa da pek çok Internet Explorer hatası, hatanın nasıl oluştuğunu anladıktan sonra kolayca düzeltilebilir. Bu yazımda özellikle giriş seviyesindeki kullanıcılar için çapraz tarayıcı uyumluluğunu sağlayabilmeleri için önemli problemleri ve çözümlerini listeledim. <p>Yazımda en çok kullanılan tarayıcı sürümleri olan Firefox 2+, Safari 3+ ve Internet Explorer 6+'ya odaklandım. Her ne kadar IE6'nın kullanım oranı gün geçtikçe düşüş gösteriyor olsa da, bu onu desteklememeniz gerektiği anlamına gelmez, zira halen pek çok kullanıcı hangi tarayıcı sürümünü kullandığını bilmemektedir. Eğer bu IE6 hatalarını biliyorsanız, tarayıcı üzerinde test yapmadan bile sitenizin doğru görünüp görünmediğini anlayabilirsiniz. Bu makale süper deneyimli web tasarımcılarına yönelik olmamakla birlikte IE6'nın çapraz tarayıcı uyumluluğuna yönelik gizlerini anlamanıza yardımcı olacaktır.</p> <p><strong>Özet</strong><br>Makalenin tamamını okumak istemeyenleriniz için aşağıda makalenin bir özetini bulabilirsiniz.</p> <ul> <li>Daima STRICT DOCTYPE ve standartlarla uyumlu HTML/CSS kullanın</li> <li>CSS'nizin en başında daima sıfırlama (CSS RESET) kullanın.</li> <li>Firefox'ta metin işleme sorunlarını gidermek için -moz-opacity:0.99, Safari'de ise text-shadow: #000 0 0 0 kullanın.</li> <li>Görselleri asla CSS ya da HTML ile yeniden boyutlandırmayın.</li> <li>Her tarayıcıda metinlerin nasıl işlendiğini test edin. Lucida kullanmayın.</li> <li>BODY üzerinde metni % ile boyutlandırıp sitenin geri kalanında em kullanarak metin boyutlandırması yapın.</li> <li>Üzerine float uygulanmış tüm anahat divleri <i>display: inline</i> ve <i>overwlow: hidden</i> içermeli.</li> <li>CSS3 seçicilerini kullanmayın.</li> <li>Alpha'yı yüklemediyseniz saydam PNG kullanmayın.</li> </ul> <p><!-- buradan kes --></p> <p><strong>Element Uyumsuzlukları</strong><br>Her tarayıcı farklı elementleri farklı şekillerde yorumlar - farklı miktarlarda boşluklar, marjlar, sınırlar vs. Bunun anlamı eğr siz öntanımlı stilleri kullanırsanız, kodunuz doğru olsa bile siteniz farklı tarayıcılarda farklı şekillerde görüntülenebilir.</p> <p><strong><i>Çözüm</i></strong><br>Yapmanız gereken ilk şey, ki pek çoğunuzun bunu bildiğini düşünüyorum, stillerinizi sıfırlamaktır. Sıfırlamak, stillerinizin en üst kısmına yerleştireceğiniz ve elementler üzerindeki boşlukları, marjları, sınırları ve diğer uyuşmazlıkları sıfırlayıp onları standart olarak yeniden inşa eden bir kod parçasıdır.</p> <p><a href="http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/">Eric Meyer'in reset.css dosyasını indirin</a> ve stillerinizin en başına yerleştirin. İşte bu kadar. Temiz, çapraz tarayıcı uyumlu stillere kavuştunuz.</p> <p><strong>Görsel İşleme</strong><br>IE6 ve IE7'nin her ikisi de yeniden boyutlandırılmış görselleri inanılmaz derecede kötü bir şekilde işler. Bir görselin boyutunu CSS ya da HTML kullanarak değiştirdiğinizde görsel inanılmaz derecede kötü görünür.</p> <p><strong><i>Çözüm</i></strong><br>Yapmayın. Görsellerinizi sitenize yerleştirmeden önce istediğiniz boyuta göre yeniden boyutlandırın.</p> <p><strong>Metin İşleme</strong><br>Tüm hataların IE'den kaynaklanmadığını söylemiştim. Safari 3+ açık renkli metinlerin koyu renkli arkaplan üzerinde işlenmesi sırasında bir soruna sahip. Kimileri bunun iyi ya da kötü olup olmadığı konusunda farklı görüşlere sahip olabilir, ancak ilgili metni daha aydınlık görüntülemenin bir yolu var. Safari 3.1'de standart metin aşağıdaki şekilde işlenmektedir.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/44-01.png' alt="\"\"" border="0"><br></div> <p><strong><i>Çözüm</i></strong><br>Oldukça kolay. Tek yapmanız gereken aşağıdaki stillemeyi CSS kodunuza dahil etmek.</p> <code>p {text-shadow: #000 0 0 0;}</code> <p>#000 kullandığınız arkaplan rengi olmalı. Seçtiğiniz elementlerde muhtemelen siz daha özgün olmak isteyeceksinizdir. Bunu BODY etiketi üzerinde kullanmanızı önermem. Düzeltmek isteyeceğiniz diğer elementler li, dt, dd, blockquote vs olabilir. Daha 'ince' görüntülemek istediğiniz tüm elementlerde bu düzeltmeyi kullanın.</p> <p><i>Bazıları Safari'de tipografi için bunun iyi olmadığını söylüyorlar ve metnin standart işleme ile daha güzel göründüğünü söylüyorlar ki ben de onlara katılıyorum. Ancak bazılarının buna katılmadığını da biliyorum. Ayrıca arkaplan rengine, metin rengine ve metin seçimine karar verirken hangisinin daha iyi olduğuna da karar veremeyiz. Bu durumda seçim tamamen kişisel tercihinize ve sitenizin içeriğinin nasıl olduğuna kalmış.</i></p> <p>Bu düzeltmeyi Firefox üzerinde kullanmak için opacity düzeltmesini kullanacağız.</p> <code>p {-moz-opacity: 0.99;}</code> <p>Bu düzeltmeyi kullanırken dikkatli olmalısınız zira düzeltmenin uygulandığı element içerisinde bir Flash dosyası bulunuyorsa ilgili dosya doğru görüntülenmemektedir.</p> <p>İlgili düzeltmeler uygulandıktan sonra metnimiz aşağıdaki şekilde görünecektir.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/44-02.png' alt="\"\"" border="0"><br></div> <p><strong>Yazıtipi Seçimi</strong><br>Hepimizin kullandığı bazı ortak web yazı tipleri vardır - Arial, Georgia, Verdana vb. Hem PC hem de Mac kullanıcılarının bilgisayarlarında bulunan yazı tipleri de mevcuttur - Century Gothic, Arial Narrow vs. Buna rağmen farklı tarayıcıların ve işletim sistemlerinin yazı tipi işleme yöntemleri farklıdır ve sizin bu farklılıkların farkında olmanız gerekir, zira yanlış bir yazı tipi kullanırsanız siteniz çok çirkin görünebilir.</p> <p><strong><i>Çözüm</i></strong><br>Kullanacağınız yazı tipinin seçimi tamamen sizin tercihinize bağlıdır. Yazı tipini kullanmak güvenli olduğu sürece sorun yoktur ancak bu işleme sorunlarının farkında olmanız gerekir. Kullanmamanız gereken bir yazı tipi muhtemelen Lucida Grande/Sans zira IE üzerinde bu yazı tipi korkunç görünüyor. Yazı tipinin Safari'de (Mac) nasıl işlendiğine bir bakın.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/44-03.png' alt="\"\"" border="0"><br></div> <p>Güzel değil mi? Internet Explorer (PC)'de yazı tipinin bu şekilde görüntüleniyor olması ise çok kötü.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/44-04.png' alt="\"\"" border="0"><br></div> <p><i>Kimileri Lucida Sans yazı tipinin de işletim sisteminin ClearType özelliği açıldığında düzgün göründüğünü belirtirken, kimileri de halen yanlış göründüğünü belirtiyor. Bu durumda yapılması gereken en doğru şey muhtemelen Lucida Sans kullanmamak olacaktır. Bunun yerine Arial ya da başka bir san-serif yazı tipi kullanmayı tercih etmelisiniz.</i></p> <p><strong>Yazıtipi Boyutlama</strong><br>Metni yeniden boyutlandırma işlemi farklı tarayıcılarda ve işletim sistemlerinde farklı şekillerde işlenir. Örneğin IE pixel kullanılarak boyutlandırılmış bir metni yeniden boyutlandırmayacaktır. Eğer metinleri em kullanarak boyutlandırırsak, o zaman da IE metni yeniden boyutlandırdığımızda boyutunu abartacaktır.</p> <p><strong><i>Çözüm</i></strong><br>Yazı tipi boyutlandırmaya yönelik kendinize referans alabileceğiniz en iyi kaynak, Richard Rutter'ın yazdığı <a href="http://www.alistapart.com/articles/howtosizetextincss">CSS'de Metin Nasıl Boyutlandırılmalıdır</a> makalesidir. Sonuç ise, metninizi BODY elementi üzerinde yüzde kullanarak boyutlandırıp, stilin geri kalanında em kullanarak boyutu belirlemek. Satır yüksekliği için de yine pixel yerine em kullanırsanız farklı tarayıcılarda doğru işleme sonuçlarını alırsanız.</p> <p>Burada hatırlamanız gereken şey öntanımlı yazı tipi boyutunun 16px olduğudur. Bu durumda örneğin yazı tipini 12px'e dönüştürmek için kullanmamız gereken kod şudur:</p> <code>body {font-size: 75%; line-height: 1.5 em;}</code> <p>Şimdi boyutlandırmanızı em kullanarak yapabilirsiniz:</p> <code>h1 {font-size: 3em;}</code> <p>Önerilen bir diğer teknik ise yazı tipinizi önce 10px'e indirgemektir. Bu durmda metninizi em kullanarak yeniden boyutlandırmak daha kolay olacaktır. Örneğin:</p> <code>body {font-size: 62.5%; line-height: 1.5em;}</code><br><code>h1 {font-size: 1.8em; /* 18px */}</code><br><code>p {font-size: 1.2em; /* 12px */}</code> <p>Bu tekniği kullanırsanız dikkat etmeniz gereken bir konu var ki o da insanların Internet Explorer üzerinde küçük yazı tipi seçeneğini kullanmaları durumunda metniniz okunamayacak derecede küçük olabilir. Her ne kadar bu seçeneği bilinçli olarak seçen kullanıcı sayısının yok denecek kadar az olduğunu düşünsem de bu ayrıntıyı bilmenizde yarar var.</p> <p><strong>Yüzen Elementlerde Çifte Marj</strong><br>CSS Anahatlarımızı birbiri ardına yüzen (float) divler kullanar oluştururuz, tıpkı bir tür yatay tetris gibi. Satırın sonuna gelindiğinde ise satıra sığmayan div bir sonraki satıra kayar. Bir ızgara oluşturmak için sık kullanılan yöntem aşağıdaki gibidir:</p> <code>#content {float: right; width: 300px; margin-right: 10px;}</code><br><code>#sidebar {float: right; width: 100px;}</code> <p>Bu kod "normal" bir tarayıcıda aşağıdaki gibi görünmelidir.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/44-05.png' alt="\"\"" border="0"><br></div> <p>Ancak IE'de bu aşağıdaki gibi görüntülenecektir.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/44-06.png' alt="\"\"" border="0"><br></div> <p>Gördüğünüz üzere marj iki defa işlendi. Yüzen element ile aynı yönde bulunan her marj iki defa işlenecektir. Neden diye sormayın, IE bu. Bunun anlamı sol tarafaki elemente uygulanan marj, kodda belirtilenin aksine 20px olarak işlenecektir ki bu da muhtemelen anahattı bozacaktır.</p> <p><strong><i>Çözüm</i></strong><br>Bu sorunu gidermek için anahat divlerinize <i>display: inline</i> yerleştirmelisiniz.</p> <code>#content {float: right; width: 300px; margin-right: 10px; display: inline;}</code><br><code>#sidebar {float: right; width: 100px; display: inline;}</code> <p>Bu sayede marj hatasını da gidermiş olduk. Her ne kadar bu yüzen element ile aynı yöndeki tüm marj elementlerini etkilese de bu düzeltmeyi yüzen tüm div elementlerine eklemek kullanışlı olabilir. Ne zaman yüzen tarafta marj kullanmak isteyeceğinizi önceden kestiremezsiniz. Bu kod diğer hiçbir tarayıcıyı etkilemeyeceğinden kullanışlı olabilir.</p> <p><strong>Genişleyen Kutu</strong><br>Genişleyen kutu problemi pek çok CSS anahattında sorun oluşturur. birbiri ardına yüzen elementler içeren ve öntanımlı genişlikleri bulunan divleri içeren bir anahat kullanmanız durumunda eğer ilgili divin genişliğinden daha geniş bir genişliğe sahip bir görsel ya da boşluk içermeyen bir metin kullanmanız durumunda ilgili anahat IE6'de yanlış görüntülenecektir. Örneğimize bir bakalım:</p> <code>#content {float: right; width: 300px; margin-right: 10px; display: inline;}</code><br><code>#sidebar {float: right; width: 100px; display: inline;}</code> <p>Pek çok tarayıcıda bu aşağıdaki şekilde işlenecektir:</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/44-07.png' alt="\"\"" border="0"><br></div> <p>Buna rağmen IE6'da anahattımız bozulacaktır:</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/44-08.png' alt="\"\"" border="0"><br></div> <p><strong><i>Çözüm</i></strong><br>Burada kullanacağımız çözüm <i>overflow</i> özelliğini kullanmaktır. Eğer <i>overflow: hidden</i> değerini anahat divlerine dahil ederseniz, anahat IE6'de bozulmayacaktır.</p> <code>#content {float: right; width: 300px; margin-right: 10px; display: inline; overflow: hidden;}</code><br><code>#sidebar {float: right; width: 100px; display: inline; overflow: hidden;}</code> <p>Her ne kadar ekleyeceğiniz bu kod sorunu giderse de bazı karmaşık anahatlarda başka sorunlara yol açabilir. Bunun yanı sıra IE6 dışındaki tarayıcılarda metnin otomatik olarak iki satıra bölümlenmesinin aksine alana sığmayan metnin görünmemesine neden olacaktır.</p> <p><strong>Yüzen Elementleri Kapsamak</strong><br>Burada anlatmak istediğimiz şey kapsayıcı bir divin içerisindeki divleri doğru bir şekilde kapsamamasıdır. Aşağıdaki örneğe bir bakın.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/44-09.png' alt="\"\"" border="0"><br></div> <p>Kapsayıcının içerisindeki divleri nasıl doğru bir şekilde kapsadığını gördünüz mü? Olması gereken de bu zaten. Buna rağmen bazen bu şekilde sonuçlanmayıp aşağıdaki gibi bir hal alabiliyor.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/44-10.png' alt="\"\"" border="0"><br></div> <p>Kapsayıcı doğru bir şekilde içerisindeki divleri kapsamıyor. Muhtemelen kapsayıcınıza bir arkaplan resmi atamadığınız sürece bunu fark etmeyeceksinizdir.</p> <p><strong><i>Çözüm</i></strong><br>Bu sorunu gidermeye yönelik birkaç çözüm bulunmakla birlikte kullanılabilecek en iyi yöntem kapsayıcınıza <i>overflow: auto;</i> ya da <i>overflow: hidden</i> değerlerinden birisini atamaktır.</p> <code>#container {width: 966px; margin: 0 auto; overflow: auto;}</code> <p><i>overflow: auto</i> değerinin Firefox üzerinde bazen sorunlara yol açabileceğini unutmayın. Eğer bunu kullandıktan sonra bir sorunla karşılaşırsanız, onun yerine <i>overflow: hidden</i> kullanmayı deneyin. Eğer bu da sorun oluşturuyorsa o zaman <a href="http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/">şuradaki makaleye</a> bir göz atın. Bunu eklemenin dışında IE6 üzerinde anahattınızın tetiklenmesi gerektiğini de unutmayın. Bunu elementinize yükseklik ve genişlik atayarak yapabilrsiniz. Eğer kapsayıcınıza bir genişlik değeri vermek istemiyorsanız o zaman <i>height: 1%;</i> ya da <i>zoom: 1;</i> değerlerinden birini verebilirsiniz.</p> <p><strong>CSS Seçicileri</strong><br>Her ne kadar hepimiz CSS3 seçicilerini kullanmaya can atsak da, IE6 bu seçicilerin büyük bir kısmını desteklememektedir. Bırakın CSS3'ü, IE6'nın desteklemediği CSS2 seçicileri bile vardır. İşte kullanmamanız gereken seçicilerin bir listesi:</p> <ul> <li>E > F</li> <li>E + F</li> <li>E ~ F</li> <li>:root</li> <li>:last-child</li> <li>:only-child</li> <li>:nth-child()</li> <li>:nth-last-child()</li> <li>:first-of-type</li> <li>:last-of-type</li> <li>:only-of-type</li> <li>:nth-of-type()</li> <li>:nth-last-of-type()</li> <li>:empty</li> <li>:not()</li> <li>:target</li> <li>:enable</li> <li>:disabled</li> <li>:checked</li> <li>E[değer] seçicilerinden herhangi biri</li> <li>:first-child</li> <li>:lang()</li> <li>:before</li> <li>::before</li> <li>:after</li> <li>::after</li> </ul> <p>Elbette bu seçicilerin pek çoğu daha Firefox 3 üzerinde de desteklenmiyor. Desteklenen seçicilerin tam bir listesi için evotech.net üzerinde yer alan <a href="http://www.evotech.net/blog/2008/05/browser-css-selector-support/">tarayıcılarda css seçiciler için destek</a> yazısına bir göz atın.</p> <p><strong><i>Çözüm</i></strong><br>Standart seçicileri kullanmaya devam edin. Sadece IE üzerinde çok önemli bir değişiklik yapmayacağı sürece E + F, F, E > F, E ~ F seçicilerini kullanın. Eğer <strong>gerçekten</strong> bu seçicileri kullanmak istiyorsanız, o zaman IE8.js'yi deneyebilirsiniz. Bu JavaScript kütüphanesi IE6'ya seçiciler için daha iyi destek sunmasına rağmen sitenizi yavaşlatacaktır. Ancak biz IE6 kullanıcılarını dikkate almıyoruz, öyle değil mi?</p> <p><strong>PNG Saydamlığı</strong><br>IE6 PNGler üzerinde alfa saydamlığı desteklemiyor. Bu muhtemelen IE üzerinde gördüğümüz en rahatsız edici sorun.</p> <p><strong><i>Çözüm</i></strong><br>Bu problem için bir dizi çözüm bulunuyor. Ya IE'ye özgü bir stil şablonunda AlphaImageLoader'ı kullanacaksınız ya da bu sorunu gidermek için oluşturulan çeşitli JavaScriptlerden birine başvuracaksınız. Hangisini tercih ederseniz edin, tekrar eden saydam arkaplan görsellerini IE6 üzerinde kullanabilmenin bir yolu yok.</p> <p>AlphaImageLoader'ı kullanmak biraz zahmetli. Saydam olan tüm PNG görsellerine aşağıdaki özellikleri ekleyin (CSS'nizin doğrulanabilmesini istiyorsanız o zaman bu kodu IE'ye özgü bir stil şablonu içerisine yerleştirin).</p> <code>.saydam {background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.bildirgec.org/images/transparent.png', sizingMethod='image/scale/crop');}</code> <p>Tüm PNG görsellerinizi "saydam" sınıfına dahil ettiğinizi varsayarsak yukarıdaki kodu kullanabilirsiniz. Ayrıca 1x1 saydam bir png oluşturup src değerinde onun konumunu belirtmeniz de gerekiyor. Geçtiğimiz yıl <a href="http://24ways.org/2007/supersleight-transparent-png-in-ie6">24ways üzerinde</a> bu konuda muhteşem bir makale yayımlandı.</p> <p>Bu sorunu giderebileceğiniz daha da iyi bir yöntem, <a href="http://www.bildirgec.org/yazi/blueprint-css-framework-unu-kullanmak">Blueprint CSS Çatısı</a>'nın geliştiricisi Olav Bjorkoy'un <a href="http://bjorkoy.com/past/2007/4/8/the_easiest_way_to_png/">şuradaki</a> makalesinde anlattığı yöntemi uygulamak. AlphaImageLoader'e benzer bir yöntem ancak onun yerine saydamlığı tetikleyen bir betiğe bağlantı veriyorsunuz.</p> <p>Kullanabileceğiniz üçüncü yöntem ise IE8.js'yi kullanmak. Bu yöntem öncekinden de güvenli ve bir sorunla karşılaşmanız neredeyse mümkün değil. HTML'niz üzerinde bu betiğe bağlantı verin ve betik dosya adı -trans ile biten tüm png dosyalarının saydamlık sorununu giderecektir (örneğin resim-trans.png).</p> <p><strong>Tüm bu yöntemleri kullanmanıza rağmen saydam pngler ile sorun yaşamanız halen olasıdır. Bu yöntemlerden herhangi birini kullandıktan sonra IE6 üzerinde sağlam bir test uygulamayı unutmayın.</strong></p> <ul> <li><strong>Kaynak:</strong> <a href="http://anthonyshort.com.au/blog/comments/how-to-get-cross-browser-compatibility-everytime/">Anthony Short</a></li> </ul> <strong>CSS İle İlgili Yazdığım Diğer Yazılar</strong> <ul> <li><a href="http://www.bildirgec.org/yazi/css-de-uzman-olmanizi-saglayacak">CSS'de Uzman Olmanızı Sağlayacak 20 CSS Dersi</a></li> <li><a href="http://www.bildirgec.org/yazi/960-css-catisina-yakindan-bakis">960 CSS Çatısına Yakından Bakış</a></li> <li><a href="http://www.bildirgec.org/yazi/ogrenilmesi-gereken-15-css-hilesi">Öğrenilmesi Gereken 15 CSS Hilesi</a></li> <li><a href="http://www.bildirgec.org/yazi/web-tasarimcilari-icin-kullanisli-12">Web Tasarımcıları İçin 12 CSS Framework'ü, Şablonu ve Kod Sitesi</a></li> <li><a href="http://www.bildirgec.org/yazi/her-web-tasarimcisinin-ogrenmesi-gereken">Her Web Tasarımcısının Öğrenmesi Gereken 9 Önemli CSS Yeteneği</a></li> <li><a href="http://www.bildirgec.org/yazi/modern-css-de-altin-oran">Modern CSS'de Altın Oran</a></li> <li><a href="http://www.bildirgec.org/yazi/sadece-css-ile-olusturulmus-animasyonlu">Sadece CSS İle Oluşturulmuş Animasyonlu İlerleme Çubuğu</a></li> <li><a href="http://www.bildirgec.org/yazi/pixelleri-emlere-kolayca-donusturun">Pixelleri emlere Kolayca Dönüştürün</a></li> <li><a href="http://www.bildirgec.org/yazi/web-tasariminda-altin-oran">Web Tasarımında Altın Oran</a></li> <li><a href="http://www.bildirgec.org/yazi/blueprint-css-framework-unu-kullanmak">Blueprint CSS Framework'ünü Kullanmak</a></li> <li><a href="http://www.bildirgec.org/yazi/sencss-layout-disindaki-hersey-icin">SenCSs: Layout Dışındaki Herşey İçin CSS Framework'ü</a></li> </ul><p>Bu yazı <a href="http://www.bildirgec.org/uye/graphizm">graphizm</a> tarafından <a href=" http://www.bildirgec.org/yazi/capraz-tarayici-uyumlulugu-icin-altin ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Mon, 16 Feb 2009 19:13:00 GMT 197624@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/capraz-tarayici-uyumlulugu-icin-altin graphizm <p>güzel tasarım yazıları yayınlayan yabancı sitelerden <a href="http://www.dzineblog.com">dzineblog</a>, <a href="http://dzineblog.com/2008/07/45-excellent-free-web-templates.html">burada</a> 45 adet mükemmel <a href="http://en.wikipedia.org/wiki/Web_template">web template</a> i yayınlamış. hepsi de önizleme ve download linkleri ile beraber.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/fckmeimfamous/2-3.jpg' alt="\"\"" border="0"><br></div> <p>bu yazıya daha fazla ne yazılır bilmiyorum ama kontrol etmenizi tavsiye ederim.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/fckmeimfamous/8.jpg' alt="\"\"" border="0"><br></div> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/fckmeimfamous/12.jpg' alt="\"\"" border="0"><br></div> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/fckmeimfamous/32.jpg' alt="\"\"" border="0"><br></div> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/fckmeimfamous/35.jpg' alt="\"\"" border="0"><br></div><p>Bu yazı <a href="http://www.bildirgec.org/uye/graphizm">graphizm</a> tarafından <a href=" http://www.bildirgec.org/yazi/45-adet-mukemmel-web-template ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Sat, 26 Jul 2008 13:03:00 GMT 157167@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/45-adet-mukemmel-web-template graphizm <div class="imajorta"><img src='http://www.bildirgec.org/imaj/oceangray/scrn1.png' alt="\"\"" border="0"><br></div> <p>Paylaşım siteleri gün geçtikçe artıyor... Artık arkadaşlarımızla sevdiğimiz müzikleri, çektiğimiz fotoğrafları, videoları v.s bir çok şeyi internet ortamında paylaşıyoruz.. <a href="http://www.scrnshots.com/">ScrnShots </a> isimli bu servis ile ise aldığımız ekran görüntülerini paylaşıyoruz... Sitenin sloganı "ekran görüntünü yükle, etiketle ve paylaş." <div class="imajorta"><img src='http://www.bildirgec.org/imaj/oceangray/scrn2.png' alt="\"\"" border="0"><br></div></p> <p>Sisteme üye olunca size <a href="http://www.scrnshots.com/users/oceangray">özel bir sayfayla</a> karşılaşıyorsunuz.. Yüklediğiniz ekran görüntülerini buradan kontol edebiliyorsunuz...</p><p>Bu yazı <a href="http://www.bildirgec.org/uye/graphizm">graphizm</a> tarafından <a href=" http://www.bildirgec.org/yazi/ekran-goruntulernizi-paylasin-scrnshots ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Mon, 28 Jul 2008 06:00:00 GMT 157163@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/ekran-goruntulernizi-paylasin-scrnshots graphizm <div class="imajorta"><img src='http://www.bildirgec.org/imaj/filezza/d0d01832dc1f26168f9cc39e6f8dab3d-300x217.png' alt="101 Free Icon Sets" border="0"><br>101 Free Icon Sets</div> <p><a href="http://outlawdesignblog.com/">outlawdesignblog</a> yöneticisi, <a href="http://outlawdesignblog.com/author/admin/">Danny Outlaw</a> tarafından toparlanmış 101 ücretsiz <a href="http://www.bildirgec.org/etiket/ikon-seti">ikon seti</a>.</p> <p>Çeşitli kategorilere ve boyutlara sahip <a href="http://www.bildirgec.org/etiket/ikon">ikon</a> setleri, .psd, .ico, .icns, .gif, .bmp, .png, .jpg gibi değişik formatlara sahip.</p> <p>Aralarından seçtiğim 9 ikon seti aşağıda listelenmiştir.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/filezza/badge-icons-s01e13-24-by-lemondesign.jpg' alt="İndir" border="0"><br><a href="http://outlawdesignblog.com/2008/101-free-icon-sets-that-kick-ass/%3Cbr%20/%3Ehttp://lemondesign.deviantart.com/art/Badge-Icons-S01E13-24-72619730">İndirmek için buraya tıklayabilirsiniz.</a></div> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/filezza/recyclebin-box-by-mx-steel.jpg' alt="İndirmek için buraya tıklayabilirsiniz." border="0"><br><a href="http://mx-steel.deviantart.com/art/RecycleBin-Box-64009397">İndirmek için buraya tıklayabilirsiniz.</a></div> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/filezza/free-icons-for-personal-use-1212181463946.png' alt="İndirmek için buraya tıklayabilirsiniz." border="0"><br><a href="http://www.studiomx.eu/Icons.html">İndirmek için buraya tıklayabilirsiniz.</a></div> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/filezza/icons-12-3-bundle-thumb.jpg' alt="İndirmek için buraya tıklayabilirsiniz." border="0"><br><a href="http://www.icontoaster.com/?free-icons-for-all">İndirmek için buraya tıklayabilirsiniz.</a></div> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/filezza/icons.jpg' alt="İndirmek için buraya tıklayabilirsiniz." border="0"><br><a href="http://www.iconarchive.com/category/object/pirates-icons-by-artua.html">İndirmek için buraya tıklayabilirsiniz.</a></div> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/filezza/easy-uploads-icons-by-mayosoft.jpg' alt="İndirmek için buraya tıklayabilirsiniz." border="0"><br><a href="http://mayosoft.deviantart.com/art/Easy-Uploads-icons-17224991">İndirmek için buraya tıklayabilirsiniz.</a></div> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/filezza/azullustre-filetype-by-mayosoft.jpg' alt="İndirmek için buraya tıklayabilirsiniz." border="0"><br><a href="http://mayosoft.deviantart.com/art/AzulLustre-Filetype-12565855">İndirmek için buraya tıklayabilirsiniz.</a></div> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/filezza/blocks-image-8-1.png' alt="İndirmek için buraya tıklayabilirsiniz." border="0"><br><a href="http://theiconlab.com/free/index.html">İndirmek için buraya tıklayabilirsiniz.</a></div> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/filezza/socialwebbuttons1-sp.jpg' alt="İndirmek için buraya tıklayabilirsiniz." border="0"><br><a href="http://www.webfruits.it/dblog/articolo.asp?articolo=62">İndirmek için buraya tıklayabilirsiniz.</a></div> <p>İkon setlerinin tamamını görmek ve indirmek için <a href="http://outlawdesignblog.com/2008/101-free-icon-sets-that-kick-ass/">buraya tıkla</a>yabilirsiniz.</p><p>Bu yazı <a href="http://www.bildirgec.org/uye/graphizm">graphizm</a> tarafından <a href=" http://www.bildirgec.org/yazi/101-ucretsiz-ikon-seti ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Fri, 25 Jul 2008 05:37:00 GMT 157126@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/101-ucretsiz-ikon-seti graphizm <div class="imajorta"><img src='http://www.bildirgec.org/imaj/wanadooo/noisy4-smhdr.jpg' alt="\"\"" border="0"><br></div> <a href="http://www.hdrwalls.com/">HDRWalls</a> sitesinde, <a href="http://tr.wikipedia.org/wiki/Hdr">hdr</a> ile yoğurulmuş -şimdilik- (iPod Touch, PSP, Blackberry, iPhone'da da kullanılmak üzere) 349 adet yüksek çözünürlükte duvar kağıdı bulunuyor. daha önceleri aşağıdaki linklerde de göreceğiniz üzere hdr nedir, nasıl yapılır hakkında çok güzel bildiriler yazıldığı için burada tekrar uzun uzun yazmama gerek yok. bildirgeç'te <a href="http://www.bildirgec.org/ara/hdr">hdr</a> hakkında yazılan bazı yazılar: <ul> <li> <a href="http://www.uruninceleme.com/makaledetay.aspx?Id=13">HDR ile gerçeküstü bir dünya</a></li> <li> <a href="http://www.hakkiceylan.com/hdr_fotograf_olusturma_photomatix/">HDR Fotoğraf Oluşturma</a></li> <li> <a href="http://www.gunesintamicinde.com/hdr-fotograf-cekmek-high-dynamic-range-photos/">HDR Fotoğraf Çekmek</a></li> <li><a href="http://www.bildirgec.org/yazi/hdr-fotograf-cekme-teknigi">HDR fotoğraf çekme tekniği</a></li> </ul><p>Bu yazı <a href="http://www.bildirgec.org/uye/graphizm">graphizm</a> tarafından <a href=" http://www.bildirgec.org/yazi/hdr-walls-hdr-duvarkagitlari ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Fri, 25 Jul 2008 08:17:00 GMT 157125@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/hdr-walls-hdr-duvarkagitlari graphizm <div class="imajorta"><img src='http://www.bildirgec.org/imaj/AlperBlog/posture.gif' alt="PostureMinder Programı" border="0"><br>PostureMinder Programı</div> <p>İngiliz <a href="http://www.postureminder.co.uk">Posture Minder</a> firması tarafından tasarlanan bu program, bilgisayar başındaki pek çok kişiyi bel ve boyun ağrılarından kurtarırken, büyük şirketlerden de birçok sipariş alıyor. İnternet üzerinden belli bir ücret karşılığında indirilebiliyor. Peki, nasıl çalışıyor bu program?</p> <p>İndirilen program entegre veya ek bir <a href="http://www.bildirgec.org/etiket/kamera">kamera</a> aracılığı ile sizi izliyor ve sizi doğru oturmanız için uyarıyor.Eğer program çalışırken hiç ara vermez ve hareket etmezseniz program sizi uyarıyor , hareket etmeniz gerektiğini ve yapabileceğiniz hareketleri sizlere şekilli bir şekilde gösteriyor. Ayrıca bu program o gün içinde almanız gereken sıvı miktarını da size söylüyor.</p><p>Bu yazı <a href="http://www.bildirgec.org/uye/graphizm">graphizm</a> tarafından <a href=" http://www.bildirgec.org/yazi/agriya-iyi-gelen-program ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Fri, 25 Jul 2008 11:00:00 GMT 157124@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/agriya-iyi-gelen-program graphizm <div class="imajorta"><img src='http://www.bildirgec.org/imaj/wanadooo/2673408857-85c9954e29.jpg' alt="speckly" border="0"><br>speckly</div> <a href="http://speckly.com">speckly</a> son derece sade, kolay kurgulanmış bir yapıya sahip torrent arama motoru. en popüler torrent sitelerinden arama yapıyor. Diğerlerinden farkı arama sonuçlarının altında <strong>seeds</strong> sayısına yer vermesi ve dosyanın ne kadar süredir mevcut durumda olduğunu göstermesi. ayrıca <a href="http://youtorrent.com">youtorrent</a> dünyanın en büyük legal torrent arama motoru olduğu iddiasında. bildirgeç'te <a href="http://www.bildirgec.org/ara/torrent%20arama">torrent arama</a> konusu.<p>Bu yazı <a href="http://www.bildirgec.org/uye/graphizm">graphizm</a> tarafından <a href=" http://www.bildirgec.org/yazi/speckly-torrent-arama-motoru ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Fri, 25 Jul 2008 11:11:00 GMT 157123@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/speckly-torrent-arama-motoru graphizm <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pisho/silah.PNG' alt="dokunmamalıydın..." border="0"><br>dokunmamalıydın...</div> <p>bir koca ve yaptığı hınzırlığı konu alan bu video bu aralar video paylaşım sitelerinin gözbebeği haline geldi bile.. kısaca anlatmak gerekirse, önceden kamerayı bir yere gizleyen kocanın, büyük ihtimal içinde kurşun bulunmayan silahını eline alan hanımına -tam da o silahı kurcalarken- attığı çıtpıtlar ile hanımı neye uğradığını şaşırıyor ve ortaya komik bir manzara çıkıyor.. <a href="http://www.break.com/index/wife-will-never-touch-a-gun-again.html">şuradan </a>izleyelim.</p> <p>ayrıca <a href="http://www.bildirgec.org/yazi/okul-yatakhanesinde-yilan-oyunu">Okul yatakhanesinde Yılan Oyunu</a> adlı bildiri de dikkatinizi çekebilir.</p><p>Bu yazı <a href="http://www.bildirgec.org/uye/graphizm">graphizm</a> tarafından <a href=" http://www.bildirgec.org/yazi/silahima-dokunma ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Sat, 26 Jul 2008 16:30:00 GMT 157122@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/silahima-dokunma graphizm <div class="imajorta"><img src='http://www.bildirgec.org/imaj/filezza/all-sign-in-one-sheet.jpg' alt="All Sign In One Sheet [ Vector ] " border="0"><br>All Sign In One Sheet [ Vector ] </div> <p>130 adet, ai ve eps formatlarına sahip, işaretler ve notlardan oluşan şekillerin bulunduğu, vektör logolar.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/filezza/iconos.jpg' alt="Vektör Logolar" border="0"><br>Vektör Logolar</div> <p><a href="http://maromedia.blogspot.com/">MAROMEDIA blog</a> tarafından dağıtılan logoları indirmek için <a href="http://maromedia.blogspot.com/2008/06/all-sign-in-one-sheet-vector.html">bu sayfa</a>yı ziyaret edebilirsiniz.</p><p>Bu yazı <a href="http://www.bildirgec.org/uye/graphizm">graphizm</a> tarafından <a href=" http://www.bildirgec.org/yazi/130-vektor-logo-isaretler-ve ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Sat, 26 Jul 2008 20:59:00 GMT 157121@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/130-vektor-logo-isaretler-ve graphizm <div class="imajorta"><img src='http://www.bildirgec.org/imaj/filezza/tutorialroadmap.jpg' alt="\"\"" border="0"><br></div> <p>9 sene önce yayına başlayan ve<a href="http://www.photoshoproadmap.com/Photoshop-plugins"> photoshop eklentileri</a>ni, seçtiği <a href="http://www.photoshoproadmap.com/Photoshop-tutorials">photoshop dersleri</a>ni bizlerle paylaşan, <a href="http://www.photoshoproadmap.com/"><a href="http://www.bildirgec.org/etiket/photoshop">Photoshop</a> Roadmap</a> sitesinden 50 özel photoshop dersi daha.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/filezza/31.jpg' alt="Birleştirilen fotoğraflardan gerçeküstü manzara" border="0"><br><a href="http://www.computerarts.co.uk/tutorials/2d__and__photoshop/combine_photos_to_create_surrealist_landscapes">Birleştirilen fotoğraflardan gerçeküstü manzara</a></div> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/filezza/26-2.jpg' alt="Dinamik aydınlatma" border="0"><br><a href="http://psdtuts.com/photo-effects-tutorials/add-dynamic-lighting-to-a-flat-photograph/">Dinamik aydınlatma</a></div> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/filezza/24.jpg' alt="Sallanan bir siluet" border="0"><br><a href="http://psdtuts.com/tutorials-effects/creating-a-rocking-silhouette-in-photoshop/">Sallanan bir siluet</a></div> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/filezza/12-2.jpg' alt="Asla unutma" border="0"><br><a href="http://vitaminpsd.com/index.php?act=cms&com=view&id=140">Asla unutma</a></div> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/filezza/11.jpg' alt="Fotoğrafa Gölge efekti" border="0"><br><a href="http://www.photoshop-garden.com/view_tut.php?id=56">Fotoğrafa Gölge efekti</a></div> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/filezza/9.jpg' alt="Rengarenk resim" border="0"><br><a href="http://www.photoshop-garden.com/view_tut.php?id=49">Rengarenk resim</a></div> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/filezza/4-2.jpg' alt="Esrarengiz yıldırım" border="0"><br><a href="http://www.alfoart.com/mysterious_lightning_1.html">Esrarengiz yıldırım</a></div> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/filezza/3-2.jpg' alt="Karanlıkta dans etmek" border="0"><br><a href="http://www.photoshop-garden.com/view_tut.php?id=43">Karanlıkta dans etmek</a></div> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/filezza/20.jpg' alt="Küçük denizkızı" border="0"><br><a href="http://www.eyesontutorials.com/articles/111/1/The-little-mermaid---Photo-Effects/Page1.html">Küçük denizkızı</a></div> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/filezza/44.jpg' alt="Photoshop'la neon ışıkları" border="0"><br><a href="http://www.darjanpanic.com/tutorials/neon-lights-with-photoshop/">Photoshop'la neon ışıkları</a></div> <p>Tüm dersleri görmek için <a href="http://www.photoshoproadmap.com/Photoshop-blog/2008/07/09/dreamy-magical-and-lighting-effects-photoshop-tutorials/">buraya</a> tıklayabilirsiniz.</p><p>Bu yazı <a href="http://www.bildirgec.org/uye/graphizm">graphizm</a> tarafından <a href=" http://www.bildirgec.org/yazi/50-buyuleyici-photoshop-dersi ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Sat, 26 Jul 2008 07:25:00 GMT 157120@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/50-buyuleyici-photoshop-dersi