http://www.bildirgec.org/ tr-tr 40 bildirgec.org - sermen08 - beğendikleri sermen08 <p><a href="http://www.bildirgec.org/ara/dokular">Dokular</a>, etkili bir biçimde kullanıldığı zaman <a href="http://www.bildirgec.org/ara/tasar%C4%B1mlar">tasarımlar</a>ı çok güzel bir hale getirebilir. Daha önce dokular ile ilgili şu yazıları görmüştük:</p> <ul> <li><a href="http://www.bildirgec.org/yazi/2009-un-en-iyi-ucretsiz-1">2009'un En İyi Ücretsiz Doku (Texture) Paketleri</a></li> </ul> <ul> <li><a href="http://www.bildirgec.org/yazi/deviantart-dan-70-ahsap-doku">Deviantart'dan 70 ahşap doku paketi</a></li> </ul> <ul> <li><a href="http://www.bildirgec.org/yazi/80-web-site-arkaplani-olusturmak">80+ Web Site Arkaplanı Oluşturmak İçin Taze Dokular (Textures)</a></li> </ul> <ul> <li><a href="http://www.bildirgec.org/yazi/5-ucretsiz-yuksek-cozunurluklu-tas">5 Ücretsiz Yüksek Çözünürlüklü Taş Dokusu (Texture)</a></li> </ul> <ul> <li><a href="http://www.bildirgec.org/yazi/15-yuksek-cozunurluklu-texture-doku">15 Yüksek Çözünürlüklü Texture (Doku)</a></li> </ul> <ul> <li><a href="http://www.bildirgec.org/yazi/photoshop-icin-140-cicek-doku">Photoshop İçin 140+ Çiçek Doku Seti (Texture)</a></li> </ul> <ul> <li><a href="http://www.bildirgec.org/yazi/10-ucretsiz-yuksek-kaliteli-kot">10 Ücretsiz Yüksek Kaliteli Kot Pantolon (Jeans) Dokusu</a></li> </ul> <p>Aşağıda sonraki <a href="http://www.bildirgec.org/ara/proje">proje</a>lerinizde kullanabilmeniz için eşsiz <a href="http://www.bildirgec.org/ara/ka%C4%9F%C4%B1t%20dokular%C4%B1">kağıt dokuları</a> yer almaktadır.</p> <p>1. <a href="http://hibbary.deviantart.com/art/Paper-Textures-2-91881447">Paper Textures 2</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/1-previous-paper-texture.jpg' alt="\"\"" border="0"><br>15 doku</div> <p>2. <a href="http://bleeding-dragon.deviantart.com/art/10-old-paper-texture-32401994">10 Old Paper Texture</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/2-old-paper-texture.jpg' alt="\"\"" border="0"><br>10 doku</div><br><!-- buradan kes --> <p>3. <a href="http://cloaks.deviantart.com/art/Paper-Bag-Texture-Pack-78484075">Paper Bag Texture Pack</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/3-paper-bag-texture.jpg' alt="\"\"" border="0"><br>5 doku</div> <p>4. <a href="http://liek.deviantart.com/art/Texture-pack-dirty-paper-108147920">Texture Pack – Dirty Paper</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/4-dirty-paper-texture.jpg' alt="\"\"" border="0"><br>birkaç doku</div> <p>5. <a href="http://dioma.deviantart.com/art/Textures-Paper-58028330">Textures: Paper</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/5-scrapbook-paper-texture.jpg' alt="\"\"" border="0"><br>birkaç doku</div> <p>6. <a href="http://cloaks.deviantart.com/art/Natural-Paper-Texture-Pack-78124632">Natural Paper Texture Pack</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/6-natural-paper-texture.jpg' alt="\"\"" border="0"><br>9 doku</div> <p>7. <a href="http://princess-of-shadows.deviantart.com/art/turn-back-time-texture-pack-126698813">Turn Back Time Texture Pack</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/7-time-texture-pack.jpg' alt="\"\"" border="0"><br>5 doku</div> <p>8. <a href="http://ayelie-stock.deviantart.com/art/Old-Paper-pack-67117235">Old Paper Pack</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/8-old-paper-pack.jpg' alt="\"\"" border="0"><br>12 doku</div> <p>9. <a href="http://prolific-stock.deviantart.com/art/Paper-Texture-Pack-122731140">Paper Texture Pack</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/9-paper-texture-pack.jpg' alt="\"\"" border="0"><br>5 doku</div> <p>10. <a href="http://papermarionett.deviantart.com/art/9-large-paper-scans-150507916">9 Large Paper Scans</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/10-large-paper-scans.jpg' alt="\"\"" border="0"><br>9 doku</div> <p>11. <a href="http://zigabooooo.deviantart.com/art/Paper-Texture-Pack-9-papers-104432181">Paper Texture Pack – 9 papers</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/11-paper-texture-set.jpg' alt="\"\"" border="0"><br>9 doku</div> <p>12. <a href="http://entrochique.deviantart.com/art/10-1024x768-Paper-Textures-101057540">10 1024×768 Paper Textures</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/12-paper-textures.jpg' alt="\"\"" border="0"><br>10 doku</div> <p>13. <a href="http://yunyunsarang.deviantart.com/art/Old-paper-3-big-textures-99859617">Old paper 3 – Big Textures</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/13-old-paper-background.jpg' alt="\"\"" border="0"><br>16 doku</div> <p>14. <a href="http://lacedxroses.deviantart.com/art/Texture-Set-1-Notebooked-122753899">Texture Set 1- Notebooked</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/14-notebook-texture.jpg' alt="\"\"" border="0"><br>5 doku</div> <p>15. <a href="http://fudgegraphics.deviantart.com/art/Plain-Paper-Textures-98783342">Plain Paper Textures</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/15-plain-paper-textures.jpg' alt="\"\"" border="0"><br>4 doku</div> <p>16. <a href="http://kittytextures.deviantart.com/art/Paper-Texture-pack-03-63194489">Paper Texture Pack 03</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/16-free-paper-texture-pack.jpg' alt="\"\"" border="0"><br>5 doku</div> <p>17. <a href="http://fidgetresources.deviantart.com/art/Texture-Pack-2-121034564">Texture Pack 2</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/17-chinese-paper-texture.jpg' alt="\"\"" border="0"><br>birkaç doku</div> <p>18. <a href="http://overdosse.deviantart.com/art/13-HQ-Old-paper-Textures-66526257">13 HQ Old paper Textures</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/18-old-paper-textures.jpg' alt="\"\"" border="0"><br>13 doku</div> <p>19. <a href="http://grahamphisherdotcom.deviantart.com/art/HQ-Paper-Textures-140529915">HQ Paper Textures</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/19-high-quality-paper-textures.jpg' alt="\"\"" border="0"><br>5 doku</div> <p>20. <a href="http://for-certain.deviantart.com/art/P-A-P-E-R-T-E-X-T-U-R-E-96391048">P A P E R – T E X T U R E</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/20-new-paper-texture.jpg' alt="\"\"" border="0"><br>16 doku</div> <p>21. <a href="http://powerpuffjazz.deviantart.com/art/Green-Paper-Texture-Pack-121245065">Green Paper Texture Pack</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/21-green-paper-texture.jpg' alt="\"\"" border="0"><br>6 doku</div> <p>22. <a href="http://www.bittbox.com/freebies/free-texture-tuesday-brown-paper">Free Texture Tuesday: Brown Paper</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/LeBron/22-brown-paper.jpg' alt="\"\"" border="0"><br>birkaç doku</div> <p><strong>kaynak:</strong> <a href="http://blueblots.com/freebies/150-free-paper-textures-for-your-next-design/">blueblots.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/sermen08">sermen08</a> tarafından <a href=" http://www.bildirgec.org/yazi/sonraki-tasarimlariniz-icin-150-ucretsiz ">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, 20 Feb 2010 08:34:00 GMT 233977@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/sonraki-tasarimlariniz-icin-150-ucretsiz sermen08 <p><strong>web browserlar</strong> tam anlamıyla <a href="http://www.bildirgec.org/etiket/css3">CSS3</a>'ü desteklemese de web sitelerinde css3 sıkça kullanılmaya başlandı. bu makalede css3 dünyasında nelerin olduğuna değineceğiz. aşağıda sizlere <a href="http://www.bildirgec.org/etiket/ilham verici">ilham vereceğini</a> düşündüğüm farklı tarzlarda css3 örnekleri mevcut. css3 ile neler yapılabilir sorusunun cevabına yanıt bulabileceğiniz örneklere göz atalım.</p> <p><a href="http://css-tricks.com/examples/CSS3Clock/">CSS3 & jquery saat</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/GokhanKARAKAS/csstricks-clock.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://www.fofronline.com/experiments/clock/#clock">analog saat</a> - <a href="http://www.fofronline.com/2009-03/an-analogue-clock-using-only-css/">tutorial</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/GokhanKARAKAS/analogue-clock.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://www.fofronline.com/experiments/cube-3d/">3d cube that rotates using arrow keys</a>- <a href="http://www.fofronline.com/2009-07/animated-css3-cube-interface-using-3d-transforms/">tutorial</a><br>(yön tuşlarıyla hareket ettirebileceğiniz 3d küp) - <br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/GokhanKARAKAS/3d-cube.jpg' alt="\"\"" border="0"><br></div><br><!-- buradan kes --></p> <p><a href="http://www.fofronline.com/experiments/accordion/#two">css3 accordion</a> - <a href="http://www.fofronline.com/2009-06/accordion-using-only-css/">tutorial</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/GokhanKARAKAS/css3-accordion.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://www.fofronline.com/experiments/parallax/#experiment">auto-scrolling parallax</a> - <a href="http://www.fofronline.com/2009-04/auto-scrolling-parallax-effect-without-javascript/">tutorial</a><br>(otomatik kayan arkaplan)<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/GokhanKARAKAS/auto-scrolling-parallax.jpg' alt="\"\"" border="0"><br></div><br><a href="http://dinolatoga.com/demo/webkit-image-hover-effects/">image hover effects</a> - <a href="http://dinolatoga.com/2009/09/18/amazing-imag-hover-effects-with-webkit-and-css/">tutorial</a> (resim etrafında efekt) <br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/GokhanKARAKAS/image-hover-effects.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://www.romancortes.com/blog/pure-css-coke-can/">turning coke can (control with scrollbar)</a> - <a href="http://www.romancortes.com/blog/pure-css-coke-can/">tutorial </a><br>(scrollbar etkisiyle döndürme)<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/GokhanKARAKAS/coke-can.jpg' alt="\"\"" border="0"><br></div></p> <p>space - <a href="http://media.24ways.org/2009/15/assets/css/space.css">tutorial</a><br>(uzay)<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/GokhanKARAKAS/space.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://www.zurb.com/playground/osx-dock">mac dock</a> - <a href="http://www.zurb.com/playground/osx-dock">tutorial </a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/GokhanKARAKAS/mac-dock.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://www.the-art-of-web.com/css/css-animation/">animated rocket </a>- <a href="http://www.the-art-of-web.com/css/css-animation/">tutorial</a> <br>(roket animasyonu)<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/GokhanKARAKAS/animated-rocket.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://www.3site.eu/examples/gallery/">animated polaroid gallery</a> (animasyonlu fotograf galerisi)<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/GokhanKARAKAS/another-polaroid-gallery.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.html">spotlight cast shadow</a><br>(metine sahne ışığı efekti)<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/GokhanKARAKAS/spotlight-cast-shadow.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://buildinternet.com/live/elasticthumbs/">elastic menu</a> - <a href="http://buildinternet.com/2009/09/sproing-make-an-elastic-thumbnail-menu/">tutorial</a><br>(elastik menü)<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/GokhanKARAKAS/elastic-thumb-menu.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://paulbakaus.com/lab/js/coverflow/">coverflow</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/GokhanKARAKAS/coverflow.jpg' alt="\"\"" border="0"><br></div></p> <p>daha fazla css3 örneği isterseniz 40'tan fazla örnek için <a href="http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/">buraya </a>bakabilirsiniz.</p><p>Bu yazı <a href="http://www.bildirgec.org/uye/sermen08">sermen08</a> tarafından <a href=" http://www.bildirgec.org/yazi/css3-ile-neler-yapilabilir ">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, 20 Feb 2010 14:08:00 GMT 233976@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/css3-ile-neler-yapilabilir sermen08 <p>Birçok kişi o ya da bu şekilde; dersleri kullanarak, hazır dosyaları indirerek vb. yollarla photoshop'da web sitesi oluşturabiliyor. Ancak pek azımız bunu iyi bir şekilde harmanlanmış bir web sitesine dönüştürebiliyor. Bu yazıda Psd'yi HTML'e dönüştürmeyi öğrenebileceğiniz 21 adet ders bulacaksınız. Dilerseniz daha önce yayınlanmış <a href="http://www.bildirgec.org/yazi/psd-leri-html-e-cevirme">şu bildiriye</a> ya da <a href="http://www.bildirgec.org/yazi/psd-den-css-html-e">buna</a> da bakabilirsiniz.</p> <p><a href="http://hv-designs.co.uk/2009/01/28/the-design-lab-psd-conversion/"><h1>1. the design lab: psd conversion</h1>Psd çevirme</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/ewrencik/1.jpg' alt="\"\"" border="0"><br></div> <p><a href="http://nettuts.com/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/"><h1>2. from psd to html, building a set of website designs step by step</h1>adım adım psd'den html</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ewrencik/2.jpg' alt="\"\"" border="0"><br></div></p> <p><!-- buradan kes --></p> <p><a href="http://psdvibe.com/2009/04/20/coding-design-lab-tv-styled-layout/"><h1>3. coding: design lab tv styled layout</h1>Televizyon Layoutlu Tasarım</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ewrencik/3.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://csshowto.com/layout/psd-to-csshtml-in-easy-steps-part-1/"><h1>4. psd to css/html in easy steps - part 1</h1>Basit adımlarla Psd'den css - html çeviri</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ewrencik/4.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://net.tutsplus.com/videos/screencasts/slice-and-dice-that-psd/"><h1>5. slice and dice that psd</h1>psd bölümleme (slice)</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ewrencik/5.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://css-tricks.com/video-screencasts/12-converting-a-photoshop-mockup-part-two-episode-one/"><h1>6. converting a photoshop mockup: part two, episode one</h1>psd çevirme</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ewrencik/6.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://net.tutsplus.com/tutorials/site-builds/build-a-sleek-portfolio-site-from-scratch/"><h1>7. build a sleek portfolio site from scratch</h1>çizimden siteye, portfolyo sitesi</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ewrencik/7.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://hv-designs.co.uk/2009/02/27/portfolio-layout-10-learn-to-code/"><h1>8. portfolio layout - learn to code it</h1>portfolyo tasarımı kodlamak</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ewrencik/8.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://nettuts.com/videos/screencasts/converting-a-design-from-psd-to-html/"><h1>9. converting a design from psd to html</h1>bir tasarımı psd'den html'e çevirmek</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ewrencik/9.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://nettuts.com/videos/screencasts/how-to-convert-a-psd-to-xhtml/"><h1>10. how to convert a psd to xhtml</h1>psd'den xhtml'ye çeviri</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ewrencik/10.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://nettuts.com/videos/screencasts/how-to-convert-a-psd-to-xhtml/"><h1>11. how to convert psd to html</h1>psd'den html'e çeviri</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ewrencik/11.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://www.subcide.com/tutorials/csslayout/page12.aspx"><h1>12. creating a css layout from scratch</h1>çizimden css'ye tasarım aşamaları</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ewrencik/12.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://hv-designs.co.uk/2008/05/20/psd-htmlcss/"><h1>13. psd > html/css</h1>psd'den html - css'e çeviri</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ewrencik/13.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://www.blog.spoongraphics.co.uk/tutorials/encoding-a-photoshop-mockup-into-xhtml-"><h1>14. encoding a photoshop mockup into xhtml & css</h1>psd'yi xhtml ve css olarak kodlamak</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ewrencik/14.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://freecss.info/free-css-tutorials/css-template-tutorial-setting-up/"><h1>15. css template tutorial</h1>css şablon dersi</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ewrencik/15.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://hv-designs.co.uk/2008/12/01/portfolio-layout-4-the-code/"><h1>16. portfolio layout 4: the code</h1>portfolyo tasarımını kodlamak</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ewrencik/16.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://erraticwisdom.com/2006/01/29/tutorial-coding-a-layout"><h1>17. tutorial coding a layout</h1>bir layout'u kodlamak</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ewrencik/17.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://css-tricks.com/video-screencasts/1-converting-a-photoshop-mockup-part-1-of-3/"><h1>18. converting a photoshop mockup</h1>psd çevirmek</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ewrencik/18.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://www.gomediazine.com/tutorials/create-a-killer-band-site-in-drupal-part-3-xhtml/"><h1>19. killer site - from illustrator to xhtm to drubal</h1>illustrator'den xhtml'ye, oradan da drupala!</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ewrencik/19.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://www.partdigital.com/tutorials/convert-web/"><h1>20. from psd to html</h1>psd'den html'e çeviri</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ewrencik/20.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://hv-designs.co.uk/2007/10/10/coding-your-1st-psd-tutorial/"><h1>21. coding a car sales layout</h1>Araba satış sitesi kodlamak</a><br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/ewrencik/21.jpg' alt="\"\"" border="0"><br></div></p> <p><a href="http://dzineblog.com/2009/04/tutorials-psd-to-html.html">Kaynak</a></p><p>Bu yazı <a href="http://www.bildirgec.org/uye/sermen08">sermen08</a> tarafından <a href=" http://www.bildirgec.org/yazi/psd-yi-html-e-cevirebilmeniz ">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, 25 May 2009 08:45:00 GMT 210743@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/psd-yi-html-e-cevirebilmeniz sermen08 <p>İndirilebilir ve ücretsiz video düzenleme araçlarını birarada görebilirsiniz.</p> <p><a href="http://avidemux.sourceforge.net/">Avidemux</a><br>Basit kesme, filtreleme ve çevirme işlemlerini kolaylıkla yapabilirsiniz. AVI, MPEG, MP4, ASF gibi formatların yanında çok fazla sayıda dosya tipini destekler.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/dbergerac/avidemux.jpg' alt="avidemux" border="0"><br>avidemux</div><br><a href="http://jahshaka.org/">Jahshaka</a><br>Videolarınıza 3 boyutlu efektler verebilirsiniz. Bunun yanında kesme, birleştirme yapabileceğiniz profesyoneller için de güzel bir ücretsiz program.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/dbergerac/jahashaka.jpg' alt="jahshaka" border="0"><br>jahshaka</div></p> <p><!-- buradan kes --></p> <p><a href="http://www.virtualdub.org/">Virtualdub</a><br>Çok sayıda edit işlemi içeren kullanımı kolay bir video programı. Görüntü düzenleme filtre hizmeti var. Program tüm standart codec'lerle uyumlu çalışıyor.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/dbergerac/virtualdub.jpg' alt="virtualdub" border="0"><br>virtualdub</div><br><a href="http://www.zs4.net/download">ZS4 Video Düzenleyicisi</a>Fotoğraf, video ve ses dosyalarını birleştirebileceğiniz edit programı.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/dbergerac/zs4.jpg' alt="ZS4" border="0"><br>ZS4</div><br><a href="http://www.debugmode.com/wax/">Wax</a>Videolarınıza çeşitli efektler ekleyebileceğiniz 2D ve 3D çalışabileceğiniz bir program. Giriş biçimleri: AVI, WAV, tüm popüler görüntü biçimleri. Çıkış biçimleri: AVI, MPEG, WAV, Flaş, tüm popüler görüntü biçimleri.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/dbergerac/wax.jpg' alt="vax" border="0"><br>vax</div><br><a href="http://vivia-video.org/">Vivia</a><br>Linux ve Windows için video düzenleme programı. DV materyalleriyle dvd kalitesini sunuyor.<div class="imajorta"><img src='http://www.bildirgec.org/imaj/dbergerac/vivia.jpg' alt="vivia" border="0"><br>vivia</div><br><a href="http://www.am-soft.ru/aviedit.html">AVIedit</a><br>Videolarınızdan yeni bir video oluşturabilir, 30 adet video efektiyle avi dosyaları üzerinde oynayabilirsiniz.<div class="imajorta"><img src='http://www.bildirgec.org/imaj/dbergerac/aviedit.jpg' alt="AVIedit" border="0"><br>AVIedit</div><br><a href="http://www.solveigmm.com/?Products&p=AVITrimmer">AVItrimmer</a><br>avi formatındaki dosyaları çok hızlı ve eksiksiz bir şekilde kesebilirsiniz. Kalitesi asla bozulmaz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/dbergerac/avitrimmer.jpg' alt="AVItrimmer" border="0"><br>AVItrimmer</div><br><a href="http://videospin.com/Redesign/">Videospin</a><br>"movie maker" arayüzüne benziyor. resim ve videolarınızla klip yapabilir, düzenleme ve efekt uygulayabilirsiniz.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/dbergerac/videospin-pinnacle.jpg' alt="videospin" border="0"><br>videospin</div><br><a href="http://www.vcsoftwares.com/dk.html">DVD Knife</a><br>dvd'nizden çok hızlı bir şekilde parçalar kesip klipler oluşturmanızı sağlar. Çıkartılan klipler sadece dvd formatında saklanır.<br><div class="imajorta"><img src='http://www.bildirgec.org/imaj/dbergerac/dvd-knife-64335-1.jpg' alt="DVD knife" border="0"><br>DVD knife</div></p> <p>Bunlar bana yetmez diyorsanız y ada ücretsiz video düzenleme web servislerini de görmek istiyorum diyorsanız <a href="http://www.hongkiat.com/blog/video-editing-30-free-tools-and-web-services-to-get-things-done/">hepsi burada</a></p><p>Bu yazı <a href="http://www.bildirgec.org/uye/sermen08">sermen08</a> tarafından <a href=" http://www.bildirgec.org/yazi/ucretsiz-10-adet-video-duzenleme ">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, 05 Mar 2009 15:03:00 GMT 210567@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/ucretsiz-10-adet-video-duzenleme sermen08 <div class="imajsag"><img src='http://www.bildirgec.org/imaj/pinkfloyd/44-00.png' alt="\"\"" border="0"><br></div>Internet Explorer'la çalışmak her seviyeden web tasarımcısı için bazen sorun olabilir. Ancak bu sorun olmak zorunda olacağı anlamına gelmiyor. Hepsi olmasa da pek çok Internet Explorer hatası, hatanın nasıl oluştuğunu anladıktan sonra kolayca düzeltilebilir. Bu yazımda özellikle giriş seviyesindeki kullanıcılar için çapraz tarayıcı uyumluluğunu sağlayabilmeleri için önemli problemleri ve çözümlerini listeledim. <p>Yazımda en çok kullanılan tarayıcı sürümleri olan Firefox 2+, Safari 3+ ve Internet Explorer 6+'ya odaklandım. Her ne kadar IE6'nın kullanım oranı gün geçtikçe düşüş gösteriyor olsa da, bu onu desteklememeniz gerektiği anlamına gelmez, zira halen pek çok kullanıcı hangi tarayıcı sürümünü kullandığını bilmemektedir. Eğer bu IE6 hatalarını biliyorsanız, tarayıcı üzerinde test yapmadan bile sitenizin doğru görünüp görünmediğini anlayabilirsiniz. Bu makale süper deneyimli web tasarımcılarına yönelik olmamakla birlikte IE6'nın çapraz tarayıcı uyumluluğuna yönelik gizlerini anlamanıza yardımcı olacaktır.</p> <p><strong>Özet</strong><br>Makalenin tamamını okumak istemeyenleriniz için aşağıda makalenin bir özetini bulabilirsiniz.</p> <ul> <li>Daima STRICT DOCTYPE ve standartlarla uyumlu HTML/CSS kullanın</li> <li>CSS'nizin en başında daima sıfırlama (CSS RESET) kullanın.</li> <li>Firefox'ta metin işleme sorunlarını gidermek için -moz-opacity:0.99, Safari'de ise text-shadow: #000 0 0 0 kullanın.</li> <li>Görselleri asla CSS ya da HTML ile yeniden boyutlandırmayın.</li> <li>Her tarayıcıda metinlerin nasıl işlendiğini test edin. Lucida kullanmayın.</li> <li>BODY üzerinde metni % ile boyutlandırıp sitenin geri kalanında em kullanarak metin boyutlandırması yapın.</li> <li>Üzerine float uygulanmış tüm anahat divleri <i>display: inline</i> ve <i>overwlow: hidden</i> içermeli.</li> <li>CSS3 seçicilerini kullanmayın.</li> <li>Alpha'yı yüklemediyseniz saydam PNG kullanmayın.</li> </ul> <p><!-- buradan kes --></p> <p><strong>Element Uyumsuzlukları</strong><br>Her tarayıcı farklı elementleri farklı şekillerde yorumlar - farklı miktarlarda boşluklar, marjlar, sınırlar vs. Bunun anlamı eğr siz öntanımlı stilleri kullanırsanız, kodunuz doğru olsa bile siteniz farklı tarayıcılarda farklı şekillerde görüntülenebilir.</p> <p><strong><i>Çözüm</i></strong><br>Yapmanız gereken ilk şey, ki pek çoğunuzun bunu bildiğini düşünüyorum, stillerinizi sıfırlamaktır. Sıfırlamak, stillerinizin en üst kısmına yerleştireceğiniz ve elementler üzerindeki boşlukları, marjları, sınırları ve diğer uyuşmazlıkları sıfırlayıp onları standart olarak yeniden inşa eden bir kod parçasıdır.</p> <p><a href="http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/">Eric Meyer'in reset.css dosyasını indirin</a> ve stillerinizin en başına yerleştirin. İşte bu kadar. Temiz, çapraz tarayıcı uyumlu stillere kavuştunuz.</p> <p><strong>Görsel İşleme</strong><br>IE6 ve IE7'nin her ikisi de yeniden boyutlandırılmış görselleri inanılmaz derecede kötü bir şekilde işler. Bir görselin boyutunu CSS ya da HTML kullanarak değiştirdiğinizde görsel inanılmaz derecede kötü görünür.</p> <p><strong><i>Çözüm</i></strong><br>Yapmayın. Görsellerinizi sitenize yerleştirmeden önce istediğiniz boyuta göre yeniden boyutlandırın.</p> <p><strong>Metin İşleme</strong><br>Tüm hataların IE'den kaynaklanmadığını söylemiştim. Safari 3+ açık renkli metinlerin koyu renkli arkaplan üzerinde işlenmesi sırasında bir soruna sahip. Kimileri bunun iyi ya da kötü olup olmadığı konusunda farklı görüşlere sahip olabilir, ancak ilgili metni daha aydınlık görüntülemenin bir yolu var. Safari 3.1'de standart metin aşağıdaki şekilde işlenmektedir.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/44-01.png' alt="\"\"" border="0"><br></div> <p><strong><i>Çözüm</i></strong><br>Oldukça kolay. Tek yapmanız gereken aşağıdaki stillemeyi CSS kodunuza dahil etmek.</p> <code>p {text-shadow: #000 0 0 0;}</code> <p>#000 kullandığınız arkaplan rengi olmalı. Seçtiğiniz elementlerde muhtemelen siz daha özgün olmak isteyeceksinizdir. Bunu BODY etiketi üzerinde kullanmanızı önermem. Düzeltmek isteyeceğiniz diğer elementler li, dt, dd, blockquote vs olabilir. Daha 'ince' görüntülemek istediğiniz tüm elementlerde bu düzeltmeyi kullanın.</p> <p><i>Bazıları Safari'de tipografi için bunun iyi olmadığını söylüyorlar ve metnin standart işleme ile daha güzel göründüğünü söylüyorlar ki ben de onlara katılıyorum. Ancak bazılarının buna katılmadığını da biliyorum. Ayrıca arkaplan rengine, metin rengine ve metin seçimine karar verirken hangisinin daha iyi olduğuna da karar veremeyiz. Bu durumda seçim tamamen kişisel tercihinize ve sitenizin içeriğinin nasıl olduğuna kalmış.</i></p> <p>Bu düzeltmeyi Firefox üzerinde kullanmak için opacity düzeltmesini kullanacağız.</p> <code>p {-moz-opacity: 0.99;}</code> <p>Bu düzeltmeyi kullanırken dikkatli olmalısınız zira düzeltmenin uygulandığı element içerisinde bir Flash dosyası bulunuyorsa ilgili dosya doğru görüntülenmemektedir.</p> <p>İlgili düzeltmeler uygulandıktan sonra metnimiz aşağıdaki şekilde görünecektir.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/44-02.png' alt="\"\"" border="0"><br></div> <p><strong>Yazıtipi Seçimi</strong><br>Hepimizin kullandığı bazı ortak web yazı tipleri vardır - Arial, Georgia, Verdana vb. Hem PC hem de Mac kullanıcılarının bilgisayarlarında bulunan yazı tipleri de mevcuttur - Century Gothic, Arial Narrow vs. Buna rağmen farklı tarayıcıların ve işletim sistemlerinin yazı tipi işleme yöntemleri farklıdır ve sizin bu farklılıkların farkında olmanız gerekir, zira yanlış bir yazı tipi kullanırsanız siteniz çok çirkin görünebilir.</p> <p><strong><i>Çözüm</i></strong><br>Kullanacağınız yazı tipinin seçimi tamamen sizin tercihinize bağlıdır. Yazı tipini kullanmak güvenli olduğu sürece sorun yoktur ancak bu işleme sorunlarının farkında olmanız gerekir. Kullanmamanız gereken bir yazı tipi muhtemelen Lucida Grande/Sans zira IE üzerinde bu yazı tipi korkunç görünüyor. Yazı tipinin Safari'de (Mac) nasıl işlendiğine bir bakın.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/44-03.png' alt="\"\"" border="0"><br></div> <p>Güzel değil mi? Internet Explorer (PC)'de yazı tipinin bu şekilde görüntüleniyor olması ise çok kötü.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/44-04.png' alt="\"\"" border="0"><br></div> <p><i>Kimileri Lucida Sans yazı tipinin de işletim sisteminin ClearType özelliği açıldığında düzgün göründüğünü belirtirken, kimileri de halen yanlış göründüğünü belirtiyor. Bu durumda yapılması gereken en doğru şey muhtemelen Lucida Sans kullanmamak olacaktır. Bunun yerine Arial ya da başka bir san-serif yazı tipi kullanmayı tercih etmelisiniz.</i></p> <p><strong>Yazıtipi Boyutlama</strong><br>Metni yeniden boyutlandırma işlemi farklı tarayıcılarda ve işletim sistemlerinde farklı şekillerde işlenir. Örneğin IE pixel kullanılarak boyutlandırılmış bir metni yeniden boyutlandırmayacaktır. Eğer metinleri em kullanarak boyutlandırırsak, o zaman da IE metni yeniden boyutlandırdığımızda boyutunu abartacaktır.</p> <p><strong><i>Çözüm</i></strong><br>Yazı tipi boyutlandırmaya yönelik kendinize referans alabileceğiniz en iyi kaynak, Richard Rutter'ın yazdığı <a href="http://www.alistapart.com/articles/howtosizetextincss">CSS'de Metin Nasıl Boyutlandırılmalıdır</a> makalesidir. Sonuç ise, metninizi BODY elementi üzerinde yüzde kullanarak boyutlandırıp, stilin geri kalanında em kullanarak boyutu belirlemek. Satır yüksekliği için de yine pixel yerine em kullanırsanız farklı tarayıcılarda doğru işleme sonuçlarını alırsanız.</p> <p>Burada hatırlamanız gereken şey öntanımlı yazı tipi boyutunun 16px olduğudur. Bu durumda örneğin yazı tipini 12px'e dönüştürmek için kullanmamız gereken kod şudur:</p> <code>body {font-size: 75%; line-height: 1.5 em;}</code> <p>Şimdi boyutlandırmanızı em kullanarak yapabilirsiniz:</p> <code>h1 {font-size: 3em;}</code> <p>Önerilen bir diğer teknik ise yazı tipinizi önce 10px'e indirgemektir. Bu durmda metninizi em kullanarak yeniden boyutlandırmak daha kolay olacaktır. Örneğin:</p> <code>body {font-size: 62.5%; line-height: 1.5em;}</code><br><code>h1 {font-size: 1.8em; /* 18px */}</code><br><code>p {font-size: 1.2em; /* 12px */}</code> <p>Bu tekniği kullanırsanız dikkat etmeniz gereken bir konu var ki o da insanların Internet Explorer üzerinde küçük yazı tipi seçeneğini kullanmaları durumunda metniniz okunamayacak derecede küçük olabilir. Her ne kadar bu seçeneği bilinçli olarak seçen kullanıcı sayısının yok denecek kadar az olduğunu düşünsem de bu ayrıntıyı bilmenizde yarar var.</p> <p><strong>Yüzen Elementlerde Çifte Marj</strong><br>CSS Anahatlarımızı birbiri ardına yüzen (float) divler kullanar oluştururuz, tıpkı bir tür yatay tetris gibi. Satırın sonuna gelindiğinde ise satıra sığmayan div bir sonraki satıra kayar. Bir ızgara oluşturmak için sık kullanılan yöntem aşağıdaki gibidir:</p> <code>#content {float: right; width: 300px; margin-right: 10px;}</code><br><code>#sidebar {float: right; width: 100px;}</code> <p>Bu kod "normal" bir tarayıcıda aşağıdaki gibi görünmelidir.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/44-05.png' alt="\"\"" border="0"><br></div> <p>Ancak IE'de bu aşağıdaki gibi görüntülenecektir.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/44-06.png' alt="\"\"" border="0"><br></div> <p>Gördüğünüz üzere marj iki defa işlendi. Yüzen element ile aynı yönde bulunan her marj iki defa işlenecektir. Neden diye sormayın, IE bu. Bunun anlamı sol tarafaki elemente uygulanan marj, kodda belirtilenin aksine 20px olarak işlenecektir ki bu da muhtemelen anahattı bozacaktır.</p> <p><strong><i>Çözüm</i></strong><br>Bu sorunu gidermek için anahat divlerinize <i>display: inline</i> yerleştirmelisiniz.</p> <code>#content {float: right; width: 300px; margin-right: 10px; display: inline;}</code><br><code>#sidebar {float: right; width: 100px; display: inline;}</code> <p>Bu sayede marj hatasını da gidermiş olduk. Her ne kadar bu yüzen element ile aynı yöndeki tüm marj elementlerini etkilese de bu düzeltmeyi yüzen tüm div elementlerine eklemek kullanışlı olabilir. Ne zaman yüzen tarafta marj kullanmak isteyeceğinizi önceden kestiremezsiniz. Bu kod diğer hiçbir tarayıcıyı etkilemeyeceğinden kullanışlı olabilir.</p> <p><strong>Genişleyen Kutu</strong><br>Genişleyen kutu problemi pek çok CSS anahattında sorun oluşturur. birbiri ardına yüzen elementler içeren ve öntanımlı genişlikleri bulunan divleri içeren bir anahat kullanmanız durumunda eğer ilgili divin genişliğinden daha geniş bir genişliğe sahip bir görsel ya da boşluk içermeyen bir metin kullanmanız durumunda ilgili anahat IE6'de yanlış görüntülenecektir. Örneğimize bir bakalım:</p> <code>#content {float: right; width: 300px; margin-right: 10px; display: inline;}</code><br><code>#sidebar {float: right; width: 100px; display: inline;}</code> <p>Pek çok tarayıcıda bu aşağıdaki şekilde işlenecektir:</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/44-07.png' alt="\"\"" border="0"><br></div> <p>Buna rağmen IE6'da anahattımız bozulacaktır:</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/44-08.png' alt="\"\"" border="0"><br></div> <p><strong><i>Çözüm</i></strong><br>Burada kullanacağımız çözüm <i>overflow</i> özelliğini kullanmaktır. Eğer <i>overflow: hidden</i> değerini anahat divlerine dahil ederseniz, anahat IE6'de bozulmayacaktır.</p> <code>#content {float: right; width: 300px; margin-right: 10px; display: inline; overflow: hidden;}</code><br><code>#sidebar {float: right; width: 100px; display: inline; overflow: hidden;}</code> <p>Her ne kadar ekleyeceğiniz bu kod sorunu giderse de bazı karmaşık anahatlarda başka sorunlara yol açabilir. Bunun yanı sıra IE6 dışındaki tarayıcılarda metnin otomatik olarak iki satıra bölümlenmesinin aksine alana sığmayan metnin görünmemesine neden olacaktır.</p> <p><strong>Yüzen Elementleri Kapsamak</strong><br>Burada anlatmak istediğimiz şey kapsayıcı bir divin içerisindeki divleri doğru bir şekilde kapsamamasıdır. Aşağıdaki örneğe bir bakın.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/44-09.png' alt="\"\"" border="0"><br></div> <p>Kapsayıcının içerisindeki divleri nasıl doğru bir şekilde kapsadığını gördünüz mü? Olması gereken de bu zaten. Buna rağmen bazen bu şekilde sonuçlanmayıp aşağıdaki gibi bir hal alabiliyor.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/44-10.png' alt="\"\"" border="0"><br></div> <p>Kapsayıcı doğru bir şekilde içerisindeki divleri kapsamıyor. Muhtemelen kapsayıcınıza bir arkaplan resmi atamadığınız sürece bunu fark etmeyeceksinizdir.</p> <p><strong><i>Çözüm</i></strong><br>Bu sorunu gidermeye yönelik birkaç çözüm bulunmakla birlikte kullanılabilecek en iyi yöntem kapsayıcınıza <i>overflow: auto;</i> ya da <i>overflow: hidden</i> değerlerinden birisini atamaktır.</p> <code>#container {width: 966px; margin: 0 auto; overflow: auto;}</code> <p><i>overflow: auto</i> değerinin Firefox üzerinde bazen sorunlara yol açabileceğini unutmayın. Eğer bunu kullandıktan sonra bir sorunla karşılaşırsanız, onun yerine <i>overflow: hidden</i> kullanmayı deneyin. Eğer bu da sorun oluşturuyorsa o zaman <a href="http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/">şuradaki makaleye</a> bir göz atın. Bunu eklemenin dışında IE6 üzerinde anahattınızın tetiklenmesi gerektiğini de unutmayın. Bunu elementinize yükseklik ve genişlik atayarak yapabilrsiniz. Eğer kapsayıcınıza bir genişlik değeri vermek istemiyorsanız o zaman <i>height: 1%;</i> ya da <i>zoom: 1;</i> değerlerinden birini verebilirsiniz.</p> <p><strong>CSS Seçicileri</strong><br>Her ne kadar hepimiz CSS3 seçicilerini kullanmaya can atsak da, IE6 bu seçicilerin büyük bir kısmını desteklememektedir. Bırakın CSS3'ü, IE6'nın desteklemediği CSS2 seçicileri bile vardır. İşte kullanmamanız gereken seçicilerin bir listesi:</p> <ul> <li>E > F</li> <li>E + F</li> <li>E ~ F</li> <li>:root</li> <li>:last-child</li> <li>:only-child</li> <li>:nth-child()</li> <li>:nth-last-child()</li> <li>:first-of-type</li> <li>:last-of-type</li> <li>:only-of-type</li> <li>:nth-of-type()</li> <li>:nth-last-of-type()</li> <li>:empty</li> <li>:not()</li> <li>:target</li> <li>:enable</li> <li>:disabled</li> <li>:checked</li> <li>E[değer] seçicilerinden herhangi biri</li> <li>:first-child</li> <li>:lang()</li> <li>:before</li> <li>::before</li> <li>:after</li> <li>::after</li> </ul> <p>Elbette bu seçicilerin pek çoğu daha Firefox 3 üzerinde de desteklenmiyor. Desteklenen seçicilerin tam bir listesi için evotech.net üzerinde yer alan <a href="http://www.evotech.net/blog/2008/05/browser-css-selector-support/">tarayıcılarda css seçiciler için destek</a> yazısına bir göz atın.</p> <p><strong><i>Çözüm</i></strong><br>Standart seçicileri kullanmaya devam edin. Sadece IE üzerinde çok önemli bir değişiklik yapmayacağı sürece E + F, F, E > F, E ~ F seçicilerini kullanın. Eğer <strong>gerçekten</strong> bu seçicileri kullanmak istiyorsanız, o zaman IE8.js'yi deneyebilirsiniz. Bu JavaScript kütüphanesi IE6'ya seçiciler için daha iyi destek sunmasına rağmen sitenizi yavaşlatacaktır. Ancak biz IE6 kullanıcılarını dikkate almıyoruz, öyle değil mi?</p> <p><strong>PNG Saydamlığı</strong><br>IE6 PNGler üzerinde alfa saydamlığı desteklemiyor. Bu muhtemelen IE üzerinde gördüğümüz en rahatsız edici sorun.</p> <p><strong><i>Çözüm</i></strong><br>Bu problem için bir dizi çözüm bulunuyor. Ya IE'ye özgü bir stil şablonunda AlphaImageLoader'ı kullanacaksınız ya da bu sorunu gidermek için oluşturulan çeşitli JavaScriptlerden birine başvuracaksınız. Hangisini tercih ederseniz edin, tekrar eden saydam arkaplan görsellerini IE6 üzerinde kullanabilmenin bir yolu yok.</p> <p>AlphaImageLoader'ı kullanmak biraz zahmetli. Saydam olan tüm PNG görsellerine aşağıdaki özellikleri ekleyin (CSS'nizin doğrulanabilmesini istiyorsanız o zaman bu kodu IE'ye özgü bir stil şablonu içerisine yerleştirin).</p> <code>.saydam {background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.bildirgec.org/images/transparent.png', sizingMethod='image/scale/crop');}</code> <p>Tüm PNG görsellerinizi "saydam" sınıfına dahil ettiğinizi varsayarsak yukarıdaki kodu kullanabilirsiniz. Ayrıca 1x1 saydam bir png oluşturup src değerinde onun konumunu belirtmeniz de gerekiyor. Geçtiğimiz yıl <a href="http://24ways.org/2007/supersleight-transparent-png-in-ie6">24ways üzerinde</a> bu konuda muhteşem bir makale yayımlandı.</p> <p>Bu sorunu giderebileceğiniz daha da iyi bir yöntem, <a href="http://www.bildirgec.org/yazi/blueprint-css-framework-unu-kullanmak">Blueprint CSS Çatısı</a>'nın geliştiricisi Olav Bjorkoy'un <a href="http://bjorkoy.com/past/2007/4/8/the_easiest_way_to_png/">şuradaki</a> makalesinde anlattığı yöntemi uygulamak. AlphaImageLoader'e benzer bir yöntem ancak onun yerine saydamlığı tetikleyen bir betiğe bağlantı veriyorsunuz.</p> <p>Kullanabileceğiniz üçüncü yöntem ise IE8.js'yi kullanmak. Bu yöntem öncekinden de güvenli ve bir sorunla karşılaşmanız neredeyse mümkün değil. HTML'niz üzerinde bu betiğe bağlantı verin ve betik dosya adı -trans ile biten tüm png dosyalarının saydamlık sorununu giderecektir (örneğin resim-trans.png).</p> <p><strong>Tüm bu yöntemleri kullanmanıza rağmen saydam pngler ile sorun yaşamanız halen olasıdır. Bu yöntemlerden herhangi birini kullandıktan sonra IE6 üzerinde sağlam bir test uygulamayı unutmayın.</strong></p> <ul> <li><strong>Kaynak:</strong> <a href="http://anthonyshort.com.au/blog/comments/how-to-get-cross-browser-compatibility-everytime/">Anthony Short</a></li> </ul> <strong>CSS İle İlgili Yazdığım Diğer Yazılar</strong> <ul> <li><a href="http://www.bildirgec.org/yazi/css-de-uzman-olmanizi-saglayacak">CSS'de Uzman Olmanızı Sağlayacak 20 CSS Dersi</a></li> <li><a href="http://www.bildirgec.org/yazi/960-css-catisina-yakindan-bakis">960 CSS Çatısına Yakından Bakış</a></li> <li><a href="http://www.bildirgec.org/yazi/ogrenilmesi-gereken-15-css-hilesi">Öğrenilmesi Gereken 15 CSS Hilesi</a></li> <li><a href="http://www.bildirgec.org/yazi/web-tasarimcilari-icin-kullanisli-12">Web Tasarımcıları İçin 12 CSS Framework'ü, Şablonu ve Kod Sitesi</a></li> <li><a href="http://www.bildirgec.org/yazi/her-web-tasarimcisinin-ogrenmesi-gereken">Her Web Tasarımcısının Öğrenmesi Gereken 9 Önemli CSS Yeteneği</a></li> <li><a href="http://www.bildirgec.org/yazi/modern-css-de-altin-oran">Modern CSS'de Altın Oran</a></li> <li><a href="http://www.bildirgec.org/yazi/sadece-css-ile-olusturulmus-animasyonlu">Sadece CSS İle Oluşturulmuş Animasyonlu İlerleme Çubuğu</a></li> <li><a href="http://www.bildirgec.org/yazi/pixelleri-emlere-kolayca-donusturun">Pixelleri emlere Kolayca Dönüştürün</a></li> <li><a href="http://www.bildirgec.org/yazi/web-tasariminda-altin-oran">Web Tasarımında Altın Oran</a></li> <li><a href="http://www.bildirgec.org/yazi/blueprint-css-framework-unu-kullanmak">Blueprint CSS Framework'ünü Kullanmak</a></li> <li><a href="http://www.bildirgec.org/yazi/sencss-layout-disindaki-hersey-icin">SenCSs: Layout Dışındaki Herşey İçin CSS Framework'ü</a></li> </ul><p>Bu yazı <a href="http://www.bildirgec.org/uye/sermen08">sermen08</a> tarafından <a href=" http://www.bildirgec.org/yazi/capraz-tarayici-uyumlulugu-icin-altin ">bildirgec.org</a> adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.</p><hr>Pilli Projeleri: <a href="http://pilli.com">Pilli.com: Kolektif Bağımsız İçerik</a> | <a href="http://sosyomat.com">Sosyomat.com: Arkadaşını Etiketle</a> | <a href="http://put.io">Put.io: Online Cloud Storage</a> Mon, 16 Feb 2009 19:13:00 GMT 197795@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/capraz-tarayici-uyumlulugu-icin-altin sermen08 <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pisho/windowslivewritermusthavefontsforanydesigner-12dccmarcelle-thumb.jpg' alt="Fontlar" border="0"><br>Fontlar</div> <p>"<a href="http://www.bildirgec.org/yazi/arsivinizde-bulunmasi-gereken-37-adet">Arşivinizde bulunması gereken 37 adet font</a>" yazısından sonra bu kez de <a href="http://acomment.net">acomment.net</a> sitesinin derlediği webmaster ve web tasarımcılar için 50'den fazla kullanışlı yazı fontunu sizlere sunacağım.</p> <p><a href="http://despicablehero.deviantart.com/art/Cash-Font-63640433">CashFont</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pisho/windowslivewritermusthavefontsforanydesigner-12dcccash-font-by-despicablehero-3.jpg' alt="\"\"" border="0"><br></div> <p><a href="http://glue.deviantart.com/art/Eight-One-45198536">EightOne</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pisho/windowslivewritermusthavefontsforanydesigner-12dcceight-one-by-glue-thumb.jpg' alt="\"\"" border="0"><br></div> <p><a href="http://depression02.deviantart.com/art/AvantGarde-ALT-77984674">AvantGarde ALT</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pisho/windowslivewritermusthavefontsforanydesigner-12dccurban-thumb.png' alt="\"\"" border="0"><br></div> <p><a href="http://bigyellowbiohazard.deviantart.com/art/surrounding-68530037">Surrounding</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pisho/windowslivewritermusthavefontsforanydesigner-12dccsurrounding-3.png' alt="\"\"" border="0"><br></div> <p><a href="http://jelloween.deviantart.com/art/Font-AMBROSIA-demo-39421709">Ambrosia</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pisho/windowslivewritermusthavefontsforanydesigner-12dccambrosia-thumb.png' alt="\"\"" border="0"><br></div> <p><a href="http://doppyo.deviantart.com/art/Avee-Black-80646091">Avee Black</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pisho/windowslivewritermusthavefontsforanydesigner-12dccnopq-3.jpg' alt="\"\"" border="0"><br></div> <p><a href="http://ficod.deviantart.com/art/telegrafico-65509498">Telegrafico</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pisho/windowslivewritermusthavefontsforanydesigner-12dcctelegrafico-by-ficod-thumb.jpg' alt="\"\"" border="0"><br></div> <p><a href="http://www.tenbytwenty.com/products/typefaces/nevis">Nevis</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pisho/windowslivewritermusthavefontsforanydesigner-12dccmain-nevis-thumb.gif' alt="\"\"" border="0"><br></div> <p><a href="http://paulw.deviantart.com/art/Evolution-True-Type-Font-83261584">Evolution True Type Font</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pisho/windowslivewritermusthavefontsforanydesigner-12dccevolution-true-type-font-by-paulw-thumb.jpg' alt="\"\"" border="0"><br></div> <p><a href="http://www.urbanfonts.com/fonts/Everson_Mono_Latin.htm">Everson</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pisho/windowslivewritermusthavefontsforanydesigner-12dcceverson-thumb.png' alt="\"\"" border="0"><br></div> <p><a href="http://synergydigital.deviantart.com/art/Grunge-Serifia-Font-OTF-93046795">Grunge Serifia Font OTF</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pisho/windowslivewritermusthavefontsforanydesigner-12dccgrunge-serifia-font-otf-by-synergydigital-thumb.jpg' alt="\"\"" border="0"><br></div> <p><a href="http://www.dafont.com/marcelle.font">Marcelle</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pisho/windowslivewritermusthavefontsforanydesigner-12dccmarcelle-thumb.jpg' alt="\"\"" border="0"><br></div> <p><a href="http://thespook.deviantart.com/art/Virmeen-t-Kirrrl-34659210">Virmeen t’Kirrrl</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pisho/windowslivewritermusthavefontsforanydesigner-12dccvirmeen-thumb.jpg' alt="\"\"" border="0"><br></div> <p><a href="http://www.dafont.com/jellyka-estrya-s-handwriting.font">Jellyka - Estrya’s Handwriting</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pisho/windowslivewritermusthavefontsforanydesigner-12dcchandwritting-1-3.jpg' alt="\"\"" border="0"><br></div> <p><a href="http://www.fontriver.com/font/sketch_rockwell/">Sketch Rockwell Font</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pisho/windowslivewritermusthavefontsforanydesigner-12dccsketch-rockwell-3.png' alt="\"\"" border="0"><br></div> <p><a href="http://www.fontspace.com/divide-by-zero/two-turtle-doves">Two Turtle Doves</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pisho/windowslivewritermusthavefontsforanydesigner-12dcctwo-turtle-dove-3.png' alt="\"\"" border="0"><br></div> <p><a href="http://www.dafont.com/pointy.font">Pointy</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pisho/windowslivewritermusthavefontsforanydesigner-12dccpointy-3.jpg' alt="\"\"" border="0"><br></div> <p><a href="http://www.dafont.com/28-days-later.font">28 Days Later</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pisho/windowslivewritermusthavefontsforanydesigner-12dcc28dayslater-3.png' alt="\"\"" border="0"><br></div> <p><a href="http://www.dafont.com/green-piloww.font">Green Piloww</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pisho/windowslivewritermusthavefontsforanydesigner-12dccgreenpiloww-3.png' alt="\"\"" border="0"><br></div> <p>Mia’s Scribblings<div class="imajorta"><img src='http://www.bildirgec.org/imaj/pisho/windowslivewritermusthavefontsforanydesigner-12dccmias-thumb.png' alt="\"\"" border="0"><br></div></p> <p><a href="http://www.dafont.com/-ank.font">[ank] font</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pisho/windowslivewritermusthavefontsforanydesigner-12dccank-thumb.png' alt="\"\"" border="0"><br></div> <p><a href="http://www.dafont.com/refuse.font">Refuse Trip</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pisho/windowslivewritermusthavefontsforanydesigner-12dccrefusetrip-thumb.png' alt="\"\"" border="0"><br></div> <p><a href="http://www.dafont.com/fail.font">Fail</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pisho/windowslivewritermusthavefontsforanydesigner-12dccfail-thumb.png' alt="\"\"" border="0"><br></div> <p><a href="http://www.dafont.com/fff-tusj.font">FFF Tusj</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pisho/windowslivewritermusthavefontsforanydesigner-12dccfff-3.png' alt="\"\"" border="0"><br></div> <p><a href="http://www.dafont.com/windsong.font">Windsong</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pisho/windowslivewritermusthavefontsforanydesigner-12dccwindsong-thumb.png' alt="\"\"" border="0"><br></div> <p><a href="http://www.dafont.com/positiv-a.font">Positiv-a</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pisho/windowslivewritermusthavefontsforanydesigner-12dccpositiv-a-thumb.png' alt="\"\"" border="0"><br></div> <p><a href="http://www.dafont.com/carboncillo-palo.font">Carboncillo Palo</a></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pisho/windowslivewritermusthavefontsforanydesigner-12dcccarboncillo-thumb.png' alt="\"\"" border="0"><br></div> <p>liste gerçekten çok uzun.. ben birçoğunu ekledim, ğer daha fazlasını görmek istiyorsanız devamı için <a href="http://acomment.net/most-practical-free-fonts-for-designers-53-of-the-best/485">şuraya</a> gözatabilirsiniz.</p><p>Bu yazı <a href="http://www.bildirgec.org/uye/sermen08">sermen08</a> tarafından <a href=" http://www.bildirgec.org/yazi/web-tasarimcilar-icin-en-kullanisli ">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, 06 Nov 2008 10:07:00 GMT 195576@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/web-tasarimcilar-icin-en-kullanisli sermen08 <p>Bir web uygulaması tasarlarken <a href="http://www.bildirgec.org/etiket/ui">kullanıcı arabirimi</a>ni kolay kullanılabilecek şekilde tasarlamak önemlidir. Gezinti (<a href="http://www.bildirgec.org/etiket/navigasyon">navigasyon</a>) bağlantılarının yanı sıra <a href="http://www.bildirgec.org/etiket/simge">simge</a>ler kullanmak bu hedefe ulaşmak için üzerinde çalışmamız gereken önemli bir görevdir. Ancak uzun zamanınızı alacak <a href="http://www.bildirgec.org/etiket/simge-setleri">simge setleri</a>ni baştan oluşturmak yerine neden başkalarının sizler için oluşturduğu simge setlerini kullanmayasınız? Bu yazıda web uygulamaları geliştirmek isteyen kullanıcıların uygulamalarında kullanabilecekleri <a href="http://webdesignledger.com/freebies/21-best-icon-sets-for-designing-web-apps">en başarılı simge setlerini</a> listelemeye çalıştım.</p> <ul> <li><a href="http://jonas.seph.ws/stuff/drf.zip">Jonas Rask Design Icons for Developers</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/11-01-icons-app-9.jpg' alt="Jonas Rask Design Icons for Developers" border="0"><br>Jonas Rask Design Icons for Developers</div> <ul> <li><a href="http://www.aspneticons.com/">ASP.NET Icons</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/11-02-icons-app-1.jpg' alt="ASP.NET Icons" border="0"><br>ASP.NET Icons</div> <p><!-- buradan kes --></p> <ul> <li><a href="http://tango.freedesktop.org/Tango_Icon_Library">Tango Icon Library</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/11-03-icons-app-10.jpg' alt="Tango Icon Library" border="0"><br>Tango Icon Library</div> <ul> <li><a href="http://dryicons.com/free-icons/preview/aesthetica/">Aesthetica Icons</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/11-04-icons-app-13.jpg' alt="Aesthetica Icons" border="0"><br>Aesthetica Icons</div> <ul> <li><a href="http://www.pinvoke.com/icon/image/diagona.png">Diagona Icons</a> by <a href="http://www.pinvoke.com/">pinvoke</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/11-05-icons-app-2.jpg' alt="Diagona Icons" border="0"><br>Diagona Icons</div> <ul> <li><a href="http://www.pinvoke.com/icon/image/fugue_all.png">Fugue Icons</a> by <a href="http://www.pinvoke.com/">pinvoke</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/11-06-icons-app-3.jpg' alt="Fugue Icons" border="0"><br>Fugue Icons</div> <ul> <li><a href="http://www.famfamfam.com/lab/icons/silk/">FAMFAMFAM - Silk</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/11-07-icons-app-4.jpg' alt="FAMFAMFAM - Silk" border="0"><br>FAMFAMFAM - Silk</div> <ul> <li><a href="http://www.webappers.com/2008/02/12/webappers-released-free-web-application-icons-set/">Web Application Icon Set</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/11-08-icons-app-5.jpg' alt="Web Application Icon Set" border="0"><br>Web Application Icon Set</div> <ul> <li><a href="http://dryicons.com/free-icons/preview/coquette-icons-set/#coquette-icons-set_icons_preview">Coquette Icons</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/11-09-icons-app-6.jpg' alt="Coquette Icons" border="0"><br>Coquette Icons</div> <ul> <li><a href="http://www.icojoy.com/articles/26/">Free web development icons #4 SE</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/11-10-icons-app-7.jpg' alt="Coquette IconsFree web development icons #4 SE" border="0"><br>Coquette IconsFree web development icons #4 SE</div> <ul> <li><a href="http://sekkyumu.deviantart.com/art/Developpers-Icons-63052312">Developpers Icons</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/11-11-icons-app-8.jpg' alt="Developpers Icons" border="0"><br>Developpers Icons</div> <ul> <li><a href="http://itweek.deviantart.com/art/Knob-Buttons-Toolbar-icons-73463960">Knob Buttons Toolbar Icons</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/11-12-icons-app-11.jpg' alt="Knob Buttons Toolbar Icons" border="0"><br>Knob Buttons Toolbar Icons</div> <ul> <li><a href="http://dryicons.com/free-icons/preview/simplistica/">Simplistica Icons</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/11-13-icons-app-12.jpg' alt="Simplistica Icons" border="0"><br>Simplistica Icons</div> <ul> <li><a href="http://wefunction.com/2008/07/function-free-icon-set/">Function Icon Set</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/11-14-icons-app-14.jpg' alt="Function Icon Set" border="0"><br>Function Icon Set</div> <ul> <li><a href="http://min.frexy.com/articles/category/milky/">Milky</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/11-15-icons-app-15.jpg' alt="Milky" border="0"><br>Milky</div> <ul> <li><a href="http://www.smashingmagazine.com/2008/09/02/simplicio-a-free-icon-set/">Simplico</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/11-16-icons-app-16.jpg' alt="Simplico" border="0"><br>Simplico</div> <ul> <li><a href="http://www.smashingmagazine.com/2008/10/09/finance-and-applications-a-free-icon-set/">Fresh</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/11-17-icons-app-17.jpg' alt="Fresh" border="0"><br>Fresh</div> <ul> <li><a href="http://www.famfamfam.com/lab/icons/mini/">FAMFAMFAM - Mini</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/11-18-icons-app-18.jpg' alt="FAMFAMFAM - Mini" border="0"><br>FAMFAMFAM - Mini</div> <ul> <li><a href="http://commons.wikimedia.org/wiki/Crystal_Clear">Crystal Clear</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/11-19-icons-app-19.jpg' alt="Crystal Clear" border="0"><br>Crystal Clear</div> <ul> <li><a href="http://www.monofactor.com/free-vector-icon-set-1-25-icons/">Monofactor Vector Icons</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/11-20-icons-app-20.jpg' alt="Monofactor Vector Icons" border="0"><br>Monofactor Vector Icons</div> <ul> <li><a href="http://www.vistaicons.com/icon/i143s0/ivista_icon_pack_2.htm">IVista Icon Pack 2</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/11-21-icons-app-21.jpg' alt="IVista Icon Pack 2" border="0"><br>IVista Icon Pack 2</div><p>Bu yazı <a href="http://www.bildirgec.org/uye/sermen08">sermen08</a> tarafından <a href=" http://www.bildirgec.org/yazi/web-uygulamalari-icin-en-iyi ">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> Tue, 13 Jan 2009 14:15:00 GMT 191754@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/web-uygulamalari-icin-en-iyi sermen08 <div class="imajsol"><img src='http://www.bildirgec.org/imaj/pinkfloyd/12-00-excellent-jquery-nav-thumb.jpg' alt="\"\"" border="0"><br></div><a href="http://www.bildirgec.org/etiket/jquery/">jQuery</a>'nin geliştiricilere sağladığı avantajlar saymakla bitmez... <a href="http://www.bildirgec.org/etiket/flash/">Flash</a>'ın aksine web sitenizin içeriğini arama motorları tarafından erişilebilir kılarken güzel görünümlü animasyonları sitenize entegre edebilmenizin yanısıra, sitenizin <a href="http://www.bildirgec.org/bekleyen/web-tasarimcilari-icin-10-kullanilirlik">kullanılırlığını</a> da arttırması sebebiyle jQuery, modern web geliştiricilerinin bir numaralı tercihi olma yolunda hızla ilerliyor. <p>Bu yazıda jQuery kullanarak navigasyonu temiz, keskin ve etkin bir biçimde yansıtan 8 siteyi listelemeye çalıştım. Bu siteler, jQuery kütüphanesini sadece bazı temel efektleri eklemekten çok daha fazlasını yapmak için kullanmışlar ve bunu da başarmışlar.</p> <p>Eğer siz de jQuery'nin büyülü dünyasındaki yerinizi almak istiyorsanız, daha önce yayımladığım size sıfırdan<a href="http://www.bildirgec.org/yazi/size-sifirdan-jquery-ogretecek-15"> jquery öğretecek 15 kayna</a> adlı makale size yardımcı olacaktır.</p> <ul> <li><a href="http://carrotcreative.com/">Carrot Creative</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/12-01-carrot-creative-nav.jpg' alt="Carrot Creative" border="0"><br>Carrot Creative</div> <p><!-- buradan kes --></p> <ul> <li><a href="http://widgets.grooveshark.com/">Grooveshark Widgets</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/12-02-grooveshark-nav.jpg' alt="Grooveshark Widgets" border="0"><br>Grooveshark Widgets</div> <ul> <li><a href="http://aviary.com/home">Aviary</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/12-03-aviary-nav.jpg' alt="Aviary" border="0"><br>Aviary</div> <ul> <li><a href="http://wpcoder.com/">WP Coder</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/12-04-wpcoder-nav.jpg' alt="WP Coder" border="0"><br>WP Coder</div> <ul> <li><a href="http://www.mattdempsey.com/work.php">Matt Dempsey</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/12-05-dempsey-nav.jpg' alt="Matt Dempsey" border="0"><br>Matt Dempsey</div> <ul> <li><a href="http://www.brightcreative.com/portfolio/">Bright Creative</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/12-06-bright-creative-nav.jpg' alt="Bright Creative" border="0"><br>Bright Creative</div> <ul> <li><a href="http://www.redcrownstudio.com/">Red Crown Studio</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/12-07-red-crown-nav.jpg' alt="Red Crown Studio" border="0"><br>Red Crown Studio</div> <ul> <li><a href="http://www.macheist.com/loot/">MacHeist Loot</a></li> </ul> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/pinkfloyd/12-08-macheist-loot-nav.jpg' alt="MacHeist Loot" border="0"><br>MacHeist Loot</div> <p><strong>Kaynak:</strong> <a href="http://buildinternet.com/2009/01/8-sites-with-excellent-jquery-navigation/">Build !nternet</a></p> <p>Sizin de beğendiğiniz, navigasyon amaçlı jQuery kullanan siteler neler? Yorumlarınızla paylaşın.</p><p>Bu yazı <a href="http://www.bildirgec.org/uye/sermen08">sermen08</a> tarafından <a href=" http://www.bildirgec.org/yazi/mukemmel-jquery-navigasyonuna-sahip-8 ">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, 14 Jan 2009 07:47:00 GMT 191753@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/mukemmel-jquery-navigasyonuna-sahip-8 sermen08 <div class="imajorta"><img src='http://www.bildirgec.org/imaj/MisterMadDog/flawless-service.jpg' alt="\"\"" border="0"><br></div> <p><em><a href="http://www.gomediazine.com/design-tip/flawless-service/">Şu adresteki</a> dersin bir özetini geçiyorum size. <a href="http://www.gomediazine.com/author/wbeachy/">Bill</a>'in daha önce çevirmiş olduğum bir <a href="http://www.bildirgec.org/yazi/tasariminizi-musteriye-sevdirmeniz-icin-13">yazısına </a>oldukça benzeyen ancak farklılıklar taşıması açısından çevirmeye değer bulduğum bu yazısı, Bill'in "kusursuz servis" üzerine verdiği bir dersten derlenen ve birkaç e-mail üzerinden çalışarak oluşturduğu içerikten daha fazlası olmayan hoş bir tavsiyeler bütünü.</em></p> <p><strong>1. İletişim bilgilerinizi belirleyin.</strong> Kim olduğunuzu açık bir şekilde belirtin, nasıl iletişime geçileceğini ve iletişim bilgilerini yazın. Birden fazla kişi yardımcı oluyorsa müşterinin bir "lider" seçmesini sağlamak oldukça işe yarardır. Tek bir lider seçin, bu sayede o liderin size açık, net bir bilgi vermesini sağlamış olursunuz.</p> <p><strong>2. İşin detaylarını belirleyin.</strong> Son bitim tarihi ne? Tasarım hangi formatta verilecek? Kesin bitim tarihi var mı? Gerekirse bir zaman çizelgesi hazırlayın. Bunların basit şeyler olduğunu biliyorum, ama bence her tasarımcı işiyle ilgili yeterli detay toplamıyor.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/MisterMadDog/make-small-talk2.jpg' alt="\"\"" border="0"><br></div> <p><!-- buradan kes --></p> <p><strong>3. Müşteriyle dostça bir ilişki kurun.</strong> Çoğunlukla kendimi müşterilerle, projeden tamamen alakasız şeyler konuşurken buluyorum. Eğer bir müşterinin Spider-Man hayranı olduğunu öğrenirsem, onun en iyi süper kahraman olduğu konusunda bir tartışma başlatmaktan kendimi alıkoyamıyorum. Bazen de iş, koşu veya başka bişeyler hakkında oluyor. İlgimi çeken her türlü şey bir sohbete konu olabiliyor. Müşteriyle bu şekilde bir sohbete girmekten kaçınmayın. Ortak zeminde buluşun, espriler yapın. Bu müşterinin sizi sevmesini ve onlarla arkadaş olmanızı sağlayacak. Bu, müşterinin sizinle çalışma biçimini temelden değişterecektir. Şimdi sizi araştırıyorlar, yardımcı oluyorlar, başarılı olmanızı İSTİYORLAR. Sizi UMURSUYORLAR. Çünkü sizi tanıdıklarını hissediyorlar. Bunu çok sık yaparım ben.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/MisterMadDog/remind-customer-of-value.jpg' alt="\"\"" border="0"><br></div> <p><strong>4. Müşterinin yaptığınız şeyin değerini anladığından emin olun, özellikle fiyatınız düşüyorsa.</strong> Bu son derece kurnazlıkla ve ortama göre yapılmalıdır. "Dostum benimle çalıştığın için çoooooook şanslısın. Normalde bunun 3 katı fiyatlandırırım" gibi birşey demek kesinlikle işe yaramayacaktır. Eğer yaptığınız şeyin önemini kaba görünmeden ifade edebileceğiniz bir yol bulursanız, kullanın.</p> <p><strong>5. Gülmelerini, en azından gülümsemelerini sağlayın.</strong> E-postalarımda araya ufak bir espri veya komik bir yorum katarım. Eğer bir müşteriyi güldürdüyseniz, kendinizi kesinlikle sevdirdiniz demektir.</p> <p><strong>6. Bir zaman çizelgesi yapın ve ona bağlı kalın.</strong> Müşteri dakikliği sever. Eğer müşteriden önce davranıp zaman çizelgesi oluşturur ve bitim tarihinize günü gününe bağlı kalırsanız, müşterinin gözünde altın kadar değerlisinizdir. Ama unutmayın, vurgu "günü gününe bağlı kalma" kısmında olmalıdır. Eğer bitim tarihinizi kaçırmak için çizelge hazırlıyorsanız, yalnızca kendi hatalarınızı vurguluyorsunuz demektir.</p> <p><strong>7. İlginç olayları önemli insanlara bildirin.</strong> Eğer iletişimde kalmanız gereken kişiler varsa, mutlaka her e-postayı veya davetiyeyi gönderin. Ben bunu yapmama hatasına çok düştüm. Kolayca kaçınılabilecek kötü sonuçları vardır.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/MisterMadDog/give-them-options.jpg' alt="\"\"" border="0"><br></div> <p><strong>8. Onlara seçenek sunun, ama aynı zamanda istedikleri şeyi verdiğinizden de emin olun.</strong> Eğer istenilen tasarımın dışında birşey yapacaksanız bile onlara istedikleri şeylerden vermeyi unutmayın. Bu çok önemli. Müşteri birşeyi iki kere istemek zorunda hissetmemeli veya sizinle birşeyi almak için savaşmamalı. Onları farklı bir fikre çekmek için kararlı bir çaba harcayabilir ve onları eğitmeye çalışabilirsiniz. Ama bunu büyük ihtimalle telefonda yapardım ve en sonunda istedikleri şeyi alacaklarına dair güvence veriridim.</p> <p><strong>9. Düzeltmeleri gönderirken, onların size vermiş olduğu bilgileri de yeniden gönderin.</strong> Mesela ben bir düzeltme gönderiyorsam ve bana bir liste verilmişse, sık sık listeyi de eklerim ve araya ufak yorumlar katarım. Bu şekilde onların söylediği yoldan gittiğim mesajını da veririm. <em>(Bu maddeyi biraz açıklamak gerekirse: "liste" olarak bahsedilen "check list" kelimesi, bizim markete alışverişe çıkarken hazırlamamız ve listeye yazdığımız her ürünü aldığımızda yanlarına bir işaret koymamız gibidir. Yazar burada, müşteriye mektup gönderirken önceden bana verilmiş olan listede yapmış olduğum şeyleri işaretler, hatta biraz zenginleştirmek için yorum bile katarım demiş.)</em></p> <p><strong>10. Başka servislerinizi de satın.</strong> Bu noktada, Go Media zorla satış yapan bir şirket değildir. Ama işler gerçekten iyi gidiyor ve aramızdaki ilişki sağlam bir düzene oturtulmuşsa, onlara başka servislerimiz olduğunu da söylerim ben. Şöyle basit bir şey olabilir: "Eğer site tasarımına ihtiyacınız olursa, onu da yapıyoruz!"</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/MisterMadDog/something-for-free.jpg' alt="\"\"" border="0"><br></div> <p><strong>11. Onlara ücretsiz olarak bir şeyler verin.</strong> Bu, genelde danışmanlık formatındadır. Ama çok hızlı yapılmış bir tasarım projesi de olabilir. Benim yapabileceğim/söyleyebileceğim iki örnek şöyle: "Geçen akşam projenizi düşünüyordum ve ürününüz için güzel bir fikir geldi..." veya "logonuzun düşük çözünürlükte bir JPEG olduğunu fark ettim. Bir kaç dakika içinde vektörel hale getirdim ve yüksek çözünürlüklü bir çıkışını aldım. Bu dosyaların yanına ekledim - ücretsiz."</p> <p><strong>12. Teşekkür ederim deyin.</strong> İçten ve zamanlaması iyi bir teşekkürden daha güçlü bir şey yoktur.</p> <p>Ve bununla birlikte ben de zaman ayırıp bu yazıyı okuduğunuz için teşekkür etmek istiyorum. Umarım birşeyler öğrenmişsinizdir.</p> <p>Yazar: <a href="http://www.gomediazine.com/author/wbeachy/">Bill</a> (<a href="http://www.gomediazine.com/design-tip/flawless-service/">kaynak</a>)<br><em>Yazı tarafımdan çevirilmiştir, benim değildir.</em></p><p>Bu yazı <a href="http://www.bildirgec.org/uye/sermen08">sermen08</a> tarafından <a href=" http://www.bildirgec.org/yazi/grafik-tasarimda-kusursuz-hizmet ">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, 14 Jan 2009 12:37:00 GMT 191752@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/grafik-tasarimda-kusursuz-hizmet sermen08 <p>şirket sitelerini bilirsiniz. çoğu sıkıcı, görsel güzellikten uzak, kullanışsız olur. ama bazıları gerçekten iyi tasarımcıların elinden çıkmıştır ve ürüne, markaya olan sempatiyi artırır. <a href="http://stylesinspiration.com/">stylesinspiration</a>, 2008'in en iyi 25 şirket sitesini <a href="http://stylesinspiration.com/2009/01/12/top-25-design-company-web-designs-of-2008/">seçmiş</a>.</p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/MisterMadDog/designcompany1.png' alt="profission" border="0"><br>profission</div><br><a href="http://www.profission.com/default.asp">profission</a> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/MisterMadDog/designcompany2.png' alt="concentric studio" border="0"><br>concentric studio</div><br><a href="http://www.concentric-studio.com/">concentric studio</a> <p><!-- buradan kes --></p> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/MisterMadDog/designcompany3.png' alt="coda" border="0"><br>coda</div><br><a href="http://coda.co.za/">coda</a> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/MisterMadDog/designcompany4.png' alt="the heads of state" border="0"><br>the heads of state</div><br><a href="https://www.theheadsofstate.com/#/home.php">the heads of state</a> <div class="imajorta"><img src='http://www.bildirgec.org/imaj/MisterMadDog/designcompany5.png' alt="studio number one" border="0"><br>studio number one</div><br><a href="http://www.studionumber-one.com/">studio number one</a> <p>ancak tabii bu siteler ya moda şirketlerinin ya da fotoğraf stüdyolarının. ayrıca grafik tasarımcılarının... gönül isterdi ki bir <a href="http://www.telekom.com.tr/portal/">telekomünikasyon şirketinin</a>, efendime söyleyeyim, <a href="http://www.beko.com/TR/TR/default.htm">bir beyaz eşya şirketinin</a>, <a href="http://www.microsoft.com/tr/tr/default.aspx">dünyanın her tarafına adını duyurmuş bir yazılım geliştiricisinin</a>, <a href="http://www.teknosa.com/web/b2c/mainpage.htm">bir bilişim ürünleri marketinin</a> de siteleri karışıklıktan uzak, ne istediğini bilen, sade, şık ve vasatın üzerinde olabilseydi.</p> <p>sitelerin devamını görüntülemek için <a href="http://stylesinspiration.com/2009/01/12/top-25-design-company-web-designs-of-2008/">tıklayın</a>.</p><p>Bu yazı <a href="http://www.bildirgec.org/uye/sermen08">sermen08</a> tarafından <a href=" http://www.bildirgec.org/yazi/2008-in-en-iyi-25 ">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, 14 Jan 2009 14:59:00 GMT 191751@http://www.bildirgec.org/ http://www.bildirgec.org/yazi/2008-in-en-iyi-25