http://www.bildirgec.org/ tr-tr 40 bildirgec.org - algorian - beğendikleri algorian <p>Gezinti (<a href="http://www.bildirgec.org/etiket/navigasyon/">navigasyon</a>), <a href="http://www.bildirgec.org/etiket/kullanilirlik/">kullanılırlık</a> açısından <a href="http://www.bildirgec.org/etiket/web-tasarimi/">web tasarımı</a>nda oldukça önemlidir. Buna rağmen bağlantılar ve gezinti menüleri bir sitenin görsel görünümünü daha da iyileştirebilir. Eğer herkesin yaptığından daha farklı bir gezinti menüsü oluşturmak istiyorsanız, jQuery bunun için size sayısız seçenek sunmaktadır. Bu yazıda <strong><a href="http://www.bildirgec.org/etiket/jquery/">jQuery</a> ve <a href="http://www.bildirgec.org/etiket/css/">CSS</a> kullanarak</strong> gezinti menülerinde nasıl ilgi çekici efektler oluşturabileceğinizi göreceksiniz.</p> <p><strong>1. <a href="http://buildinternet.com/2009/01/how-to-make-a-smooth-animated-menu-with-jquery/">jQuery Kullanarak Nasıl Animasyonlu Menü Yapılır?</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/109-01.jpg' alt="\"\"" border="0"><br></div> <p><strong>2. <a href="http://css-tricks.com/designing-the-digg-header-how-to-download/">Digg Başlığını Tasarlamak: Nasıl Yapılır ve İndirme Bağlantısı</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/109-02.jpg' alt="\"\"" border="0"><br></div> <p><!-- buradan kes --></p> <p><strong>3. <a href="http://www.alistapart.com/articles/sprites2">CSS Sprites 2: Şimdi JavaScript Zamanı</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/109-03.jpg' alt="\"\"" border="0"><br></div> <p><strong>4. <a href="http://www.kriesi.at/archives/apple-menu-improved-with-jquery">jQuery Kullanarak Apple Tarzında Menü Oluşturmak</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/109-04.jpg' alt="\"\"" border="0"><br></div> <p><strong>5. <a href="http://trevordavis.net/blog/tutorial/jquery-tabbed-navigation/">jQuery Sekmeli Gezinti</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/109-05.jpg' alt="\"\"" border="0"><br></div> <p><strong>6. <a href="http://css-tricks.com/color-fading-menu-with-jquery/">jQuery İle Renk Geçişli Menü</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/109-06.jpg' alt="\"\"" border="0"><br></div> <p><strong>7. <a href="http://nettuts.com/tutorials/html-css-techniques/how-to-create-a-slick-tabbed-content-area/">CSS ve jQuery İle Sekmeli İçerik Bölgesi Oluşturmak</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/109-07.jpg' alt="\"\"" border="0"><br></div> <p><strong>8. <a href="http://snook.ca/archives/javascript/jquery-bg-image-animations/">Arkaplam Görsel Animasyonları İçin jQuery Kullanmak</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/109-08.jpg' alt="\"\"" border="0"><br></div> <p><strong>9. <a href="http://nettuts.com/tutorials/javascript-ajax/how-to-create-a-keypress-navigation-using-jquery/">jQuery Kullanarak Klavye İle Yönetilen Menü Oluşturmak</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/109-09.jpg' alt="\"\"" border="0"><br></div> <p><strong>10. <a href="http://www.clarklab.net/blog/posts/animated-drop-down-menu-with-jquery/">jQuery İle Animasyonlu Açılır Menü</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/109-10.jpg' alt="\"\"" border="0"><br></div> <p><strong>11. <a href="http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/">jQuery ve CSS Örneği: Açılır Menü</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/109-11.jpg' alt="\"\"" border="0"><br></div> <p><strong>12. <a href="http://davidwalsh.name/jquery-random-color-animate">jQuery Rasgele Bağlantı Rengi Animasyonu</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/109-12.jpg' alt="\"\"" border="0"><br></div> <p><strong>13. <a href="http://css-tricks.com/learning-jquery-fading-menu-replacing-content/">jQuery Öğrenmek: Menüden İçeriğe Geçiş</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/109-13.jpg' alt="\"\"" border="0"><br></div> <p><strong>14. <a href="http://davidwalsh.name/fading-links-jquery-dwfadinglinks">jQuery İle Bağlantıları Geçiştirmek: dwFadingLinks</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/109-14.jpg' alt="\"\"" border="0"><br></div> <p><strong>15. <a href="http://www.naterkane.com/blog/jquery-scrollable-plugin/">jQuery İle Kaydırılabilir İçerik</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/109-15.jpg' alt="\"\"" border="0"><br></div> <p><strong>16. <a href="http://gmarwaha.com/blog/?cat=8">jQuery Severler İçin LavaLamp</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/109-16.jpg' alt="\"\"" border="0"><br></div> <p><strong>17. <a href="http://nettuts.com/tutorials/javascript-ajax/create-a-cool-animated-navigation-with-css-and-jquery/">jQuery ve CSS İle Animasyonlu Gezinti Menüsü Oluşturmak</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/109-17.jpg' alt="\"\"" border="0"><br></div> <p><strong>18. <a href="http://nettuts.com/tutorials/javascript-ajax/how-to-create-a-mootools-homepage-inspired-navigation-effect-using-jquery/">mooTools Anasayfası Üzerindeki Menüden Esinlenilerek jQuery Oluşturulmuş Menü</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/109-18.jpg' alt="\"\"" border="0"><br></div> <p><strong>19. <a href="http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery">CSS İle Çoklu Seviye Menü Oluşturmak ve Onu jQuery İle İyileştirmek</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/109-19.jpg' alt="\"\"" border="0"><br></div> <p><strong>20. <a href="http://jqueryfordesigners.com/coda-slider-effect/">Coda Kaydırıcı Efekti</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/109-20.jpg' alt="\"\"" border="0"><br></div> <p><strong>21. <a href="http://www.codeitred.com/2008/08/09/multilevel-drop-menu-jquery">jQquery İle Çoklu Seviye Açılır Menü</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/109-21.jpg' alt="\"\"" border="0"><br></div> <p><strong>22. <a href="http://www.shopdev.co.uk/blog/animated-menus-using-jquery/">jQuery İle Animasyonlu Menü</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/109-22.jpg' alt="\"\"" border="0"><br></div> <p><strong>23. <a href="http://www.cssnewbie.com/build-a-tabbed-box-with-css-and-jquery/">CSS ve jQuery İle Sekmeli Kutu Oluşturumu</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/109-23.jpg' alt="\"\"" border="0"><br></div> <p><strong>24. <a href="http://nettuts.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/">jQuery ve CSS İle Yüzen HTML Menüsü Oluşturmak</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/109-24.jpg' alt="\"\"" border="0"><br></div> <p><strong>25. <a href="http://davidwalsh.name/jquery-link-nudging">jQuery Bağlantı Pozisyonlama</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/109-25.jpg' alt="\"\"" border="0"><br></div> <ul> <li><div class="imajsag"><a href="http://pinkfloyd.bildirgec.org/rss.xml"><img src='http://www.bildirgec.org/imaj/pinkfloyd/pinkfloyd-rss.jpg' alt="\"\"" border="0"><br></a></div><strong>Kaynak</strong>: <a href="http://designm.ag/tutorials/jquery-navigation/">Designm</a></li> <li><strong><a href="http://pinkfloyd.bildirgec.org/rss.xml">Yazılarımı RSS Üzerinden Takip Edin</a></strong></li> <li><strong><a href="http://twitter.com/pinkfloyd">@pinkfloyd twitter</a></strong></li> <li><strong><a href="http://pinkfloyd.bildirgec.org/">pinkfloyd köşesi</a></strong></li> <li><a href="http://www.oyyla.com/gonder?url=http://www.bildirgec.org/yazi/gezinti-menuleri-icin-25-jquery/"><img src="http://www.oyyla.com/ld/oyyla-logo-16x16.gif" title="Bu yazıyı Oyyla!"> Oyyla!</a></li> </ul> <p><strong>jQuery İle İlgili Yazdığım Diğer Yazılar</a></strong></p> <ul> <li><a href="http://www.bildirgec.org/yazi/10-mukemmel-coklu-seviye-menu">10 Mükemmel Çoklu Seviye Menü Tekniği</a></li> <li><a href="http://www.bildirgec.org/yazi/css-yi-ogrendiniz-peki-ya">CSS'yi Öğrendiniz. Peki Ya Sonra?</a></li> <li><a href="http://www.bildirgec.org/yazi/75-gercekten-kullanisli-javascript-teknigi">75 (Gerçekten) Kullanışlı JavaScript Tekniği</a></li> <li><a href="http://www.bildirgec.org/yazi/2008-in-en-iyi-javascript">2008'in En İyi JavaScript Kaynakları</a></li> <li><a href="http://www.bildirgec.org/yazi/jquery-ui-yi-kullanarak-metin">jQuery UI'yi Kullanarak Metin Boyutunu Kontrol Etmek</a></li> <li><a href="http://www.bildirgec.org/yazi/jquery-nin-en-pratik-ve">jQuery'nin En Pratik ve Yaratıcı 20 Kullanımı</a></li> <li><a href="http://www.bildirgec.org/yazi/mukemmel-jquery-navigasyonuna-sahip-8">Mükemmel jQuery Navigasyonuna Sahip 8 Site</a></li> <li><a href="http://www.bildirgec.org/yazi/jquery-kullanarak-satirici-metinlerin-rengini">jQuery Kullanarak Satıriçi Metinlerin Rengini Değiştirmek</a></li> <li><a href="http://www.bildirgec.org/yazi/size-sifirdan-jquery-ogretecek-15">Size Sıfırdan jQuery Öğretecek 15 Kaynak</a></li> <li><a href="http://www.bildirgec.org/yazi/jquery-ile-kolayca-ipucu-tooltip">jQuery İle Kolayca İpucu (Tooltip) ve İmaj Önizleme Oluşturma Yöntemleri</a></li> </ul><p>Bu yazı <a href="http://www.bildirgec.org/uye/algorian">algorian</a> tarafından <a href=" http://www.bildirgec.org/yazi/gezinti-menuleri-icin-25-jquery ">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> Wed, 08 Apr 2009 11:10:00 GMT 203819@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/gezinti-menuleri-icin-25-jquery algorian <p><strong><a href="http://www.bildirgec.org/yazi/101-yuksek-kaliteli-css-ve">101 yüksek kaliteli css ve xhtml web şablonu</a> </strong> yazısını daha önce bildirmiştim.</p> <p><strong><a href="http://www.bildirgec.org/yazi/101-yuksek-kaliteli-css-ve">Bir önceki bildirinin</a></strong> devamı niteliğinde olan bu yazıda birbirinden güzel <strong><a href="http://www.bildirgec.org/ara/template/1/tum-yazilar">web tasarım şablonlarına</a> </strong>ulaşabilirsiniz.</p> <p>1 - çözümün ne xhtml ve css web şablonu</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/what-solution-xhtml-css-template.jpg' alt="çözümün ne?" border="0"><br>çözümün ne?</div> <p><a href="http://www.solucija.com/preview/Whats_your_solution">önizleme</a> | <a href="http://www.solucija.com/templates/download/Whats_your_solution.zip">indir</a></p> <p>2 - internet işleri xhtml ve css web şablonu</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/internet-jobs-xhtml-css-template.jpg' alt="internet işleri" border="0"><br>internet işleri</div> <p><a href="http://www.solucija.com/preview/Internet_Jobs2">önizleme</a> | <a href="http://www.solucija.com/templates/download/Internet_Jobs2.zip">indir</a></p> <p><!-- buradan kes --></p> <p>3 - izle bunu xhtml ve css web şablonu</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/watch-this-xhtml-css-template.jpg' alt="izle bunu" border="0"><br>izle bunu</div> <p><a href="http://www.solucija.com/preview/watchthis">önizleme</a> | <a href="http://www.solucija.com/templates/download/watchthis.zip">indir</a></p> <p>4 - küçük şirket xhtml ve css web şablonu</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/small-corporation-xhtml-css-template.jpg' alt="küçük şirket" border="0"><br>küçük şirket</div> <p><a href="http://www.solucija.com/preview/Small_Corporation">önizleme</a> | <a href="http://www.solucija.com/templates/download/Small_Corporation.zip">indir</a></p> <p>5 - elit daire xhtml ve css web şablonu</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/elite-circle-xhtml-css-template.jpg' alt="elit daire" border="0"><br>elit daire</div> <p><a href="http://www.styleshout.com/templates/preview/EliteCircle1-1/index.html">önizleme</a> | <a href="http://www.styleshout.com/hits.php?type=tmp&id=12&url=templates/downloads/EliteCircle1-1.zip">indir</a></p> <p>6 - TechJunkie xhtml ve css web şablonu</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/techjunkie-xhtml-css-template.jpg' alt="TechJunkie" border="0"><br>TechJunkie</div> <p><a href="http://www.styleshout.com/templates/preview/TechJunkie1-0/index.html?PHPSESSID=9259a9c75b292c08d8d7d09bc6dd3760">önizleme</a> | <a href="http://www.styleshout.com/hits.php?type=tmp&id=24&url=templates/downloads/TechJunkie1-0.zip&PHPSESSID=9259a9c75b292c08d8d7d09bc6dd3760">indir</a></p> <p>7 - ciltsiz xhtml ve css web şablonu</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/unbound-xhtml-css-template.jpg' alt="ciltsiz" border="0"><br>ciltsiz</div> <p><a href="http://www.styleshout.com/templates/preview/Unbound1-0/index.html">önizleme</a> | <a href="http://www.styleshout.com/hits.php?type=tmp&id=23&url=templates/downloads/Unbound1-0.zip">indir</a></p> <p>8 - taze medya xhtml ve css web şablonu</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/freshmedia-xhtml-css-template.jpg' alt="taze medya" border="0"><br>taze medya</div> <p><a href="http://www.styleshout.com/templates/preview/FreshMedia1-0/index.html">önizleme</a> | <a href="http://www.styleshout.com/hits.php?type=tmp&id=21&url=templates/downloads/FreshMedia1-0.zip">indir</a></p> <p>devamı için <strong><a href="http://www.1stwebdesigner.com/resources/101-more-quality-css-xhtml-free-templates/">buraya</a></strong> tıklayın.<br><strong><a href="http://www.1stwebdesigner.com/resources/101-more-quality-css-xhtml-free-templates/">kaynak</a></strong></p><p>Bu yazı <a href="http://www.bildirgec.org/uye/algorian">algorian</a> tarafından <a href=" http://www.bildirgec.org/yazi/101-daha-kaliteli-css-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> Thu, 02 Apr 2009 08:58:00 GMT 203259@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/101-daha-kaliteli-css-ve algorian <p>Daha önce CSS Sprite tekniğinden "<a href="http://www.bildirgec.org/yazi/css-sprite-larin-kullanis-alanlari">css sprite'ların kullanış alanları</a>" başlıklı yazımda bahsetmiştim. Eğer bu yazıyı okumadıysanız bu tekniğin yararını kavrayabilmeniz için okumanızı tavsiye ederim. Bu yazıda ise bu tekniği satırlarca kod yazmadan nasıl uygulayabileceğimizi anlatacağım.</p> <p><strong>1. adım: Kullanılacak Resmin Yaratılması</strong><br>Matt Varone'un yapmış olduğu <a href="http://lab.mattvarone.com/navbar/index.php">CSS Navigation Bar Code Generator</a> uygulamasına önceden yaptığımız sprite dosyamızı yüklüyoruz. Ben rehberde örnek olarak aşağıdaki butonları kullanacağım.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/basarozcan/buttonjpg-2.jpg' alt="örnek sprite" border="0"><br>örnek sprite</div></p> <p><strong>2. Adım: Ayarlamalar</strong><br>Resmi yükleyip ikinci adıma geçiyoruz. Bu sayfa Menü tasarımı için yapıldığından dolayı uygulama sizden menünün ismini yazmanızı ve horizontal (yatay) ya da vertical (dikey) özelliklerinden birini seçmenizi istiyor. Bu seçimi yapıp bir sonraki adımda menümüzün sayfa yüklendiği anda gösterilecek halini seçmemiz isteniyor.</p> <p><strong>3. Adım: Ana Katmanı Seçmek</strong><br>Bu adımda yatay menü yapıyorsanız yatay, dikey olarak tasarladıysanız dikey olarak menünün ilk elemanlarını seçmeniz gerekmekte. Eğer uygun bir seçim yaparsanız uygulama size onay mesajı göstererek bir sonraki adıma geçmenize izin veriyor.</p> <p><!-- buradan kes --></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/basarozcan/css2.png' alt="Ana Katman" border="0"><br>Ana Katman</div> <p><strong>4. Adım: Ana Katmanı Bölümlere Ayırmak</strong><br>Bu adımda Seçtiğiniz Ana katman size gösterilir. Butonları tek tek belirlemeniz isteniyor. İlk butonu belirledikten sonra <em>Confirm</em> tuşuna basarsanız bir sonraki tuşu seçmeniz sağlanıyor. Tüm tuşları bu şekilde seçtiğinizde uygulama otomatik olarak son adıma geçiyor. <br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/basarozcan/css1.png' alt="Ana Katman" border="0"><br>Tuşların Seçimi</div></p> <p><strong>5. Adım: Kontrol ve Download</strong><br>Buraya kadar tüm işlemleri doğru gerçekleştirebildiyseniz sistem size demo sayfasını gösterecek ve onaylamanız halinde zip'li dosya içinde kodunuzu indirmeye sunacak.</p> <p><strong>Notlar</strong><br>Bu uygulama CSS Sprite'lar sayesinde Menüler oluşturmaya yarar. Bu yüzden liste koduyla uygulama yazılmıştır. CSS bilginiz yeterli seviyedeyse ufak bir düzenleme sonucunda değişik amaçlarla da kullanmanız mümkündür.</p><p>Bu yazı <a href="http://www.bildirgec.org/uye/algorian">algorian</a> tarafından <a href=" http://www.bildirgec.org/yazi/css-sprite-kullanmak-artik-daha ">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> Thu, 19 Mar 2009 11:48:00 GMT 201580@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/css-sprite-kullanmak-artik-daha algorian <p>Web geliştiricileri kullanıcı dostu <a href="http://www.bildirgec.org/etiket/vertical-menu/">dikey</a> ve <a href="http://www.bildirgec.org/etiket/horizontal-menu/">yatay</a> gezinti (<a href="http://www.bildirgec.org/etiket/navigasyon/">navigasyon</a>) <a href="http://www.bildirgec.org/etiket/menü/">menü</a>lerini <a href="http://www.bildirgec.org/etiket/css/">CSS</a> kullanarak oluşturabiliyorlar. <a href="http://www.bildirgec.org/etiket/javascript/">JavaScript</a> sayesinde de bu menüler daha etkileşimli, yanıt veren ve değişken hale geliyorlar.</p> <p>Bugünkü yazıda <strong><a href="http://www.bildirgec.org/etiket/jquery/">jQuery</a>, <a href="http://www.bildirgec.org/etiket/mootools/">mooTools</a></strong> gibi <a href="http://www.bildirgec.org/etiket/javascript-library/">JavaScript kütüphaneleri</a>nin yanısıra <strong>CSS</strong> ile oluşturulmuş <strong>10 mükemmel çoklu seviye gezinti menüsü tekniği</strong>ne yer vereceğiz.</p> <p><strong>1. <a href="http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx">Vimeo Benzeri Navigasyon Oluşturmak</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/84-01.jpg' alt="\"\"" border="0"><br></div> <p><strong>Vimeo.com</strong> üzerindeki menünün neredeyse aynısı <a href="http://www.jankoatwarpspeed.com/">Janko</a> tarafından geliştirilmiş durumda. Bu menünün en güzel tarafı menü öğesi üzerine fare imleci getirildiğinde menünün beliriyor olması. Ayrıca menünün sunduğu farklı arama seçenekleri sayesinde menü elementlerini eleyebiliyorsunuz.</p> <p>Bu rehberin temelinde sırasız listeye dayalı CSS tabanlı bir açılır menü yatmaktadır. Menünün yapısı aşağıdaki görsel üzerinde açıklanmış.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/84-02.jpg' alt="\"\"" border="0"><br></div> <p>Sizin de göreceğiniz üzere UL elementinin dört öğesi bulunuyor. Bunlardan ilki kısa bir alt menü içeren logo. Ardından giriş bağlantısı, alt menü içeren yardım bağlantısı ve yine alt menü çeren arama öğesi yer alıyor. Her bir alt menü, dahili olduğu menü elementinin üzerine fare imleci götürüldüğünde beliriyor.</p> <ul> <li><a href="http://www.jankoatwarpspeed.com/examples/vimeo_navigation/">Demo</a> | <a href="http://www.jankoatwarpspeed.com/file.axd?file=2009%2f1%2fvimeo_navigation.zip">İndir</a> | <a href="http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx">Detay</a></li> </ul> <p><!-- buradan kes --></p> <p><strong>2. <a href="http://lwis.net/free-css-drop-down-menu/">CSS Açılır Menü Çatısı</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/84-03.jpg' alt="\"\"" border="0"><br></div> <p>Bu menü HTML'yi CSS'den ayırmakla kalmıyor, bunun yanısıra CSS tanımlamaları da yapısal ve tematik biçimlere ayrılmış durumda. Bu sayede yeni bir CSS açılır menü oluşturmak sadece yeni bir tema oluşturarak mümkün zire menünün altyapısı korunmaya devam ediyor. Farklı stiller sadece sınıf isimlerini değiştirerek kullanılabilir. Çatının desteklediği yönelmeler arasında, yatay, soldan sağa dikey, sağdan sola dikey, doğrusal yatay, yukarı yönlü yatay.</p> <p><strong>Menünün Özellikleri:</strong></p> <ul> <li>Kod ve dosyalar iyi düzenlenmiş. Kullandığınız içerik yönetim sistemine ya da diğer araçlara entegre edebileceğiniz gibi, (X)HTML biçimindeki web siteleri üzerinde de kullanabileceğiniz kanallar mevcut.</li> <li>Menü stili sadece sınıf isimlerini değiştirerek özelleştirilebilir. Desteklenen yönelmeler arasında yatay, soldan sağa dikey, sağdan sola dikey, doğrusal yatay ve yukarı yönlü yatay yer alıyor.</li> <li>Windows Internet Explorer 5+, Mozilla Firefox 1.5+, Opera 7+, Apple Safari 2+, Google Chrome 1 vb. tarayıcılar destekleniyor.</li> <li>IE6 ve öncesi için küçük bir JavaScript kullanılıyor. Menü, jQuery ya da Scriptaculous gibi JavaScript kütüphaneleri ile rahatlıkla kullanılabilir. Geriye kalan her şey sadece CSS'den ibaret.</li> </ul> <ul> <li><a href="http://lwis.net/free-css-drop-down-menu/dropdown.simple.horizontal.html">Yatay Menü Demo</a></li> <li><a href="http://lwis.net/free-css-drop-down-menu/dropdown.ultimate.vertical.html">Dikey Menü Demo</a></li> <li><a href="http://lwis.net/free-css-drop-down-menu/download/free-css-drop-down-menu.zip">İndir</a></li> <li><a href="http://lwis.net/free-css-drop-down-menu/">Detay</a></li> </ul> <p><strong>3. <a href="http://www.leigeber.com/2008/11/drop-down-menu/">Çoklu Seviye JavaScript Açılır Menü</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/84-04.jpg' alt="\"\"" border="0"><br></div> <p>Bu çoklu seviye desteği olan açılır menünün kullandığı JavaScript'in dosya boyutu sadece 1.2 KB. Animasyon, aktif başlık belirleme, kolay aktarım ve birden fazla menü kullanabilme desteği gibi özellikleri bulunuyor. Betik Firefox 2+, IE6+, Opera, Safari ve Chrome üzerinde çalışıyor.</p> <ul> <li><a href="http://sandbox.leigeber.com/dropdown-menu/index.html">Demo</a> | <a href="http://sandbox.leigeber.com/dropdown-menu/dropdown-menu.zip">İndir</a></li> </ul> <p><strong>4. <a href="http://greengeckodesign.com/projects/menumatic.aspx">MenuMatic</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/84-05.jpg' alt="\"\"" border="0"><br></div> <p>MenuMatic bir <strong>mooTools</strong> 1.2 sınıfı olup sıralı ya da sırasız semantik listeleri alıp onları dinamik açılır menü sistemine dönüştürüyor. JavaScript'in etkin olmadığı tarayıcılarda ise menü, <a href="http://www.htmldog.com/ptg/">Patrick Griffiths</a> ve <a href="http://www.danwebb.net/">Dan Webb</a> tarafından geliştirilen <a href="http://www.htmldog.com/articles/suckerfish/dropdowns/">Suckerfish Açılır Menüsü</a>'ne klavye desteği kazandıran <a href="http://www.carroll.org.uk/">Matthew Carrol</a>'un CSS tabanlı sürümünü kullanıyor.</p> <p><strong>Menünün Özellikleri</strong></p> <ul> <li><strong>Arama Motoru Dostu</strong></li> <li><strong>Erişilebilir</strong>: Menü bağlantıları üzerinde tab tuşu ile gezinin. Açılır menüler üzerinde ok tuşları ile gezinin.</li> <li>JavaScript'in etkin olmadığı tarayıcılarda otomatik olarak CSS menüsü haline gelme.</li> </ul> <ul> <li><a href="http://greengeckodesign.com/projects/menumatic/examples/horizontal/">Yatay</a> | <a href="http://greengeckodesign.com/projects/menumatic/examples/vertical/">Dikey</a> | <a href="http://menumatc.googlecode.com/files/MenuMatic_0.68.3.zip">İndir</a></li> </ul> <p><strong>5. <a href="http://www.cssplay.co.uk/menus/circular-sub.html">Alt Menüler İçeren Dairesel Menü</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/84-06.jpg' alt="\"\"" border="0"><br></div> <p>Bu güzel menü küçük simgeler içeren alt menü öğelerini, ana menü elementlerinin bulunduğu dairenin içine yerleştiriyor. Menü ayrıca her bir simgeye açıklama eklemenize de izin veriyor. IE6, IE7, Firefox, Opera, Safari ve Google Chrome üzerinde sorunsuz çalışıyor.</p> <p><strong>6. <a href="http://www.andrewsellick.com/71/fancy-sliding-menu-for-mootools">mooTools İçin Kayan Menü</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/84-07.jpg' alt="\"\"" border="0"><br></div> <p><strong>mooTools</strong> JavaScript kütüphanesini kullanan bu menü fare imleci hareket etmediğinde ya da sizin belirleyeceğiniz belirli bir zamandan sonra tüm menü elementlerini orjinal boyutuna getiriyor.</p> <ul> <li><a href="http://www.andrewsellick.com/examples/tabslideV2-mootools/">Demo</a> | <a href="http://www.andrewsellick.com/examples/tabslideV2-mootools/tabslideV2-mootools.rar">İndir</a> | <a href="http://www.andrewsellick.com/71/fancy-sliding-menu-for-mootools">Detay</a></li> </ul> <p><strong>7. <a href="http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm">Yumuşak Gezinti Menüsü</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/84-08.jpg' alt="\"\"" border="0"><br></div> <p>Yumuşak Gezinti Menüsü çoklu seviye desteğine sahip ve CSS tabanlı bir menü olup, web site gezinti elementlerinin yumuşakça belirmesi için jQuery kullanıyor. Özellikle gezinti elementleri web sitelerinin genelinde önemli bir rol oynadığı için bu elementin güzel görünmesi ve işlemesi, sitenin geneli için de önemli hale geliyor.</p> <p>Menü öğeleri dilerseniz doğrudan sayfa üzerindeki kod üzerinden, ya da AJAX aracılığı ile harici bir dosya üzerinde çağırılabilir. jQuery sayesinde de alt menüler hem kayarak (slide) hem de yavaşça belirerek (fade in) görüntülenebiliyor.</p> <p><strong>8. <a href="http://woork.blogspot.com/2009/01/art-of-reusing-code-in-your-web.html">Katlanır Menü</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/84-09.jpg' alt="\"\"" border="0"><br></div> <p>Bu menü aslında Antonio Lupetti'nin web projelerinizdeki kodları yeniden daha verimli bir şekilde kullanabilmenize yönelik hazırladığı rehberin bir parçası. Bu örnete Antonio, fare imlecinin menü öğeleri üzerine getirilmesinin ardından bir efekt içeriyor (farenizi "About Me" ve "Click Here" öğelerinin üzerine getirin).</p> <ul> <li><a href="http://woorktuts.110mb.com/art_of_reuse_code/index2.html">Demo</a> | <a href="http://www.box.net/shared/kosb6f04zq">İndir</a> | <a href="http://woork.blogspot.com/2009/01/art-of-reusing-code-in-your-web.html">Detay</a></li> </ul> <p><strong>9. <a href="http://css-tricks.com/designing-the-digg-header-how-to-download/">Digg Başlığını Tasarlamak</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/84-10.jpg' alt="\"\"" border="0"><br></div> <p>Bu menü Digg web sitesi üzerinde yer alan menünün bir kopyası. Abonelik, arama ve hesap bilgileri gibi önemli öğeler, tam olmalarını beklediğiniz yerde, sayfanın üst kısmında yer alıyorlar. Belirli bir genişliğe kadar genişleyebilen genişlik, açılır menüler, çekici arama ve renklerin kolay değiştirilebilmesi, menünün sunduğu özellikler arasında yer alıyor.</p> <ul> <li><a href="http://css-tricks.com/examples/DiggHeader/">Demo</a> | <a href="http://css-tricks.com/designing-the-digg-header-how-to-download/">İndir</a> | <a href="http://css-tricks.com/designing-the-digg-header-how-to-download/">Detay</a></li> </ul> <p><strong>10. <a href="http://abeautifulsite.net/notebook.php?article=58">jQuery Dosya Ağacı</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/84-11.jpg' alt="\"\"" border="0"><br></div> <p>jQuery Dosya Ağacı, <strong>jQuery</strong> için geliştirilmiş özelleştirilebilir bir AJAX dosya tarayıcı eklentisidir. Sadece bir satır JavaScript kodu ile tümüyle etkileşimli dosya ağaçlarını oluşturabilmeniz mümkün. Ayrıca bu betiğin sunucu taraflı dosya sistemlerine entegre edilebilmesi için PHP, ASP.NET, JSP ve Lasso eklentileri de bulunuyor.</p> <p>Bu menünün sevdiğim yanı, AJAX aracılığı ile dosya uzantılarına bakıp onlara uygun simgeleri eş zamanlı olarak gösterebiliyor olması. Dahası da alt menü öğelerinin açılma ve kapanma efeklerini ve hızlarını belirleyebiliyorsunuz.</p> <ul> <li><a href="http://abeautifulsite.net/notebook_files/58/demo/">Demo</a> | <a href="http://abeautifulsite.net/notebook.php?article=58#download">İndir</a> | <a href="http://abeautifulsite.net/notebook.php?article=58">Detay</a></li> </ul> <ul> <li><div class="imajsag"><a href="http://pinkfloyd.bildirgec.org/rss.xml"><img src='http://www.bildirgec.org/imaj/pinkfloyd/pinkfloyd-rss.jpg' alt="\"\"" border="0"><br></a></div><strong>Kaynak</strong>: <a href="http://devsnippets.com/reviews/10-brilliant-multi-level-navigation-menu-techniques.html">DevSnippets</a></li> <li><strong><a href="http://pinkfloyd.bildirgec.org/rss.xml">Yazılarımı RSS Üzerinden Takip Edin</a></strong></li> <li><strong><a href="http://twitter.com/pinkfloyd">@pinkfloyd twitter</a></strong></li> <li><strong><a href="http://pinkfloyd.bildirgec.org/">pinkfloyd köşesi</a></strong></li> </ul><p>Bu yazı <a href="http://www.bildirgec.org/uye/algorian">algorian</a> tarafından <a href=" http://www.bildirgec.org/yazi/10-mukemmel-coklu-seviye-menu ">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> Sun, 15 Mar 2009 13:26:00 GMT 200925@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/10-mukemmel-coklu-seviye-menu algorian <p>Web tasarımcılarının işlerini kolaylaştıracak pattern(desen) sitelerine devam:<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/xururuca/appendix.jpg' alt="\"\"" border="0"><br></div><a href="http://www.appendixsquared.com/downloads/patterns.php"><strong>AppendixSquared</strong></a>: Paris Dolores ve Christina Pham adlı iki grafik tasarımcı hanımefendinin hazırladığı sitede yok yok! Desenler, fırça ve fotoğraf setleri,fontlar,avatarlar, dokular, duvar kağıtları ve dersler sizleri bekliyor.<br><a href="http://www.motzgraphics.com/backgrounds/index.html"><strong>Barracuda Backgrounds</strong></a>:Karmaşadan uzak tasarımıyla size istediğinizi sunan sitede kağıt, taş, ahşap, fotoğraf, metin, kabartma konu başlıkları altında arka planlar ve desenler bulunuyor.<br><a href="http://www.hybrid-genesis.com/freebies/free_patterns/index.html"><strong>Hybrid Genesis</strong></a>:Henüz az sayıda fakat oldukça güzel desenlere web sahipliği yapan sitede fırça setleri ve dokular da mevcut.<br><a href="http://www.dinpattern.com/"><strong>DinPattern</strong></a>:Bildirgeçte daha önce de bildirdiğim bu site, farklı desen kaynaklarıyla kendinden bir kez daha söz ettiriyor.<br><a href="http://www.hugemagazine.com/patterns/"><strong>Huge Magazine</strong></a>:Az sayıda, sıra dışı desenlerin adresi!</p> <p><!-- buradan kes --></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/xururuca/pixeldecor.jpe' alt="\"\"" border="0"><br></div><a href="http://www.pixeldecor.com/patterns.shtml"><strong>PixelDecor</strong></a>:Renkli desen kaynakları sitesi.<br><a href="http://veredgf.fredfarm.com/pattern-bomb/"><strong>pattern-BOMB</strong></a>:Sitede geometrik ve retro desenler yanında,desen derlemelerine de yer verilmiş.<br><a href="http://www.portfelia.com/patterns.asp"><strong>Portfelia Patterns</strong></a>:64 adet kaliteli desen ve az sayıda fırça seti..<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/xururuca/fracturedsanity.jpg' alt="fractured-sanity.org" border="0"><br>fractured-sanity.org</div><a href="http://fractured-sanity.org/index.php?navi=resources&site=pattern"><strong>Fractured Sanity[Dot]Org</strong></a>:Sitedeki desenler siyah, kırmızı, sarı, pembe, gri, mavi, kahverengi, beyaz, yeşil başlıkları altında gruplandırılmış.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/xururuca/patternsofchange.jpe' alt="\"\"" border="0"><br></div><a href="http://www.lizaphoenix.com/tiles/"><strong>Patterns of Change</strong></a>:renk ve şekil olarak gruplandırılmış sade desen tasarımları.<br><strong>not</strong>:<a href="http://speckyboy.com/2009/01/05/36-must-have-backgrounds-and-patterns-resources-for-all-designers/">kaynak</a> listede yer alan bazı siteleri çıkartmamın sebebi, daha önce <a href="http://www.bildirgec.org/yazi/doku-ve-desen-kaynaklari">bu</a> ve <a href="http://www.bildirgec.org/yazi/desen-pattern-siteleri">şu</a> bildirilerimde bahsetmiş olmamdır.<p>Bu yazı <a href="http://www.bildirgec.org/uye/algorian">algorian</a> tarafından <a href=" http://www.bildirgec.org/yazi/desen-pattern-siteleri-2 ">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, 10 Jan 2009 13:17:00 GMT 191192@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/desen-pattern-siteleri-2 algorian <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/08-jquery-logo.png' alt="\"\"" border="0"><br></div> <p>Belki tam bir jQuery uzmanısınız. Ya ne olacak canım, John Resig'in tam kendisisiniz belki de... Ya da Bildirgeç üzerinde "Prototip", "<a href="http://www.bildirgec.org/etiket/jquery">jQuery</a>", ve "<a href="http://www.bildirgec.org/etiket/mootools/">Mootools</a>" gibi kelimeleri görüp "Bunlar da ne ola ki?" diye hayıflanıp duruyorsunuz... Şimdi tüm bunları öğrenmenin zamanı geldi.</p> <p>Bu endüstride, -özellikle günümüzde daha önce hiç olmadığı kadar-, tasarımcılar kodculara, kodcular da tasarımcılara dönüşüyor... Bir geliştiricinin görevi SADECE ön ya da arkaplan işlerini yürüten kod yazmak olmaktan çıkıyor. jQuery işte bu aradaki mesafeyi kapatmaya yardımcı olan bir JavaScript kütüphanesi. JavaScript erişilemez bir yetenek değil. Daha önce yayımladığım <a href="http://www.bildirgec.org/yazi/size-sifirdan-php-ogretecek-25">size sıfırdan PHP öğretecek 25 kaynak</a> yazısının site kullanıcıları tarafından çok tutulan bir yazı olduğunu gördükten sonra <a href="http://nettuts.com/tutorials/javascript-ajax/15-resources-to-get-you-started-with-jquery-from-scratch/">nettuts üzerindeki</a> benzer bir yazıyı da jQuery dersleri için yayımlamayı uygun gördüm. Bu makalede daha önce hiç jQuery üzerinde çalışmamış geliştiricilere jQery kütüphanesini öğrenmelerine olanak sağlayacak 15 kaynağı listeleyecek ve ilgili kaynaklar hakkında bilgi vereceğim. Eğer bugüne kadar bu kütüphaneye herhangi bir nedenden ötürü korkup yaklaşmamışsanız, şimdi ona yaklaşmanın tam zamanı. Ne kadar kolay olduğuna inanamayacaksınız.</p> <p><strong>jQuery de ne ola ki?</strong><br>jQuery.com'a göre jQuery hızlı ve öz bir JavaScript kütüphanesi olup HTML belgelerinizi olayları işleyebilecek, animasyonlar yürütebilecek ve web sayfalarınıza Ajax etkileşimleri dahil edebilmenizi kolaylaştırır. jQuery, bugüne kadar JavaScript yazma şeklinizi geliştirmek için tasarlanmıştır.</p> <p>Daha basit anlamı ile jQuery, daha önce 10 satır yazdığınız JavaScript kodunu iki satırda yazmanıza olanak sağlayan bir kütüphane! Geriye kalan sekiz satırın en verimli şekilde başkaları tarafından halihazırda yazıldığını ve bu kodun da JavaScript çalıştırabilen tüm modern tarayıcılarda yürütülebildiğini düşünün. Daha jQuery'i derinlemesine öğrenmeden bile zengin formlardan Flash gibi menüler oluşturabileceksiniz. Bir başka iskeleti daha öğrenmek istemiyorum demeyin. Aşağıdaki kaynaklar size bu yolda adım adım rehberlik edeceklerdir.</p> <p><strong>Neden diğerlerini değil de bu kütüphaneyi kullanmalıyım?</strong><br>Sonuç olarak bu sizin seçimiz. Her bir iskeletin (framework) kendine özgü avantajları vardır. Ancak jQuery'nin günümüzün en popüler JavaScript iskeleti olmasının ardında bazı nedenler yatıyor.</p> <p><strong>Birden fazla tarayıcı ile uyum.</strong> Her bir JavaScript ikmali sırasında web geliştiricilerinin önemli bir zamanını, geliştirdikleri betiğin farklı tarayıcılar üzerinde beklendiği gibi çalışıp çalışmadığını test etmesi beklenir. Ne şans ki jQuery kütüphanesi bu tarayıcı uyumsuzluklarını gideriyor ve geliştiricilere kendi kodları üzerinde daha fazla zaman harcayabilmelerine olanak sağlıyor.</p> <p><strong>CSS Seçicileri</strong>. CSS sözdizimlerini kullanarak, geliştiriciler halihazırda kullandıkları bilgilerini belgelerine kolayca dahil edebilirler. CSS 3 ve XPATH seçicilerinin de desteği ile, jQuery sayfanızdaki elementleri kullanmak için mükkemel bir mekanizma sunuyor.</p> <p><strong>Zincirleme</strong>. jQuery kendi metodları için "zincirleme" (chaining) adı verilen bir yöntem kullanır. Bir jQuery nesnesi üzerinde bu yöntemi çalıştırdığınız her zaman, ilgili yöntem aynı jQuery elementini çalıştırır. Bu nedenle de her bir yöntem için seçicilerinizi yeniden yazmanız gerekmez. Tıpkı ".NET" tarzındaki bir özelliği kullanarak daha küçük dosya boyutlarına sahip ve kolay okunabilen kodlar yazabilmenizi sağlar.</p> <p>Eğer merakınız iyice arttıysa, çok güzel! Hemen başlayalım.</p> <p><strong>Adım 1: Kütüphaneyi İndirin</strong><br>Bu yolculuktaki ilk durağınız kütüphaneyi bilgisayarınıza indirmek olacaktır. <a href="http://www.jquery.com/">jQuery.com</a>'u ziyaret edin ve "Download jQuery" bölümüne gidin. Listedeki bağlantılardan birine tıklayarak kütüphaneyi bilgisayarınıza indirin. Daha sonra indirdiğiniz .js dosyasını HTML belgenize dahil etmeniz gerekecek.</p> <ul> <li><strong><a href="http://css-tricks.com/new-screencast-intro-to-jquery/">CSS-Tricks.com: jQuery'e Giriş</a></strong>: Bu jQuery eğitim videosunda, CSS-Tricks websitesinden Chris Coyier, jQuery'i web sayfanıza nasıl dahil edebileceğinizi ve birkaç özelliği nasıl yazabileceğinizi gösterecek.</li> <li><strong><a href="http://www.digital-web.com/articles/jquery_crash_course">Digital-Web.com: jQuery: Başlangıç Kursu</a></strong>: Kod yazmayı bilen web tasarımcıları için jQuery'e giriş kursu.</li> <li><strong><a href="http://www.slideshare.net/simon/learning-jquery-in-30-minutes">Slideshare.net: "30 Dakikada jQuery Öğrenmek"</a></strong>: Eğer slayt gösterilerinden hoşlanıyorsanız, bu ders size jQuery kullanarak nasıl slayt gösterileri oluşturabileceğinizi ve aynı zamanda size jQuery öğretmeyi hedefliyor.</li> </ul> <p><strong>Adım 2: İlk Fonksiyonunuzu Oluşturun</strong><br>jQuery'i öğrenme aşamanızın daha ilk birkaç dakikasında kendi fonksiyonlarınızı oluşturmaya başlayacaksınız. İlk durağınız John Resig'in giriş maklesi "jQuery Nasıl Çalışır?" olmalı. Resig, web uygulamalarınız üzerinde kullanacağız pek çok kolay anlaşılır yöntemi anlatacak. Anlatacakları arasında sınıf ekleme ve kaldırma, zincirleme ve "<code>document.ready</code>" yöntemini çağırmak yer alıyor.</p> <ul> <li><strong><a href="http://docs.jquery.com/How_jQuery_Works">jQuery.com: "jQuery Nasıl Çalışır?"</a></strong>: Bu giriş makalesinde John Resig (jQuery'nin yaratıcısı) sizi animasyon oluşturmanın temellerine götürecek. Eğer jQuery'e yeniyseniz bu makaleyi kesinlikle okumanız önerilir.</li> <li><strong><a href="http://15daysofjquery.com/quicker/4/">15DaysOfJquery.com: 1. Gün</a></strong>: jQuery'nin tüm özelliklerini iki haftada kavramak gibi cesur bir girişimde bulunan "15 Days of jQuery" (jQuery ile 15 Gün) web sitesi her gün bir konuyu işliyor. Bu makalede "<code>document.ready</code>" yöntemini nasıl kullanmanız gerektiğini öğreneceksiniz.</li> <li><strong><a href="http://visualjquery.com/1.1.2.html">VisualJquery.com: "jQuery Sözlüğünüz"</a></strong>: VisualjQuery.com web sitenizi dijital sözlüğünüz olarak düşünün. Site, kullanılabilen her bir jQuery yönteminin sözdizimini ve açıklamasını içeriyor. Bu siteyi yer imlerinize eklemeyi unutmayın.</li> </ul> <p><strong>Adım 3: Elementlerinizi Canlandırın</strong></p> <p>Bu pek çok geliştirici için tartışmalı bir konudur. Birinci grupta "sıfır animasyon"da ısrar eden insanlar bulunur. Bunlar kullanıcının istediklerine mümkün olan en hızlı şekilde cevap verilmesine ve aradan çekilmesini tercih ederler. Onlara, bir sonraki uğraşı için bekleyen bir zombi gibi davranmayın. İkinci grupta da bazı insanlar vardır. Onlar, göze hoş görünen animasyonlar içeren bir siteye, kendi kullanıcıları için uygun bir site gibi bakarlar. Bu animasyonlar uygun kullanıldığında animasyonların kullanılırlığı önemli ölçüde arttırdığına inanırlar. Siz, hangi grupta olduğunuza karar vermelisiniz. Hangi grupta olursanız olun jQuery'nin sayfanızdaki elementleri hareket ettirebilme görevini mümkün olan en kolay şekilde yerine getirebildiğini unutmayın.</p> <ul> <li><strong><a href="http://docs.jquery.com/API/1.1/Effects/Animations">jQuery.com: "Animasyonlar</a></strong> jQuery'nin animasyon yeteneklerini öğrenirken burası uğramanız gereken ilk yer olmalı. Makale, bu yöntemi kullanırken ihtiyacınız olacak parametreleri detaylandırıyor.</li> <li><strong><a href="http://www.detacheddesigns.com/blog/blogSpecific.aspx?BlogId=78">Detached Designs: jQuery'nin Animasyon Yeteneklerini Öğrenmek</a></strong>: Konu animasyona geldiğinde hiç deneyiminiz yok mu? Bu makale özellikle animasyon konusunda hiç deneyimi olmayan kullanıcıları hedef alıyor. Makalenin içerdeği başlıklar arasında metin boyutunu değiştirmek, elementleri hareket ettirmek, animasyonları zincirlemek gibi her jQuery kullanan geliştiricilerin işine yarayacak konuları içeriyor.</li> <li><strong><a href="http://www.webdesignerwall.com/demo/jquery/">Web Designer Wall: Tasarımcılar İçin jQuery Dersleri</a></strong>: Halen jQuery'nin gücü kafanızı mı karıştıryor? Bu site menülerden imaj değiştirmeye kadar 10 adet örneği detaylandırarak bu muhteşem kütüphanenin yetenekleri hakkında sizi bilgilendirmeyi hedefliyor.</li> </ul> <p><strong>Adım 4: Eklentiler</strong><br>jQuery ile ilgili güzel olan bir şey var ki o da kütüphane geliştirilirken, John Resig ve ekibi kütüphanenin özelliklerini eklentiler kullanarak geliştirmenin sadece birkaç satır kod ekleyerek mümkün kılmak üzerine çalışmış olmaları. Kendinize özgü yöntemleri çok kısa süre içerisinde yazabileceksiniz! Bu eklentileri ana kütüphaneden ayrı tutarak (bu arada jQuery kütüphanesinin sadece 16KB olduğunu da hatırlatalım), bu özel eklentileri sadece gerektiği zaman sayfalarımıza dahil edebileceğiz. Bunun sonucunda JavaScript dosyalarınızın boyutu mümkün olan en küçük seviyede kalacaktır.</p> <ul> <li><strong><a href="http://methvin.com/jquery/jq-corner.html">jQuery Corner Gallery</a></strong><br>Elementlerinize <a href="http://www.kodaman.org/yazi/sizi-css3-ile-tanistiracak-5">yuvarlatılmış köşeler eklemek</a> için CSS3'ün tüm tarayıcılar tarafından desteklenmesini beklemek istemiyor musunuz? O zaman jQuery kullanarak elementlerinize kolayca yuvarlatılmış köşeler ekleyebilirsiniz. Sadece yuvarlatılmış köşeler ile de sınırlı kalmayın, zira eklenti çeşit çeşit köşe tiplerini de bünyesinde barındırıyor. Bu eklenti araç kutunuzda kalıcı bir yer bulabilir.</li> <li><strong><a href="http://enhance.qd-creative.co.uk/index.php/2008/javascript/10-useful-jquery-plugins">Kullanıcı Deneyimini Geliştirin: 10 Kullanışlı jQuery Eklentisi</a></strong> Bu makalede James Padolsey, kendince en iyi jQuery eklentilerini listelemiş.</li> <li><strong><a href="http://docs.jquery.com/Plugins/Authoring">jQuery.com: "Eklentiler"</a></strong>: Her zaman olduğu gibi jQuery.com değerli bir kaynak olmaya devam ediyor. Bu makale ilk eklentinizi oluşturmak için size adım adım rehberlik ediyor.</li> </ul> <p><strong>Adım 5: AJAX Özelliğini Dahil Etmek</strong><br>Şu ana kadar öğrendiğiniz jQuery yetenekleri ile kendinizi güvende mi hissediyorsunuz? Yeteneklerinizi bir sonraki seviyeye yükseltmeye hazır mısınız? Neden betiklerinize biraz Ajax özelliği dahil ederek başlamıyorsunuz? Her ne kadar "<code>load()</code>" ve "<code>.get()</code>" yöntemlerinin kullanımı ile jQuery veri yüklemeyi inanılmaz derecede kolaylaştırıyor. Aşağıdaki kaynaklar eğitiminiz için hayati önem taşıyor.</p> <ul> <li><strong><a href="http://www.sitepoint.com/article/ajax-jquery">Sitepoint.com: jQyery ile Kolay AJAX</a></strong>: Akash Mehta'nın Sitepoint için hazırladığı bu makalede web uygulamalarınıza AJAX eklemenin jQuery kullanılarak ne kadar da basit bir işlem olduğu anlatılıyor.</li> <li><strong><a href="http://jqueryfordesigners.com/using-ajax-to-validate-forms/">Tasarımcılar için jQuery: AJAX Kullanarak Form Doğrulama</a></strong>: Bu makalenin yazarı Remy, bizlere jQuery kütüphanesinin yanında AJAX kullanarak bizlere, web tabanlı formlara nasıl sunucu taraflı doğrulama özelliğini ekleyebileceğimizi gösteriyor.</li> <li><strong><a href="http://nettuts.com/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/">Nettuts.com: jQuery Kullanarak İçerik Nasıl Yüklenilir ve Hareket Ettirilir?</a></strong>: jQuery dersleri ararken NETTUT'un "Javascript" kategorisine bir gözatmayı unutmayın. Bu derste NETTUTS ekibi jQuery kullanılarak bir verinin nasıl yüklenebileceğini ve ardından onu taşıyan elementin nasıl hareket ettirilebileceğini göstermiş.</li> </ul><p>Bu yazı <a href="http://www.bildirgec.org/uye/algorian">algorian</a> tarafından <a href=" http://www.bildirgec.org/yazi/size-sifirdan-jquery-ogretecek-15 ">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> Sun, 11 Jan 2009 11:14:00 GMT 191191@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/size-sifirdan-jquery-ogretecek-15 algorian <div class="imajorta"><img src='http://www.bildirgec.org/imaj/wanadooo/thankyouheaderwicons1.png' alt="\"\"" border="0"><br></div> Aynı işi göreceğine inandığımız bazı programların, uygulamaların ücretli versiyonlarını kullanmak yerine onların ücretsiz olan versiyonlarını kullanmak daha mantıklı olacaktır. Çoğunu da zaten severek kullanıyoruz. <a href="http://lifehacker.com/">Lifehacker</a> da bu ücretsiz uygulamalardan bazılarını <a href="http://lifehacker.com/5098944/free-software-were-most-thankful-for/">sıralamış</a>.. <ol> <li><a href="http://www.mozilla.com/">Firefox</a></li> <li><a href="http://www.videolan.org/">VLC Media Player</a>, <a href="http://www.bildirgec.org/yazi/gom-player-harika-bir-coklu">gom player</a>, <a href="http://getsongbird.com/">songbird</a>, <a href="http://kmplayer.en.softonic.com/">kmplayer</a>.</li> <li><a href="http://Ubuntu.com/">Ubuntu</a> (popüler linux dağıtımı)</li> <li><a href="http://www.openoffice.org/">Open Office</a> ( <a href="http://office.microsoft.com/tr-tr/">microsoft office</a> alternatifi)</li> <li><a href="http://pidgin.im/">Pidgin</a> (<a href="http://tr.wikipedia.org/wiki/Windows_Live_Messenger">windows live messenger</a> alternatifi)</li> <li><a href="http://www.launchy.net/">Launchy</a> </li> <li><a href="http://www.digsby.com/">Digsby</a> (windows live messenger alternatifi)</li> <li><a href="http://Gmail.com/">Gmail</a></li> <li><a href="http://www.gimp.org/">GIMP</a></li> <li><a href="http://utorrent.com/">uTorrent</a></li> <li><a href="http://www.winamp.com/">Winamp</a> (<a href="http://www.microsoft.com/windows/windowsmedia/player/11/default.aspx">windows media player</a> alternatifi)</li> <li><a href="http://www.google.com/apps/">Google Apps</a></li> <li><a href="http://free.grisoft.com/">AVG Antivirus</a> </li> <li><a href="https://www.evernote.com/">Evernote</a> </li> <li><a href="http://www.irfanview.com/">IrfanView</a> </li> <li><a href="http://www.opera.com/">Opera</a> </li> <li><a href="http://www.google.com/chrome">Chrome</a></li> <li><a href="http://logmein.com/">LogMeIn</a></li> <li><a href="http://amarok.kde.org/">Amarok</a></li> <li><a href="http://filezilla-project.org/index.php">FileZilla</a></li> <li><a href="http://notepad-plus.sourceforge.net/uk/site.htm">Notepad++</a></li> <li><a href="http://portableapps.com/">PortableApps.com</a></li> <li><a href="http://www.punksoftware.com/rocketdock">Rocketdock</a></li> <li><a href="http://www.linux.org/">Linux</a></li> <li><a href="http://www.getpaint.net/download.html">Paint.NET</a> </li> <li><a href="http://www.lavasoft.com/?domain=lavasoftusa.com/software/adaware/">Ad-Aware</a> </li> <li><a href="http://www.avast.com/eng/download-avast-home.html">Avast Antivirus</a></li> </ol><p>Bu yazı <a href="http://www.bildirgec.org/uye/algorian">algorian</a> tarafından <a href=" http://www.bildirgec.org/yazi/minnettar-oldugumuz-46-ucretsiz-uygulama ">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, 29 Nov 2008 09:10:00 GMT 185616@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/minnettar-oldugumuz-46-ucretsiz-uygulama algorian <p>Son zamanlarda web tasarımcılarının alet çantasında en önemli bölmede bulunan <a href="http://www.bildirgec.org/etiket/sifr">sIFR</a> uygulaması ile tasarladığımız siteler artık göze daha güzel görünüyor. İsterseniz <a href="http://dev.novemberborn.net/sifr3/svn/test/distribution/demo/">demo</a>suna bir göz atın!<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/basarozcan/sifr-ornek.png' alt="CoffeeCup - sIFR Font Maker" border="0"><br>CoffeeCup - sIFR Font Maker</div><br><strong>sIFR nedir?</strong><br>Eğer bir web tasarımcısı olarak bu uygulamayı henüz duymamışsanız siteleriniz biraz eski moda görünüyor olabilir. <a href="http://novemberborn.net/">sIFR</a>, ziyaretçilerde bulunmayan yazı tiplerini sitenizde kullanabilmenizi sağlıyor. <!-- buradan kes -->Bu konu hakkında Muhammet Sevim'in <a href="http://www.muhammetsevim.com/yazi/sifr-3-kullanim-kilavuzu/">kullanım kılavuzu makalesi</a>ni ve <a href="http://www.muhammetsevim.com/yazi/webde-font-ozgurlugu-sifr/">sIFR tanıtım makalesi</a>ni okuyabilirsiniz. Ayrıca uygulamanın fikir babası olan Mike Davidson'ın konu hakkındaki makalelerini de <a href="http://www.mikeindustries.com/blog/sifr/">buradan</a> inceleyebilirsiniz.</p> <p><!-- buradan kes --><br><strong><a href="http://www.bildirgec.org/etiket/flash">Flash</a> Neden gerekli?</strong><br>Bu tasarımcının hayatını kurtaran uygulama basit bir swf dosyası içeriyor ve bu dosya tüm karakterleri tanıyarak sitenizin yazıtiplerini değiştiriyor. Bu <a href="http://www.bildirgec.org/etiket/swf">swf</a> dosyasını açıp içine kullanmak istediğiniz yazıtipiyle 3 harf yazıyorsunuz ve kaydediyorsunuz. Tabi Bu dosyayı açabilmek ve kaydedebilmek için <a href="http://www.adobe.com/">Adobe</a>'nin paralı <a href="http://en.wikipedia.org/wiki/Adobe_Flash">Flash</a> programı gerekiyor. Eğer Flash programına sahip değilseniz sizi ücretsiz bir sIFR yaratıcı programıyla tanıştırayım: <br><a href="http://www.coffeecup.com/sifr-font-maker/">CoffeeCup - sIFR Font Maker</a>!<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/basarozcan/sifr-ornek2.png' alt="sIFR kullanılan bir sayfa" border="0"><br>sIFR kullanılan bir sayfa</div><br><strong>Ücretsiz bir çözüm</strong><br><a href="http://www.coffeecup.com/sifr-font-maker/">CoffeeCup'ın sIFR Font Maker</a> programı tüm tasarımcılar için ücretsiz indirmeye sunulmuş. Resmi siteden programı indirdikten sonra ufak bir kurulum yapıyorsunuz ardından kullanmak istediğiniz yazı tipinin normal, kalın ve italik tarzlarının dosya yolunu programa göstererek Save As butonuna basıyor ve <a href="http://en.wikipedia.org/wiki/Scalable_Inman_Flash_Replacement">sIFR</a>'de kullanacağımız swf dosyasına sahip oluyoruz.</p> <p>Web tasarımcıların alet çantasında kesinlikle bulunması gereken sIFR Font Maker'a şu an için tek alternatif online hizmet sunan <a href="http://www.sifrgenerator.com/">sifrgenerator </a>sitesi. Fakat bu sitede sadece <a href="http://en.wikipedia.org/wiki/TrueType">TrueType</a> yazıtiplerini kullanmak zorunda kalıyoruz. Oysa <a href="http://www.coffeecup.com/">CoffeeCup</a> bize <a href="http://en.wikipedia.org/wiki/OpenType">Opentype</a> ve diğer yazıtiplerini de kullanma imkanı sunuyor.</p><p>Bu yazı <a href="http://www.bildirgec.org/uye/algorian">algorian</a> tarafından <a href=" http://www.bildirgec.org/yazi/adobe-flash-kullanmadan-sifr-yapimi ">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, 03 Nov 2008 12:22:00 GMT 181497@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/adobe-flash-kullanmadan-sifr-yapimi algorian <p><div class="imajorta"><img src='http://www.bildirgec.org/imaj/agurbuz/987822-95717228.jpg' alt="www" border="0"></div><strong>1. alan adı nedir<br>2. alan adı seçimi<br>3. alan adı almak</strong><br>a) icann<br>b) aracı firmalar<br>c) backorder<br><strong>4. alan adı transfer etmek<br>5. ücretsiz servisler</strong><br>a) blogger<br>b) google aps<br>c) ücretsiz hosting<br><strong>6. hosting nedir?</strong><br>a) paylaşımlı hosting<br>b) dedicated hosting<br>c) vps<br>d) Co-Location<br>e) reseller hosting<br><strong>7. alan adı ayarlarını yapmak</strong><br>a) google<br>b) hosting<br>c) gmail<br><!-- buradan kes --><br><br><a href="http://tr.wikipedia.org/wiki/Alan_ad%C4%B1"><b>1. Alan adı nedir? (Domain Name System)</b></a><br><br><b>2. Alan adı seçimi.</b></p> <p>Alan adı seçimi proje/marka bazlı olmadığı sürece sancılı geçiyor sanırım. <br>Elinizde bir proje ya da marka yoksa, sadece kişisel bir site ya da blog yapmayı düşünüyorsanız içinize sinecek, ihtiyaçlarınızı tam anlamıyla karşılayabilecek ve kendinizle özdeşleştirebileceğiniz bir alan adı bulmak kolay değildir.<br>Genelde insanlar takma adlarını, ad/soyad birleşimini ve kendi kombinasyonlarıyla oluşturdukları anlamlı/anlamsız kelimleri kullanmaktadırlar.</p> <b>Alan adı seçerken nelere dikkat edilmelidir?</b> <p><strong>1.</strong> Kısa olmalıdır.<br><strong>2.</strong> Akılda kalıcı/Kolay hatırlanabilir olmalıdır. (<a href="http://www.bildirgec.org/">bildirgec</a>)<br><strong>3.</strong> iki kelimenin ya da kısaltmanın birleşmesinden oluşuyorsa uyumlu olmalıdır. (<a href="http://www.sosyomat.com/">Sosyomat</a>)<br><strong>4.</strong> Mümkünse jenerik isim olması daha iyidir. (<a href="http://www.haffif.org/">hafif</a>)<br><strong>5.</strong> Sizle veya sitenin içeriği ile bağıntılı olmalıdır. (<a href="http://www.10marifet.org/">10marifet</a>)<br><strong>6.</strong> alan adlarındaki türkçe karakter uyumsuzluğu nedeniyle anlamı bozulan kelimelere dikkat edilmelidir.<br><strong>7.</strong> tavsiyeleriniz?</p> <b>3. alan adı almak</b><br>öncelikle bazı konulara değinmek gerekirse; alan adı (domain name) bir site sahibi olmak değildir. alan adı 212.20.122.85 gibi bir adreste bulunan (bkz.1.madde)(<a href="http://tr.wikipedia.org/wiki/Sunucu_(bili%C5%9Fim)">sunucu</a>) dosyalarınıza kolay ulaşılmasını sağlayan bir köprü vazifesi görür. alan adı alarak bir site (hosting) sahibi olmazsınız fakat hosting alarak ücretsiz alan adı sahibi (promosyon yapan firmalar ile) olabilirsiniz. <p>alacağınız alan adını belirledikten sonra icann onaylı bir firmadan kredi kartı/havale yoluyla satın alabilirsiniz. havale yöntemi yerli firmalar için geçerlidir. kredi kartı ile alınan alan adları müsaitse anında kayıt edilir. havale yoluyla alınan alan adlarının kayıt işlemi en az 3 gün sürebilmektedir.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/agurbuz/icann.jpeg' alt="icann" border="0"></div><br><br><b>a) <a href="http://www.icann.org">icann</a></b><br>Alan adlarıyla ilgili kararları alan, yetkilendirmeleri, düzenlemeleri ve denetimleri yapan yarı bağımsız bir vakıftır. Merkezi amerika'dadır ayrıca belçika'da da ofisi bulunmaktadır.</p> <p><br><b>b) icann accredited</b><br>icann tarafından alan adı satışı konusunda yetkilendirilmiş/ruhsatlandırılmış demektir. <a href="http://www.icann.org/en/registrars/accredited-list.html">firma listesi</a>.</p> <p><br><b>c) aracı firmalar</b><br>bazı icann accredited firmalar satışlarını artırmak maksadıyla domain reseller paketleri çıkarmışlar ve bu paketi alan aracıların kendi siteleri üzerinden api'ler sayesinde domain satmalarına olanak tanımışlardır.<br>icann tarafından yetkilendirilmemiş şahıslar bu sayede alan adı satışı yaparak belli oranlarda kar sağlamaktadırlar. bu pazarlama tekniği işleyişi bakımında güzel görünsede bazı uyanık girişimciler api'lerde değişiklik yaparak etik olmayan davranışlarda bulunmaktadırlar. bu aracı firmalardan uzak durmanız her zaman faydanızadır.</p> <p><br><b>d) <a href="http://forum.zoque.net/web-hosting-domain/25768-domain-backorder/#post182474">backorder</a> nedir?</b></p> <p><br><b>alan adı alırken nelere dikkat etmeliyim?</b><br><b>1.</b> icann tarafından yetkilendirilmiş olması en önemli noktadır.<br><b>2.</b> alan adı'nın yanında verdiği ek hizmetler önemlidir (ücretsizi makbuldür). <br><b>3.</b> alan adı yönetim paneli'nin kullanışlılığı.<br><b>4.</b> yaptığınız ayarların aktif olma süreleri.</p> <p><br><b>4. alan adı transfer etmek</b><br>Alan adınızı aldığınız firmanın verdiği hizmetten memnun değilseniz başka bir firmaya transfer edebilirsiniz. Transfer işlemi bir iki detay dışında yeni alan adı almaktan farklı değildir. Kurallara uyduğunuz sürece işlerin ters gitme olasılığı düşüktür.</p> <p><br><b>Transfer işlemine başlamadan önce:</b><br><strong>1.</strong> Alan adı kayıt tarihinden sonraki 60 gün transfer işlemi yapmayınız.<br><strong>2.</strong> Alan adı kayıt süresinin bitimine 30 günden az ise transfer işlemi yapmayınız. <br><strong>3.</strong> Alan adı süresini uzattıktan sonraki 45 gün süresince transfer işlemi yapmayınız.<br><strong>4.</strong> transfer işlemine başlamadan evvel alan adı kilidini açmayı unutmayınız. (whois bilgilerinde status:ok olup olmadığını kontrol edin)<br><strong>5.</strong> Onaylama kodunu bir kenara not ediniz. (Authorization Code)<br><strong>6.</strong> Alan adını alırken kullandığınız e-posta hesabının çalıştığından emin olunuz.</p> <p><br><b>Transfer işlemi:</b> Alan adını transfer etmek istediğiniz firmaya üye olduktan sonra "domain transfer" linkine tıklayıp doğrulama kodunu girdikten ve ödemesini yaptıktan sonra transfer süreci başlamış olur.<br>(Alan adını alırken kullandığınız e-posta hesabına gönderilen mesajda bulunan onay linkine tıkladıktan sonra.)</p> <p><br><b>Domain Status</b> Alan adının durumunu gösterir. Kilitli/Locked vb. alan adı kilidini "domain transfer" işlemi haricinde kapalı tutunuz.<br>Domain kilidi aktif ise whois bilgileri şu şekilde görülür.<br>(Firmaya göre değişebilir.)<br>Registrar Status: clientDeleteProhibited (Silinemez)<br>Registrar Status: clientTransferProhibited (Transfer Edilemez)<br>Registrar Status: clientUpdateProhibited (Güncellenemez)<br>(ayrıca transfer edilen alan adlarının whois bilgilerinde transfer sürecini belirten bir gösterge daha mevcuttur)<br><br><b>Authorization Code</b><br>Bir domain satın aldığınızda rastgele bir kod üretilir ve domainle ilişkilendirilir. her alan adının kendi doğrulama kodu vardır.<br>Ne işe yarar? alan adını başka bir firmaya transfer etmek istediğinizde transfer etmek istediğiniz firma bu kod olmadan transfer işlemini başlatamaz. güvenlik ve doğrulama amaçlıdır.<br><br><b>5. ücretsiz servisler</b><br>internetin gelişmesinde rol alan etkenler arasında ücretsiz servisleride gösterebiliriz. son dönemde kalitesi ve çeşitliliği artan ücretsiz servisler sayesinde internet kullanıcıları içerik sağlayıcı, yayıncı ve geliştirici konuma gelmişlerdir.<br>(cjb.net ve 8m.com gibi servileri hatırlayan arkadaşlar vardır mutlaka.)<br>web sitemizi yaparken bu ücretsiz servislerin bize ne gibi bir katkısı olabilir?<br><br><b>a) blogger</b><br>alan adınızı aldınız fakat işi kavrayana kadar barındırma (hosting) parası vermek istemiyorsanız blogger sizi bekliyor.<br>özellikleri: <br><strong>1.</strong> alan adı desteği<br><strong>2.</strong> eklenti desteği<br><strong>3.</strong> kolay kullanım<br><strong>4.</strong> tema desteği<br><strong>5.</strong> güvenlik<br><strong>6.</strong> yazar ekleyebilme<br><strong>7.</strong> kolay adsense ekleyebilme (google reklamları)<br>vb. bir çok özelliği bulunan ve yeni başlayanlar için en rahat/beleş barındırma hizmetidir.<br><br><b>b) google aps</b><br>(e-posta, takvim, döküman, sayfalar vd.)<br>alan adınızı aldınız, barındırma (hosting) olayınıda çözdünüz sıra geldi ismim@alanadim.com şeklinde mail adresi edinmeye.<br>alan adı satan bazı firmalar belli sayıda ve kapasitede ücretsiz mail hizmeti versede pek kullanışlı değil açıkçası.<br>daha fazla mail hesabı açabileceğimiz, gelişmiş spam koruması bulunan bir servisi nereden buluruz? en beleşinden olsun diyorsanız google aps'ı tavsiye ederim. (ücretli sürümleride mevcut)<br>tercihiniz google aps yönündeyse 7. maddeyi inceleyebilirsiniz.<br><br><b>c) ücretsiz hosting</b><br>bazı firmalar reklam amaçlı ve pazarlama tekniği olarak ücretsiz hosting hizmeti vermetedr. malesef bunlar arasında uzun soluklu hizmet verebilen firma sayısı azdır ayrıca size verdikleri hizmet karşılığı olarak sitenize kendi reklamlarını eklemekte ve güvenlik/performans amaçlı kısıtlamaya gitmektedirler.<br>bu tür hizmetler veren firmalarda barındırdığınız sitelerin düzenli olarak yedeğini almayı ihmal etmeyiniz.<br>ücretsiz hizmet veren iki adet firma (uzun süredir bu hizmeti vermekteler.)<br><a href="http://awardspace.com/">awardspace</a> - <a href="http://000webhost.com/">000webhost</a><br>- yönleri: siteniz yavaş açılır. yüklediğiniz scriptler düzgün çalışmayabilir. bağlantı problemleri yaşayabilirsiniz.<br><br><a href="http://tr.wikipedia.org/wiki/Hosting"><b>6. barındırma (hosting) nedir?</b></a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/agurbuz/206715-storage-server-rackmounted.jpg' alt="\"\"" border="0"></div><b>a) paylaşımlı hosting (Shared hosting)</b><br>en ekonomik hosting şekli diyebiliriz (beleş değil). belli bir fiziki altyapının birden çok hesaba paylaştırılarak satılması prensibine bağlı olduğu için ucuzdur fakat performans/güvenlik sorunları çıkabilir, hatta siteniz fazla hit alırsa kovulabilir ya da suspend (verilen hizmetin durdurulması) yiyebilirsiniz.<br>bu tür hosting hizmetini kullananların son yedeklerini düzenli almaları tavsiye edilir zira bazı firmalar suspend attıkları müşterilerinin database'ini (veritabanı) uçurmaktan zevk alır.<br><br><b>b) kiralık sunucu (dedicated hosting)</b><br>siteniz çok hit alıyorsa a) maddesinin sizin için sağlıklı bir çözüm olmayacağı ortada. bu gibi durumlarda sunucu kiralamak en iyi çözümdür.<br>kiraladığınız sunucu size ait (kullanımı) olur ve başka site barındırılmaz. tüm yetkiler sizdedir fakat bu hosting türünün çeşitlerine dikkat etmeniz gerekir. verilen hizmete/sunucu özelliklerine/yazılım özelliklerine ve yönetim şekline göre fiyatlandırma yapılır.<br><br><b>c) paylaşımlı kiralık sunucu (Virtual Private Server/vps)</b><br>b) maddesindeki sunucu sizin için pahalı geldiği, a) maddesindeki hosting hizmetininde yetersiz kaldığı durumlar için icad edilmiş barındırma hizmetidir.<br>nasıl yani? b) maddesindeki hizmet orta halli bir webmaster için pahalı (masrafları çıkartmak zor) olduğundan bu sunucuyu sanal olarak bölerek sanki tek sunucuymuş ve sadece size aitmiş gibi (cpu kullanım oranları paylaşımlı hosting hizmetine göre daha yüksektir.) kullanmanızı sağlarlar.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/agurbuz/234069-the-data-center.jpg' alt="data center" border="0"></div><br><b>d) Sunucu barındırma (Co-Location)</b><br>Size ait bir sunucuyu barındırma hizmeti veren bir veri merkezinde (data center) bulundurmak.<br><br><b>e) reseller hosting</b><br>3. madde, b) şıkkında açıklanan taktiğin barındırma için uygulanmış halidir.<br>bazı webmaster'lar müşterilerinin sitelerini bu yöntemle kendileri barındırmaktadırlar.<br><br><b>7. alan adı ayarlarını yapmak</b><br>alan adınızı aldınız ve barındırma tercihinizide yaptınız sıra geldi ayarları yapmaya.<br><br><b>a) blogger</b><br>google firmasının google aps adı altında sunduğu çeşitli hizmetleri bulunmaktadır. bu hizmetlerin çoğunu zaten alan adınız olmasada kullanabilmektesiniz. peki bu hizmetleri alan adımız ile ilişkilendirip kişiselleştirerek kullanmak istersek ne yapmalıyız?<br>google aps ücretsiz servisler: blogger, docs, takvim, gmail (ayrıca anlatılacaktır), google siteler, Google Talk, başlangıç sayfası.<br><br><b>1. blogger ayarları: </b><br>bir blog açıp (ismi önemli değil) oturum açınız (blogger'a giriş yapmak).<br>blogger/ayarlar/yayımlanıyor bölümünü açıyoruz ve alan adı (custom domain) linkine tıklıyor, oradanda diğer ya da gelişmiş seçenekler olması lazım (Switch to advanced settings) linkine tıklıyoruz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/agurbuz/settings-publish.png' alt="agurbuz" border="0"></div><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/agurbuz/custom-domain.png' alt="agurbuz" border="0"></div><br>yukarıdaki bölüme alan adımızı (blog.adim.com da olabilir) ekliyor ve kaydediyoruz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/agurbuz/custom-domain2.png' alt="agurbuz" border="0"></div><br>kaydetme işleminden sonra önceden alan adımızı yazdığımız bölümde ekstradan bir seçenek çıkıyor. alan adınıza www ile de ulaşılmasını istiyorsanız (bu bölümü işaretlemezseniz www. yazıldığı taktirde sitenize ulaşılamaz) seçeneği işaretleyip kaydet butonuna basıyoruz.<br>blogger da alan adımız ile yapacağımız işlemler bitti, sıra geldi alan adımızı aldığımız firmadaki ayarları yapmaya.</p> <p>alan adını aldığımız firmanın sitesine giriş yapıp yönetim paneline geliyoruz.<br>"dns zone" bölümünü açıyoruz (bazı firmalarda bu bölüme girmek için alan adı kilidini açmanız gerekebilir) ve "Yeni DNS Kaydı Ekle" (add to new record) butonuna basıyoruz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/agurbuz/a-name.png' alt="agurbuz" border="0"></div><br>ister resimdeki gibi A name ekleyebilir (ip adresi ile www li ve www siz olarak eklenir.) isterseniz cname seçeneğini seçerek alttaki resimde olduğu gibi ekleme yapabilirsiniz. (farkı: ip adresi yerine ghs.google.com adresi ekleniyor)<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/agurbuz/cname.png' alt="agurbuz" border="0"></div><br>blog.alanadi.com şeklinde kullanmak isterseniz "domain adı giriniz" bölümüne blog yazabilirsiniz. (blogger'a eklediğiniz domain ile aynı olmalıdır)<br>(cname ile yapılan yönlendirmelerde ara sıra kopmalar olabiliyor.)<br>ayarların aktif olması hizmet aldığınız firmaya göre değişebilir. aktif olduğu zaman blogger blogunuza kendi alan adınızla ulaşabilirsiniz.</p> <p><br><b>b) hosting</b><br>hosting hizmetini bir firmadan aldıysanız (ücreti mukabilinde) size bir name server adresi (ek olarak sunucu/ip kiralamadıysanız) vermiş olmaları lazım ya da sitelerinde bu konuda bilgilenrime yazısı bulunması.<br>ns1.nameserver.com şeklindeki (genelde 2 tane olur ns1 ve ns2 şeklinde başlar, daha fazlada olabilir.) adresi alan adını aldığınız firmanın kontrol panelini açarak name server ekleme bölümüne ekleyiniz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/agurbuz/namserver.png' alt="agurbuz" border="0"></div><br>ayarların aktif olması firmadan firmaya değişebilir, süre 24 saat ila 3 gün arasında uzayabilir.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/agurbuz/956430-mailboxes.jpg' alt="agurbuz" border="0"></div><br><br><b>c) <a href="http://www.google.com/a/help/intl/tr/business/applications.html">google aps/gmail</a></b><br>neden hosting firmasının ya da alan adı firmasının bize verdiği ücretsiz mail hizmeti değilde google aps? sorusunu sorabilirsiniz.<br><strong>1.</strong> daha kaliteli mail hizmeti.<br><strong>2.</strong> yüksek kapasite.<br><strong>3.</strong> iyi bir antispam (çöp/reklam mesajları) koruması.<br><strong>4.</strong> daha fazla kullanıcı hesabı oluşturabilme.<br><strong>5.</strong> takma ad özelliği ile spam takibi (en sevdiğim özellik).<br>şeklinde cevaplayabiliriz sanırım. eksi yönleri yok mu?<br>olmazmı hiç: ara sıra e-posta hesabınıza ulaşamayabilirsiniz. çok nadir.</p> <p>gelelim gmail'i kendi alan adımız ile kullanmak için yapmamız gereken ayarlara.<br><a href="http://www.google.com/a/help/intl/tr/admins/editions.html">buradan</a> google/aps sayfasını açıyoruz ve hangi sürüm bizim için uygunsa onu seçiyoruz. (makbulü ücretiz olan fakat mail hizmetini bir firma için almayı düşünüyorsanız ticari sürümü tavsiye olunur.)<br>açılan sayfadan "Yönetici: Bu etki alanı bana ait veya benim tarafımdan kontrol ediliyor" seçeneğini seçerek alt kısıma alan adımızı yazıyoruz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/agurbuz/gmailaps.png' alt="agurbuz" border="0"></div><br>yeni açılan sayfadaki formu doldurup kaydı tamamlıyoruz ve formda belirttiğimiz mail hesabına gelen bilgileri okuyoruz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/agurbuz/alan-adi-dogrulama.png' alt="agurbuz" border="0"></div><br>açılan google aps sayfasında bulunan (üstteki resim) "Etki alanının size ait olduğunu doğrulayın" linkine tıklıyoruz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/agurbuz/alan-adi-dogrulama0.png' alt="agurbuz" border="0"></div><br>karşımıza resimdeki gibi bir sayfa çıkacak, cname kaydınızı değiştirin seçeneğini seçiyoruz ve alan adını aldığımız firmanın dns zone (yukarıda bahsedildi) bölümüne girip aps sayfasında bize verilen "googleffffffff8236cf49" şeklindeki kodu bir cname kaydı ile google.com adresine yönlendiriyoruz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/agurbuz/alan-adi-dogrulama3.png' alt="agurbuz" border="0"></div><br>son yaptığımız yönlendirme aktif olduktan sonra aps sayfasına dönüp "doğrula" butonuna basıyoruz ve otomatik olarak anasayfaya yönlendiriliyoruz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/agurbuz/mx-dogrulama.png' alt="agurbuz" border="0"></div><br>yönlendirildiğimiz sayfadan üst resimde görünen "e-postayı etkinleştir" linkine tıklıyoruz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/agurbuz/mx-dogrulama0.png' alt="agurbuz" border="0"></div><br>açılan sayfada bulunan açılır menüde alan adı aldığımız firma (cpnale vb. de olabilir.) yok ise <a href="http://www.google.com/support/a/bin/answer.py?hl=en&answer=33352">bu</a> sayfadaki talimatları kullanabilirsiniz.<br>mx hakkında not:</p> <blockquote><br>örnek mx ayarları<br>1 ASPMX.L.GOOGLE.COM.<br>5 ALT1.ASPMX.L.GOOGLE.COM.<br>5 ALT2.ASPMX.L.GOOGLE.COM.<br>10 ASPMX2.GOOGLEMAIL.COM.<br>10 ASPMX3.GOOGLEMAIL.COM.<br>bazı firmalarda sondaki . işaretini eklemenize gerek olmayabilir. alan adı firmanıza danışarak destekledikleri ayar şekli hakkında bilgi alabilirsiniz.<br></blockquote> <p>tekrar alan adını aldığımız firmanın sitesine, alan adımızın ayarlarını değiştirmek için geri dönüş yapıyoruz ve mx bölümünü buluyoruz.<br>yeni mx kaydı ekle (add to new mx record) seçeneğine aps sayfasındaki ya da verdiğim linkte bulunan ayarları teker teker ekliyoruz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/agurbuz/mx-settings-edit.png' alt="agurbuz" border="0"></div><br>resimdeki gibi ayarlarımızı yaptıktan sonra aps sayfasına dönerek "bu adımları tamamladım" butonuna basıyoruz ve ayarlarımızın aktif olmasını bekliyoruz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/agurbuz/mx-settings.png' alt="örnektir" border="0"><br>örnektir</div><br>bu ayarları etkin olması alan adınızı aldığınız firmaya göre değişiklik gösterebilir fakat en geç 24/48 saat içerisinde aktif olması gereklidir. problem çıkması durumunda "e-posta beta" yazılı bölümün altında bulunan "güncelleniyor..." yazısı yerine "mx yapılandırmasında hata" gibi bir yazı çıkmaktadır.</p> <p>mx ayarlarını kontrol etmek için kullanabileceğiniz siteler:<br><a href="http://www.mxtoolbox.com/index.aspx">mxtoolbox</a> - <a href="http://vger.kernel.org/mxverify.html">kernel</a></p> <p>whois sorgusu için kullanabileceğiniz siteler:<br><a href="http://who.is">who.is</a> - <a href="http://whois.domaintools.com/">domaintools</a> - <a href="http://whois.gen.tr">whois</a><br><br>bildiğim ve hatırladığım kadarıyla yazıyı hazırladım. hatalarım ve eksiklerim olabilir (çok yönlü ve genel olarak tecrübeye dayalı bir konu), bilen arkadaşlar yorumları ile hataları/eksik noktaları ve tecrübelerini paylaşırsa memnun oluruz.<br><br>kullanılan görseller: <a href="http://www.sxc.hu/profile/jaylopez">http</a> - <a href="http://www.sxc.hu/profile/k_vohsen">mailboxes</a> - <a href="http://www.sxc.hu/profile/LeoSynapse">data center</a> - <a href="http://www.sxc.hu/profile/sradion">server</a></p><p>Bu yazı <a href="http://www.bildirgec.org/uye/algorian">algorian</a> tarafından <a href=" http://www.bildirgec.org/yazi/www-ilk-adimlar-alan-adi ">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> Sun, 19 Oct 2008 08:46:00 GMT 178744@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/www-ilk-adimlar-alan-adi algorian bir sitenin açılma süresi imajlar, kod dosyaları, sunucu kalitesi gibi birçok faktöre bağlıdır. tüm bunların kendi sitenize yansımasını görmek, ziyaretçilerinizin sitenize tıkladıkları zaman ne kadar beklediklerini öğrenmek için çeşitli araçlardan faydalanabilirsiniz. <ul> <li><a href="http://tools.pingdom.com/">pingdom</a>: sitenizdeki öğelerin ne kadar sürede açıldığını detaylı biçimde görmek için güzel bir araç. bu sayede uzun süre isteyen kısımlar üzerinde çalışabilirsiniz. (<a href="http://www.bildirgec.org/yazi/web-sayfanizin-acilis-hizini-ayrintili">ilk yazı</a>)</li> <li><a href="http://www.webslug.info/">Webslug</a>: iki farklı sitenin ne kadar sürelerde açıldığını kıyaslamak için kullanabilirsiniz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/webslug-11.jpg' alt="\"\"" border="0"><br></div></li> <li><a href="http://www.webwait.com/">WebWait</a>: bir sitenin ortalama açılma süresini ölçmek için kullanabilirsiniz. (<a href="http://www.bildirgec.org/yazi/sitem-kac-saniyede-aciliyor">ilk yazı</a>)</li> <li><a href="http://www.linkvendor.com/seo-tools/site-analysis/website-speed-test,46.html">Website speed checker</a>: farklı bağlantı tiplerinde sitenizin tahmini açılma sürelerini değerlendirmek için bir araç.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/linkvendor.jpg' alt="\"\"" border="0"><br></div></li> <li><a href="http://internetsupervision.com/">Free Internet Web Server Monitoring Tool</a>: bu araç da sitenin, dünya'nın farklı bölgelerindeki serverlarından ne kadar zamanda açılabildiğini gösteriyor. örneğin bildirgeç için en hızlı açılım 5mbitlik ingiltere'den geldi.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/internet-supervision.jpg' alt="\"\"" border="0"><br></div><br><a href="http://www.84bytes.com/2008/10/02/websites-to-test-the-loading-time-of-your-site/">kaynak</a></li> </ul><p>Bu yazı <a href="http://www.bildirgec.org/uye/algorian">algorian</a> tarafından <a href=" http://www.bildirgec.org/yazi/site-acilma-sureleri ">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> Sun, 19 Oct 2008 13:11:00 GMT 178743@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/site-acilma-sureleri