bildirgec.org - disconnect - beğendikleri

farklı tarzlarda jquery ve css menüler

disconnect — Mon, 07 Sep 2009 16:47:00 GMT

CSS ve JQuery ile hazırlanmış farklı tarzlardaki menüleri sizler için derledim. menülerin nasıl hazırlandığını menünün linkine tıklayarak öğrenebilirsiniz, isterseniz kodları direkt indirerek sitenize entegre edebilirsiniz.

1- Kutu dışında JQuery Navigasyon Menü - demo - download

2- gösterişli drop down menü jquery & css - demo

3- Yukarıdan Aşağı Açılır Menü Oluşturmak - demo - download

4- dairesel alt menü yapımı - demo - download

5- Olağan dışı Navigasyon menü yapımı - demo - download

6- Twitter'deki gibi Açılır login penceresi yapımı - demo - download

7- Sürgülü menü yapımı - demo - download

8- Mootool ssürgülü menü yapımı - demo - download

9- vimeo tarzı navigasyon menü yapımı - demo - download

10- Dinamik php/css menü yapımı - demo - download

11- JQurery Animasyonlu menü yapımı - demo - download

12- JQuery Header Menü Yapımı - demo - download

13- Çoklu Dosya Gösterimi - demo - download

Bu yazı disconnect tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

jquery ile hoş bir Hover Effect'i

disconnect — Wed, 22 Apr 2009 17:50:00 GMT

özellikle flash ile hazılanmış web sitelerinde imleç ile herhangi bir objenin üzerine geldiğimizde hoş efektler oluşur.flash kullanmadan hazırlanmış ve xhtml, css ve jquery ile hazırlanmış hoş bir Hover Effect'inin demosuna buradan ve eğitimine de buradan erişebilirsiniz.

kaynak: sohtanaka

[mb:mikro-bildiri]
takip edin: bildirgeç friendfeed twitter rss

Bu yazı disconnect tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

40+ Şık ve Son Moda Simge Seti

disconnect — Thu, 23 Apr 2009 06:01:00 GMT

İşletim sisteminizin varsayılan simgelerinden sıkıldıysanız bu şık ve son moda simge setleri çok işinize yarayacaktır.

Bu 40 nadir, güzel ve ücretsiz simge setini bilgisayarınıza indirerek masaüstünüzü canlandırabilirsiniz.

1 - Exempli Gratia

png, icn ve ico formatında 14 simge

2 - kidaubis chinese wind icon

16 benzersiz çin temalı simge

3 - container icons

Mac os ve windows için 40 simge

4 - Wooden Slick Drives

Mac os ve windows için 10 simge

5 - HydroPRO v2

10 güzel simge

6 - Ive Drives

mac os ve windows için 4 güzel simge

7 - Desktop Icons

ico ve png formatında 9 büyük boyutlu simge

8 - Black & Blue Icons

6 simge seti

9 - Star Trek Folders

farklı boyutlarda 4 simge seti

10 - Folder Icons Pack

mac os ve windows için 50 simge

yazının devamı için buraya tıklayın.

ayrıca aşağıdaki yazılarda ilginizi çekebilir.

web ve grafik tasarımcıları için harika kaynaklar

40 yüksek kaliteli simge seti

35 Yüksek Çözünürlüklü Duvar Kağıdı

33 Yüksek Çözünürlüklü Bahar Duvar Kağıdı

kaynak: sixrevisions
diğer yazılarım
yazılarımı rss üzerinden takip edebilirsiniz

Bu yazı disconnect tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

SpaceSniffer ile disk alanınızı gözden geçirin

disconnect — Mon, 27 Apr 2009 08:31:00 GMT

sadece windows'ta kullanabileceğiniz; disk alanınızdaki tüm dosya ve klasörleri kullanışlı bir grafik arayüzle görüntüleyen SpaceSniffer ile ayrıca dosya tarihi, dosya boyutu gibi kıstaslarla disk alanınızla ilgili çeşitli özelliklere erişebilirsiniz.

kaynak: lifehacker
takip et: bildirgeç friendfeed twitter rss

Bu yazı disconnect tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Bilmeniz gereken youtube url HİLEleri

disconnect — Wed, 22 Apr 2009 12:27:00 GMT

youtube

Bildiğiniz gibi youtube dünyanın en büyük video paylaşım sitesi. Ülkemizden yasak olmasına rağmen, siteye bir takım girme yolları mevcut.

işte arkadaşlarınızla youtube video linki paylaşırken yada sitenize video eklerken çok işinize yarayacak link (URL) hileleri;

yüksek çözünürlüklü video izleme

bildiğiniz gibi youtube bazı videolarda bunu bize sunmakta, ancak bizim de istediğimiz çözünürlükte bunu ayarlamamız mümkün. linkin sonuna &fmt=18 (stereo, 480x270px boyutunda) yada &fmt=22 (stereo, 1280x720px boyutunda) kodlarını ekleyerek ayarlamalar yapabilirsiniz...

sayfalara yüksek çözünürlüklü video gömme

&ap=%2526fmt%3D18 yada &ap=%2526fmt%3D22 kodlarını kullanarak bunu yapmanız mümkün...

videoyu istediğiniz zamandan başlatma

bir video paylaşaksınız ancak göstermek istediğiniz bölüm videonun ortalarında bi yerde, işte bu durumda url'nin sonuna ekleyeceğiniz kod #t=03m22s (#t=XXmYYs; XX: dakika için, YY ise saniye için)...

Arama kutusunu gizleme

youtube arama kutusu

Bildiğiniz gömmüdüğünüz youtube videolarının sonunda arama kutusu çıkmakta. bunu gizlemek için gömme koduna &showsearch=0 bölümünü eklemeniz yeterli....

videonun sadece bir bölümünü oynatma

youtube video oynatma

örneğin ilk 30 saniyeyi atlamak isterseniz &start=30 kodu yeterlidir...

gömme videoları otomatik oynatma

normalde gömdüğünüz youtube videolarında, videolar otomatik başlamaz. bunu otomatkleştirmek için kodun, video link bölümüne &autoplay=1 kodunu eklyebilirsiniz.

video sonunda çıkan özellikleri iptal etme

gömme videolarda işe yarayan bu özelliği &loop=1 kodu ile kullanabilirsiniz. kodu eklediğinizde göreceksinizki; video bittiğinde otomatik olarak tekrar baştan oynamaya başlayacak...

benzer videoları iptal etme

youtube video sonunda çıkan benzer video özelliği

eğer paylaştığınız videolarda başka insanların yayınladğı benzer videoların, video sonunda gözükmemesini istiyorsanız; gömme kodunda bulanan linkin sonuna ekleyeceğiniz &rel=0 kodu ile bundan kurtulabilirsiniz...

belirli ülkeler için yayınlana videoları seyretme

bazı videolar sadece belirli ülkeler için yayınlanmakta ve siz başka ülkeden bağlandığınız takdirde bunları seyredememektesiniz. bu tarz videoları izlemek için; http://www.youtube.com/watch?v=
(herhangi bir kod) olan video linkini http://www.youtube.com/v/(herhangi bir kod) şeklinde değiştirmeniz gerekmekte...

Bu yazı disconnect tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

CSS ile şekil çizmek çok kolay!

disconnect — Mon, 13 Apr 2009 19:16:00 GMT

Tasarımlarımızı XHTML ve CSS’e geçirirken bazen çok basit şekilleri bile kimi zaman resim olarak kaydederek tasarımlarımıza ekliyoruz. Oysa bu davranış bize ekstra bir “http isteği” olarak dönmüş oluyor. Daha önce CSS Sprite'ların kullanım alanları yazımda bu istekleri azaltarak performansı nasıl yükselttiğimiz konusuna az da olsa değinmiştim. Bu yazıda ise minik ve basit resim dosyalarından kurtularak http isteklerini minimum düzeye çekecek ve sitelerimizin performansını arttıracak. Pingdom ile performansınızı ölçmeniz mümkün.

Dertlere derman css border
Başlıktan da anlayabileceğiniz gibi bu şekilleri çizmek için elimizdeki en önemli özellik border olacak. İstediğiniz şekli çizmek için border’ları solid yapmalı ve genişliklerini ayarlamalıyız.
Şimdi ufak bir örnekle border’ları nasıl ayarlamamız gerektiğini görelim.

.cisim{
    width:0;
    height:0;
    line-height:0;
    border-top: 50px solid magenta;
    border-right: 100px solid green;
    border-bottom: 100px solid red;
    border-left: 50px solid yellow;
}

<span class="cisim"></span>

farklı renkteki border'lar

Burada rahatlıkla görebilmeniz için border değerlerini çeşitli renklerde tanımladım. Boyutsuz olan span elemanının etrafında üçgensel olarak 4 farklı bölge oluşuyor. İşte bu bölgeleri kullanarak çeşitli dörtgenler, içbükey çokgenler ve üçgenler çizerek tasarımlarımızı tamamlayacağız.

Konuşma balonu örneği
Tasarımlarda artık sıkça karşılaşılan elemanlardan biri de konuşma balonları. Genelde Blog sitelerinin yorumlar bölümünde, twitter kullanan kişilerin kişisel sitelerinde sıklıkla karşımıza çıkıyor konuşma balonları. Tasarımların olmazsa olmaz elemanı olan bu konuşma balonlarının yazı yazılan kısmını yapmak genelde imaj dosyası gerektirmeyen bir şekilde yapılabiliyor. Lakin balonun ucundaki oklar CSS şekilleri tekniğini çözene kadar imaj dosyası ile yapılmaktaydı. Artık bu imaj dosyasını kullanmadan maksimum iki satırlık bir css stili ile hem bandwith’ten hem de performanstan kazanç sağlayacağız.

ilk adım

Gördüğünüz gibi konuşma balonumuz hazır. Balonumuzu dizayn ettikten sonra bu balonu 2 parçaya ayırarak çalışmamıza devam edeceğiz.

ikinci adım

Okun biçimlendirilmesi
İki parçaya bölünen elemanda en çok okun biçimlendirilmesi konusuna yoğunlaşacağız. Çünkü diğer eleman basit bir div biçimlendirilmesi ile oluşturulabiliyor. Önce okun değerlerini belirleyelim:

üçüncü adım

Gördüğünüz gibi 25 e 25 piksellik bir ok tasarladım. Arkaplan olarak ben bildirgeçte arka plan resmi olmadığından beyaz kullandım.

Kodlamaya giriş
Öncelikle oku oluşturmak için bir span elemanı yaratıyoruz.

<span class="ok"></span>

Şimdi bu oku biçimlendirmek için head etiketleri içinde stilimizi tanımlıyoruz.

 <style> .ok{ width:0; height:0; line-height:0; border-top: 25px solid #999999; border-right: 25px solid white; border-bottom: none; border-left: none; } </style>

Yarattığımız span’ın genişlik, yükseklik ve satır genişliği yüksekliğini 0 belirterek bu şekilleri oluşturabilmemiz mümkün oluyor. Daha sonra border-top tanımlaması ile okumuzun yükseklik değerini ve hangi renkde olacağını belirtiyoruz. Border-right ile de genişlik değerini ve okun arka planında bulunan renk değerini giriyoruz. Eğer arka planda resim kullandıysanız bu değeri transparent olarak girmelisiniz.

Gördüğünüz gibi okumuz oluştu. Şimdi yapmamız gereken ise ana kutucuğun altına bunu iliştirmek. Bunun için ben 300px genişliğinde bir p tanımladım. Ve bunu balon’umun içine koydum. Sonra da okumu bu p elemanından sonra yerleştirdim.

 <div class="balon"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p><span class="ok"></span></div>

Okumuzda da bazı düzenlemeler yaparak balonumuzu son haline sokuyoruz:

 <style>
.balon{ width:340px;}

.balon p{ width:300px; line-height:20px; background:#999; color:#fff; font-size:20px; padding:20px; margin:0; float:left; }

.ok{ width:0; height:0; line-height:0; border-top: 25px solid #999; border-left: none; border-bottom: none; border-right: 25px solid white; float:left; margin: 0 0 0 250px; }

</style>

İşte bu kadar basit! Artık basitçe şekiller üretebilir ve tasarımlarınızda kullanabilirsiniz. Benim kullandığım birkaç başka şekil de var. Bunları da inceleyelim.

tüm şekillerin çizimi

Şekil 1
Basit bir üçgendir. Tüm border değerlerine eşit ölçülü sayılarda atama yapacağız fakat border-top hariç hepsi renksiz olacaktır. Border-top ise bizim şeklimizin rengini verecektir.

 <span class="cisim"></span>
<style>
.cisim{
            width:0;
            height:0;
            line-height:0;
            border-top: 50px solid #999;
            border-left: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-right: 50px solid transparent;
        }
</style>

Şekil 2
Her ölçüsü değişik olan bir üçgendir. Border değerlerinin tümü farklı ölçülerdedir. Border-top cismin rengini belirler, diğerleri ise arkaplan rengini belirler.

 <span class="cisim"></span>
<style>
.cisim{
            width:0;
            height:0;
            line-height:0;
            border-top: 50px solid #999;
            border-left: 20px solid transparent;
            border-bottom: 50px solid transparent;
            border-right: 100px solid transparent;
        }
</style>

Şekil 3
Bayrak gibi bir görüntüsü olan bu şekil nerede işinize yarar bilinmez ama çokgenlerin oluşturulması konusunda bir örnek olsun.

 <span class="cisim"></span>
<style>
.cisim{
            width:0;
            height:0;
            line-height:0;
            border-top: 50px solid #999;
            border-left: 50px solid #999;
            border-bottom: 50px solid #999;
            border-right: 50px solid white;        
}
</style>

Şekil 4
Bu şekil gördüğünüz gibi şekil 1’in tam tersi. Bu yüzden şekil 1’de border-top değerini cismin rengi olarak göstermişken burada border-bottom’da cismin rengini belirliyoruz.

 <span class="cisim"></span>
<style>
.cisim{
            width:0;
            height:0;
            line-height:0;
            border-top: 50px solid white;
            border-left: 50px solid white;
            border-bottom: 50px solid #999;
            border-right: 50px solid white;    
}
</style>

CSS ile basit şekilleri bu şekilde çizebilmek mümkün. Biraz yaratıcılık biraz da CSS hakimiyeti ile daha karışık şekiller de çizmek tabi ki mümkün.

Bakmadan geçmeyin:

Web Tasarımında sıkça karşılaşılan hatalar

[mb]Siteleriniz IE8'e uyumlu mu?

CSS Sprite kullanmak artık daha kolay!

CSS Sprite'ların kullanış alanları

yeni html5 tag'leri ve kullanım şekilleri

Twitter ile takip
Friendfeed ile takip

Bu yazı disconnect tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Websitenizi Hızlandıracak ve Kodunuzu İyileştirecek 15 İpucu

disconnect — Wed, 08 Apr 2009 07:06:00 GMT

Bir süre kodlama yaptıktan sonra artık kendinizi tekrar etmeye başlar, aslında ne kadar zeki olduğunuzu unutursunuz. Kaç yüz tane klavye kısayolunu hafızamızda tutuyoruz? Kaç tane kodlama dili öğrendik? Kaç tane çatı? Kaç tane hile? Web geliştirme/tasarım dünyasının zor bir endüstri olduğunu söylemek, işin kolayına kaçmak olur. Ayrıca bugün bildiğimiz şeylerin pek çoğu, birkaç yıl sonra artık kullanılmayan teknolojiler listesindeki yerini alacaktır.

Bugünkü yazımızda özellikle giriş seviyesindeki geliştiricilerin geliştirmek için harcadığı süreyi kısaltacak ve daha verimli şekilde kodlama yapabilmelerini sağlayacak bir dizi ipucunu bulacaksınız. İpuçlarının arasında zaman kazandıran ipuçlarının yanısıra bazı özel programlama dillerine özgü ipuçları sayesinde web uygulamalarınızın verimliliğini de arttırabileceksiniz.

Görsellerinizi Daha Fazla Sıkıştrın

Photoshop üzerinde "Save for Web" (Web İçin Kaydet) aracını kulandığınız zaman, görsellerinizi sıkıştırarak dosya boyutunu indirgeyebilirsiniz. Ancak ilgili dosyaların kalitesinden ödün vermeden daha da fazla sıkıştırabileceğinizi biliyor muydunuz? Smush.It adındaki bu site sizler için bu işlemi hallediyor.

Peki Bu Nasıl Mümkün Olabiliyor?

Smush.It ekibi bunun için bir dizi araç kullanıyor:

Görselin biçimini algılamak ve onu GIF ya da PNG'ye dönüştürmek için ImageMagick,
PNGlerin gerekli olmayan bölümlerni kaldırmak için pngcrush. Site ayrıca daha da iyi png optimizasyonu için pngout, optipng, pngrewrite gibi diğer araçları da inceliyor,
JPEGlerdeki tüm meta verilerini kaldırmak ve progresif JPEGler oluşturmak için jpegtran (şimdilik etkin değil),
GIF animasyonlarını, farklı çerçevelerdeki tekrar eden pikselleri kaldırmak için gifsicle.

Bu yüzden yeni bir sitenin duyurusunu yapmadan önce, sitenizin URL'sini Smush.It'e girerek tüm görsellerinizin otomatik olarak optimize edilmesini sağlayablirsiniz. Eğer site, görsellerinizi optimize ederek kalitesinden ödün vermeden dosya boyutunu önemli ölçüde düşürebilirse (ki büyük ihtimalle sonuç bu olacaktır), o zaman sitenizde kullandığınız görselleri Smush.It'in verdikleri ile değiştirebili ve gerekirse HTML ve CSS dosyalarınızı da güncelleyebilirsiniz. Hazır görsel dosya biçimlerinden bahsediyorken, dosyalarınızı PNG biçiminde kaydetmek her zaman en doğrusu olacaktır. Artık demode olan animasyonlu GIF görselleri kullanmadığınız sürece PNG biçimini kullanmayı alışkanlık haline getirin.

Akıllı Olun. Kod Parçacıkları Kullanın.

Pek çok IDE, "code snippet" (kod parçacığı) panelini destekler ve bu paneller aracılığı ile özellikle sık sık kullandığınız kod parçacıklarını kategoriler altında depolayabilirsiniz. Sırf müşterinize tasarımın nasıl olacağını göstermek için her seferinde lipsum.com web sitesini ziyaret ederken mi buluyorsunuz? Bunun yerine neden birkaç paragraflık lorem ipsum metnini kod parçacığı olarak kaydetmeyesiniz ki? Örneğin Dreamweaver uygulamasında "Shift F9" klavye tuş kombinasyonunu kullanarak kod parçacığı sekmesini açabilirsiniz. Ardından sizin için uygulan olan kod parçacığını yine sizin için uygun olan yere sürükleyip bırakabilirsiniz. Bu özellik kod yazarken bana çok fazla zaman kazandırıyor.

Console.log() Hata Ayıklamasını Kullanın

jQuery kütüphanesini indirdiniz ve sözdizimini anlamak için çabalıyorsunuz. Bu sırada bir yerde takıldığınız ve $bilmemne değişkenin neye eşit olduğunu bilmiyorsunuz. Sorun değil, tek yapmanız gereken console.log($degiskenadi); kodunu eklemeniz.

Ardından Firefox'u çalıştırın (Firebug eklentisinin kurulu olduğundan emin olun) ve F12'ye basın. Doğru değişken değeri ile karşılaşacaksınız.

Şimdi ise bunu sonsuzlukla çarpın ve zamanın derinliklerine götürün. Bunun sonucunda bile Firebug ve console.log()'un ne kadar kullanışlı olduğunu fark edemeyeceksiniz :)

Web Geliştirici Araç Çubuğunu İndirin

Chris Pederick tarafından geliştirilen bu inanılmaz derecede yardımcı Firefox eklentisi size sayısız seçenek kuluyor. Bu eklenti sayesinde sitenizdeki CSS dosyalarını eşzamanlı olarak düzenleyebilmeniz mümkün. Eklentinin desteklediği diğer özellikler ise:

JavaScript'i kolayca etkisizleştirmek,
CSS'yi kolayca etkisizleştirmek,
Hızlı HTML / CSS doğrulama bağlantıları,
Cetveller,
Çerezleri etkisizleştirme,
Ve daha sayısız kullanışlı özellik.

Web Developer Toolbar eklentisi, her web geliştiricisinin Firebug ile birlikte kullanması gereken bir eklenti.

Betik Etiketlerini Alta Yerleştirmeyi Deneyin

Günümüzde kullandığımız pek çok tarayıcı, aynı sunucu adı üzerinden eş zamanlı olarak en fazla iki adet dosyayı indirebilir. Ancak bir betik indirirken diğer dosyaların indirilebilmesi için önce betiğin tamamen indirilmiş olması gerekir.

Bu yüzden mümkün olduğu kadar betiklerinizi çağıran bu kodları belgenizin sonuna eklerseniz, görseller ve css gibi diğer bileşenlerin önce indirilip sitenizin görüntülenebilmesini, ardından da son olarak bu betiklerin indirilebilmesini sağlayabilirsiniz.

Unutmayın, bu yöntem kullandığınız betiğin işlevine göre kullanılabilir ya da kullanılamayabilir. Bu sebeple betik kodlarınızı belgenizin alt kısmına taşıdıktan sonra sitenizi test etmeyi unutmayın.

Yayım Yaparken, CSS ve JavaScript Dosyalarınızı Sıkıştırın

Eğer performans, web siteniz için önemli ise, o zaman sitenizi yayımlamadan hemen önce CSS ve JavaScript kodlarınızı sıkıştırmanızı öneririm. Bunu geliştirme işinizin en başından itibaren yapmaya kalkışmayın zira bunun size yarardan çok zararı dokunur. Ancak kodlamayı bitirdikten sonra kodunuzu sıkıştırabilirsiniz.

JavaScript Sıkıştırma Servisleri

CSS Sıkıştırma Servisleri

JavaScript kodlarını paketlemek için kullanabileceğiniz diğer iki servis ise YUI Compressor ve JSMin.

Bnun yanısıra HTML kodlarınızı da sıkıştırmayı deneyebilirsiniz, ancak bunu önermem. HTML dosyalarınızı sıkıştırarak kazanacağınız dosya boyutu gerçekten çok az.

jQuery Kolay ve Hızlı İpuçları

Kısa bir süre önce tvdesign.co.uk'den Jon Hobbs-Smith, 25 jQuery ipucunu listelediği mükemmel bir makale yazmıştı. Bu sayfayı yer imlerinize eklemeyi ihmal etmeyin. İşte bu yazıdan benim en beğendiğim birkaç ipucu.

jQuery'de Bir Elementin Olup Olmadığını Kontrol Etmek

if ($('#myDiv).length) {
// bu kod sadece #myDiv ID'sinin bulunduğu zaman çalışacaktır.
}

Kontekst Kullanın

Pek çok insan, DOM elementlerine erişirken, jQuery'nin ikinci bir parametreyi kabul ettiğinin farkında değildir. Aşağıdaki koda bir bakın.

var myElement = $('#someElement');

Bu kod, jQuery'nin tüm DOM'u geçmesini gerektirir. Bunun yerine ikinci bir parametre ekleyerek hızı oldukça arttırabiliriz.

var myElement = $('#someElement', $('.someContainer'));

Yukarıdaki kodda jQuery'e, .someContainer elementi içerisinde arama yapmasını ve onun dışındakileri dikkate almamasını söylüyoruz.

Sınıflar Yerine IDler Kullanın

jQuery ile IDlere erişirken, kütüphane bilinen getElementById yöntemini kullanır. Ancak sınıflara erişirken jQuery, DOM'u geçebilmek için kendine özgü yöntemleri kullanmayı dener, zira getElementByClass diye bir yöntem yoktur. Sonuç olarak, ID yerine sınıf kullanmanız durumunda işlem biraz daha uzayacaktır.

25 İpucunun Tamamını İnceleyin

$_POST Yerine Mümkünse $_GET Kullanın

Eğer AJAX istekleri yaparken $_GET ve $_POST arasında bir seçim yapma şansınız varsa, $_GET kullanın.

Yahoo! Mail ekibi, XMLHttpRequest kullanırken, POST'un tarayıcılar üzerinde iki işleme neden olduğunu görmüştür. POST, ilk olarak başlıkları, ardından da verinin kendisini göndermektedir. Bunun yerine GET kullanmanız durumunda, eğer çok fazla çereziniz yoksa, sadece bir TCP paketi gönderilmektedir.

Unutmayın - $_GET verisini her zaman kullanamazsınız. ilk olarak ne yaptığınızdan emin olun ve querystring ile veritabanı erişimini hiçbir zaman karıştırmamanız gerektiğini unutmayın. Kısa bir süre önce Twitter arkadaşlarımdan bir tanesi, bana URL'sinde bir MySQL sözdizimi olan bir web sitesi gönderdi. Bunu asla yapmayın!

Pratik Olduğunda Kütüphaneleri ve Çatıları Kullanın

İster PHP kullanın ister ASP.NET, mooTools ya da jQuery, ya da tüm bunların bir birleşimi, uygun olduğu zamanlarda çatıları kullanmayı deneyin.

Örneğin:

Eğer basit bir statik web sitesi kullanıyorsam sadece fare imlecini bir elementin üzerine getirdiğimde bir efektin belirmesini istiyorsam, bunun için jQuery kütüphanesini kullanmam doğru olmaz.
Eğer statik web sitemin en karmaşık özelliği bir XML dosyası üzerinden veri almak ise bunun için bir çatı kullanmama gerek yok. Bu gibi durumlarda sitem hem daha yavaş çalışacak, hem de daha fazla bant genişliği kullanacağı için bana daha pahalıya malolacak.

Ancak eğer tam bir içerik yönetim sistemi ve karmaşık veri erişim yöntemlerini gerektiren bir web sitesi geliştiriyorsam, o zaman beğendiğim çatılara bir göz atmayı ihmal etmem.

Unutmayın - çatıların sizin için çalışmasını sağlayın, tam tersini değil. Bu kararları verirken zeki olun.

YSlow

YSlow, web sitenizi inceleyip onun mümkün olan en verimli şekilde çalışıp çalışmadığını kontrol eden ve size öneriler sunabilen mükemmel bir servis. Yahoo! geliştirme ekibi, kısa bir süre önce, web uygulamaları geliştirirken takip etmeniz gereken öğelerin yer aldığı bir kılavuz yayımlamıştı.

Ayrıca dilerseniz Yslow Screencastı'na bir göz atarak bu zaman kazandırıcı ipuçlarının neler olduğunu görebilirsiniz. Vaktiniz olduğunda kesinlikle izlemenizi öneririm.

Klavye Kısayolları. Öğrenin!

Pek çok deneyimli tasarımcılar ve geliştiriciler burada bana katılacaktır, eğer sitemde ya da tasarımımda ne zaman bir değişiklik yapmak istesem elimi fareye uzatıp araç çubuğuna gitmiş olsaydım, çok zaman kaybetmiş olurdum. Klavye kısayollarını o kadar uzun zamandan beri kullanıyorum ki artık bu kısayolların işlevlerin hangi araç çubuğu ya da hangi menü altında olduğunu unuttum diyebilirim. Tek bildiğim, "Shift X"in doğru paneli açtığıdır.

İşe yeni başladığınızda bu kısayolları öğrenmek size zaman kaybı gibi görünebilir. Ancak sizi temin ederim ki yanılıyorsunuz. Size Google üzerinde "X keyboard shortcuts" (X klavye araması) (burada X kullandığınız yazılımın adını temsil ediyor, örneğin Photoshop için "Photoshop Keyboard Shortcuts") araması yapmanız. Ardınan bulduğuğnuz tablonun yazıcıdan çıktısını alın ve bilgisayarınızın yanına koyun. Ondan sonraki birkaç haftalık süre içerisinde fareye mümkün olduğu kadar az dokunarak bu kısayollar üzerinde pratik yapmayı deneyin. Klaye kısayollarını bilmek, uzman kullanıcılar ile giriş seviyesindeki kullanıcıları birbirinden ayıran belki de en önemli etkenlerden biridir.

Yeni Web Sitesi Şablonu Oluşturun

İtiraf edin, her web sitesi gelişmiş ve karmaşık uygulamalar gerektirmez. Bazen, hatta belki de kimileri için çoğu zaman, sadece bugüne kadar yaptığımız işlerin yer aldığı bir web sitesini göstermek isteyebiliriz. O zaman bu gibi durumlarda kullanabilmek için her yeni bir web sitesi oluşturacağımızda kullanacağımız bir web sitesi "şablonu" oluşturmayalım?

"Template" klasörümün içerisine "JS" ve "CSS" klasörlerini yerleştirdim.

"JS" klasörüm, DD_belatedPNG.js dosyasını içeriyor (bu dosya, IE6'de PNGlere 24 bit saydamlık desteği getiriyor).
"CSS" klasörümde ise içi boş "default.css" dosyamın yanısıra benim hazırladığım sıfırlama dosyası yer alıyor.

Bunun yanısıra index.html(php) dosyamın içerisinde de projelerimin pek çoğunda kullanacağım birkaç kod parçası yer alıyor. Bu kod öyle aman aman özel bir kod değil ancak bunu önceden hazırlamak size zaman kazandıracaktır.

Kullandığım index.html dosyasının bir örneği

Yukarıdaki kodda da göreceğinz üzere önce CSS ve JavaScript dosyalarıma bağlantı verdim ve ardından Google jQuery dosyasına da bağlantıyı ekledim. son olarak document.ready() jQuery fonksiyonunu oluşturdum ve standart "container" divimi açtım.

Bu kod her ne kadar basit görünse de inanın size zaman kazandıracaktır. Bu sayede ne zaman yeni bir web sitesi oluşturmanız gerekirse, o zaman tek yapmanız gereken "template" klasörünün içerisindeki bu dosyaları kopyalamaktır.

Satıriçi ve Harici Karşı Karşıya

Genelde tüm CSS ve JavaScript dosyalarınız sayfadan çıkarılmalı ve kendi harici dosyalarında korunmalıdırlar.

Bunu neden yapmalıyız?

Daha temiz kod,
Sunumun ve içeriğin birbirinden ayrılması önemlidir,
Harici dosyalar kullanarak onları istemcinin sisteminde depolamış oluyoruz. Bu, HTML dosya boyutunu düşürmenin yanısıra harica HTTP isteğine de yol açmıyor, zira ziyaretçi ya da istemci ilgili dosyayı ilk kez istediğinde depoluyor ve sonraki seferlerde aynı dosyayı indirmiyor.

Eğer sadece birkaç satırlık stiliniz var ise o zaman onun için harici dosya oluşturmayabilirsiniz. Bu gibi durumlarda, ama sadece bu gibi durumlarda, ilgili kodu HTML içerisine gömebilirsiniz.

PHP Betiğinin JavaScript İle Çağırılıp Çağırılmadığını Kontrol Edin

AJAX aldı başını gidiyor, özellikle en sonunda, JavaScript kütüphaneleri sağolsun, kullanıcı dostu hale geliyor. Bazı durumlarda betiğin JavaScript ile mi çağırılıp çağırılmadığını belirlemeniz gerekebilir. Bu görevi yerine getirmek için kullanabileceğiniz birkaç yöntem bulunmaktador.

Bunlardan birisi POST'u gönderirken JavaScript'iniz ile özgün bir anahtar değerini JavaScript'inize iliştirmektir. Ardından PHP kullanarak bu anahtarın varolup olmadığını kontrol edebilirsiniz. Eğer var ise, o zaman JavaScript etkin olduğunu anlarız.

Daha iyi bir yöntem olarak PHP'nin HTTP_X_REQUESTED_WITH özelliğini kullanmaktır. Şöyle ki...

if isset($_SERVER['HTTP_X_REQUESTED_WITH']) {
// kodunuzu buraya yazın ve JavaScript'in etkin olduğundan emin olun
} else {
// JavaScript'in etkin olmadığı kullanıcılar için birleyler yapın.
}

Google CDN'ye Bağlantı Verin

Kısa bir süre önce Google jQuery gibi popüler betikleri kendi sunucularında depolamaya başladı. Eğer bu tip kütüphanelerden birisini kullanıyorsanız, o zaman ilgili betiği kendi sunucunuzda depolamaktansa bu betikleri Google CDN üzerinden çağırmanız şiddetle önerilir.

AJAX Kütüphaneleri API'si

Peki Ama Neden?

Caching (Depolama): Bu tip betikleri Google CDN üzerinden çağıran web sitelerinin sayısı gün geçtikçe artmaktadır. Bu sebeple eğer siz de ilgili dosyayı Google sunucusu üzerinden çağırırsanız, ziyaretçiniz muhtemelen o dosyayı sizin siteniz üzerinden indirmeyecektir, zira bir başka site üzerinden aynı dosyayı daha önce indirmiş olabilir. İlgili dosyayı daha önce indirmiş bir ziyaretçi sizin sitenizi ziyaret ettiğinde istemci, Google sunucularından 304 (değiştirilmemiş) mesajı alacak, bu sebeple de o dosyayı doğrudan istemcinin yerel bilgisayarı üzerinden kullanacaktır. Bunun sonucunda da sizin web uygulamanız kullanıcıya daha çabuk açılacaktır.
Eş Zamanlılığı Arttırın: Daha önceki bir ipucunda bundan bahsettim. Bu fazladan dosya isteğini kaldırarak istemcinin daha fazla içeriği eş zamanlı olarak indirebilmesini sağlamış olursunuz.

Firefox Eklentilerini Kullanın

Ben Google Chrome'nin büyük bir fanatiğiyim. Çok hızlı açılıyor ve JavaScript'i diğer tüm tarayıcılardan daha hızlı çalıştırıyor (Firefox'un henüz yayımlanmamış 3.1/3.5 sürümü sanırım Chrome'nin hızını yakalayacak).

Buna rağmen bu, Firefox'u kısa bir süre içerisinde bırakacağım anlamına gelmiyor. Bu tarayıcın için sunulan bazı kullanışlı eklentiler gerçekten büyüleyici. İşte benim beğendiklerim:

Yardımcı Olduğunda IDE Kullanın

Tıpkı günümüzde Microsoft'tan nefret etmek ne kadar moda ise, geliştirme yaparken IDE kullananlara saldırmak ta o kadar moda. Bu gerçekten çok saçma.

Pek çok durumda, gelişmiş bir IDE kullanımı çok önemlidir, özellikle nesne yönelimli programlama (OOP) dilleri üzerinde çalışırken. Şimdi, eğer sadece sade bir HTML şablonu oluşturuyorsanız, o zaman Notepad++ ya da Coda/ sizin için mükemmel bir araç olacaktır. Aslında, bu araçların kullanımını bu gibi durumlarda öneririm. İhtiyacınız olmadığında bu tip programları kullanarak işinizi daha da zorlaştırmayın. Ancak, gelişmiş uygulamalar geliştirirken, IDE'nin avantajlarından da faydalanın.

Hepsi Bu Kadar!

Sanırım şimdilik bu kadar yeterli. Umarım bunlardan bazıları (belki de hepsi) sizi daha iyi birer tasarımcı ya da geliştirici kılmaya yardımcı olacaktır. Sizin beğendiğiniz kısayollar hangileri? Yorumlarınızla paylaşın.

İpuçları Hakkında Yazdığım Diğer Yazılar

Bu yazı disconnect tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

10 Web UI Kütüphanesi

disconnect — Tue, 17 Mar 2009 16:56:00 GMT

Bir sonraki web siteniz ya da zengin İnternet uygulamanız için bir Web Kullanıcı Arabirimi Kütüphanesi mi arıyorsunuz? O zaman yazının devamında bulacağınız 10 Adet Güzel Web Kullanıcı Arabirimi Kütüphanesi hem geliştirme süresini kısaltarak çalışmanızı basitleştirmeyi hem de daha kullanışlı ve güzel kullanıcı arabirimlerine sahip olmanızı sağlayacak.

1. IT Mill Toolkit

IT Mill Toolkit açık kaynaklı bir çatı olup özellikle zengin İnternet uygulamaları geliştirmek için gereken widgetler ve araçlar için bir altyapı sunuyor. Standart Java araçlarını kullanarak tarayıcı uyumsuzluklarını, DOM'u ve JavaScript kütüphanelerini dert etmeden web uygulamaları geliştirebilirsiniz.

2. LivePipe UI

LivePipe UI Prototype JavaScript çatısını kullanıyor ve Web 2.0 uygulamaları için bir dizi widget ve kontrol elementleri içeriyor. Her bir kontrol iyi bir şekilde test edilmiş ve yüksek derecede özelleştirilebilir. Kodun iyi bir şekilde belgelenmiş olması ve JavaScript'in etkin olmadığı tarayıcılarda da arayüzün sorunsuz çalışması ayrı bir güzellik.

3. iWebkit iPhone/iPod touch Çatısı

iWebkit dakikalar içerisinde iPhone ve iPod touch üzerindeki Safari İnternet Tarayıcısı ile uyumlu ve iPhone / iPod touch görünümüne ve hissine sahip web uygulamaları ve web siteleri gelişirebilmenizi sağlıyor. Yaklaşık 5 aydır gelişimi sürdürülen bu proje ilk olarak basit bir fikir olarak geliştirilmeye başlamış ancak daha sonra gösterilen yoğun ilgi üzerine oldukça kapsamlı bir çalışma haline gelmiş durumda.

4. Jitsu

Jitsu, içerdiği bir dizi araç sayesinde geliştiricilerin web uygulamaları için gelişmiş kullanıcı arabirimleri tasarlayabilmelerini sağlıyor. Sunulan araçlar ve özellikler arasında XML kodlama dili, sayfa işleyicisi, veri bağlama motoru, JavaScript runtime, kontrol kütüphanesi, runtime izleyicisi, animasyon motoru, çapraz tarayıcı uyumlu kütüphane, AJAX ve geri düğmesi desteği yer alıyor.

5. MochaUI

MochaUI bir web uygulama kullanıcı arabirimi kütüphanesi olup mooTools JavaScript çatısı üzerine inşa edilmiştir. Web uygulamaları, web masaüstüleri, web siteleri, widgetler, kendi başına çalışır pencereler ve modal pencereler üzerinde kullanmaya uygundur.

6. Echo Web Framework
Echo Web Framework, zengin web uygulamaları geliştirmk için hazırlanan açık kaynaklı bir çatı. Geliştirici açısından Echo, Swing ya da Eclipse SWT gibi bir tür kullanıcı arabirimi araç kiti olarak işliyor. AJAX teknolojisi ise web istemcilerine masaüstü uygulamalar sınıfında uygulamalar kullanılabilmesi mümkün hale getirilmiş.

7. Yahoo! User Interface Library (YUI)

YUI Kütüphanesi, DOM betikleme, DHTML ve AJAX gibi web teknolojilerini kullanarak hazırlanmış zengin web uygulamaları geliştirmek için kullanılabilecek, JavaScript ile yazılmış bir dizi aracı ve kontrolü içeriyor. YUI, BSD lisansı altında yayımlanıyor ve tüm kullanıcılara ücretsiz olarak sunuluyor.

8. Sigma AJAX UI Builder
SigmaVisual, JavaScript ve PHP ile yazılmış olup profesyonel geliştiriciler için web tabanlı AJAX kullanıcı arayüzü oluşturma araçları içeriyor. Geliştiriciler bu paket aracılığı ile hem prototiplerini hem de gerçek web uygulamalarını oluştururken zaman kazanabilirler. TreeBar, TreeGrid, Anahat ve Menü, paketin desteklediği elementler arasında yer alıyor.

9. WUI Web UI Framework

WUI (Web Kullanıcı Arabirimi) bir MVC çatısı olup sadece Java kullanılarak hazırlanmış web kullanıcı arabirimleri oluşturmak için kullanılabilir. Bileşenler, widgetler ve olayları kullanarak web uygulamaları yazabilirsiniz ve bunun için JSP kullanmanıza gerek kalmaz. Tüm servlet 2.3 kapsayıcıları üzerinde sorunsuz çalışıyor. Model 2 / Struts'a benziyor ancak ondan çok daha iyi. Apache tarzı bir lisans altında dağıtılıyor.

10. Butterfly Web UI
Butterfly Web UI bileşen yönelimli bir web çatısı olup Wicket ya da Tapestry gibi Java için geliştirilmiştir. Butterfly Web UI'nin bu diğer çatılara oranla avantajı Butterfly DJ kapsayıcısı ile sorunsuz çalışması ve wb uygulamalarınızın bütünleşik bileşenlerini ayrıştırıp onları sorunsuz bir şekilde geliştirebilmenize yardımcı olması gösterilebilir.

Eğer sizin de bildiğiniz ve kullandığınız başka web kullanıcı arabirimleri mevcutsa yorumlarınızla paylaşmayı unutmayın.

Bu yazı disconnect tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

the Zeitgeist Movement / Zeitgeist hareketi (15.03.2009)

disconnect — Tue, 10 Mar 2009 07:18:00 GMT

ilk defa 2007 yılında internetten gösterimine başlanılan Zeitgeist: The Movie belgeseli, o zamandan bu güne kadar milyonlarca kişi tarafından izlendi.
film; din, para, ekonomi, 11 eylül, medya, sınıf ve düzen ayrımcılığı, yarattılan kapitalist bir dünya, savaşlar, savaşların asıl nedenleri, eşitsizlik vb. konuları ele alıyor.
filmin bu denli bir çığ gibi yayılmasındaki başlıca sebebi, izleyip de filmin etkisinde (haklı olarak) kalan bağımsız kişi ve topluluklar aracılığı ile yayılması ve gösterimler düzenlenmesidir.

zeitgeist: adendum

para politikaları üzerine yeterince değinmediğini düşünen yönetmen Peter Joseph, 2008 yılında filmin ikinci kısımı olan Zeitgeist: Addendum belgeselini yayınladı. bu devam filminde ise zamanında cia'in kullandı ve "ekonomik tetikçi" olarak adlandırılan John Perkins'in itiraflarına yer veriyor. ayrıca bu belgesel ile dünya bankası, imf ve dünya ticaret örgütü gibi oluşumların hangi amaca hizmet ettiği çok güzel bir şekilde anlatılıyor.

Zeitgeist: the Movie

şimdi bu bildiride asıl değinmek istediğim noktaya gelelim. milyonlarca kişinin izlediği, üzerinde saatlerce tartıştığı ve birçoğunun da belgeselin sonunda afallayıp kaldığı zeitgeist belgeselinin üçüncü filmi geliyor. The Zeitgeist Movement. 15 Mart 2009 tarihinde Z-Day ekinliği ile tüm dünyada aynı gün gösterilecek olan film, jacque fresco tarafından ortaya atılmış olan "venüs projesi / (venus project)" i temel alıyor.etkinliğe katılan ülkelerin listesi ve zday haritası da bulunmakta.

Venüs projesi

heycanla beklenilen güne kadar önceki filmleri aşağıda bulunan linklerden izleyebilirsiniz.

Zeitgeist The Movie Final Edition(türkçe altyazılı):
google video (2 saat - kesintisiz)

Zeitgeist Addendum (türkçe altyazılı):
google video (2 saat - kesintisiz)

ayrıca belgeseli yasal olarak, torent aracılığıyla buradan indirebilirsiniz.

Bu yazı disconnect tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

web tasarımı i̇çin ücretsiz simgeler ve psd kaynakları bulabileceğiniz 45 site

disconnect — Fri, 27 Feb 2009 07:50:00 GMT

web tasarımı i̇çin ücretsiz simgeler ve psd kaynakları bulabileceğiniz 45 site

bu listede yüksek kalitede pek çok psd dosyası ve ücretsiz simge bulacaksınız. bunun yanısıra daha kolay simge oluşturmak için photoshop katman stilleri ve ücretsiz içeriğe odaklanmış sitelere de yine bu yazımda yer vermeye çalıştım. kimileri, simgeleri kendinizin oluşturmasının daha iyi olduğunu söyleyebilirler ancak bana göre, halihazırda ücretsiz olarak sunulan bir şeyi yeniden oluşturmanın; tabir-i caizse tekerleği yeniden icat etmenin alemi yok. ayrıca bu yazıda yer alan psd dosyaları da ilgili simgelerin nasıl oluşturulduğunu anlamanız için size bir ipucu olabilirler.

yazının devamına geçmeden önce bu simgeleri ya da diğer içeriği kullanmadan önce her bir kaynağın lisans koşullarına bir göz atmanızda yarar olduğunu hatırlatayım.

1. famfamfam

aslında bana kalırsa bu site, listedeki en iyi kaynak. bu yüzden ben de bu siteye listenin ilk sırasını verdim. site üzerinde sayısız simgeye ulaşmanız mümkün. üstelik simgeleri kendi web sitenizde de kullanabilirsiniz. i̇yi kalite, küçük dosya boyutu... daha ne ister insan?

2. 2 düğme psd'si ~ easydisplayname

3. psd kaynak paketi ~ deluxive

4. deluxive creative pack ~ deluxive

5. slash n flash düğmeleri psd ~ el3ment4l

6. çeşitli cam stil setleri ~ allhopeislost

ayrıca photoshop dosyalarını da ekledim, bu sayede ilgili cam efektlerini dilediğiniz element üzerine uygulayabilirsiniz. ayrıca simge oluşturmak ve elementlerine cam efekti eklemek isteyenler için ideal.

7. designer's delight style set ~ allhopeislost

8. çeşitli cam stil setleri 2 ~ allhopeislost

9. pin pictures psd ~ godspeed

fotoğraflarınızı sunabilmek için güzel bir yöntem.

10. gems psd ~ niccey

11. aero avatar and sig psd ~ fastnfurious

12. glass orb styles ~ kjherstin

13. template psd pack ~ tyr4nt

14. preview icon template ~ whyred

15. star sticker psd ~ matu666

16. radium neue icons 5 psd ~ gakuseisean

17. vista flare orb ~ frnak

18. psdfox ~ vathanx

19. radium icon psds ~ gakuseisean

20. office cork board version 1 ~ jakekimpton

21. refraction sphere by gusti-boucher

22. world orb icon psd ~ keitaru-san

23. psd avatar pack ~ eupholic

24. ivista icon psds ~ gakuseisan

25. globe resource psd ~ sneakytomato

26. iconice simge seti ~ dangeruss

27. glass video playback buttons ~ birofunk

28. login panel psd by sundox

29. free brush illustration by lorddarq

30. paperbag template psd by mangion

31. icons psd by igorka

32. free sponsor advertise buttons ~ grafon

33. windows button psd ~ vicing

34. free psd simgeleri (24 simge)

35. dezinerfolio: on-stage free vector psd icon set

36. dezinerfolio

37. computer icon + tutorial ~ gakuseisan

38. photoshop i̇çin psd biçiminde ücretsiz web şablonları / elementleri

bu site gerçekten yüksek kalitede simgeler, düğmeler, damgalar, arkaplanlar ve şablonlar sunuyor. kesinlikle kontrol etmeye değer.

39. sweetie

sevimli ve sade bir görünüme sahip olan bu simgeler özellikle web uygulamaları için ideal. 219 simgeyi içeren bu paketteki simgeleri hem bireysel hem de kurumsal projeleriniz için kullanabilirsiniz.

40. honeycomb patterns ~ c130

41. iconspedia

tamamen ücretsiz simgelere kendini adamış bir site. siz yine de simgeleri kullanmadan önce indirdiğiniz paketin kullanım koşullarına bir göz atın, özellikle kurumsal projelerinizde kullanmayı düşünüyorsanız.

42. developer icons by sekkyumu

43. 135 vector simge

44. web 2.0 damgaları

ve son olarak siz de web 2.0 damgalarınızı oluşturmak istiyorsanız bu siteyi kullanabilirsiniz.

kaynak: 1st web designer

Bu yazı disconnect tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage