http://www.webilgic.com Tüm Bilgimi Paylaşmak İçin Sat, 17 Jul 2010 07:05:56 +0000 http://backend.userland.com/rss092 en XHtml her ne kadar css ile birlikte kolaylık sağlasa da ve Html’i belli standartlara oturtsa da, yine de bazı noktalarda kod kalabalığının önüne geçemiyor. İşte bu noktadan hareketle geliştirilmeye başlanan HTML5 çok güzel özelliklere sahip. Bunlarda bazıları ise şöyle: <canvas>: Sayfada bir tuval alanı oluşturur. Tuvale ... http://www.webilgic.com/web-tasarim/html5-ve-yenilikleri-hakkinda/ Photoshop'ta tasarım yaparken çoğu kez kullandığımız fırçalarla harika efektler ortaya çıkartırız. Bunun için ister kendi fırçalarımızı oluştururuz, istersek de internetten fırça setlerini indiririz. İşte tasarımcılara çok yardımcı olacak fırçaları bulabilmek için en uygun siteleri paylaşmak istedim. Brusheezy.com Brusheezy.com adresinden birçok fırça ile birlikte, doku ve desenlere de ulaşabilirsiniz. Myphotoshopbrushes.com Yine bu sitede de fırçalara, ... http://www.webilgic.com/photoshop/photoshop-firca-brushes-kutuphaneleri/ İnternet ve bilgisayar kullanımının yaygınlaşmasıyla beraber; Photoshop, web tasarım konularına da ilgi arttığını görüyoruz. Bir çok forumda, blogda bu konular hakkında çeşitli bilgiler bulunuyor. Ancak bu bilgilerin çoğu belli bir düzen içinde değil ve kullanıcılara neye nereden başlayacağını göstermiyor. Bu husus çok önemlidir. Çünkü bir işte seri ilerlemenin ilk şartı ... http://www.webilgic.com/photoshop/photoshopa-baslarken/ Uzun zamandır siteme ilgi gösteremiyordum. Baktım çok ihmal etmişim "Yanlış yapıyorsun Mustafa!" dedim kendi kendime. :D Bu arada uzun bi aradan sonraki ilk yazımda geçenlerde rastladığım bir siteyi tanıtmak istiyorum: "300 Harf" adında bir sosya ağ... Site ile Cnet Turkiye'de site için yazılan bir makale ile tanıştım. Site Twitter'ı andırsa da ... http://www.webilgic.com/internet/300-harf-sosyal-agi/ Uzun bir süredir siteme yazı yazmmıyordum. Ancak son bir iki haftadır da içimde böyle bir istek vardı. Bugün bu konuyu görünce de dayanamadım bu sevincimi herkesle paylaşmak istedim. :D Ne kadar mutlu oldum anlatamam : ) Evet yanlış duymadınız Google artık Internet Explorer'in eski versiyonlarını desteklemeyecekmiş. Yani artık Internet Explorer'ın artık ... http://www.webilgic.com/internet/google-internet-explorer-6ya-destegini-cekti/ Microsoft Ekim ayında satışa sunacağı yeni işletim sisteminin 90 günlük deneme sürümünü internette yayınlamaya başladı. Windows 7 Enterprise Deneme Sürümünün çıkacak olan sürümden hiç farkı da yok. Ancak 90 gün sonunda da Windows 7'yi kullanmak isteyenler sistemi satın almalı ve yeniden kurmalıdır diye de uyarıyorlar. :) Sadece İngilizce, Fransızca, Almanca, Japonca ... http://www.webilgic.com/isletim-sistemleri/microsoft-windows-7-deneme-surumleri/ Sanal paylaşımların her geçen gün arttığı ortamda sanal güvenlik saldırılarının da artması oldukça doğal bir sonuçtur. Hatta bu saldırılar bazen bizim sadece sanal işlerimizi etkilemekle kalmayıp gerçek hayatımızı da etkisi altına almaktadır. Binlerce, milyonlarca insan hergün internet üzerinde alış-veriş yapmakta. Hergün bu sayı kadar kredi kartı hesabı sanal alemde risk ... http://www.webilgic.com/guvenlik/virustotal-cevirimici-ucretsiz-bir-virus-ve-kotu-niyetli-yazilim-tarama-servisi/ CSS3’ün getirmiş olduğu yeniliklerden bir tanesi de gölgelendirme efektleridir. Böylece metinlerimize ya da kutularımıza kolayca gölge ekleyebileceğiz. Metne Gölge Ekleme İstediğimiz metne, başlığa, paragrafa istediğimiz renkte istediğimiz ebatlarda gölge atayabiliriz. Bunu da sadece text-shadow kodu ile yapacağız. Hemen örnek kodumuz üzerinde gösterelim: p{ font-family:Arial, Helvetica, sans-serif; color:#ea9800; text-shadow: 4px 4px 7px #999; } Buradaki ilk iki kodu anlatmayı ... http://www.webilgic.com/css/css3/css3-golgeler-shadow/ Css3 ile gelen yeniliklerden biri de borderlar üzerinde artık daha fazla hakim olabileceğiz. Yani şöyle ki artık borderlara istediğimiz resmi arkaplan olarak atayabileceğiz. Çok güzel bir özellik değil mi.  Diğer özellik ise kalın borderlarda her pixele ayrı bir renk tonu atayarak gradient görünümlü borderlar hazırlayabilirsiniz. Birde köşeleri ovalleştirebildiğimizi zaten ... http://www.webilgic.com/web-tasarim/css3-border/ CSS3 ile birlikte artık oval köşelerimizi, yuvarlak köşelerimizi çok daha kolay yapabileceğiz. CSS’yi geliştirenler işimizi daha da kolaylaştırabilmek için Photoshop gibi resim editörleriyle yaptığımız ve resimlerle sitelere eklediğimiz oval köşeler için yeni kodlar eklemişler. Bu kodları yazarak grafiksiz olarak oval köşelerimizi halledebiliriz. Bu özellik kodu “border-radius”tur. Şimdi örnek bir ... http://www.webilgic.com/css/css3/css3-oval-koseler/ CSS3 şu anda hala geliştirme aşamasında. Ancak bazı yenilikler yavaş yavaş denenmeye, kullanılmaya başlandı. Evet şu anda bunları kullanmanız anlamsız gelebilir. Çünkü IE hala bu yenilikleri desteklemiyor. Ama bunun yanında Firefox, Opera, Safari ve Chrome bazı CSS3 yeniliklerini kullanmamıza izin veriyor. Bence şimdiden alışmaya başlamak lazım ki yavaş yavaş CSS3 ... http://www.webilgic.com/css/css3/css3e-yavas-baslangic/ Bir önceki yazımda pseudo sınıflarından bahsetmiştim. Şimdi ise elementlerden bahsedeceğim. Yani sahte element sınıfları oluşturacağız diyebiliriz. Yazılışları pseudo sınıflarıyla aynıdır: secici-adi: pseudo-elementi {özellik:değer;} Hemen pseudo-elementlerinde bahsetmeye başlayalım: First-line Pseudo-elementi "First-line" pseudo elementi bir metnin ilk satırı için özel bir stil eklemek için kullanılır. Yani bir metnin sadece ilk satırının rengini değiştirebilir, kalın yapabilir, fontunu ... http://www.webilgic.com/css/css-pseudo-elementleri/ CSS’de bulunan Pseudo (Sözde, Sahte) sınıflarla seçicilerinize özellikler ekleyebilirsiniz. Bunlar belli koşullarda uygulanacak özelliklerdir. Xhtml ile ulaşamadığımız koşullara ulaşabilmemizi sağlar. Belki şu anda ne demek istediğimi anlamadınız ama açıkladıkça emin olun kolay bir yöntem olduğunu fark edeceksiniz. Öncelikle Pseudo sınıflarının nasıl yazıldığını gösterelim: secici-adi: pseudo-sinifi {özellik:değer;} Gördüğünüz gibi her zamanki gibi bir ... http://www.webilgic.com/css/css-pseudo-siniflari/ Web 2.0 için ikonların önemini belirtmiştim Bu düşünceyle bir ikon kütüphanesi açmaya karar verdim. Beğendiğim, işinize yarayabilecek ikonları burada paylaşacağım. Rahatlıkla download ederek sitenizde yada uygulamalarınızda kullanabilirsiniz. Her geçen gün buradaki ikon setlerinin sayısını arttıracağım. Eğer kırık link yada resmi gözükmeyen ikon seti bulunursa bana iletişim bölümünden lütfen ulaşın. Sitemdeki ikon kütüphanesine ... http://www.webilgic.com/genel/ikon-kutuphanesi-bolumu-acildi/ Bazı sitelerde görürüz, var olan bağlantıların üzerine gittiğimizde açılacak olan sitenin küçük bir resmi gösterilir. İşte bunu ufak bir javascript ve css ile halledebiliriz. İlk olarak sayfanın en altında bulunan download butonuna tıklayarak gerekli dosyaları indirin. Bu .rar içerisinde iki adet dosya çıkacak. Biri javascript dosyası biri de image… Şimdi ilk ... http://www.webilgic.com/css/baglantilara-linklere-kucuk-onizleme-resmi/ Başlıktan pek bir şey anlamamış olabilirsiniz. Uygun bir başlık olarak en uygunu bu olduğuna karar verdim pek bir şey anlaşılmasa bile. Ama açıklamaya başlayayım en iyisi. :D Bir bağlantınız var diyelim ve o bağlantınızın üzerine fare ile gelindiğinde o yazının yerin başka bir yazı çıkmasını ya da yanına bir yazı ... http://www.webilgic.com/css/baglantinizin-linkinizin-uzerine-geldiginizde-yeni-yazi-gosterme/ CSS3 ile bir sürü yenilik girdi hayatımıza. Bunlardan biri de var olan yazı fontlarıyla yetinmeyenler için dışarıdan font dosyası tanıtma özelliğidir. Bu şekilde çok değişik fontları sitemizde dilediğimizce kullanabiliriz. Tabii bunun için öncelikle sunucumuza attığımız fontumuzu css dosyamıza tanıtmamız lazım. Bunun içinde css dosyamızın en başına şu şekilde bir kod ... http://www.webilgic.com/web-tasarim/css-3-ile-disaridan-font-dosyasi-kullanma/ Yatay menü ya da liste yapıp, onu sayfada ortalayamıyor musunuz? Çünkü listenizi büyük ihtimalle float özelliği ile oluşturuyorsunuzdur. Float özelliği ile yapılmış listelerde liste elemanları sağa yada sola dayalı olduklarından dolayı ortalanmazlar. Bu yüzden yapmanız gereken listenize bir genişlik vermektir. Ancak bunun da şöyle bir eksik yönü var. Diyelim bir ... http://www.webilgic.com/css/yatay-menuyu-listeyi-ortalama/ RSS Besleme dosyanızda Css kullanmak çok kolay. Böylece RSS Beslemenizde istediğiniz elementi görünür kılıp istediğiniz elementi de gizleyebilirsiniz. CSS sayesinde karmaşık haldeki metinleri daha anlaşılır hale sokabilirsiniz. Peki, Css dosyanızı nasıl RSS Besleme dosyanıza tanıtacaksınız. Çok basit, aşağıdaki örneğe bakarak ayarlayabilirsiniz. ... Rss etiketinizde istediğiniz elementleri görünür kılıp istediğiniz elementleri de gizlemek ... http://www.webilgic.com/css/rss-besleme-dosyanizda-css-kullanin/ Genellikle video paylaşım sitelerinde gördüğümüz ama her türlü içerikte uygulanabilecek hoş bir uygulamadır yıldızlı grafiklerle oylama bölümleri. İşte şimdi de bu sistem css ile nasıl yapılabiliyor bir bakalım. İlk adım olarak XHTML dokümanımızı hazırlayalım. ... http://www.webilgic.com/xhtml/css-ile-yildizli-oylama-bolumu-yapalim/ CSS 3 ile birlikte birçok özellik eklendi. Bu yüzden herkes tarayıcıların CSS 3’e uyumlu olmasını bekliyor. Gerçi Firefox son sürümüyle bazı özellikleri destekliyor ama bizim için yetmez. :D İşte CSS 3 ile eklenen yeni kodlar da dahil tüm kodlar aşağıda linki bulunan pdf dosyasında. Unutmadan dosya içeriği İngilizce ama çok ... http://www.webilgic.com/web-tasarim/css3-dahil-tum-css-kodlari-pdf/ Gradyan efektli başlıklar yazmak için hep Photoshop’u kullanırız ve bu yazıyı siteye eklemenin tek yolu ise resim olarak eklemektir. Ancak bu yöntemle yaptığınız gradientleri her türlü başlığa, yazıya uygulamak çok daha kolay. Süper olur dediğinizi duyar gibiyim. :D Hem de javascript, flash gibi ek hiçbir şeye ihtiyaç duymadan. Sadece gerekli ... http://www.webilgic.com/css/css-gradyan-gradient-yazi-efekti/ Daha önceki yazımda sayfayı yatay olarak ortalamayı göstermiştim. İşte şimdi sıra geldi dikey ortalamaya. Bu yöntem intro hazırlamada, sadece iletişim bilgilerin olduğu bir sitede ya da sizin hayal gücünüze göre ortalanmış ve kaydırma çubuğu içinde olan sitelere uygulanabilir. Öncelikle şunu belirteyim bu yazıyı http://blog.themeforest.net/tutorials/vertical-centering-with-css/ adresinden İngilizce makaleden uyarladım. Burada birkaç ... http://www.webilgic.com/css/sayfayi-dikey-ortalama/ Web 2.0 ile birlikte ziyaretçi odaklı siteler çoğaldıkça ikonların önemi daha da arttı. Çünkü bu ikonlar görsellik olarak katkı sağlarkan bağlı oldukları bağlantıları (linkleri) desteklediklerinden dolayı onları daha ön plana çıkartmaktadırlar. Böylece paylaşım arzusununa, paylaşım ihtiyacına destek vermekteler. Zaten Web 2.0 demek bilgi paylaşımı demek sayılır. Web 2.0 için ikonların ... http://www.webilgic.com/web-tasarim/ucretsiz-web-iconlar/ Seo ve Arama Motoru Optimizasyonu için sitemizin kodlaması da önemlidir. Çünkü arama motorlarının botları hatasız kodlamayı daha rahat okurlar ve indexler. Ben de önemli gördüğüm ince ayrıntılara burada dikkat çekmeye çalışacağım. Maddelere dikkat ederek daha iyi sonuç alabilirsiniz: 1. DOCTYPE Doctype sitemizin türünü belirler. Yani site xhtml mi, html mi, sürümü nedir ... http://www.webilgic.com/xhtml/xhtml-kodlamanin-puf-noktalar/ CSS kutu mantığına dayanır. Yani yapılacak her işlem kutular içerisinde yapılır diye düşünebilirsiniz. Yani bağlantılar (linkler) bile aslında kutular içerisinde yer alır. İşte bu kutuları bulundukları yere göre konumlandırma yöntemlerinden biri de margin ve padding kodlarıdır. İlk önce alttaki resmi inceleyelim. Resimde görüyoruz ki bir kutumuz var ve bu kutular border ... http://www.webilgic.com/css/margin-ve-padding/ Arkadaşlar daha önce yaptığım ve anlaşmazlık sonucu bilgisayarımda unuttuğum ve rastlantı sonucu bulduğum iki çalışmamı sizlere sunuyorum. İki çalışmada kurumsal çalışmadır ve psd formatındadır. İstenildiği takdirde ise xhtml ve css olarak şablona dökebilirim. Tek yapmanız gereken ise mustafaaydin [at] webilgic.com adresine mail atmanız. Bu adres msn adresi değildir, msnden bu ... http://www.webilgic.com/photoshop/iki-kurumsal-site-calismam-psd/ Html kodlamada biliyoruz ki bir elemente bağlantı vermek için <a> etiketini kullanırız. Bu bir text olabilir yada resim de olabilir. İşte her şey de kolaylık sağlayan Css sayesinde linklerimizin de tarzını değiştirebiliriz. CSS kodlama mantığı konulu yazımda html etiketlerini Css’de sınıf olarak kullanabildiğimizi söylemiştim. Eğer CSS konusunda fikir sahibi değilseniz ... http://www.webilgic.com/css/css-ile-baglantilarinizi-giydirin/ Doğru kodlama her zaman önemlidir. Ayrıca Seo açısından da büyük yararı vardır. Bu yüzden her zaman doğru kodlama için özen göstermeliyiz. İster kağıt üzerine yazalım, istersek de bilgisayar üzerinde ofice uygulamaları üzerine yazalım her paragraftan sonra mutlaka yeni bir satıra başlarız. Bu yeni satır ve satır başı bize “Artık yeni bir ... http://www.webilgic.com/xhtml/xhtml-kodlamada-br-ve-p-farki/ Apple yeni nesil işletim sistemi Mac OS X Snow Leopard'ı 28 Ağustos'ta satışa sunacağını açıkladı. Kar Leoparının fiyat listesi de şöyle: Leopard kullanıcıları için: 29 Dolar - Aile Paketi 49 Dolar (5 Bilgisayar) Tiger ve daha önceki OS kullanıcıları için: 169 Dolar - Aile Paketi 229 Dolar (5 Bilgisayar) 8 Hazira 2009 tarihi ... http://www.webilgic.com/isletim-sistemleri/mac-os-x-kar-leopari/ Daha önceki yazılarımda CSS’nin ne olduğunu, neye yaradığını açıklamıştım. Şimdi ise css dosya yapısı nasıl olur, genel kodlama mantığı nasıldır onu anlatacağım. Ama bu yazıya geçmeden önce id ve class farkı konulu yazımı okumanızı öneririm, çünkü bu yazıyı o bilgilerden haberdar olarak okumanız daha iyi olacaktır. Şimdi başlayalım. Css kodlama sınıflar ... http://www.webilgic.com/css/css-dosya-yapisi/ Her alanda olduğu gibi insanlar kolay hit kazanmanın yollarını aramışlar. Tabii bu arayışlarda bazı kişiler amaca giden yolda her şey mubahtır anlayışı ile hareket ettikleri için ortaya etik olmayan ve aynı zamanda başkalarına da zarar veren çözümler üretmişler. Tabii bu üretimler devam da edecektir. IFrame virüsleri yerleştiği sitede görünmeyecek şekilde sayfalar ... http://www.webilgic.com/web-tasarim/iframe-illeti-detaylari-ve-cozumu/ Tarayıcı uyumsuzlukları konusu üzerinde çok durdun yeter artık, başka bir konu yaz diyebilirsiniz? :D Ancak başladığım konuyu da bitirmeliyim. Tarayıcı uyumsuzluğu elbette ki çok büyük bir dert… Bu konuda her türlü çözüm önemli ve bu da önemli çözümlerden biridir. Diyelim ki bir site yaptık ve sitemiz bir yada birkaç yer haricinde ... http://www.webilgic.com/css/css-dosyasi-icerisinde-her-tarayiciya-farkli-kod/ IE6’nın bir problemi de transparan png dosyalarını sitemizde transparan olarak göstermemesidir. Hal böyle olunca da gif formatına göre daha avantajlı olan png dosyaları bir çok kez kullanamayız. İşte bu script sayesinde bu sorunun üstesinden de geleceğiz. Tabii bundan JQuery’den faydalanacağız. Gelelim nasıl kullanılacağına. Öncelikle şu dosyayı indirelim: jquery_pngfix.rar Sonrasında içinden çıkan ... http://www.webilgic.com/javascript/ie6-icin-transparan-png/ CSS yani açılımı Cascading Style Sheet dilimizde Katmanlı, Basamaklı Biçim Dosyası olarak çevrilebilir. Adından da anlaşılacağı üzere CSS ile sitemizin biçimi, sitili üzerinde hâkimiyet kurarız. Aslına bakarsanız HTML’den farklı bir değil onun bir parçasıdır. En önemli özelliği de siteniz üzerinde yer alan elementlerin görünümünü birkaç kod yardımıyla değiştirmenize olanak sağlamasıdır. ... http://www.webilgic.com/xhtml/css-cascading-style-sheet-nedir/ Sitelerimizi tasarlarken mutlaka bir şekilde arkaplan özeliklerini kullanırız. Peki arkaplan özelliklerine tam olarak hakim miyiz? İşte bu yazımda arkaplan özelliklerinden bahsedeceğim. background-color: Bu kod sayesinde istediğimiz elemente yada sayfamıza renk verebiliriz. Değer olarak “red, blue” gibi renk adları html renk kodlarını kullanabiliriz. background-image: Bu kod sayesinde arkaplan olarak bir resim kullanabiliriz. Örnek ... http://www.webilgic.com/css/css-arkaplan-background-ozellikleri/ Float kodu align koduna benzer. Align kodu resimlere pozisyon vermemize sağlarken float kodu css yardımıyla tüm elementlere pozisyon vermemizi sağlar. Aldığı değerler de “left, right, inherit ve none” değerlerinden biridir. Float kodunu verdiğimiz elementten sonraki element ister float ile bi değer verelim ister vermeyelim her zaman float kodlu elementin yanında ... http://www.webilgic.com/css/float-ne-ise-yarar-float-kaynakli-uzamayan-divlere-son/ Hepimiz fomlarımızda butonları kullanırız. Fakat kimimiz varsayyılan görüntüleriyle kimimiz de o butonları değiştirerek kullanırız. İşte bunu css ile yapabiliriz. Öncelikle şöyle bir butonumuz olduğunu varsayalım: <input type="submit" value="Submit" /> Bu kod bize standart butonumuzu sitemize eklememize yardımcı olur. Şimdi bunu css ile değiştirelim. Bunun iki yöntemi var. Birincisi butonumuza duruma göre id yada ... http://www.webilgic.com/css/css-ile-butonlarimizi-sekillendirelim/ Hep sola dayalı siteler, hep sola dayalı siteler olmaz ki. Biraz da ortalanmış sayfalar yapmak gerek. Kendimizi tekrarlamayalım. :D Eğer siteyi Css yardımıyla ortalamak istiyor ve bunun nasıl yapıldığını bilmiyorsanız kaynak burada. Öncelikle örnek bir sayfa yapısı oluşturalım. <body> <div id=”sayfamiz”></div> </body> Sitemizin genel çerçevesini sayamis id’si ile oluşturduk. Şimdi sıra bu sayfayı css ile ... http://www.webilgic.com/css/css-nimetleri-sayfa-ortalama/ Css ile yaptığımız web tasarımlarda sürekli olarak "id" ve "class" etiketlerini kullanırız. Önemli olan, bu etiketleri kuralına göre mi kullanıyoruz yoksa kuralı mı bozuyoruz? Id etiketi sayfa içerisinde her zaman tek kullanımlıktır. Eğer bir id etiketini birden fazla yerde kullanmışsanız w3 doğrulamada mutlaka size hata olduğunu söyleyecektir. Eğer css bilmeyen biriyseniz ... http://www.webilgic.com/xhtml/css-ile-tasarimda-id-ve-class-farki/