http://www.bildirgec.org/ tr-tr 40 bildirgec.org - oguzn - beğendikleri oguzn <p>Gün içinde kullanabileceğiniz işe yarar sitelerden olusan bir liste hazırladım.</p> <p>1- Online Alarmlı Saat: Bilgisayarın başındasınız ve yapmanız gereken birşey var ve bir alarm kurmanız gerekiyor. Alarmlı saat programı indirmek yerine <a href="http://kukuklok.com/">Online Alarm Clock </a> sitesini deneyebilirsiniz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/yuxelmurat/logo.jpg' alt="\"\"" border="0"><br></div></p> <p>2- Bilimsel Hesap Makinesi: Olaki bir anda bilimsel bir hesap yapmanız gerekti ve hesap makineniz ortalıkta görünmüyor veya pili bitti. tabii ki programlarla uğraşmanıza gerek yok. <a href="http://web2.0calc.com/">Web 2.0 scientific calculator</a> tam da sizin ihtiyaç duydugunuz türden bir site.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/yuxelmurat/logo1.png' alt="\"\"" border="0"><br></div> <p><!-- buradan kes --></p> <p>3- Youtube Video Bölücü: İzlemiş oldugunuz youtube videosunun bir kısmındaki bir görüntü ses veya müzik hoşunuza gitti. Yapmanız gereken youtube video indirme aracı edinmek, inen flv'yi "convert" edip video kesme aracı ile istediginiz kısmı ayırmak.</p> <p>Veya <a href="http://www.youtubetime.com/">Youtube Time</a> Sitesine youtube linkini ve almak istediğiniz zaman aralığını girip direk dosyayı indirmek.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/yuxelmurat/youtube-kes.jpg' alt="\"\"" border="0"><br></div> <p>4- online file convert: yine arayıp da bulunamayan bulunsa da bir türlü memnun kalınamayan araçlardan birine değinecegim; dosya dönüştürme. özellikle pdf dosyası elde etmek istediğimizde cok sorun yaşarız. Ama <a href="http://www.cometdocs.com/">cometdocs</a> sitesi sayesinde tüm sorunlar ortadan kalkıyor.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/yuxelmurat/logo-cometdocs-2.gif' alt="\"\"" border="0"><br></div> <p>5- online foto efektleri: Fotoğraflarınızda filtreler kullanmak, efektler vermek istiyorsunuz ama photoshop kurmamışsınız veya hiç sahip olmamışsınız. bu durumda <a href="http://www.befunky.com/">BeFunky</a> imdadımıza yetişiyor.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/yuxelmurat/befunky-logo.jpg' alt="\"\"" border="0"><br></div> <p>6- Online Şablon: acil kareli a4 e ihtiyac duydunuz ama elinizde sadece düz beyaz fotokopi kağıdı var. yapmanız gereken tek şey <a href="http://pocketmod.com/v2/">PocketMod</a> sitesine girip size uygun şablonu seçip yazdırmak.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/yuxelmurat/untitled-1.jpg' alt="\"\"" border="0"><br></div> <p>7- online birim çevirici: yine olmadık bir anda yapmanız gereken bir hesap için ölçü birimleri arasında çeviri yapmanız gerektiginde kafanız hep karışır ve "0" lar birbirine girer.</p> <p>böyle durumlarda <a href="http://www.worldwidemetric.com/Measurements.html">World Wide Metric</a> sitesinden faydalanmak her şeyi daha kolay yapacaktır.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/yuxelmurat/ds.jpg' alt="\"\"" border="0"><br></div> <p>8- Yazdırma Sayfası Hazırlama: İnternette birçok sayfanın çıktısını almanız lazım ve her sayfadaki yazıları tek tek kopyalayıp düzenlemek vakit kaybı. fakat sayfların tamamının yazdırılması hem gereksiz muürekkep hem de çıktı işleminin uzaması anlamına geliyor.</p> <p>yaratıcı arkadaşlar böyle durumlarda <a href="http://www.printwhatyoulike.com/">sitelerdeki gereksiz resimleri kaldırıp bize zaman ve mürekkepten tasarruf etmemizi sağlayan bir site</a> kurmuşlar.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/yuxelmurat/logo-2.png' alt="\"\"" border="0"><br></div> <p>9- online GİF Editörü: Sanırım tüm maddeler içinde en çok tercih edilecek olanı bu. Photoshop uzmanı dahi olsanız Gif animasyonu her zaman sorun olmuştur. Ama <a href="http://www.makeagif.com/">Make A Gif</a> sitesine animasyonda kullanmak istediginiz resimleri yüklemeniz gif oluşturmanız için yeterli :)</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/yuxelmurat/khj.jpg' alt="\"\"" border="0"><br></div><p>Bu yazı <a href="http://www.bildirgec.org/uye/oguzn">oguzn</a> tarafından <a href=" http://www.bildirgec.org/yazi/isinizi-kolaylastiracak-birkac-site ">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, 11 Sep 2009 14:21:00 GMT 222306@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/isinizi-kolaylastiracak-birkac-site oguzn <p>Sitenizin önemli parçalarından birisi de <a href="http://www.bildirgec.org/ara/ileti%C5%9Fim">iletişim</a> bölümüdür. Ziyaretçiniz size ulaşmak istediği takdirde bu bölümü kullanacaktır. <a href="http://www.bildirgec.org/ara/ileti%C5%9Fim%20formu">İletişim formu</a>nda görsellik biraz ikinci planda kalsa bile iyi bir <a href="http://www.bildirgec.org/ara/tasar%C4%B1mc%C4%B1">tasarımcı</a> iletişim form sayfasını da iyi tasarlamalıdır. Size <a href="http://www.bildirgec.org/ara/ilham%20kayna%C4%9F%C4%B1">ilham kaynağı</a> olabilecek iletişim form <a href="http://www.bildirgec.org/ara/tasar%C4%B1mlar">tasarımlar</a>ına aşağıdan ulaşabilirsiniz.</p> <p>1. <a href="http://addnoise.nl/">addnoise.nl</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/addnoise-nl.png' alt="\"\"" border="0"><br></div> <p>2. <a href="http://alexcohaniuc.com/">alexcohaniuc.com</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/alexcohaniuc-com.png' alt="\"\"" border="0"><br></div> <p><!-- buradan kes --></p> <p>3. <a href="http://authenticstyle.co.uk/">authenticstyle.co.uk</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/authenticstyle-co-uk.png' alt="\"\"" border="0"><br></div> <p>4. <a href="http://baritchi.eu/">baritchi.eu</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/baritchi-eu.png' alt="\"\"" border="0"><br></div> <p>5. <a href="http://berttimmermans.com/">berttimmermans.com</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/berttimmermans-com.png' alt="\"\"" border="0"><br></div> <p>6. <a href="http://bubblessoc.net/">bubblessoc.net</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/bubblessoc-net.png' alt="\"\"" border="0"><br></div> <p>7. <a href="http://chemistryrecruitment.com/">chemistryrecruitment.com</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/chemistryrecruitment-com.png' alt="\"\"" border="0"><br></div> <p>8. <a href="http://created201.com/">created201.com</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/created201-com.png' alt="\"\"" border="0"><br></div> <p>9. <a href="http://delugestudios.com/">delugestudios.com</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/delugestudios-com.png' alt="\"\"" border="0"><br></div> <p>10. <a href="http://envato.com/">envato.com</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/envato-com.png' alt="\"\"" border="0"><br></div> <p>11. <a href="http://fivecentstand.com/">fivecentstand.com</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/fivecentstand-com.png' alt="\"\"" border="0"><br></div> <p>12. <a href="http://flingmedia.com/">flingmedia.com</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/flingmedia-com.png' alt="\"\"" border="0"><br></div> <p>13. <a href="http://guerra-creativa.com/">guerra-creativa.com</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/guerra-creativa-com.png' alt="\"\"" border="0"><br></div> <p>14. <a href="http://kevadamson.com/">kevadamson.com</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/kevadamson-com.png' alt="\"\"" border="0"><br></div> <p>15. <a href="http://koodoz.com.au/">koodoz.com.au</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/koodoz-com-au.png' alt="\"\"" border="0"><br></div> <p>16. <a href="http://mailchimp.com/">mailchimp.com</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/mailchimp-com.png' alt="\"\"" border="0"><br></div> <p>17. <a href="http://mbdragan.com/">mbdragan.com</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/mbdragan-com.png' alt="\"\"" border="0"><br></div> <p>18. <a href="http://ormanclark.com/">ormanclark.com</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/ormanclark-com.png' alt="\"\"" border="0"><br></div> <p>19. <a href="http://pointzero.ro/">pointzero.ro</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/pointzero-ro.png' alt="\"\"" border="0"><br></div> <p>20. <a href="http://psdthemes.com/">psdthemes.com</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/psdthemes-com.png' alt="\"\"" border="0"><br></div> <p>21. <a href="http://qwertcity.com/">qwertcity.com</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/qwertcity-com.png' alt="\"\"" border="0"><br></div> <p>22. <a href="http://steveottenad.com/">steveottenad.com</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/steveottenad-com.png' alt="\"\"" border="0"><br></div> <p>23. <a href="http://substrakt.co.uk/">substrakt.co.uk</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/substrakt-co-uk.png' alt="\"\"" border="0"><br></div> <p>24. <a href="http://swfir.com/">swfir.com</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/swfir-com.png' alt="\"\"" border="0"><br></div> <p>25. <a href="http://weloveicons.com/">weloveicons.com</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/weloveicons-com.png' alt="\"\"" border="0"><br></div> <p>26. <a href="http://worldofmerix.com/">worldofmerix.com</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/worldofmerix-com.png' alt="\"\"" border="0"><br></div> <p>27. <a href="http://worldwidemoment.org/">worldwidemoment.org</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/worldwidemoment-org.png' alt="\"\"" border="0"><br></div> <p>28. <a href="http://worldwooftour.com/">worldwooftour.com</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/worldwooftour-com.png' alt="\"\"" border="0"><br></div> <p>29. <a href="http://wufoo.com/">wufoo.com</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/wufoo-com.png' alt="\"\"" border="0"><br></div> <p>30. <a href="http://xhtmlit.com/">xhtmlit.com</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/xhtmlit-com.png' alt="\"\"" border="0"><br></div> <p><strong>kaynak:</strong> <a href="http://www.queness.com/post/603/30-beautiful-contact-forms">queness.com</a> | <a href="http://tutsaz.com/2009/08/27/30-beautiful-contact-forms/">tutsaz.com</a></p> <p>yazılarımı takip edebilirsiniz.</p> <ul> <li><a href="http://lebron.bildirgec.org/">blog</a> | <a href="http://twitter.com/lebron5">twitter</a> | <a href="http://friendfeed.com/lebron5">friendfeed</a> | <a href="http://delicious.com/lebron5">delicious</a> | <a href="http://feeds.feedburner.com/lebron">rss</a></li> </ul><p>Bu yazı <a href="http://www.bildirgec.org/uye/oguzn">oguzn</a> tarafından <a href=" http://www.bildirgec.org/yazi/30-guzel-iletisim-form-tasarimi ">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, 28 Aug 2009 16:03:00 GMT 220512@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/30-guzel-iletisim-form-tasarimi oguzn henüz kullanımı yeterince yaygınlaşmasa da <a href="http://www.inkscape.org/">inkscape</a> tasarımda yararlandığım yegane program. çalışırken biraz ağır olması, <a href="http://www.bildirgec.org/etiket/illustrator">illustrator</a> kadar kaynağı olmaması ve bu programın da dosya türlerini desteklememesi en zayıf yönleri ama yine de basit kullanımı ve kolay öğrenilebilirliği bence onu ileride iyi bir yere getirecek. eğer bu programı kullanıyor ya da ilgi duyuyorsanız onunla neler yapılabileceğinize dair işe yarar dersler: <ul> <li><a href="http://vector.tutsplus.com/tutorials/illustration/how-to-create-a-vector-light-bulb-icon-with-inkscape/">Create a Light Bulb Icon</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/inkscapetut1.png' alt="\"\"" border="0"><br></div></li> <li><a href="http://vector.tutsplus.com/illustration/creating-a-coffee-cup-with-inkscape/">Creating a Coffee Cup</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/inkscapetut2.png' alt="\"\"" border="0"><br></div></li> </ul> <p><!-- buradan kes --></p> <ul> <li><a href="http://ryanler.wordpress.com/2007/05/23/inkscape-sticker-with-folded-edge-tutorial/">Sticker with Folded Edge</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/inkscapetut3.png' alt="\"\"" border="0"><br></div></li> <li><a href="http://art.vinayraikar.com/2008/01/illustrating-rainbow-with-tiled-clones.html">Illustrating a Rainbow</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/inkscapetut4.png' alt="\"\"" border="0"><br></div></li> <li><a href="http://diwaneayyari.wordpress.com/2008/02/29/hello-world/">Create a Vector Compass</a> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/inkscapetut5.png' alt="\"\"" border="0"><br></div></li> <li><a href="http://howto.nicubunu.ro/inkscape_pacman_baddies/">Pac-Man Baddies</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/inkscapetut6.png' alt="\"\"" border="0"><br></div></li> <li><a href="http://kalaalog.com/2008/11/23/illustrate-a-peacock/">Illustrate A Peacock</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/inkscapetut7.png' alt="\"\"" border="0"><br></div></li> <li><a href="http://gamezealot.net/index.php/Inkscape/How-to-create-a-cool-looking-wallpaper-in-Inkscape.html">How to create a cool looking wallpaper</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/inkscapetut8.png' alt="\"\"" border="0"><br></div></li> <li><a href="http://howto.nicubunu.ro/rubber_stamp_inkscape/">Rubber Stamp</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/inkscapetut9.png' alt="\"\"" border="0"><br></div></li> <li><a href="http://www.igmo.info/create_a_snail.php">Create a Snail</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/inkscapetut10.png' alt="\"\"" border="0"><br></div></li> <li><a href="http://r00tatw00t.blogspot.com/2007/10/create-chibi-tux-penguin-with-inkscape.html">Create a chibi Tux penguin</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/inkscapetut11.png' alt="\"\"" border="0"><br></div></li> <li><a href="http://kalaalog.com/2007/10/11/dragon-sketch-to-vector-art/">Sketch a Dragon</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/inkscapetut12.png' alt="\"\"" border="0"><br></div></li> <li><a href="http://art.vinayraikar.com/2007/09/illustrating-pile-of-coins-in-inkscape.html">Pile of Coins</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/inkscapetut13.png' alt="\"\"" border="0"><br></div></li> <li><a href="http://howto.nicubunu.ro/inkscape_postage_stamps/">Postage Stamps</a><div class="imajorta"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/inkscapetut14.png' alt="\"\"" border="0"><br></div></li> <li><a href="http://ryanler.wordpress.com/2007/05/22/shattered-smashed-text-tutorial/">Shattered / Smashed Text</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/bakiyyebemolu/inkscapetut15.png' alt="\"\"" border="0"><br></div></li> </ul><p>Bu yazı <a href="http://www.bildirgec.org/uye/oguzn">oguzn</a> tarafından <a href=" http://www.bildirgec.org/yazi/inkscape-tasarim-dersleri ">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, 20 Jul 2009 13:16:00 GMT 216800@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/inkscape-tasarim-dersleri oguzn <p><a href="http://www.bildirgec.org/ara/javascript">Javascript</a> etkileşim ve <a href="http://www.bildirgec.org/ara/geri%20bildirim">geri bildirim</a> eklemeniz için kolaylık sağlar. Bu yazıda javascript hakkında farklı ve çok güzel bilgiler edinebilirsiniz.</p> <p>1 - <a href="http://greengeckodesign.com/projects/menumatic.aspx">MenuMatic</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/29-02-menu-matic.jpg' alt="\"\"" border="0"><br></div> <p>Dikey ve yatay şekilde bir <a href="http://www.bildirgec.org/ara/men%C3%BC">menü</a> örneğidir.</p> <p>2 - <a href="http://www.shopdev.co.uk/blog/animated-menus-using-jquery/">Animated Menu using jQuery</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/29-07-animated-menu.jpg' alt="\"\"" border="0"><br></div> <p>Menünün üzerine gelindiğinde bir hareket verilmesini sağlayan örnekte bilgisayarınıza indirebilmeniz için <a href="http://www.bildirgec.org/ara/psd">psd</a> dosyası da bulunmaktadır.</p> <p><!-- buradan kes --></p> <p>3 - <a href="http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/">Garagedoor Effect using jQuery</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/29-01-garage-door.jpg' alt="\"\"" border="0"><br></div> <p><a href="http://www.bildirgec.org/ara/jquery">Jquery</a> kullanarak <a href="http://www.bildirgec.org/ara/efekt">efekt</a> oluşturuluyor.</p> <p>4 - <a href="http://sonicradish.com/labs/jGlideMenu/current/?src=ASL_LAB">JGlide Menu</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/29-18-jglide.jpg' alt="\"\"" border="0"><br></div> <p>Eşsiz bir menü sistemidir. Menüye tıklayarak sürüklenmesini sağlayabilirsiniz.</p> <p>5 - <a href="http://hv-designs.co.uk/2009/02/17/sliding-jquery-menu/">Vertical Sliding jQuery Menu</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/29-03-verticle-sliding.jpg' alt="\"\"" border="0"><br></div> <p><a href="http://www.bildirgec.org/ara/drop-down">Açılabilir</a> bir menü örneğidir.</p> <p>6 - <a href="http://www.mattweltman.com/sliding_tabs.html">Perspective Tabs</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/29-13-mootools-tabs.jpg' alt="\"\"" border="0"><br></div> <p>Sekmeleri <a href="http://www.bildirgec.org/ara/animasyon">animasyon</a> ile kaydırabilmek için bu teknikten yararlanabilirsiniz.</p> <p>7 - <a href="http://woork.blogspot.com/2008/01/simple-css-vertical-menu-digg-like.html">Vertical Digg-like Menu</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/29-09-digg-like-menu.jpg' alt="\"\"" border="0"><br></div> <p>Basit javascript kullanılarak oluşturulan <a href="http://www.bildirgec.org/ara/dikey%20men%C3%BC">dikey menü</a> örneğidir.</p> <p>8 - <a href="http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/">LavaLamp</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/29-14-mootools-fancy-menu.jpg' alt="\"\"" border="0"><br></div> <p>Jquery kullanılarak <a href="http://www.bildirgec.org/ara/css%20sliding%20door">css sliding door</a> tekniğini görebilirsiniz.</p> <p>9 - <a href="http://marcgrabanski.com/pages/code/fisheye-menu">Fisheye Menu</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/29-17-fisheye.jpg' alt="\"\"" border="0"><br></div> <p>Çok güzel bir menü örneği.</p> <p>10 - <a href="http://www.dezinerfolio.com/2007/07/19/simple-javascript-accordions/">Simple JavaScript Accordions</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/29-04-javascript-accordian.jpg' alt="\"\"" border="0"><br></div> <p>Bu harika menü örneğini sitenize entegre edebilirsiniz.</p> <p>yazının devamı için <a href="http://sixrevisions.com/javascript/20-excellent-javascript-navigation-techniques-and-examples/">buraya</a> tıklayın.</p> <p><strong>ayrıca aşağıdaki yazılarda ilginizi çekebilir.</strong></p> <p><a href="http://www.bildirgec.org/yazi/ilham-kaynagi-50-sik-navigasyon">İlham Kaynağı 50 Şık Navigasyon Menü Tasarımı</a></p> <p><a href="http://www.bildirgec.org/yazi/harika-web-tasarimi-yaraticiligi-50">Harika Web Tasarımı Yaratıcılığı: 50+ Örnek ve İlham Kaynağı</a></p> <p><a href="http://www.bildirgec.org/yazi/web-tasarimcilar-icin-20-mukemmel">Web Tasarımcılar İçin 20 Mükemmel Eğitim Sitesi</a></p> <p><a href="http://www.bildirgec.org/yazi/30-olaganustu-css-menu-teknigi">30 Olağanüstü Css Menü Tekniği</a></p> <ul> <li><strong>kaynak:</strong> <a href="http://sixrevisions.com/javascript/20-excellent-javascript-navigation-techniques-and-examples/">sixrevisions.com</a></li> <li><a href="http://lebron.bildirgec.org/">diğer yazılarım</a></li> </ul><p>Bu yazı <a href="http://www.bildirgec.org/uye/oguzn">oguzn</a> tarafından <a href=" http://www.bildirgec.org/yazi/20-mukemmel-javascript-navigasyon-teknik ">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, 03 May 2009 11:55:00 GMT 208272@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/20-mukemmel-javascript-navigasyon-teknik oguzn <p>Web sitenizin başlığı ziyaretçi üzerinde hemen etki yapar bu nedenle özenle hazırlanması gerekir.</p> <p>Bu yazıda <strong>5 farklı türde</strong> etkili başlık örneklerine ulaşabileceksiniz.</p> <p><strong>Büyük Başlık</strong></p> <p>Büyük başlıklar çok güzel görünüyor ancak kullanmak riskli olabilir.</p> <p>1 - <a href="http://www.lewro.com/">Lewro’s Blog</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/23-01-lewros.jpg' alt="\"\"" border="0"><br></div> <p>2 - <a href="http://chris-hortsch.de/">Chris Hortsch</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/23-02-chris.jpg' alt="\"\"" border="0"><br></div> <p><!-- buradan kes --></p> <p>3 - <a href="http://www.enroutefilm.com/">enRoute Film Festival</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/23-03-enroute.jpg' alt="\"\"" border="0"><br></div> <p>4 - <a href="http://www.simpleart.com.ua/en/">Simple Art</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/23-04-simple.jpg' alt="\"\"" border="0"><br></div> <p>5 - <a href="http://www.alpha-multimedia.com/">Alpha Multimedia Solutions</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/23-05-alpha.jpg' alt="\"\"" border="0"><br></div> <p><strong>Web Uygulamaları</strong></p> <p><a href="http://www.bildirgec.org/ara/web%20uygulamalar%C4%B1">Web uygulamaları</a> genellikle kullanıcılara hareket düğmesini göstermeye çalışır. (kayıt, site turu vb.)</p> <p>1 - <a href="http://www.ekklesia360.com/">Ekklesia 360</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/23-06-ekk.jpg' alt="\"\"" border="0"><br></div> <p>2 - <a href="http://www.planhq.com/">PlanHQ</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/23-07-plan.jpg' alt="\"\"" border="0"><br></div> <p>3 - <a href="http://www.campaignmonitor.com/">Campaign Monitor</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/23-08-camp.jpg' alt="\"\"" border="0"><br></div> <p>4 - <a href="http://wufoo.com/">Wufoo</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/23-09-wufoo.jpg' alt="\"\"" border="0"><br></div> <p>5 - <a href="http://www.playintraffik.com/">Traffik</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/23-10-trffik.jpg' alt="\"\"" border="0"><br></div> <p><strong>Illustrated Karakterleri</strong></p> <p><a href="http://www.bildirgec.org/ara/illustrated">Illustrated</a> karakterleri şu anda popüler olarak kullanılıyor. Bu karakter genelde dost anlamındadır.</p> <p>1 - <a href="http://www.mailchimp.com/">MailChimp</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/23-11-mail.jpg' alt="\"\"" border="0"><br></div> <p>2 - <a href="http://www.digimurai.com/">Digimurai</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/23-12-diqi.jpg' alt="\"\"" border="0"><br></div> <p>3 - <a href="http://www.enrichmint.com/">Enrichment</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/23-13-en.jpg' alt="\"\"" border="0"><br></div> <p>4 - <a href="http://www.wishlistr.com/">Wishlistr</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/23-14-wish.jpg' alt="\"\"" border="0"><br></div> <p>5 - <a href="http://www.cleverful.com/">Cleverful</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/23-15-clever.jpg' alt="\"\"" border="0"><br></div> <p><strong>Portföy Ekran Görüntüleri</strong></p> <p>Kendinizi tanıtmak veya eserinizi farklı bir şekilde göstermek için kullanılabilir.</p> <p>1 - <a href="http://www.tonygeer.com/">Tony Greer</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/23-16-tony.jpg' alt="\"\"" border="0"><br></div> <p>2 - <a href="http://www.styledivision.net/">Mark Lamb</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/23-17-style.jpg' alt="\"\"" border="0"><br></div> <p>3 - <a href="http://onwired.com/">OnWired</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/23-18-on.jpg' alt="\"\"" border="0"><br></div> <p>4 - <a href="http://designmovesme.com/">Design Moves Me</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/23-19-design.jpg' alt="\"\"" border="0"><br></div> <p>5 - <a href="http://jameslaicreative.com/">James Lai Creative</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/23-20-james.jpg' alt="\"\"" border="0"><br></div> <p><strong>The Carousel</strong></p> <p>Birçok özelliği ile web sayfalarına yarar sağlar. Javascript kütüphaneleri çok kolay bir şekilde uygulanabilir.</p> <p>1 - <a href="http://www.branded07.com/">Rob Palmer</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/23-21-branded.jpg' alt="\"\"" border="0"><br></div> <p>2 - <a href="http://www.icondesigner.net/">Icon Designer</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/23-22-icon.jpg' alt="\"\"" border="0"><br></div> <p>3 - <a href="http://jasonlarosedesign.com/">Jason Larose Design</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/23-23-jason.jpg' alt="\"\"" border="0"><br></div> <p>4 - <a href="http://benjamindavid.cc/">Benjamin David</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/23-24-ben.jpg' alt="\"\"" border="0"><br></div> <p>5 - <a href="http://paramoreredd.com/">Paramore|Redd</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/23-25-param.jpg' alt="\"\"" border="0"><br></div> <p><strong>ayrıca aşağıdaki yazılarda ilginizi çekebilir.</strong></p> <p><a href="http://www.bildirgec.org/yazi/101-yuksek-kaliteli-css-ve">101 Yüksek Kaliteli Css ve XHTML Web Şablonu</a></p> <p><a href="http://www.bildirgec.org/yazi/101-daha-kaliteli-css-ve">101 Daha Kaliteli Css ve XHTML Web Şablonu</a></p> <p><a href="http://www.bildirgec.org/yazi/25-ilham-veren-logo-tasarim">25 İlham Veren Logo Tasarım Kaynağı</a></p> <p><a href="http://www.bildirgec.org/yazi/ilham-kaynagi-olabilecek-30-guzel">ilham kaynağı olabilecek 30 güzel müzik web sitesi</a></p> <p><a href="http://www.bildirgec.org/yazi/60-guzel-404-hata-sayfasi">60 Güzel 404 Hata Sayfası</a></p> <p><a href="http://www.bildirgec.org/yazi/40-cizgi-karakter-illustrator-dersi">40+ çizgi karakter illustrator dersi</a></p> <p><a href="http://www.bildirgec.org/yazi/web-ve-grafik-tasarimcilari-icin">web ve grafik tasarımcıları için harika kaynaklar</a></p> <p><a href="http://www.bildirgec.org/yazi/web-tasarimcilar-icin-20-mukemmel">Web Tasarımcılar İçin 20 Mükemmel Eğitim Sitesi</a></p> <p><a href="http://www.bildirgec.org/yazi/harika-web-tasarimi-yaraticiligi-50">Harika Web Tasarımı Yaratıcılığı: 50+ Örnek ve İlham Kaynağı</a></p> <p><a href="http://www.bildirgec.org/yazi/30-yaratici-illustration-website-basligi">30 Yaratıcı İllustration Website Başlığı</a></p> <p><a href="http://www.bildirgec.org/yazi/ilham-kaynagi-50-sik-navigasyon">İlham Kaynağı 50 Şık Navigasyon Menü Tasarımı</a></p> <p><a href="http://www.bildirgec.org/yazi/ilham-kaynagi-olabilecek-buton-tasarimlari">İlham Kaynağı Olabilecek Buton Tasarımları</a></p> <p><a href="http://www.bildirgec.org/yazi/web-tasariminda-beyaz-renk-kullanan">Web Tasarımında Beyaz Renk Kullanan Web Siteleri</a></p> <ul> <li><strong>kaynak:</strong> <a href="http://sixrevisions.com/web_design/five-types-of-effective-headers-in-web-design/">sixrevisions</a></li> <li><a href="http://lebron.bildirgec.org/">diğer yazılarım</a></li> <li><a href="http://www.bildirgec.org/rss/uye/LeBron/yazi.xml">yazılarımı rss üzerinden takip edebilirsiniz</a></li> </ul><p>Bu yazı <a href="http://www.bildirgec.org/uye/oguzn">oguzn</a> tarafından <a href=" http://www.bildirgec.org/yazi/web-tasariminda-etkili-basliklar ">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, 27 Apr 2009 06:26:00 GMT 207615@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/web-tasariminda-etkili-basliklar oguzn <p>Burada web sitelerinizde kullanabileceğiniz en iyi <a href="http://www.bildirgec.org/ara/men%C3%BC">menü</a> örneklerini bulabilirsiniz. <a href="http://www.bildirgec.org/ara/css">Css</a>'in yetenekleri ile birbirinden güzel çalışmalar ortaya çıkmaktadır.</p> <p>Bu yazı size mükemmel menü tekniklerini öğretebilecek ve çok iyi bir kaynak olacaktır.</p> <p>1 - <a href="http://www.cssplay.co.uk/menu/menu_map.html">The menu menu</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/13-09-menu-menu.jpg' alt="\"\"" border="0"><br></div> <p>Bu, farklı büyük bir menü örneğidir. Menünün üzerine geldiğiniz zaman hemen yanında alt menüler görünüyor.</p> <p>2 - <a href="http://www.shingokko.com/blog_post.aspx?t=pure-css-hover-menu">Pure CSS hover menu</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/13-28-css-hover-menu.jpg' alt="\"\"" border="0"><br></div> <p>bu css tekniği ile dikey alt menüyü görebileceksiniz.</p> <p><!-- buradan kes --></p> <p>3 - <a href="http://13styles.com/css-menus/matte/">Matte CSS Menu</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/13-01-styles.png' alt="\"\"" border="0"><br></div> <p>Matte, iki küçük fotoğraf kullanarak köşeleri yuvarlatılmış bir css menüsüdür.</p> <p>4 - <a href="http://www.3point7designs.com/blog/2007/12/22/advanced-css-menu-trick/">Css Blur Menu</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/13-08-blur-menu.png' alt="\"\"" border="0"><br></div> <p>bu css tekniği ile bulanık menü örneğini inceleyebilirsiniz.</p> <p>5 - <a href="http://hv-designs.co.uk/2009/01/09/coding-the-creative-design-layout/">CSS Navigation with Glowing Icons</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/13-27-css-navigation-icon.jpg' alt="\"\"" border="0"><br></div> <p>Bu güzel css menü tekniğini adım adım izlenerek oluşturulabilir.</p> <p>6 - <a href="http://kailoon.com/css-sliding-door-using-only-1-image/">CSS Sliding Door using only 1 image</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/13-17-css-sliding-door.jpg' alt="\"\"" border="0"><br></div> <p>bu css menüde kayan alt menü özelliği vardır. sadece bir resim kullanılır.</p> <p>7 - <a href="http://superfluousbanter.org/archives/2004/05/navigation-matrix-reloaded/">Navigation Matrix Reloaded</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/13-18-css-matrix-reloaded.png' alt="\"\"" border="0"><br></div> <p>bu şık navigasyon menü tekniği <a href="http://www.bildirgec.org/ara/css%20sprite">css sprite</a> kullanır.</p> <p>8 - <a href="http://e-lusion.com/design/menu/">CSS Horizontal Menu</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/13-11-horizontal-menu.png' alt="\"\"" border="0"><br></div> <p>Ian Main, şık ve kullanımı kolay css menüleri sağlar.</p> <p>yazının devamı için <a href="http://sixrevisions.com/css/30-exceptional-css-navigation-techniques/">buraya</a> tıklayın.</p> <p><strong>ayrıca aşağıdaki yazılarda ilginizi çekebilir.</strong></p> <p><a href="http://www.bildirgec.org/yazi/20-guzel-klasiklesmis-photoshop-firca">20 Güzel Klasikleşmiş Photoshop Fırça Seti</a></p> <p><a href="http://www.bildirgec.org/yazi/40-yuksek-kaliteli-simge-seti">40 yüksek kaliteli simge seti</a></p> <p><a href="http://www.bildirgec.org/yazi/22-fantezi-photoshop-dersi-ve">22 Fantezi Photoshop Dersi ve 125 Photoshop Fırçası</a></p> <p><a href="http://www.bildirgec.org/yazi/35-faydali-photoshop-eklentisi">35+ Faydalı Photoshop Eklentisi</a></p> <p><a href="http://www.bildirgec.org/yazi/101-daha-kaliteli-css-ve">101 Daha Kaliteli Css ve XHTML Web Şablonu</a></p> <p><a href="http://www.bildirgec.org/yazi/101-yuksek-kaliteli-css-ve">101 Yüksek Kaliteli Css ve XHTML Web Şablonu</a></p> <ul> <li><strong>kaynak:</strong> <a href="http://sixrevisions.com/css/30-exceptional-css-navigation-techniques/">sixrevisions</a></li> <li><a href="http://lebron.bildirgec.org/">diğer yazılarım</a></li> <li><a href="http://www.bildirgec.org/rss/uye/LeBron/yazi.xml">yazılarımı rss üzerinden takip edebilirsiniz</a></li> </ul><p>Bu yazı <a href="http://www.bildirgec.org/uye/oguzn">oguzn</a> tarafından <a href=" http://www.bildirgec.org/yazi/30-olaganustu-css-menu-teknigi ">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 Apr 2009 09:48:00 GMT 206222@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/30-olaganustu-css-menu-teknigi oguzn <p>jquery için hazırlanmış bu eklentiler ile web sayfanıza oldukça kolay ve kullanışlı slider'lar (kaydırma) ekleyebilirsiniz.</p> <p><a href="http://code.google.com/p/loopedslider/">loopedSlider</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/algoz/looped.png' alt="\"\"" border="0"><br></div><br><a href="http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding">Easy Slider</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/algoz/easyslider.png' alt="\"\"" border="0"><br></div></p> <p><!-- buradan kes --></p> <p><a href="http://www.webinventif.fr/wslide-plugin/">wSlide</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/algoz/wslide.png' alt="\"\"" border="0"><br></div><br><a href="http://www.ndoherty.com/blog/2007/09/15/introducing-coda-slider/">Coda-Slider</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/algoz/coda-slider.png' alt="\"\"" border="0"><br></div><br><a href="http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html">slideViewer</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/algoz/slideviewer.png' alt="\"\"" border="0"><br></div><br><a href="http://www.reindel.com/accessible_news_slider">Accessible News Slider</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/algoz/accnews.png' alt="\"\"" border="0"><br></div><br><a href="http://www.binofo.com/en/opensource/spinthewheel/">jQuery.spinTheWheel.js</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/algoz/jqwheel.png' alt="\"\"" border="0"><br></div><br><a href="http://www.dxenia.com/newstickerpro/">News Ticker Pro</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/algoz/newsslider.jpg' alt="\"\"" border="0"><br></div><br><a href="http://plugins.jquery.com/project/slinkySlider">Stinky Slider</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/algoz/stinky.png' alt="\"\"" border="0"><br></div><br><a href="http://www.gruppo4.com/~tobia/cross-slide.shtml">CrossSlide</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/algoz/rubber-ring.jpeg' alt="\"\"" border="0"><br></div></p> <p>kaynak: <a href="http://www.ajaxline.com/10-best-jquery-sliders">ajaxline</a></p> <p>takip edin: <a href="http://algoz.bildirgec.org/">bildirgeç</a> <a href="http://friendfeed.com/algoz">friendfeed</a> <a href="http://www.bildirgec.org/rss/uye/algoz/yazi.xml">rss</a></p><p>Bu yazı <a href="http://www.bildirgec.org/uye/oguzn">oguzn</a> tarafından <a href=" http://www.bildirgec.org/yazi/en-iyi-10-jquery-slider ">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, 18 Apr 2009 07:01:00 GMT 205911@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/en-iyi-10-jquery-slider oguzn <p><strong>Tasarım</strong> sırasında kullanabileceğiniz gerçeklerden <strong>işe yarar araçlar</strong>dan daha kullanışlı hiçbir şey yoktur. İster bir diyagram oluşturma uygulaması olsun ya da vektör görselleri oluşturma yazılımı, CSS kodunuzu iyileştirme ya da biçimlendirme uygulaması veya motif oluşturma uygulaması, bu tip araçlar hayatınızı çok kolaylaştıracaktır. Biz de bunun üzerine bugünkü yazımızda <strong>web geliştiricilerinin ve tasarımcılarının hayatını kolaylaştıracak 40 web uygulamasını</strong> listeledik.</p> <p><strong>1. <a href="http://aremysitesup.com/">Are My Sites Up?</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-01.jpg' alt="Are My Sites Up?" border="0"><br>Are My Sites Up?</div> <p><em>Are My Sites Up</em> oldukça sade bir servis olup web sitenizin çalışır durumda olup olmadığını düzenli olarak kontrol eden ve bir sorun olduğunda sizi uyaran bir uygulama. Bu ücretsiz servis sayesinde 20 adede kadar web sitesini kontrol edebilir, sınırsız sayıda hatırlatıcıyı elektronik posta ya da kısa mesaj ile cep telefonunuza gönderebilirsiniz. Site kontrolleri günde 25 kez yapılıyor.</p> <p><!-- buradan kes --></p> <p><strong>2. <a href="http://www.wordle.net/">Wordle</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-02.jpg' alt="Wordle" border="0"><br>Wordle</div> <p><em>Wordle</em>, uygulamaya sunacağınız metinlerden "kelime bulutları" oluşturabileceğiniz bir uygulama. Bu tip bulutlarda, sunulan metin üzerindeki kelimelerin kullanım sıklıklarına göre değişen boyutlarda kelimeler bir bulut içerisinde gösterilir. Uygulama üzerinden farklı yazıtipleri, anahatlar ve renk şemaları seçerek bulutunuzu özelleştirebilirsiniz. İlginç örneklere göz atmak için <a href="http://www.wordle.net/gallery">galeriyi</a> kontrol etmeyi unutmayın.</p> <p><strong>3. <a>Scrnshots</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-03.jpg' alt="Scrnshots" border="0"><br>Scrnshots</div> <p><em>Scrnshots</em>, web ve ekran tabanlı tasarımlarınızın ekran görüntülerini almak ve onları paylaşmak için kullanabileceğiniz bir uygulma. Hesabınıza sınırsız sayıda ekran görüntüsü yükleyebilir, gönderdiğiniz ekran görüntülerini etiketleyebilir, başkalarının gönderdiği ekran görüntüleri üzerinde size ilham kaynağı olabilmesi için arama yapabilir ve uygulamanın sunduğu bağlantıları kullanarak sitedeki ekran görüntülerini sitenize gömebilmek için kullanmanız gereken kodu alabilirsiniz. Uygulamanın daha pek çok kullanışlı özelliği bulunuyor.</p> <p><strong>4. <a href="http://drop.io/">Drop</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-04.jpg' alt="Drop" border="0"><br>Drop</div> <p><em>drop.io</em> uygulamasını kullanarak dosyalarınızı web, elektronik posta, telefon, fax ve diğer iletişim araçları aracılığı ile paylaşabilirsiniz. "drop" adı verilen dosyalarınız arama motorları tarafından arşivlenemeyecek şekilde depolandığından gizliliğe önem veren bu uygulama sayesinde istediğiniz dosyayı sadece istediğiniz kişiler ile paylaşabilirsiniz.</p> <p><strong>5. <a href="http://aloestudios.com/code/emchart/">EmChart</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-05.jpg' alt="EmChart" border="0"><br>EmChart</div> <p>EM gibi bağıl (relative) birimler kullandığınızda, kullanıcı metin boyutunu tarayıcı üzerinden değiştirdiğinde sitenizin görünümü eşit bir şekilde değişime uğrar. Ancak doğru EM değerlerini kullanabilmek için her seferinde hesap makinenizi kullanmak bir süre sonra can sıkıcı hale gelebilir. İşte bu soruna çözüm getirmeyi hedefleyen <em>EmChart</em> uygulaması, alt aralıkları (margin), satır yüksekliklerini (aslında satır yükseklikleri birimsizdir ancak formül yine de kullanılabilir), üst aralıkları, alt/üst boşlukları (padding) ve diğer stil özelliklerini doğru ölçülerle kullanabilmenizi sağlıyor.</p> <p><strong>6. <a href="http://html-ipsum.com/">HTML-Ipsum</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-06.jpg' alt="HTML-Ipsum" border="0"><br>HTML-Ipsum</div> <p>İşe yarar bir <em>Lorem Ipsum uygulaması</em> olan <em>HTML-Ipsum</em>'un kullanışlı bir özelliği de Mac dostu çıktılar verebilmesi. Sitenin çıktıları arasında Coda klipleri, Textmate paketleri ve menü çubuğu uygulaması yer alıyor.</p> <p><strong>7. <a href="http://www.pixastic.com/">Pixastic</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-07.jpg' alt="Pixastic" border="0"><br>Pixastic</div> <p><em>Pixastic</em> bir JavaScript kütüphanesi olup görseller üzerinde filtreler ve güzel görünümlü efektleri sadece birkaç satırlık JavaScript koduyla uygulayabilmenizi sağlıyor. Bu aracı özellikle kendi bilgisayarıma ulaşamadığım zamanlarda bir görseli çabucak düzenlemek istediğimde çok faydalı buluyorum.</p> <p><strong>8. <a href="http://colorschemedesigner.com/">Color Scheme Designer</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-08.jpg' alt="Color Scheme Designer" border="0"><br>Color Scheme Designer</div> <p><em>Color Scheme Designer</em> (Renk Şeması Tasarımcısı) uygulaması ile farklı türlerde renk şemalarını kolayca oluşturabilir ve ardından seçilen renk şeması üzerinde parlaklık ve kontrast değerlerini değiştirerek kendinize en uygun renk şemasını bulabilirsiniz.</p> <p><strong>9. <a href="http://www.lovelycharts.com/">Lovely Charts</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-09.jpg' alt="Lovely Charts" border="0"><br>Lovely Charts</div> <p>Çevrimiçi diyagram oluşturma uygulaması olan <em>Lovely Charts</em> ile profesyonel görünümlü çizelgeler, site haritaları ve çalışma planları oluşturabilirsiniz. Daha fazla bilgi için <a href="http://my.lovelycharts.com/">uygulamanın demosuna</a> bir göz atmak isteyebilirsiniz.</p> <p><strong>10. <a href="http://www.htm2pdf.co.uk/">HTM to PDF</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-10.jpg' alt="HTM to PDF" border="0"><br>HTM to PDF</div> <p>Saf HTML kodlarını PDF belgelerine dönüştürebilen çevrimiçi bir servis.</p> <p><strong>11. <a href="http://preloaders.net/">Preloaders</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-11.jpg' alt="Preloaders" border="0">Preloaders<br></div> <p>Çevrimiçi animasyonlu gif önyükleyici oluşturucusu olan bu uygulama, istediğiniz arkaplan ve önplan renklerini seçebilmenizi, önyükleyicinizin boyutunu değiştirebilmenizi, animasyon hızını ayarlayabilmenizi ve ardından önyükleyicinin tipini özelleştirebilmenizi sağlıyor.</p> <p><strong>12. <a href="http://www.downforeveryoneorjustme.com/">Down for Everyone or Just Me?</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-12.jpg' alt="Down for Everyone or Just Me?" border="0"><br>Down for Everyone or Just Me?</div> <p>Bir web sitesinin sadece sizin bilgisayarınızda mı açılmadığını yoksa kimsenin bilgisayarında mı açılmadığını anlamak için kullanabileceğiniz bir uygulama.</p> <p><strong>13. <a href="http://klok.mcgraphix.com/klok/index.htm">Klock</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-13.jpg' alt="Klock" border="0"><br>Klock</div> <p>Klok'un sade çalışma zamanlayıcısı ile günlük işlerinizin kaydını tutun ve gününüzü nasıl doldurduğunuzu görsel olarak yansıtın. <a href="http://klok.mcgraphix.com/klok/features.html">Uygulamanın tüm özellikleri</a>ne de bir bakmayı ihmal etmeyin.</p> <p><strong>14. <a href="http://hivelogic.com/enkoder/form">Enkoder</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-14.jpg' alt="Enkoder" border="0"><br>Enkoder</div> <p><em>Enkoder</em> uygulaması, elektronik posta adreslerini şifrelenmiş JavaScript koduna dönüştürebilen ve bu sayede onları elektronik posta adresi toplama robotlarından koruyarak sadece gerçek insanlara gösterebilen bir uygulama.</p> <p><strong>15. <a href="http://myspyder.net/tools/websnapshot/">Websnapshot</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-15.jpg' alt="Websnapshot" border="0"><br>Websnapshot</div> <p>Web sitelerinin ekran görüntüsünü almak için kullanabileceğiniz bir diğer kullanışlı uygulama olan <em>Websnapshot</em> ile tek yapmanız gereken, ekran görüntüsünü almak istediğiniz web sitesinin adresini girmek ve ardından "Snap" düğmesine basmak. Ya da tarayıcınız üzerinden sürükleyip bırakabilirsiniz de. Kaydatmek için önizleme resimlerini tıklayabilir ya da otomatik kaydet seçeneği seçili ise görsellerin otomatik olarak sizin belirleyeceğiniz kayıt klasörüne kaydedebilirsiniz.</p> <p><strong>16. <a href="http://www.typechart.com/">TypeChart</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-16.jpg' alt="TypeChart" border="0"><br>TypeChart</div> <p>Typechart ile CSS dosyalarını alırken aynı zamanda web tipografilerini önizleyebilir ve karşılaştırabiliriniz. Farklı tipografi stillerine göz atabilir, CSS kodunu indirebilir, Windows (ClearType) yazıtipi işleme motoru ile Apple yazıtipi işleme motorunu karşılaştırabilirsiniz.</p> <p><strong>17. <a href="http://blog.olicio.us/2008/11/08/wtframework-bookmarklet/">WTFramework Bookmarklet</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-17.jpg' alt="WTFramework Bookmarklet" border="0"><br>WTFramework Bookmarklet</div> <p>Bir web sitesi üzerinde hangi JavaScript kütüphanesinin kullanıldığını merak ettiğiniz ancak kaynak kodunu kontrol edemeyecek kadar tembel olduğunuz anlar oldu mu? WTFramework oldukça sade ve kullanımı kolay bir <em>bookmarklet</em> olup bu işi sizin için yapabilen bir araç.</p> <p><strong>18. <a href="http://www.evolus.vn/Pencil/">Pencil</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-18.jpg' alt="Pencil" border="0"><br>Pencil</div> <p><em>Pencil Projesi</em>'nin ana amacı, kolayca diyagramlar ve GUI prototipleri oluşturabilmeniz için kullanabileceğiniz açak kaynaklı bir araç oluşturmaktır.</p> <p><strong>19. <a href="http://estimator.astuteo.com/">Web Geliştirme Projesi Tahmin Edicisi</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-19.jpg' alt="Web Geliştirme Projesi Tahmin Edicisi" border="0"><br>Web Geliştirme Projesi Tahmin Edicisi</div> <p><em>Web Development Project Estimator</em> uygulamas, web tasarımcılarının ve site geliştiricilerinin bir web projesi için gereken zamanı ve materyalleri hesaplamak için kullanabilecekleri kullanışlı bir uygulama.</p> <p><strong>20. <a href="http://280slides.com/">280slides</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-20.jpg' alt="280slides" border="0"><br>280slides</div> <p>Güzel görünümlü sunumlar oluşturun, onlara dilediğiniz yerden ulaşın ve dilediğiniz kişiler ile paylaşın.</p> <p><strong>21. <a href="http://www.backtype.com/">BackType</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-21.jpg' alt="BackType" border="0"><br>BackType</div> <p>Herhangi bir bloga ya da web sitesine ne zaman bir blog bırakırsanız, BackType onu sizin için takip edecektir. Dilerseniz sizinle aynı görüşe sahip insanları bulabilir ve onlarla iletişim kurabilir, uygulama üzerinden o kişilerin yorumlarını takip edebilirsiniz.</p> <p><strong>22. <a href="http://www.feedcompare.com/">FeedCompare</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-22.jpg' alt="FeedCompare" border="0"><br>FeedCompare</div> <p>Rakiplerinizin FeedBurner beslemelerini kendinizinki ile karşılaştırarak rakiplerinizin gelişimini takip edebilirsiniz.</p> <p><strong>23. <a href="http://smushit.com/">SmushIt</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-23.jpg' alt="SmushIt" border="0"><br>SmushIt</div> <p><em>Smushit.com</em> görsellerinizi mümkün olan en yüksek oranda sıkıştırırken kalitesinden ödün vermeyerek dosya boyutundan kazanmanızı sağlıyor.</p> <p><strong>24. <a href="https://www.dexrex.com/">Dexrex</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-24.jpg' alt="Dexrex" border="0"><br>Dexrex</div> <p><em>Dexrex</em>, anında mesajlaşma servislerinden gelen mesajlarınızın yanısıra cep telefonunuza gönderilen kısa mesajları arşivlemenizi sağlayan bir eklenti.</p> <p><strong>25. <a href="http://jott.com/Default.aspx">Jott</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-25.jpg' alt="Jott" border="0"><br>Jott</div> <p><em>Jott</em>, herşeyin kontrolünü eline almanızı sağlayan bir uygulama. Notlar alabilir, hatırlatıcılar ve ajandalar oluşturabilir, arkadaşlarınız ve ailenizle iletişim halinde kalabilir ve sık kullandığını web siteleri ile servisleri ile etkileşim kurabilirsiniz... Üstelik tüm bunları sesinizi kullanarak yapabiliyorsunuz.</p> <p><strong>26. <a href="http://www.freshbooks.com/">Fresh Books</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-26.jpg' alt="Fresh Books" border="0"><br>Fresh Books</div> <p><em>FreshBooks</em> ile faturalar ve tahminler gönderebilirsiniz. Servis, faturamalaya dair her şeyi çok kolay hale getirmiş. Önceden proje faturaları oluşturarak daha sonra onları unutma dersinden kurtulabilirsiniz.</p> <p><strong>27. <a href="http://www.sifrvault.com/">SifrVault</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-27.jpg' alt="SifrVault" border="0"><br>SifrVault</div> <p>sIFR yazıtiplerinin yer aldığı çevrimiçi bir kaynak.</p> <p><strong>28. <a href="http://sproutbuilder.com/">SproutBuilder</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-28.jpg' alt="SproutBuilder" border="0"><br>SproutBuilder</div> <p>Sprout sayesinde widgetler, mini siteler, mashuplar, bannerler ve daha fazlasını kolayca oluşturabilirsiniz.</p> <p><strong>29. <a href="http://snipt.net/">Snipt</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-29.jpg' alt="Snipt" border="0"><br>Snipt</div> <p><em>Snipt</em> üzerinde sık kullandığınız kod parçacıklarını ya da komutları depolayabilirsiniz.</p> <p><strong>30. <a href="http://www.shiftspace.org/">ShiftSpace</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-30.jpg' alt="ShiftSpace" border="0"><br>ShiftSpace</div> <p>Açık kaynaklı bir tarayıcı eklentisi olan ShiftSpace sayesinde web üzerinde çok farklı ve çeşitli düzenlemeler yapabilirsiniz. <a href="http://www.shiftspace.org/features/">Uygulamanın özellikleri</a>ne bakmayı unutmayın.</p> <p><strong>31. <a href="http://wappalyzer.com/">Wappalyzer</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-31.jpg' alt="Wappalyzer" border="0"><br>Wappalyzer</div> <p>Bir Firefox eklentisi olan <em>Wappalyzer</em>, ziyaret ettiğiniz web sitelerinde hangi yazılımların kullanıldığını gösteriyor. Eklenti pek çok CMS'yi, e-ticaret ve wiki ve forum uygulamasını otomatik olarak algılıyor.</p> <p><strong>32. <a href="http://favicon-generator.org/editor/">Favicon Generator &amp; Editor</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-32.jpg' alt="Favicon Generator &amp; Editor" border="0"><br>Favicon Generator &amp; Editor</div> <p>Tüm modern web tarayıcıları tarafından desteklenen GIF, PNG ya da JPEG biçimindeki görselleri bu uygulama ile ICO biçimine dönüştürebilirsiniz. Dilerseniz çevrimiçi düzenleyicisi ile kendi faviconlarınızı da sıfırdan oluşturabilirsiniz. Ayrıca uygulama, oluşturulan görsellerin daha iyi görünmesi için bazı ince ayarları da içeriyor.</p> <p><strong>33. <a href="http://bgpatterns.com/">BgPatterns</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-33.jpg' alt="BgPatterns" border="0"><br>BgPatterns</div> <p>Bu araç ile döşeli motifler oluşturabilir, oluşturulan motiflerin rengini değiştirebilirsiniz.</p> <p><strong>34. <a href="http://kuler.adobe.com/">Kuler</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-34.jpg' alt="Kuler" border="0"><br>Kuler</div> <p>Adobe tarafından geliştirilen ve web tabanlı bir uygulama olan <em>Kuler</em>, kendi renk şemalarınızı oluşturabilmenizi sağlıyor. Ayrıca yine uygulama üzerinden diğer kullanıcıların oluşturduğu renk şemalarına yorum bırakabilir, ya da ortak renk şemaları oluşturabilirsiniz.</p> <p><strong>35. <a href="http://fontstruct.fontshop.com/">FontStruct</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-35.jpg' alt="FontStruct" border="0"><br>FontStruct</div> <p>Ücretsiz bir font oluşturma aracı olan bu uygulama sayesinde ızgara motif üzerinde pozisyonlanmış geometrik şekillerden yazıtipleri oluşturabilirsiniz.</p> <p><strong>36. <a href="http://vectormagic.com/">Vector Magic</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-36.gif' alt="Vector Magic" border="0"><br>Vector Magic</div> <p>Sadece birkaç fare tıklaması ile bitmap görsellerinizi vektörel görsellere dönüştürebilmenizi sağlayan bir uygulama.</p> <p><strong>37. <a href="http://www.tartanmaker.com/">Tartan Designer</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-37.jpg' alt="Tartan Designer" border="0"><br>Tartan Designer</div> <p>İskoç severler ve havalı tasarımcılar için ekose motifleri oluşturun.</p> <p><strong>38. <a href="http://goldenratiocalculator.com/">GoldenRatioCalculator</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-38.jpg' alt="GoldenRatioCalculator" border="0"><br>GoldenRatioCalculator</div> <p>Eğer web sitenizin kompozisyonunu ya da tasarımını önemli ölçüde yiileştirmek istiyorsanız, o zaman tasarımınıza altın oran ölçülerini uygulamak isteyebilirsiniz. Bu araç, tasarımlarınız için altın oranı hesaplamanıza yardımcı olacaktır.</p> <p><strong>39. <a href="http://picmarkr.com/">PicMarkr</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-39.gif' alt="PicMarkr" border="0"><br>PicMarkr</div> <p>PicMarkr, görsellerinize dilediğiniz filigranı (watermark) ekleyebilmenize olanak sağlayan bir uygulama. Özellikle görsellerinizin telif haklarını korumak ya da onlara yorum eklemek istediğiniz zaman kullanışlı.</p> <p><strong>40. <a href="http://www.tweetdeck.com/beta/">TweetDeck</a></strong></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/126-40.png' alt="TweetDeck" border="0"><br>TweetDeck</div> <p>Twitter'ın halihazırda kullanılan özelliklerini alarak onları kategorilere ayırarak daha kolay yönetilebilir hale getiren bir Adobe Air uygulaması olan <em>TweetDeck</em>, ana twitter beslemenizi (tüm tweetler) konu ya da gruplara göre ayırabilmenizi sağlıyor.</p> <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://www.noupe.com/tools/40-useful-handy-web-designers-web-services-tools.html">Noupe</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/40-kullanisli-web-servisi-ve/"><img src="http://www.oyyla.com/ld/oyyla-logo-16x16.gif" title="Bu yazıyı Oyyla!"> Oyyla!</a></li> </ul> <p><strong>Web Araçları İle İlgili Yazdığım Diğer Yazılar</strong></p> <ul> <li><a href="http://www.bildirgec.org/yazi/socialwhois-sizi-takip-edenler-kim">SocialWhois: Sizi Takip Edenler Kim?</a></li> <li><a href="http://www.bildirgec.org/yazi/web-tasarimcilarinin-hayatini-kolaylastiracak-12">Web Tasarımcılarının Hayatını Kolaylaştıracak 12 Uygulama</a></li> <li><a href="http://www.bildirgec.org/yazi/en-iyi-7-ikon-arama">En İyi 7 İkon Arama Motoru</a></li> <li><a href="http://www.bildirgec.org/yazi/sosyal-ag-komunite-olusturma-yazilimlari">Sosyal Ağ Komünite Oluşturma Yazılımları</a></li> <li><a href="http://www.bildirgec.org/yazi/25-web-2-0-olusturucusu">25+ Web 2.0 Oluşturucusu</a></li> <li><a href="http://www.bildirgec.org/yazi/kullanmaktan-zevk-alacaginiz-17-web">Kullanmaktan Zevk Alacağınız 17 Web Uygulaması</a></li> <li><a href="http://www.bildirgec.org/yazi/kullanmaktan-zevk-alacaginiz-17-web-1">Kullanmaktan Zevk Alacağınız 17 Web Uygulaması Daha</a></li> <li><a href="http://www.bildirgec.org/yazi/gazup-ile-dosyalarinizi-birden-fazla">Gazup İle Dosyalarınızı Birden Fazla Sunucuda Taşıyın</a></li> <li><a href="http://www.bildirgec.org/yazi/100-en-iyi-google-maps">100+ En İyi Google Maps Uygulaması</a></li> <li><a href="http://www.bildirgec.org/yazi/web-tasarimcilarinin-hayatini-kolaylastiracak-13">Web Tasarımcılarının Hayatını Kolaylaştıracak 13 Ücretsiz Web Uygulaması</a></li> <li><a href="http://www.bildirgec.org/yazi/onlarsiz-yapamayacaginiz-20-tipografi-uygulamasi">Onlarsız Yapamayacağınız 20 Tipografi Uygulaması</a></li> <li><a href="http://www.bildirgec.org/yazi/social-mention-sosyal-medya-arama">Social Mention: Sosyal Medya Arama Motoru</a></li> <li><a href="http://www.bildirgec.org/yazi/web-tasarimcilari-icin-12-arac">Web Tasarımcıları İçin 12 Araç ve Site</a></li> <li><a href="http://www.bildirgec.org/yazi/hayatinizi-canli-yayimlayabilmek-icin-20">Hayatınızı Canlı Yayımlayabilmek İçin 20+ Araç ve Kaynak</a></li> </ul><p>Bu yazı <a href="http://www.bildirgec.org/uye/oguzn">oguzn</a> tarafından <a href=" http://www.bildirgec.org/yazi/40-kullanisli-web-servisi-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, 16 Apr 2009 08:55:00 GMT 205123@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/40-kullanisli-web-servisi-ve oguzn <p>Web sitenizin <a href="http://www.bildirgec.org/yazi/size-sifirdan-photoshop-ogretecek-35" title="Size Sıfırdan Photoshop Öğretecek 35 Kaynak">tasarımı hazır</a>, <a href="http://www.bildirgec.org/yazi/sosyal-ag-komunite-olusturma-yazilimlari" title="Sosyal Ağ Komünite Oluşturma Yazılımları">içerik yönetim sistemi</a> muhteşem çalışıyor, <a href="http://www.bildirgec.org/yazi/web-sitenizi-olusturabileceginiz-8-ucretsiz" title="web sitenizi oluşturabileceğiniz 8 ücretsiz tasarım platformu">içerik siteye eklendi</a> ve müşteriniz son derece memnun. Artık sitenizi yayımlamanın vakti geldi. Yoksa gelmedi mi? Bir web sitesini yayımlarken genellikle onu yayımlamak için duyduğunuz sabırsızlık nedeniyle birkaç önemli noktayı atlarsınız. Bu yüzden sitenizi dünyaya duyurmadan önce yapılması gerekenleri içeren bir kontrol listesi bulundurmanız ve onu her yeni web sitesini yayımlamadan önce kontrol etmeniz, sitenizin geleceği ve kalitesi açısından önemlidir.</p> <p>Bu makalede, <strong>bir websitesi resmiyete kavuşmadan önce kontrol edilmesi gerekenlerin bir listesi</strong>ni bulacaksınız. Makale içerisinde genellikle unutulan küçük ayrıntılar yer alıyor ve bunlar zamanında yapıldığı taktirde hem sizin daha az zamanınızı alacaktır, hem de genel olarak kullanıcı deneyimine olumlu katkıları olacaktır.</p> <p><strong>1. Favicon</strong></p> <p><a href="http://www.bildirgec.org/etiket/favicon/">Favicon</a> bir web sitesini sekme ya da pencre üzerinde tanıtmaya yardımcı olur. Faviconlar genellikle bir web sitesinin yer imlerine eklenmesi durumunda da adres ile birlikte istemci üzerine kaydedilir. Ancak bundan emin olmak için aşağıdaki kodu sitenizin <em>head</em> etiketleri arasına yerleştirmeniz gerekir.</p> <code>&lt;link rel="icon" type="image/x-icon" href="/favicon.ico" /&gt;</code> <p>Eğer iPhone için bir favicon kaydetmek istiyorsanız, o zaman aşağıdaki kodu da eklemelisiniz.</p> <code>&lt;link rel="apple-touch-icon" type="image/x-icon" href="/favicon.ico" /&gt;</code> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/113-01.jpg' alt="\"\"" border="0"><br></div> <p><!-- buradan kes --></p> <p><strong>2. Başlıklar ve Meta Verisi</strong></p> <p>Sayfanızın başlığı SEO (Arama Motoru Optimizasyonu) için en önemli elementtir. Bunun yanısıra kullanıcılarınızın ziyaret ettikleri sayfada ne olduğunu anlamaları açısından da önem taşır. Sayfa başlığının her bir sayfada değişmesine ve sayfa içeriği ile alakalı olmasına özen gösterin.</p> <code>&lt;title&gt;Web Sitenizi Yayımlamadan Önce Yapmanız Gereken 15 Önemli Kontrol | bildirgec&lt;/title&gt;</code> <p>Meta <em>description</em> (açıklama, tanımlama) ve <em>keyword</em> (anahtar kelime) etiketleri SEO için artık çok önemli olmasa da (en azından en çok kullanılan arama motorları için), siz yine de onları sayfanıza eklemeye özen gösterin. Her bir sayfada açıklamanın değiştiğine ve sayfanın içeriği ile alakalı bir açıklama olması gerektiğine dikkat edin zira genellikle bu açıklama, Google'nin arama sonuçları sayfasında göstereceği şey olacaktır.</p> <ul> <li><a href="http://www.bildirgec.org/yazi/basliklarinizi-daha-kullanici-dostu-kilacak">Başlıklarınızı Daha Kullanıcı Dostu Kılacak 5 İpucu</a></li> <li><a href="http://www.bildirgec.org/yazi/seo-uzmanlari-icin-populer-firefox">SEO Uzmanları İçin Popüler Firefox Eklentileri</a></li> <li><a href="http://www.bildirgec.org/yazi/seo-araclari-listesi">SEO Araçları Listesi</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/113-02.jpg' alt="\"\"" border="0"><br></div> <p><strong>3. Çapraz Tarayıcı Kontrolleri</strong></p> <p>Tasarımınızın mükemmel göründüğünü düşündüğünüz anda onu Internet Explorer üzerinde kontrol ettiğinizde öyle olmadığını anlayacaksınızdır. Web sitenizin farklı tarayıcılarda aynı şekilde görünmesi oldukça önemlidir. Her şey %100 aynı olmasa bile en azından ana işlevselliği korunmalıdır ve kullanıcı herhangi bir problemin varlığını sezmemelidir. Kontrol etmeniz popüler tarayıcılar Internet Explorer 6, 7 ve 8, Firefox 3, Safari 3, Chrome, Opera ve iPhone olmalıdır.</p> <ul> <li><a href="http://www.bildirgec.org/yazi/capraz-tarayici-uyumlulugu-icin-altin">Çapraz Tarayıcı Uyumluluğu İçin Altın Değerinde İpuçları</a></li> <li><a href="http://www.bildirgec.org/yazi/mobil-web-i-nasil-herkes">Mobil Web'i Nasıl Herkes İçin Daha İyi Yaparız?</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/113-03.jpg' alt="\"\"" border="0"><br></div> <p><strong>4. Yazım Denetimi</strong></p> <p>Her şeyi okuyun. Eğer daha önce okumuş olsanız bile tekrar okuyun. Bir başkasına da okutun. Genellikle bu kontroller sırasında hatalı olan şeyleri fark edecek ve onları değiştirmek isteyeceksinizdir. Sitenizdeki metni içerik konusuna hedefleyerek onu az tutmayı deneyin. Uzun metin bloklarını daha kısa paragraflara bölün. Yazı genelinde başlıklar kullanın ve listeler kullanarak okurlarınızın kolay bir şekilde içeriğinizi tarayabilmesini sağlayın. Uyarı kutuları gibi dinamik metinleri de unutmayın.</p> <ul> <li><a href="http://www.bildirgec.org/yazi/onlarsiz-yapamayacaginiz-20-tipografi-uygulamasi">Onlarsız Yapamayacağınız 20 Tipografi Uygulaması</a></li> </ul> <p><strong>5. Bağlantılar</strong></p> <p>Tüm bağlantılarınızın çalışacağını sanmayın. Onlara tıklayın. Harici web sitelerine bağlantı verirken bağlantıların başına "http://" eklemeyi unutmuş olabilirsiniz. Bağlantılar sayfadaki metnin geri kalanından daha ön planda olmalıdır. Bağlantı olmayan bir metnin altını çizmeyin zira bu kullanıcının kafasını karıştıracaktır. Ziyaret edilmiş bağlantılarınız için de ayrı bir stil uygulamayı ihmal etmeyin.</p> <ul> <li><a href="http://www.bildirgec.org/yazi/buraya-tiklamayin-baglantilari-dogru-kullanmak">Buraya Tıklamayın! Bağlantıları Doğru Kullanmak</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/113-04.jpg' alt="\"\"" border="0"><br></div> <p><strong>6. İşlevsellik Kontrolü</strong></p> <p>Sitenizdeki her şeyi derinlemesine kontrol edin. Eğer bir iletişim formunuz var ise, kendinize bir mesaj göndermeyi deneyin ve kullanıcıların ne ile karşılaşacaklarını kendiniz görün. Sitenizi başkalarınızın test etmesini sağlayın. Sadece arkadaşlarınızın ya da diğer aile üyelerinizin değil, web sitenizin hedeflediği pazar alanındaki kişiler tarafından test edilmesini sağlayın. Arkanıza yaslanın ve bir kullanıcının sitenizi nasıl kullandığını izleyin. Bir başkasının sitenizi kullanma şeklini gördükten sonra sizin sandığınızdan ne kadar farklı olduğunu anladığınızda çok şaşıracaksınız. Kontrol edilmesi gereken şeyler arasında iletişim formları, arama özellikleri, alışveriş sepetleri ya da giriş alanları yer almalıdır.</p> <ul> <li><a href="http://www.bildirgec.org/yazi/web-tasarimcilarinin-hayatini-kolaylastiracak-13">Web Tasarımcılarının Hayatını Kolaylaştıracak 13 Ücretsiz Web Uygulaması</a></li> <li><a href="http://www.bildirgec.org/yazi/web-tasarimcilari-icin-12-arac">Web Tasarımcıları İçin 12 Araç ve Site</a></li> <li><a href="http://www.bildirgec.org/yazi/web-tasarimcilari-icin-web-uzerindeki">Web Tasarımcıları İçin Web Üzerindeki 6 Kullanışlı Araç</a></li> <li><a href="http://www.bildirgec.org/yazi/web-tasariminda-bosluklari-verimli-olarak">Web Tasarımında Boşlukları Verimli Olarak Kullanmak</a></li> <li><a href="http://www.bildirgec.org/yazi/10-kullanisli-web-uygulamasi-arayuzu">10 Kullanışlı Web Uygulaması Arayüzü</a></li> <li><a href="http://www.bildirgec.org/yazi/web-tasarimcilari-icin-10-kullanilirlik">Web Tasarımcıları İçin 10 Kullanılırlık İpucu</a></li> </ul> <p><strong>7. Sorunsuz İndirgeme</strong></p> <p>Web siteniz JavaScript'in etkin olmadığı tarayıcılar üzerinde de çalışmalıdır. Kullanıcılar genellikle güvenlik için JavaScript'i kapatırlar, bu yüzden buna hazırlıklı olmalısınız. JavaScript'i Firefox üzerinde kolayca etkisizleştirebilirsiniz. Formlarınızı kontrol ederek JavaScript'in etkin olmadığı durumlarda bile sunucu tarafflı kontrollerden sorunsuzca geçtiğini ve güzel görünümlü AJAX parçalarını kontrol edin ve JavaScript etkin olmadığında bile bunun sitenizin genel kullanılırlığını engelleyip engellemediğini inceleyin.</p> <ul> <li><a href="http://www.bildirgec.org/yazi/website-ziyaretcilerinizin-ilk-izlenimini-etkileyen">Website Ziyaretçilerinizin İlk İzlenimini Etkileyen 21 Faktör</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/113-05.jpg' alt="\"\"" border="0"><br></div> <p><strong>8. Doğrulama</strong></p> <p>100% doğrulanmış bir web sitesini hedeflemelisiniz. Her ne kadar <a href="http://www.bildirgec.org/yazi/dogrulanmis-x-html-onemli-mi">doğrulanmamış bir web sitesi dünyanın sonu olmasa da</a> sitenizin doğrulanmamasına sebep olan hataları bilmek ve o can sıkıcı hataları giderebilmek, kodunuzun ve sitenizin kalitesi açısından da önemlidir. Sitenizin doğrulanmamasına sebep olacak hatalar arasında <em>alt</em> etiketi içermeyen görseller, kapanış etiketleri kullanılmaması ve <em>&amp;</em> yerine <em>&amp;amp;</em> kullanılmamış olması.</p> <ul> <li><a href="http://www.bildirgec.org/yazi/website-erisilebilirligine-dikkat-etmek">Website Erişilebilirliğine Dikkat Etmek</a></li> <li><a href="http://www.bildirgec.org/yazi/html5-te-semantikler">HTML5'te Semantikler</a></li> <li><a href="http://www.bildirgec.org/yazi/dogrulanmis-x-html-onemli-mi">Doğrulanmış (X)HTML - Önemli mi?</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/113-06.jpg' alt="\"\"" border="0"><br></div> <p><strong>9. RSS Bağlantıları</strong></p> <p>Eğer web siteniz bir bloga ya da haber akışına sahipse, kullanıcılarınızın abone olabilecekleri bir RSS bağlantısı olmasına özen gösterin. Kullanıcılarınız RSS beslemelerini kolayca bulabilmelidir. Aşağıdaki kodu sitenizin <em>head</em> etiketleri arasına eklerseniz, destekleyen tarayıcılarda adres satırının hemen yanında standart RSS simgesi görünecektir ve kullanıcılarınız o simgenin üzerine tıklayarak sitenize abone olabilirler.</p> <code>&lt;link rel="alternate" type="application/rss+xml" title="Site or RSS title" href="link-to-feed" /&gt;</code> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/113-07.jpg' alt="\"\"" border="0"><br></div> <p><strong>10. Analiz</strong></p> <p>Sitenizin ziyaretçi istatistiklerini takip edebileceğiniz bir tür site analiz aracı kullanmak, sitenizin ne kadar başarılı olduğunu ve hedeflerinizin ne kadarının gerçekleştiğini anlamanız açısından önemlidir. Günlük tekil ziyaretçişleri, aylık sayfa gösterim sayılarını ve tarayıcı istatistiklerini takip edin. Tüm bu veriler sitenizin yayında olduğu ilk günden itibaren takip edilmelidir. <a href="http://www.google.com/analytics/">Google Analytics</a> pek çok web sitesi sahibi arasında popülerdir. Kullanabileceğiniz diğerleri ise <a href="http://getclicky.com/">Clicky</a>, <a href="http://kissmetrics.com/">Kissmetrics</a> (halen kapalı beta formunda), <a href="http://haveamint.com/">Mint</a> ve <a href="http://statcounter.com/">StatCounter</a> gösterilebilir.</p> <ul> <li><a href="http://www.bildirgec.org/yazi/website-trafiginizi-takip-etmenin-50">Website Trafiğinizi Takip Etmenin 50 Yolu Daha</a></li> <li><a href="http://www.bildirgec.org/yazi/site-trafigini-populerligini-ve-istatistiklerini">Site Trafiğini, Popülerliğini ve İstatistiklerini İzleyebilmenin 10 Yolu</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/113-08.gif' alt="\"\"" border="0"><br></div> <p><strong>11. Sitemap</strong></p> <p>Sitenizi barındırdığınız sunucunun ana dizini üzerine (sitenizin ana sayfasının bulunduğu dizin) sitemap.xml dosyası eklemeniz durumunda arama motorları sitenizi daha kolay bir şekilde arşivleyebilecektir. Bu dosyanın içeriği, sitenizdeki tüm sayfaların adreslerinden oluşmaktadır. <a href="http://www.xml-sitemaps.com/">XML-Sitemaps</a> web sitesi, sizin için kolayca sitemap.xml dosyasını oluşturacaktır. Bu dosyayı oluşturduktan sonra ilgili dosyayı sitenizin ana dizinine yüklemelisiniz, bu sayede dosyanın adresi http://www.sitenizinadresi.com/sitemap.xml olmalıdır.</p> <p>Eğer <a href="http://www.bildirgec.org/yazi/wordpress-blogculari-icin-15-kullanisli" title="WordPress Kullanıcıları İçin 15 Kullanışlı Araç">WordPress kullanıyorsanız</a>, <a href="http://www.arnebrachhold.de/projects/wordpress-plugins/google-xml-sitemaps-generator/">Google XML Sitemap Eklentisi</a> sayesinde siz ne zaman blogunuza yeni bir yazı yazarsanız, ilgili eklenti sitemap dosyanızı otomatik olarak güncelleyecektir. Ayrıca sitenizi ve sitemap adresinizi <a href="https://www.google.com/webmasters/tools">Google Webmaster Araçları</a>na eklemeyi unutmayın. Bu araç Google'ye bir sitemap sahibi olduğunuzu söyler ve ardından ilgili araç aracılığı ile sitenizin en son ne zaman Google tarafından arşivlendiği ve sitenizdeki hangi sayfaların Google tarafından erişilemediği gibi bilgilere ulaşabilirsiniz.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/113-09.gif' alt="\"\"" border="0"><br></div> <p><strong>12. Koruyucu Tasarım</strong></p> <p>Genellikle pek üzerinde durulmayan koruyucu tasarım elementi 404 sayfasıdır. Eğer bir kullanıcı siteniz üzerinde bulunmayan bir sayfayı ziyaret ederse, <strong>404 sayfası</strong> görüntülenir. Bu, pek çok farklı sebep yüzünden olabilir. Bu sebepler arasında bir başka web sitesinin sitenizde yer almayan bir sayfaya bağlantı vermesi sonucu olabilir. Kullanıcılarınızı ana sayfaya yönlendiren bir 404 sayfası oluşturarak kullanıcılarınızı sitenizde tutabilirsiniz. Ayrıca ziyaretçilerinizi alakalı sayfalara da yönlendirmeyi tercih edebilirsiniz.</p> <p>Bir diğer koruyucu tasarım tekniği ise <strong>formunuzun doğrulanıp doğrulanmadığını kontrol etmektir</strong>. Form alanlarınıza alışılmışın dışında veriler girerek (örneğin çok fazla sayıda karakter, numara alanlarına harf girmek vs) formuzun çalışıp çalışmadığını ve bir hata vermesi durumunda ise kullanıcılarınızın bu sorunu giderebilmeleri için neler yapması gerektiği konusunda bilgilendiren bir mesajın belirip belirmediğini kontrol edin.</p> <ul> <li><a href="http://www.bildirgec.org/yazi/iyi-bir-kullanici-arayuz-tasarimi">İyi Bir Kullanıcı Arayüz Tasarımı İçin 12 Kullanışlı Teknik</a></li> <li><a href="http://www.bildirgec.org/yazi/iyi-bir-web-sitesinin-sahibi">İyi Bir Web Sitesinin Sahibi Olması Gereken 15 Anahtar Element</a></li> <li><a href="http://www.bildirgec.org/yazi/kullanici-geri-bildirimleri-ile-sitenizin">Kullanıcı Geribildirimleri İle Sitenizin Kullanılırlığını Arttırmak</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/113-10.jpg' alt="\"\"" border="0"><br></div> <p><strong>13. İyileştirin</strong></p> <p>Web sitenizin en yüksek performansta çalışmasını istersiniz. Bunu siteniz yayımlandıktan sonra düzenli olarak kontrol ederek gerçekleştirebilirsiniz ancak siteniz yayımlanmadan önce de kontrol etmeniz gereken bazı şeyler vardır. HTTP isteklerini azaltmak, CSS sprites (hareketleri) kullanmak, görsellerinizi web için optimize etmek, JavaScript ve CSS dosyalarınızı sıkıştırmak gibi önceden alabileceğiniz tedbirler, sitenizin daha hızlı açılması ile sonuçlanacak ve ayrıca sunucunuza daha az yük getirecektir.</p> <p>Ayrıca, kullandığınız yayımlama motoru ile değişmekle birlikte, daha ciddi tedbirler almayı da deneyebilirsiniz. Örneğin, eğer WordPress kullanıyorsanız, caching adı verilen ve dinamik sayfaları önceden işleyerek onları HTML biçimine dönüştüren ve bu sayede sunucunun işlemcisini çok daha az yoran eklentileri kullanmayı deneyebilirsiniz. <strong>WP-Cache</strong> eklentisi bu alanda işinizi görecektir.</p> <ul> <li><a href="http://www.bildirgec.org/yazi/websitenizi-hizlandiracak-ve-kodunuzu-iyilestirecek">Websitenizi Hızlandıracak ve Kodunuzu İyileştirecek 15 İpucu</a></li> <li><a href="http://www.bildirgec.org/yazi/en-iyi-10-web-sitesi">En İyi 10 Web Sitesi İçin Görsel Performans Optimizasyonu</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/113-11.gif' alt="\"\"" border="0"><br></div> <p><strong>14. Yedekleyin</strong></p> <p>Eğer web siteniz bir veritabanı üzerinden çalışıyorsa, o zaman bir yedekleme stratejisine ihtiyacınız olacaktır. Yoksa verilerinizi kaybettiğiniz gün geldiğinde, neden verilerimi yedeklemedim diye kendi kendinizi yer bitirirsiniz. Olmaz demeyin, oluyor. Eğer WordPress kullanıyorsanız, <a href="http://wordpress.org/extend/plugins/wp-db-backup/">WordPress Veritabanı Yedekleme Eklentisi</a>ni kullanın. Eklenti sayesinde sitenizin düzenli olarak yedeğinin alınmasını sağlayabilir, ve bu yedeklerin elektronik posta adresine gönderilecek şekilde ayarlayabilirsiniz.</p> <p><strong>15. Yazdırma Stil Şablonu</strong></p> <p>Eğer bir kullanıcı web siteniz üzerindeki bir sayfayı yazdırmak istiyorsa, o kullanıcının sitenizdeki gezinti elementleri ya da harici tasarım elementlerinin kağıt üzerinde görünmesini istememe, sadece içeriğin görünmesini isteme ihtimali oldukça yüksektir. İşte bu yüzden yazıcılar için bir stil şablonu oluşturmak önemlidir. Ayrıca yüzen elementler gibi bazı CSS elementleri, yazıcı çıktısı üzerinde güzel görünmezler.</p> <p>Bilgisayarların yazıcı çıktısı alınması sırasında otomatik olarak algılayacakları bir stil şablonu oluşturmak için aşağıdaki kodu sitenizin <em>head</em> etiketleri arasına yerleştirmeniz yeterlidir.</p> <code>&lt;link rel="stylesheet" type="text/css" href="print.css" media="print" /&gt;</code> <p>Koddan da anlayacağınız üzere yazdırma stil şablonunuzu <em>print.css</em> üzerinde oluşturmalısınız.</p> <p><strong>Kontrol Listesini İndirin</strong></p> <p>Kısa bir süre önce <em>Dan Zambonini</em>, bir web sitesi hem yayımlanmadan önce hem de yayımlandıktan sonra yapılması gereken kontrolleri içeren oldukça detaylı bir kontrol listesi hazırladı. Diğer şeylerin yanısıra <a href="http://www.boxuk.com/blog/the-ultimate-website-launch-checklist">Ultimate Website Launch Checklist</a>, içerik ve stil ile alakalı kontrolleri, standartlar ve doğrulamayı, arama motoru görünürlüğünü, işlevsellik testini, güvenlik ve risk oluşumlarını, performansı ve pazarlamayı da içeriyor.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/113-12.gif' alt="\"\"" border="0"><br></div> <p>İlgili kontrol listesinin <a href="http://www.boxuk.com/upload/website_launch_checklist_v1.pdf">pdf sürümü</a> de bulunuyor. Bu kontrol listesi özellikle gündelik projeleriniz üzerinde oldukça faydalı olmasının yanısıra siteniz yayımlandıktan sonra hatalarla karşılaşma olasılığınızı da en az seviyeye indirecektir.</p> <p>Ayrıca <em>David Leggett</em>'in hazırladığı <a href="http://www.uxbooth.com/blog/quick-usability-checklist/">Hızlı Kullanılabilirlik Kontrol Listesi</a>'ne de bir göz atmak isteyebilirsiniz. Bu liste, özellikle tasarımcıların projelerini tasarlarken, <a href="http://www.bildirgec.org/etiket/usability/">kullanılabilirlik</a> ve <a href="http://www.bildirgec.org/etiket/accessibility/">erişilebilirlik</a> kontrolleri için yapmaları gerekenleri içeriyor. Her ne kadar bu listedekilerin hepsi her web sitesi için geçerli olmasa da, sitenizi tasarlama aşamasında bir göz atmanızda fayda var.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/113-13.jpg' alt="\"\"" border="0"><br></div> <p><strong>Sizin Listeye Eklemek İstediğiniz Diğer Kontroller Neler?</strong></p> <p>Kendinize bir yapılacaklar listesi oluşturun ve herhangi bir web sitesini hazırlamadan önce ona bir göz atın. Yukarıdaki listede yer almayan ve sizin de listeye eklemek istediğiniz herhangi bir kontrol öğesi var mı? Yorumlarınızla paylaşın.</p> <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://www.smashingmagazine.com/2009/04/07/15-essential-checks-before-launching-your-website/">Smashing Magazine</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> | <a href="http://friendfeed.com/brightonem">friendfeed</a></strong> </li> <li><strong><a href="http://pinkfloyd.bildirgec.org/">pinkfloyd köşesi</a></strong></li> <li><strong><a href="http://www.oyyla.com/user/view/profile/pinkfloyd">pinkfloyd@oyyla</a></strong> <a href="http://www.oyyla.com/gonder?url=http://www.bildirgec.org/yazi/web-sitenizi-yayimlamadan-once-yapmaniz/"><img src="http://www.oyyla.com/ld/byo.png" alt="Bu yazıyı Oyyla!" title="Bu yazıyı Oyyla!" border="0"></a></li> </ul><p>Bu yazı <a href="http://www.bildirgec.org/uye/oguzn">oguzn</a> tarafından <a href=" http://www.bildirgec.org/yazi/web-sitenizi-yayimlamadan-once-yapmaniz ">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, 10 Apr 2009 06:45:00 GMT 204183@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/web-sitenizi-yayimlamadan-once-yapmaniz oguzn <p>Bir site tasarlamak sanıldığı kadar kolay bir iş değildir. Tasarımın güzelliği ayrıntılarda gizlidir ve o ayrıntılar web tasarımında o kadar fazladır ki bazen gözümüzden kaçan hatalar başkasının gözüne çok batabilir. Bu makalede sıkça yapılan hatalara dikkat çekilmiş ve tasarımda bize kolaylık sağlayacak öğelere değinilmiştir.</p> <p><strong>Tipografi</strong><br>Web sayfalarında en çok göze hitap eden öğeler yazı karakterleridir. Uygun font’ların kullanılması tasarımlarımızı daha da çekici kılar. Fontların değişik işletim sistemlerindeki görünüşüne <a href="http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html">buradan </a>bakabilirsiniz. Buradaki listede kullanıcı memnuniyetini en üst düzeye çıkarmak için “yazı tipi ailelerini” (font family) nasıl ayarlamanız gerektiğini bulabilirsiniz.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/basarozcan/1.jpg' alt="\"\"" border="0"><br></div> <p><strong>İkiden fazla Font Kullanmayın!</strong><br>Tasarımlarda çok fazla sayıda font kullanmak sakıncalı olmaktadır. Eğer farklı font kullanmak istiyorsanız, başlıklar için ayrı düz yazılarınız için ayrı olmak üzere toplam 2 font belirleyin ve kullanın. Örneğin Başlıklar için “IMPACT” yazılar için “ARIAL” kullandıysanız, diğer sayfalarda da bu seçimleri kullanın. Ayrıca her font değişik alt, üst değerler ve satır yüksekliği kullanmaktadır. Bu değerleri karşılaştırmak için <a href="http://www.typetester.org">TypeTester </a>programını kullanabilirsiniz.</p> <p><!-- buradan kes --></p> <p>KÖTÜ<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/basarozcan/2.jpg' alt="\"\"" border="0"><br></div><br>İYİ<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/basarozcan/3.jpg' alt="\"\"" border="0"><br></div></p> <p><strong>sans ile serif düşman gibidir!</strong><br>Aslında bu bir kural değil ama yine de güzel gözükmediği için kural gibi söylenebilir. Sakın sans ailesine sahip bir font ile sans-serif ailesine sahip bir font’u beraber kullanmayın. Hoş bir görüntü oluşturmuyorlar.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/basarozcan/4.jpg' alt="\"\"" border="0"><br></div> <p>Gördüğünüz gibi iki farklı aileye ait karakterler arasında büyük bir görünüş farklılığı bulunmakta. Eğer kullanmak isteğiniz varsa en azından A List Apart’taki <a href="http://www.alistapart.com">makale</a>ye bir göz atın.</p> <p><strong>Doğru yazı boyutunu seçin</strong><br>CSS ile genelde yüzde, em ve piksel ile boyutlandırma kullanmaktayız. Kendi boyutlarınızı belirlemek için testler yapın ve ideali bulmaya çalışın. Referans olarak bazı ölçüler verilebilir. Örneğin paragraflar için %62.5 kullanılabilir. Fakat bunun yerine em ya da piksel kullanırsanız daha çok verim alabilirsiniz. Burada bilmeniz gereken 10 pikselin 1 em’e karşılık geldiğidir. Bunu hesaba katarsak 14px yani 1.4em paragraflar için yeterli bir boyuttur. Başlıklar içinse nispeten daha büyük ve fark edilebilecek boyutlar kullanmalısınız. 14 piksel paragrafınız varsa 18 piksel ile 24 piksel aralığında bir başlık kullanmak çok uygun olacaktır. Tabi bu değerlerin font’tan fonta değişmesi gerektiğini unutmayın.<br>KÖTÜ<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/basarozcan/6.jpg' alt="\"\"" border="0"><br></div><br>İYİ<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/basarozcan/7.jpg' alt="\"\"" border="0"><br></div><br><strong><br>Satır Aralarına Dikkat!</strong><br>Satır aralarındaki dev boşluklar sizin de dikkatinizi dağıtmıyor mu? Siteler Photoshop’ta tasarlanırken anti-alias özelliği açık olduğu için satır araları gözümüze daha güzel görünebilir. Ama tarayıcılarda böyle bir özellik bulunmadığından sayfamız daha farklı görünür. Eğer genelde 16 piksellik karakter kullanıyorsanız aralığınızda 16 piksel ile 18 piksel arasında olmalıdır ki göze daha hoş gelsin. <br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/basarozcan/8.jpg' alt="\"\"" border="0"><br></div></p> <p><strong>Renkler iç dünyanın aynasıdır!</strong><br>Renkler çoğumuzun en çok dikkat ettiği şeydir. Ama bir kez daha hatırlatmakta yarar var. Arka planları ayarladıktan sonra yazı rengini deneyin ve kesinlikle yakın tonlar seçmeyin. Arka plan ve yazı renginiz olabildiğince birbirine zıt olsun ki yazılarınız dikkat çeksin. Eğer renkler konusunda referans alacak bir kaynak istiyorsanız <a href="http://kuler.adobe.com/">Adobe Kuler</a>, <a href="http://www.colorcombos.com">ColorCombos </a>ve <a href="http://www.colourlovers.com/">ColourLovers</a>’ı kullanmaktan çekinmeyin.<br>İYİ<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/basarozcan/10.jpg' alt="\"\"" border="0"><br></div><br>KÖTÜ<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/basarozcan/11-2.jpg' alt="\"\"" border="0"><br></div></p> <p><strong>Aman hizaya dikkat!</strong><br>Öğelerin sayfa içindeki hizalamalarına çok dikkat edin. Sayfanın göze hoş gelmesi için öğelerin bir blok gibi birbiriyle ilişkili görünmesi tasarımı çekici kılar. Eğer Amerika’yı yeniden keşfetmeye ne gerek var diyorsanız hizalama konusunda kullanabileceğiniz birkaç CSS Çatısı (Framework) mevcut. <a href="http://www.960.gs ">960 Grid Sistemi</a> bu konuda tavsiye edilebilir.</p> <p>KÖTÜ<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/basarozcan/13.jpg' alt="\"\"" border="0"><br></div><br>İYİ<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/basarozcan/14.jpg' alt="\"\"" border="0"><br></div></p> <p><strong>Aralıklara dikkat edin!</strong><br>Aralıklar yani CSS dilinde konuşmamız gerekirse border ile içerik arasındaki aralığı belirten padding değerini en uygun biçimde kullanmaya çalışın. İçeriğiniz ne birbirine çok yapışık ne de birbirinden çok fazla uzakta olsun. <br>KÖTÜ<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/basarozcan/15.jpg' alt="\"\"" border="0"><br></div><br>İYİ<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/basarozcan/16.jpg' alt="\"\"" border="0"><br></div></p> <p><strong>Elemanlar bir arada dursun</strong><br>Sayfada bulunan ve birçok elemanı kapsayan blokları birbirinden çok uzakta tutmayın. Bu davranış içeriğin bir bütünmüş gibi görünmesini engeller. Oysa Ufak aralıklar ile yerleştirilen bloklar sayfayı bir arada tutarak ilgi çekici olur.<br>KÖTÜ<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/basarozcan/17.jpg' alt="\"\"" border="0"><br></div><br>İYİ<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/basarozcan/18.jpg' alt="\"\"" border="0"><br></div></p> <p><strong>Aralıklar konusunda tutarlı olun</strong><br>Bu kadar çok aralıklardan konuştuktan sonra son konu ise sayfanın genel görünümündeki aralıkların önemi. Örneğin sayfanızı Header, Nav, içerik, sidebar ve footer olarak bölmelere ayırdıysanız, bu bölmeler arasındaki boşlukların hep sabit olmasını sağlayın. Aksi takdirde düzensiz sayfalarınızın hesapları ile boğuşmak zorunda kalabilirsiniz. Eğer 960GS gibi bir çatı kullanıyorsanız, sistem aralıkları yönetmek konusunda size yardımcı olacaktır.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/basarozcan/19.jpg' alt="\"\"" border="0"><br></div></p> <p>Bu makale, “<a href="http://blog.themeforest.net/tutorials/common-mistakes-in-web-design/">Common Mistakes in Web Design</a>” ismiyle Marko tarafından http://blog.themeforest.net için yazılmıştır.</p><p>Bu yazı <a href="http://www.bildirgec.org/uye/oguzn">oguzn</a> tarafından <a href=" http://www.bildirgec.org/yazi/web-tasariminda-sikca-karsilasilan-hatalar ">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, 09 Apr 2009 10:06:00 GMT 204127@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/web-tasariminda-sikca-karsilasilan-hatalar