bildirgec.org - oztecnic - beğendikleri

30 Yaratıcı Sosyal Ağ Simge Seti

oztecnic — Sat, 04 Apr 2009 09:33:00 GMT

Bu makalede, gerek bildirgec'te, gerekse de çeşitli İnternet siteleri üzerinde yayımlanan, sosyal ağ sitelerine yönelik hazırlanmış çeşitli simge setlerinin bir derlemesini bulacaksınız. Bu sosyal ağ simge setlerini ister web sitenizde, isterseniz de blogunuzda kullanabilirseniz. Eğer gözümden kaçan simge seti olmuşsa, yorumlarınızda sizin beğendiğiniz sosyal ağ içerikli simge setlerine bağlantı vermeyi unutmayınız.

1. Web 2.Origami

Web 2.Origami

2. Social.me - jwloh

Social.me

3. Socialize Icon Set - DryIcons

Socialize Icon Set - DryIcons

4. Social Icon Set

Social Icon Set

5. Social Media Mini Iconpack - Komodo Media

Social Media Mini Iconpack

6. Nurture Social Icon Set - Smashing Magazine

Nurture Social Icon Set

7. Heart: A Free Social Icon Set - Smashing Magazine

Heart: A Free Social Icon Set

8. Social Icons Made of Wood - webtoolkit4.me

Social Icons Made of Wood

9. Web 2 Icons - Fast Icon

Web 2 Icons

10. Free Vector Social Bookmark Icons

Free Vector Social Bookmark Icons

11. 13 Free Social Bookmark Icons for your Blogs - Edward de Leau

13 Free Social Bookmark Icons for your Blogs

12. IconTexto WebDev Social Bookmark

IconTexto WebDev Social Bookmark

13. Social Bookmark Iconset: Part II - Vikiwork Studio

Social Bookmark Iconset: Part II

14. Social Bookmark Icons - Fast Icon

Social Bookmark Icons

15. Social Web Buttons - WebFruits Blog

Social Web Buttons

16. Social Web Buttons - Set 2 - WebFruits Blog

Social Web Buttons - Set 2

17. Social Networking Icons

Social Networking Icons

18. 6 Social Icons

6 Social Icons

19. The Leaves Fall - Smashing Magazine

The Leaves Fall

20. Aquaticus.Social - jwloh

Aquaticus.Social

21. 34 Social Bookmark Buttons - SoulVisual

34 Social Bookmark Buttons

22. webtoolkit4.me Icon Set

webtoolkit4.me Icon Set

23. DelliCream Free Social Bookmark Icons

DelliCream Free Social Bookmark Icons

24. DelliCake Free Social Bookmark Icons

DelliCake Free Social Bookmark Icons

25. Social Bookmark Iconset

Social Bookmark Iconset

26. Cheers Social Bookmark Icon Set - Smashing Magazine

Cheers Social Bookmark Icon Set - Smashing Magazine

27. Function Free Icon Set

Function Free Icon Set

28. Circle Social Bookmark Icons

Circle Social Bookmark Icons

29. Social Media Icons Pack

Social Media Icons Pack

30. Handycons

Handycons

Simge Paketleri İle İlgili Yazdığım Diğer Yazılar

Bu yazı oztecnic 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ınızı CSS3 İle Geleceğe Taşıyın

oztecnic — Mon, 09 Mar 2009 12:25:00 GMT

CSS3 ile birlikte web tasarımında yaratıcılıkta patlamaya yol açacak pek çok yeni özellik bulunuyor. Bu özellikler CSS'nin stilleme kurallarında yer alıyor ve hazırlıkları halen süren CSS3 Tanımlaması'nda yer alıyor. Aslında bu yeni özellikleri müşterileriniz için geliştirdiğiniz web sitelerinde henüz önümüzdeki birkaç yıl boyunca kullanamayacaksınız ancak tasarım blogları ve Web tasarım komünitesini hedefleyen web siteleri, web tasarımının sınırlarını zorlamak için bu özellikleri kullanaral tasarımınıza biraz daha güzellik katabilirler ve endüstriyi geleceğe taşıyabilirler.

Yazının devamında bulacağınız 5 teknikle şimdiden geleceğin teknolojisi için hazırlık yapmaya başlayabilirsiniz.

1. Border Radius

border-radius

Muhtemelen günümüzde en çok kullanılan CSS3 tekniği border-radius elementi. Standart HTML blok elementleri kare şeklindedir ve 90 derecelik köşelere sahiptir. CSS3 ile birlikte gelecek olan bu yeni özellik ile birlikte yuvarlatılmış köşeleri de web sitelerimizde kullanabileceğiz.

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

border-radius ayrıca köşelerin her birini ayrı ayrı stillememize de izin veriyor ancak bunun için kullanılan sözdizimi -moz ve -webkit için biraz farklı:

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

Bu özellik şimdilik Firefox, Safari ve Chrome tarafından destekleniyor. İlgili özellik ayrıca Twitter üzerinde de kullanılıyor.

Ayrıca bakınız:

2. Border Image

border-image

Adından da anlaşılabileceği üzere border-image, her bir nesnenin sınırları için bir görsel kullanabilmemizi sağlıyor. İlk olarak görsel, nesenin her bir köşesi için oluşturuluyor. Görselin her bir köşesi, HTML nesnesinin bir köşesine işaret ediyor. Ardından bu görsel aşağıdaki sözdizimi kullanılarak siteye aktarılıyor.

border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png) 5 repeat;
-moz-border-image: url(/images/border-image.png) 5 repeat;
border-image: url(/images/border-image.png) 5 repeat;

{border: 5px;} özniteliği sınırın genel genişliğini belirtirken ardından uygulanan her bir border-image kuralı görsel dosyasını hedefliyor ve tarayıcıya görselin o 5px genişliğindeki alanın ne kadarını doldurması gerektiğini söylüyor.

Sınır görselleri de tıpkı köşelerde olduğu gibi sınır başına tanımlanabiliyor. Bu sayede her bir sınır için farklı görseller kullanılabilmesinin de önü açılmış oluyor.

border-bottom-right-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border-top-right-image
border-right-image

Bu özellik Firefox 3.1, Safari ve Chrome'de destekleniyor. Özellik ayrıca Blog.SpoonGraphics üzerinde de kullanılmış.

Ayrıca bakınız:

3. Kutu ve Metin Gölgeleri

box-shadow

Gölgeler: Gölge efektini hanginiz sevmiyorsunuz ki? Bu efektler bir web tasarımını doğru kullanıldığında çok güzel, yanlış kullanıldığında da çok kötü yapabilirler. Şimdi, CSS3 ile birlikte gölge efekti oluşturmak için Photoshop'a bile ihtiyacınız olmayacak. Bugüne kadar bu özelliği sitelerinde kullanmaya cesaret edenler ortaya fena işler çıkarmadılar. Özelliğin kullanımına güzel bir örnek olarak bu yıl yayımlanmaya başlayan 24 Ways websitesi gösterilebilir.

-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;

İlk iki öznitelik gölgenin elementten ne kadar uzağa kadar esneyeceğini gösteriyor. Yukarıdaki kod örneğinde bu x ve y açıları için 10 px olarak belirtilmiş. Üçüncü öznitelik ise gölgenin bulanıklık seviyesini belirtirken son öznitelik ise gölgenin rengini tanımlıyor.

Bununla birlikte text-shadow özelliği aynı efektin metin üzerine de uygulanabilmesini sağlıyor.

text-shadow: 2px 2px 5px #ccc;

Şimdilik bu özellik Firefox 3.1, Safari, Chrome (sadece box-shadow) ve Opera (sadece text-shadow) üzerinde kullanılıyor. Örneğin kullanıldığı web sitesi ise 24 Ways.

Ayrıca bakınız:

4. RGBA ve Geçirgenlik İle Kolay Saydamlık

opacity

Web Tasarımında PNGlerin Kullanımı saydamlığı anahtar bir tasarım özelliği haline getirdi. CSS3 ile birlikte alpha ve geçirgenlik kurallarını kullanmak mümkün olacak.

rgba(200, 54, 54, 0.5);
/* örnek: */
background: rgba(200, 54, 54, 0.5);
/* ya da */
color: rgba(200, 54, 54, 0.5);

İlk üç numara kırmızı, yeşil ve mavi renk kanallarına işaret ederken son değer ise saydamlık efektini verecek olan alpha kanalını belirtiyor.

Alternatif olarak geçirgenlik kuralı ile birlikte renk ve geçirgenlik değerlerini ayrı ayrı belirtmek mümkün olacak:

color: #000;
opacity: #0.5;

Bu özellik Firefox, Safari, Chrome, Opera (opacity) ve IE7 (opacity, sorunlu). Bu özellik yine 24 Ways sitesinde kullanılmış.

Ayrıca bakınız:

5. @font-face İle Özel Web Yazıtipleri

@font-face

Web üzerinde daima güvenle kullanabileceğiniz yazıtipleri vardır: Arial, Helvetica, Verdana, Georgia, Comic Sans (hmm...) vs. Şimdi @font-face CSS3 kuralı ile birlikte yazıtipleri çevrimiçi bir dizin üzerinden çağrılabilecek ve web üzerinde kullanılabilecek. Ancak bu özellik telif hakkı sorunlarını da beraberinde getireceğinden şimdilik kullanabileceğiniz sadece birkaç yazıtipi bulunmakta.

Bu özelliğin kullanılabilmesi için gereken kod şu şekilde olmalıdır:

@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
}

Ardından font-family'nin geriye kalan öğeleri de günümüzde kullanıldığı şekilde kullanılmaya devam edecektir.

h1 { font-family: ‘Anivers’, Helvetica, Sans-Serif; }

Bu özellik Firefox 3.1, Safari, Opera 10 ve IE7 (çok sorunlu, eğer kendinizi yeterince cesur hissediyorsanız o zaman IE üzerinde font-face'i çalıştırmayı deneyebilirseniz) üzerinde çalışıyor. Bu özelliği kullanan bir web sitesi olarak TapTapTap gösterilebilir.

Ayrıca bakınız:

Her ne kadar CSS3 halen geliştirme aşamasında olmasına rağmen burada listelenen kurallar daha şimdiden bazı tarayıcılar tarafından desteklenmektedir. Özellikle Safari'nin bu yeni özellikler için tam desteği bulunuyor. Ancak ne yazık ki, bence dünyanın en iyi tarayıcısı olmasına rağmen Safari'nin kullanıcı sayısı halen çok değil bu sebeple bu özellikleri sırf Safari kullanıcıları için eklemek, en azından şimdilik pek mantıklı bir çözüm değil. Ancak Apple'ın Mac bilgisayarlarının kullanım oranının gün geçtikçe günlük hayatımıza girmesi ile birlikte Safari'nin de kullanım oranı önemli ölçüde artacaktır.

Firefox da öte yandan İnternet kullanıcılarının %20'den fazla bir kesimini içeriyor. Daha da önemlisi, pek yakında yayımlanacak olan Firefox 3.1 pek çok CSS3 özelliğini de destekliyor. Firefox kullanıcılarının pek çoğunun tarayıcılarını güncelleyeceğini varsayarsak, bu tip yeni stilleme kurallarını destekleyen tarayıcıları kullanan kullanıcıların sayısı önemli ölçüde artacaktır.

Google Chrome ise bu yıl içerisinde yayımlandı. WebKit işleme motorunu kullanan Chrome, aynı işleme motorunu kullanan Safari ile aşağı yukarı aynı özelliklere sahip. Safari özellikle Mac kullanıcıları arasında popülerken, Chrome'nin de piyasaya giriş yapması ile Windows kullanıcıları arasında popülerlik kazanmaya başlıyor.

Yüzde bazında W3'ün tarayıcı istatistiklerine göre Kasım 2008 itibarıyla W3School kullanıcılarının %44.2'si Firefox, %3.1'i Chrome, %2.7'si ise Safari kullanıyor. Bunun diğer anlamı ise bu yeni özellikleri İnternet kullanıcılarının %50'sinin görebilecek olması. Özellikle web tasarım komünitesi içerisinde, ki bu kesim tarayıcı seçimi konusunda daha özenli davranıyor, CSS3 desteğine sahip tarayıcıların kullanım oranı %73.6'ya kadar çıkıyor (Blog.SoonGraphics'e göre).

6. Kötü yanları

Web siteniz artık pek çok güzel tasarım özelliğine kavuşmuş olabilir, ancak bu özellikleri kullanırken daima aklınızın bir köşesinde tutmanız gereken bazı kötü tarafları da yok değil:

Internet Explorer: İnternet kullanıcılarının %46'sı bu yeni özellikleri göremeyecek, o yüzden bu yeni özellikleri web sitenizin hayati önem taşıyan bölümlerinde kullanmayın. İkincil tercihlerin de CSS kodunuz üzerinde oluşturulmuş olmasına dikkat edin.
Doğrulanmamış Stil Şablonları: Bu CSS3 özellikleri henüz son hallerine ulaşmış değiller. Şimdilik bazı tarayıcıları hedefleyen etiketlerle birlikte kullanılabiliyor. Bu özellikler, CSS stil şablonunuzun doğrulanmaması ile sonuçlanabilir.
Fazladan CSS Kodlaması: Son maddenin devamı olarak her bir tarayıcıda aynı kuralı uygulamak için tarayıcıları ayrı ayrı etiketlemenin yanısıra CSS derlemesinin son kodunu da sitenize eklemek, CSS kodunuzun uzamasına yol açacaktır.
Potansiyel Olarak Berbat Kullanımlar: Tıpkı Photoshop filtrelerinin berbat kullanım örneklerine rastladığımız gibi bu yeni stilleme özelliklerinin kötü kullanımı sonucunda da ortaya berbat web siteleri çıkabilir. Özellikle gölge efekti daha şimdiden kulaklarımın çınlamasına yol açıyor. Özellikle kurumların pazarlama departmanlarının bu özelliği ne derecede kullanmak isteyebileceklerini düşünmek istemiyorum.

Kaynak: Smashing Magazine
Yazılarımı RSS İstemcisi Üzerinden Takip Etmek İçin Buraya Tıklayın
@pinkfloyd twitter
pinkfloyd köşesi

CSS / CSS3 İle İlgili Yazdığım Diğer Yazılar

Bu yazı oztecnic 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

960 css çatısına yakından bakış

oztecnic — Sun, 15 Feb 2009 13:13:00 GMT

CSS çatılarının (framework) sayısı her geçen gün biraz daha artıyor. CSS çatıları özellikle CSS ile kod yazmak konusunda henüz kendisini yeteri kadar geliştirmemiş olanlar için kimi zaman oldukça kullanışlı bir hal alabiliyor. Ancak bazı CSS profesyonellerine ve diğer dillerin programcılarına göre CSS, üzerine bir çatı geliştirilmesi gerekecek kadar zor bir dil değil.

Eğer herhangi bir CSS çatısı üzerine bir rehber okuduysanız, ilgili rehberlere bırakılan pek çok yorum yukarıdakilerle aşağı yukarı aynıdır. Benim görüşüm bu tip yorumların büyük çoğunluğunun bir miktar tatminsizliğe bağlı olduğu yönünde. 960 üzerinde biraz zaman geçirdikten sonra, web uygulamalarınızı geliştirirken size ne kadar zaman kazandırabileceğine inanamayacaksınız. Hiç olmazsa ilgili çatıyı sadece bir 10 dakikalığına inceleyin. Her zaman klavyenizin delete düğmesine basabilirsiniz ancak bunu yapacağınızdan şüpheliyim.

Artıları

Geliştirme zamanını önemli ölçüde kısaltıyor.
Temiz ızgara yapısına sahip.
Farklı tarayıcılar üzerinde problemlerle karşılaşma ihtimaliniz çok düşük. Bulduklarınızı da kolayca düzeltebilirsiniz.
Pek çok kişinin söylediğinin aksine "abartılmış" değil. Burada 3-4 KB'den bahsediyoruz arkadaşlar! Bu tip stillemelerinin pek çoğunu zaten neredeyse tüm web uygulamalarında kullanıyorsunuz.
Karmaşık anahatları kolayca oluşturun.

Eksileri

Adının "960" olmasının bir nedeni var. Web siteniz için başka bir genişliği kullanmak istiyorsanız, o zaman diğer çatılara göz atmanızı öneririm.
Diğer tüm "çatılarda" olduğu gibi bazı kısıtlamalarınız yok değil.
Onu siz yapmadınız. Kodun %100'ünün size ait olmasının verdiği his bir başkadır.

Kullanım
12 sütuna sahip bir altyapı üzerinde aşağıda gördüğünüz gibi oldukça sade bir anahat hazırlmak istediğinizi hayal edin. İlk olarak "container_12" adındaki bir sınıfa sahip bir kapsayıcı bir div oluşturmamız gerekiyor. 12'ye dikkat edin.

<div id="container" class="container_12">  
...içerik buraya  
</div>

Burada bir ID tanımlamanızın kesinlikle gereği yok ancak ben özellikle divin ne amaçla kullanıldığını daha sonra kolayca anlayabilmek adına divlerime genellikle bir ID atarım. 960'ın kötü yanlarından birisi de sınıfların elementin ne amaçla kullanıldığını belirtecek herhangi bir tanım içermiyor oluşu. Bu sebeple DIV'e bir ID ekleyerek bu kavram sorununu kolayca gidermiş oluyoruz.

Izgaralar

Şimdi de basit bir başlık ve iki sütunlu bir altyapı oluşturmak istiyoruz. Başlamadan önce tanıtıma bakarak ne kadar genişlikte bir ızgara kullanmak istediğinize karar verebilirsiniz.

Başlık genişliği olarak 940px seçeceğim (+20 px de marjlar için = 960), yan çubuk genişliği için 220px ve ana içerik kısmı için de 700 px seçeceğim.

Her bir div elementini bir sınıfa dahil etmelisiniz. Çatının kurallarına göre sınıf isimleri "grid_" öneki ile başlamak ve devamında istenen sütun sayısını girmeniz gerekli. Bizim durumumuzda "grid_12", "grid_3" ve "grid_9" sınıflarını kullanacağız.

<div id="container" class="container_12">  
  <div id="header" class="grid_12">  
    içerik buraya  
  </div>  

  <div id="sidebar" class="grid_3">  
    içerik buraya
  </div>  

  <div id="mainContent" class="grid_9">  
    içerik buraya  
  </div>  
</div

Çatının sunduğu stillerin üzerine her bir div için arkaplan rengi ve minimum genişlik ekledim. Bunu koda eklemedim zira sadece sütunları tanıtımda daha belirgin yapmak için ilgili stilleri kullandım.

Marjlar, yüzen divler ya da IE hileleri ile boğuşmadan bu anahattı inanılmaz derecede çabuk bir şekilde hazırladık. 960'ın gerçek gücü özellikle karmaşık gazete-benzeri arabirimler geliştirmek istediğinizde ortaya çıkıyor. Bu konuda daha fazla bilgi almak istiyorsanız buradaki screencast'ı izleyebilirsiniz.

960 GS İle İlgili İlginizi Çekebilecek Diğer Kaynaklar

960 CSS Çatısı İle Prototip Oluşturma
Grid 960 bir CSS çatısı olup geliştiricilerin hızlıca prototip tasarımlar oluşturabilmelerini sağlıyor. Şablonlar oluşturabilmek için inanılmaz araçlar bulunuyor? Neden mi? Çünkü hepsi sizin daha hızlı sonuçlar alabilmeniz için işin zor kısmını sırtınızdan alabilmenizi sağlıyor.

Makaleyi Ziyaret Edin

WP_Query ve 960 CSS Çatısı İle Gazete Teması Oluşturun
WP_Query oldukça güçlü bir araçtır. Bugün ilgili aracı kullanarak nasıl 3 sütunlu gazete şablonu oluşturabileceğinizi göstereceğim. Ana sütunda tüm blog girdileriniz yer alırken, yanlara ilerledikçe belirli kategorilere ait blogları listeleyeceğiz. Temel anahattımız ve temamızı sıfırlamak için 960 CSS çatısını kullanacağız ki bu sayede, işin büyük bir kısmı tamamlanmış olacak.

Makaleyi Ziyaret Edin

Web Tasarımı İçin Hangi CSS Çatısını Kullanmalısınız?
WordPress ve diğer platformlar için o güzel "magazin" temalarının nasıl oluşturulduğunu hiç merak ettiniz mi? Hepsi olmasa da pek çoğu, CSS Izgara Çatıları kullanılarak geliştirilmiştir. Bu yüzden siz de halihazırda sunulan CSS çatılarını kullanarak kendi magazin temanızı oluşturabilirsiniz. Karmaşık web sayfası anahatlarını çatı kullanmadan oluşturmak mümkün olsa da bunun günümüzde mazoşist bir tutumun bir ürünü olduğunu söylemek yanlış olmaz. Bu makalede günümüzde sunulan çatılara genel bir bakış atacak ve hangisini kullanmanız gerektiğine birlikte karar vereceğiz.

Makaleyi Ziyaret Edin

Kaynak: NETTUTS

CSS Çatıları Hakkında Yazdığım Diğer Yazılar

Bu yazı oztecnic 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

En İyi 50 CSS Makalesi

oztecnic — Wed, 14 Jan 2009 17:27:00 GMT

Modern web tasarımı CSS olmadan olmaz. CSS'in esnekliği web geliştiricilerine güncellemesi daha kolay ve daha hızlı web siteleri yaratmasına olanak sağlar. Toxel, bu konuda müthiş bir arşiv oluşturmuş. İpuçları, teknikler, şablonlar, dersler, galeriler, kaynaklar ve araçlar hakkında bir 50 adet makaleyi bir araya toplamış. Mutlaka inceleyin.

css ipuçları ve teknikleri

CSS ŞABLONLARI (Template) VE PLANLARI (Layout)

CSS DERSLERİ

CSS GALERİLERİ

CSS KAYNAKLARI

CSS ARAÇLARI

(kaynak)

Bu yazı oztecnic 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

Aptana Studio 1.0

oztecnic — Mon, 05 Nov 2007 14:47:00 GMT

Daha önce de bahsedildiği gibi Aptana ücretsiz, platform bağımsız ve eklenti desteği olan güçlü bir web editörü. 2 yılı aşkın bir süredir geliştirilen bu web editörü nihayet 1.0 sürümüne ulaşmış.

Aptana artık Community Edition (ücretsiz) ve Professional Professional (99 dolar) olmak üzere iki farkı sürümle dağıtılıyor. Bu iki sürümün arasındaki farklara buradan gözatabilirsiniz.

Eklentiler yoluyla genişletilebilen bu web editörünün Ajax, JavaScript, HTML, CSS, PHP, RadRails, Adobe AIR ve hatta Apple iPhone desteği bile var. Bunun yanında ExtJS, jQuery, Prototype, Scriptaculous gibi javascript kütüphaneleri de Aptana ile beraber kullanılabiliniyor. MooTools ise şimdilik desteklenmiyor.

Özelliklerini saymakla bitiremeyeceğim bu web geliştirme aracını download sayfasından bilgisayarınıza indirebilirsiniz. Ayrıca görüntülü dersleri izleyebileceğiniz aptana.tv adresini hatırlatmak isterim.

Aptana ekran görüntüsü

Bu yazı oztecnic 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

En İyi 10 Web Sitesi İçin Görsel Performans Optimizasyonu

oztecnic — Thu, 12 Feb 2009 07:26:00 GMT

Sizin de bildiğiniz üzere optimizasyon; Google, Yahoo! ve Live gibi popüler web siteleri için bile çok önemlidir. Bu makalede sadece basit araçlar kullanılarak bu çok ziyaret edilen web sitelerinin yanıt sürelerini nasıl daha çok kısaltabileceğimize ve daha az veri trafiğine yol açabileceklerini analiz etmeye çalışacağız. Bu basit adımlar herkes tarafından satın alınabilecek ücretli ve ücretsiz bazı araçlar kullanılarak yapılabilir. Bu testimizde inceleyeceğimiz web siteleri: Google, Yahoo!, MSN, Live, Wikipedia, Amazon, Facebook ve MySpace.

Testimizi Smushit uygulamasını kullanarak test edeceğiz ve bu sitelerin ana sayfalarından neler kazanabileceğimize bakacağız. Bu araç sitenizde kullandığınız ve dosya boyutu açısından optimize edilebilecek ancak kalitesinden ödün vermeyecek görselleri bulabilmenizi sağlıyor. Bunun yanısıra Yahoo!'nun performans ekibinin yaptığı bir analize göre Yahoo!'da ziyaret edilen sayfaların %20'si boş cache kullanılarak yapılıyor. Sayfa gösterim sayısından daha az olan ziyaret sayıları haricinde biz bu testimizde %5 kullanacağız ve ardından görsellerini optimize ederek ne kadar veri kazanabileceğimize bakacağız.

1. Google
Compete'ye göre Google her ay 140 milyon tekil ziyaretçinin 2 milyar ziyaretini ağırlıyor. Web üzerinde en çok ziyaret edilen sitedir Google. Bu sebeple daha hızlı ana sayfa ve daha iyi kullanıcı deneyimi için her bytenin önemi vardır. Smushit testini Google üzerinde uyguladık ve logonun GIF'ten PNG'ye dönüştürülerek iyileştirilebileceğini gördük. Dosya boyutunda %5.92 ya da diğer bir deyişle 507 byte kazanım ortaya çıktı. Ziyaret açısından bunu 400 000 000 * 507 byte = 188.872218 gigabyte. Yani Google, sırf logosunu optimize etmediği için ayda 190GB daha fazla veri trafiğine sebep oluyor.

2. Yahoo!
Yahoo!'nun ayda 134 milyon tekil ziyaretçisi ve 2.2 milyar ziyareti var. Ana sayfaları dinamik olduğu için biz sadece arayüz görsellerine odaklanacağız. Görünüşe göre simgeler, paneller ve arkaplanlar gibi kullanıcı arayüzü elementlerinden 4.16 KB kazanılabilir. Bunun anlamı Yahoo! bu elementleri optimize ederek aylık trafiğinde tam 1745.60547 GB azalmaya yol açabilir.

3. MSN
MSN'in aylık tekil ziyaretçi sayısı 88 milyon ve ziyaret sayısı ise 800 milyon civarında. Tıpkı Yahoo! gibi MSN'de de sadece arayüz elementlerini optimize etmeyi deneyeceğiz çünkü onun da ana sayfası dinamik ve geçici görselleri içeriyor. Smushit'in ardından MSN arayüz elementlerinden 1.65KB kazanabilir. Bunu trafiğe ve aylık ziyaret sayısına vurduğumuzda MSN'in sadece görsellerini optimize ederek ayda 251.77002 GB daha az trafik kullanabileceğini gördük.

4. Live
Live sitesinin aylık 87 milyon tekil ziyaretçisi ve 970 milyon ziyareti bulunuyor. Sitede kullanılan görselin optimize edilmesi sonucu kazanılabilecek 857 byte'ın aylık kazancı tam 154.839829 GB olacaktır.

5. YouTube
YouTube'nin aylık ortalama 70 milyon tekil ziyaretçisi ve 360 milyon ziyareti bulunuyor. Smashing YouTube'nin arayüz elementlerinden inanılmaz bir şekilde tam 30.11 KB kazanabileceğini belirtiyor ki bu da sitede kullanılan görsellerin tam %28.35'ini kullanıyor. Google kullanıcı arabirimini optimize ederse sunucu yükünü tamı tamına 2067.48962 GB hafifletebilir.

6. Wikipedia
Wikipedia'nın aylık 60 milyon tekil ziyaretçisi var ve bu ziyaretçiler toplam 200 milyon ziyaret gerçekleştiriyor. Site ticari bir site olmadığı ve sadece bağışlarla ayakta kaldığı için bence sitesinde kullanılan görselleri optimize etmesi gerekiyor. Smushit'in sihrini Wikipedia üzerinde uyguladığımızda sonuçlar etkileyici idi: 5.28KB ya da toplam görsellerin dosya boyutunun %13.35'i. Bunun anlamı Wikipedia görsel optimizasyonu uygularsa trafiğinde 201.416016 GB azalmaya yol açabilir.

7. eBay
eBay'in aylık 80 milyon'u tekil olmak üzere toplam 700 milyon ziyareti mevcut. Smushit'i eBay üzerinde uyguladığımızda 3.84 KB kazandık. Sitenin ana sayfası dinamik olduğundan aynı kural burada da geçerli: optimizasyonu sadece kullanıcı arayüz elementlerine uyguladık. eBay gerekli düzenlemeleri yapara toplamda 512.695312 GB kazanabilir.

8. Amazon
Amazon'un aylık tekil ziyaretçi sayısı 75 milyon ve ziyaret edilme sayısı ise 330 milyon civarında. Bu site biraz zorlu idi zira ana sayfasında pek çok görsel bulunuyor ve biz bu görsellerin hangilerinin kullanıcı arabirimine dahil olup olmadığını görmek için görselleri birer birer kontrol etmek zorunda kaldık. Kazanç eBay'a ziyade daha azdı, 3.28 KB. Amazon'un yüksek miktarda trafiği kaliteli altyapısı ve iyi tasarlanmış sunucu ağı ile kaldırabileceğini düşünüyorum. Gelin bu durumda Amazon'un kazancının aylık ziyaret sonucunda ne olabileceğine bir bakalım. Eğer Amazon sitesindeki kullanıcı arayüzüne ait görselleri optimize etmeye kalkarsa, sitenin elde edeceği kazanç 206.451416 GB civarında olacaktır.

9. Facebook
Facebook'u her ay 60 milyon kişi 870 milyon kez ziyaret ediyor. Facebook reklam içermeyen sade bir ana sayfaya sahip olduğu için işin yarısı zaten bu şekilde tamamlanmıştı. Smushit'e göre Facebook ana sayfasını sadece 396 byte optimize edebilir ki bu da ana sayfada kullanılan toplam görsel dosya boyutunun %0.66'sına eşit. Eğer Facebook bu optimizasyonu uygularsa sitenin kazancı 64.1718507 GB olacaktır.

10. MySpace
Son olarak MySpace... Bu siteyi her ay 60 milyon ziyaretçi tam 800 milyon kez ziyaret ediyor. Facebook'a oranla bu siteye uygulanabilecek olası bir görsel optimizasyonu sonucunda kazanç büyük. Myspace sitede kullanılan görsellerin toplam dosya boyutunun %8.71'ini, ya da diğer bir deyişle 6.30 KB'ını kazanabilir. Trafik açısından bu aylık 961.303711 GB ediyor.

Sizin de gördüğünüz üzere Smushit gibi bu mükemmel ancak bir o kadar da basit bir aracı kullanarak bu İnternet devleri sunucularındaki yükleri hafifletebilirler. Aynı şey kendi siteniz için de geçerli. Smushit ile sitenizi hızlandırabilir ve ziyaretçileriniz için daha hızlı çalışmasını sağlayabilirsiniz. Blogcular için bir başka iyi haberimiz daha var. WordPress blogcuları. Smushit'in WordPress eklentisini indirin ve sitenize kurun. Böylece sitenizde kullanacağınız her görsel otomatik olarak optimize edilecektir. Bu test sırasında kullanılan araç olan Smushit, Yahoo!'dan Nicole Sullivan ve Stoyan Stefanov tarafından geliştirildi. Bu yazı ile İnternet'in sağlığına yaptıkları katkılardan dolayı teşekkür etmek istiyoruz.

Peki bu neden önemli? Akamai'nin 2008'in 3. çeyreğinde İnternet'e yönelik hazırladığı raporuna göre İnternet'i düzenli olarak kullanan kullanıcıların %5'inin bağlantısı 256kbps'nin altında. Birleşik Devletler'de bu oran %5.8. Mükemmel bir kullanıcı deneyimi sunmak için tüm potansiyel ziyaretçilerinizi ve müşterilerinizi önemsemelisiniz.

Yazıyı sonuna kadar okuğunuz için teşekkür ederim.

Kaynak: Graphic Rating

Kullanıcı Deneyimi ve Kullanılırlık Hakkında Yazdığım Diğer Yazılar

Bu yazı oztecnic 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

Sosyal Ağlar İçin 15 Arama Motoru Optimizasyonu İpucu

oztecnic — Sat, 24 Jan 2009 08:17:00 GMT

Tıpkı içerikle yönetilen diğer tüm siteler gibi sosyal ağlar ve komünite siteleri, arama motorları üzerinde daha iyi bir pozisyona sahip olabilmek için optimize edilebilirler. İçeriklerinin fazlalığı nedeniyle sosyal ağların arama motorları puanı yüksektir ve harici sitenin Pagerank değerini yükseltebilir.

Sosyal ağlar için arama motoru optimizasyonu zor olabilr, zira pek çok kullanıcı, kendi içeriklerini sosyal ağ platformu üzerine gönderirken iyi SEO teknikleri hakkında bilgi sahibi olmadıkları için bu teknikleri kullanmazlar.

İngiltere'de tanışma şerefine eriştiğim ve kurumlara yönelik sosyal ağ platformları oluşturan Kwiqq adlı yazılım şirketinin kurucu ortaklarından Raj Anand yayımladığı Sosyal Ağlar İçin 15 Arama Motoru Optimizasyonu İpucu makalesinin çevirisini bulacağımız ve birlikte hazırladığımız bu makalenin, sosyal ağ platformları hazırlayan ve ilgili platformlar üzerinde çalışan bildirgec okurlarının işine yarayacağını umuyorum.

Profil URLleri: Bunlar kullanıcı adlarının temiz ve açıklayıcı sürümleri olmalıdır. Harici siteler üzerinde içerik bulabilmek için arama motorları üzerinde gerçekleştirilen aramalar genellikle kullanıcı adları üzerinden gerçekleştirilir. İstatistiklere göre kullanıcılar, aynı kullanıcı adını farklı siteler üzerinde de koruma eğiliminde olduklarından, bu sizin fazladan trafik kazanmanız için bir başka şans olarak görülebilir. Bizim önerimiz, kullanıcı adını mümkün olduğu kadar sade tutmaktır. Örneğin http://siteadi.com/kullaniciadi/
Meta etiketleri ve açıklaması: Sitenin açıklaması sosyal ağın sahibinin site üzerinden ne kazanmak istediğine göre değişiklik gösterecektir. Örneğin Internet üzerinden motorsiklet satın almak isteyen sürücüler için kullanacağınız açıklama ile Internet üzerinden motorsikletler hakkında bilgi sahibi almak isteyen sürücüler için kullanacağınız açıklama farklı olmalıdır. İlk örnekte kullanmanız olası kelimeler arasında satış, satın alma, indirim gibi kelimeler yer alırken, ikinci örnekte kullanmanızın olası olduğu kelimeler arasında tavsiye, öneri ve inceleme gibi kelimeler yer almalıdır.

Anahtar kelime meta etiketleri: Meta etiketlerindeki anahtar kelimeler ya popüler anahtar kelimeler üzerinden ya da kullanıcıların belirlediği etiketler arasından seçilerek otomatik olarak oluşturulmalıdır. Örneğin ikinci yöntemi tercih edecekseniz, site üzerinde kullanıcıların en çok tercih ettiği anahtar kelimeleri listeleyebilirsiniz. Popüler anahtar kelimeleri bulabilmek için sitenizde kullandığınız etiket bulutlarını kullanabilirsiniz.
Harici site ve sosyal ağ: Arama motoru optimizasyonu açısından sosyal ağınızı sitenize bağlamanızın büyük avantajları bulunmaktadır. Ancak bu birlikteliği sıkı sıkıya gerçekleştirmeniz gerekiyor. Tüm ürünler ve teklifler mümkün olduğu kadar sanki aynı site altındaymışçasınalarsa yerleştirilmelidir. Örneğin sitenizdeki tüm ürünler için sosyal ağınz üzerinde bir profil ve o profil üzerinden de ürünün kendisine bir bağlantı yerleştirilmesi yerinde olacaktır. Kullanıcların bu ürünler için yorum bırakabilmesine izin verin.
Alternatif Resim Metni: Kullanıcıların imajlarının alternatif bir metni olmalıdır, bu sadece arama motoru optimizasyonu için önemli değil, aynı zamanda sitenizin erişilebilirliği için de önemlidir. Bunu söylemekle birlikte kullanıcılardan yükledikleri her bir resim için alternatif metin eklemelerini beklemek doğru olmaz. Sıkı bir analizin ardından kullanıcıların ilerleyen dönemlerde, daha önce yükledikleri resimleri aramak için etiketler kullandıklarını fark edeceksiniz. Alternatif metni etiketlerle değiştirmek yerinde bir davranış olacaktır.
Bloglama: Sosyal ağınıza mümkün olduğu kadar geri bağlantı alabilmeniz yerinde olacaktır. Bloglar sosyal ağınızı pazarlamanızda size yardımcı olmakla kalmaz, ayrıca sitenize daha fazla ziyaretçi çekebilmenize aracılık eder. Bloglama yaparken doğru anahtar kelimeler kullanarak doğru sayfalara bağlantı vermek de önemlidir. Örneğin arabalara yönelik bir sosyal ağ sitesinde antika arabalara yönelik bir sayfanız bar ise, blogunuz üzerinde sosyal ağınz üzerindeki ilgili sayfa üzerine bağlantı vermeniz yerinde olacaktır.
Anahtar Kelimelerin Listesi: Sitenizde ne kadar fazla ilişkili anahtar kelime kullanırsanız, arama motoru optimizasyonu açısından o kadar fazla getiriniz olur. Her sayfanın altında ilşkili anahtar kelimelerin bir listesini bulundurmanın avantajları kaçınılmazdır. Genellikle bir komünite sitesi için bu sitenize en çok katkıda bulunan 10 kullanıcının takma isimlerinin bir listesi ve her bir takma ismin profiline bağlantı içermesi doğru bir kullanım şekli olarak gösterilebilir. Ancak bu listenin düzenli aralıklarla değiştiğine özen gösterin.
Ana Sayfa: Ana sayfanız ve arama sayfanızın içeriği, sırası, stil vb diğer elementleri düzenli aralıklarla değişmelidir. Bu durumun SEO açısından sayısız avantajı bulunmaktadır. Eğer bunu gündelik bazda değiştirecek kaynağınz yoksa, yeni veya popüler kullanıcıları listeleyecek bir betik yazmak yerinde olacaktır. Buna güzel bir örnek olarak Myspace gösterilebilir.
Daha fazla içerik genellikle daha iyidir: Sosyal ağınız üzerinde ne kadar çok içeriğiniz varsa ve o içerik ne kadar sık güncelleniyorsa, arama motorlarının gönderdiği örümcekler (site içeriğinizi otomatik olarak tarayan programcıklar) sitenizi kendi veritabanlarına ekleyebilmek için o kadar sık ziyaret edeceklerdir. Bunu da akılda tutarak belki de kullanıcının verilerini (elbette izin almak şartıyla) Facebook ya da Twitter gibi web siteleri üzerinden almak doğru bir davranış olacaktır.
Widgetler aracılığı ile geri bağlantılar alın: Diğer platformlar için widgetler hazırlamak ya da kendi sitenize özgü widgetleri ziyaretçilerinizle paylaşmak genellikle iyi bir fikirdir, zira bu tip minik uygulamalar sitenize diğer sitelerden alacağınız bağlantılar, pagerank değerinin artmasına yardımcı olurlar. Bu yönde kullanılabilecek genel teknik, bu widget'ların kullanıcı profillerine bağlantılar içermesidir. Bu sayede kendi kullanıcı adları için profil puanı arama motorları üzerinde artacaktır.
Flash kullanmaktan kaçının, widgetlerde bile: Widgetlar oluştururken eğer mümkünse metin bağlantılar veya imajlar içeren widgetler geliştirin. Genellikle bu, flash'ın çoklu platform avantajları göz önüne alındığında zordur ancak flash kullanmamanın arama motoru optimizasyonu açısından avantajı kaçınılmazdır.
Çok dilli sosyal ağlar: Birden fazla dile sahip bir siteniz olduğunuzda işler biraz karmaşıklaşabilir. Aynı içeriği farklı dillerde yayımlayan ve farklı alan adları üzerinde sunan siteler spam olarak algılanabilir ki bunun sonucunda da pek çok arama motorunun siteniz için atadığı puan düşecektir. Yapılabilecek en iyi şey, örneğin İngilizce ve İtalyanca yayın yapan sitelerin kaynağından içeriğe ulaşmaktır. Eğer kullanıcınız sitenize İtalyanca içerik ekliyorsa onu İngilizce'ye çevirmeyin, bunun yerine ziyaretçileri İtalyanca web sitesine yönlendirin.
Diğer bloglarda ve web sitelerinde yerinizi alın: Page rank'in özünde sitenize diğer sitelerden mümkün olduğunca fazla bağlantı alabilmek yatmaktadır. Bunu başarabilmek için diğer bir kişiyi sitenize bağlantı verebilmek için ikna etmeniz gerekebilir. Ne yazık ki bunu söylemek gerçekleştirmekten daha kolaydır. Yüksek profilli bloglardan ve gazetelerden ne kadar fazla bağlantı alırsanız, Google'ın sitenizi taraması o kadar kolaylaşır.
Beyaz sayfalar ve multimedya: Scribd, Flickr, YouTube gibi diğer sitelere kullanışlı içerik ekleyerek bu sitelerdeki içeriği kendi sitenizde paylaşırken, kaynak siteler üzerinden kendi sosyal ağınıza bağlantı vermeyi unutmayın.
Google araçları: Google Analytics, Webmasters, Google Alerts gibi Google araçlarını kullanarak sosyal ağınızın gelişimini takip edin. İlgili araçların sunduğu raporlarla sitenizi geliştirmeye devam edin.

Hepsinden öte atacağınız tüm adımları legal ve etik tutmaya özen gösterin. BMW Google tarafından kara listeye alındığında yasadışı girişimlerin SEO'ya etkilerinin ne denli önemli ölçüde olabileceğini hepimiz gördük. Umarım bu ipuçlarını sosyal ağınız için kullanışlı bulursunuz. Eğer sizin de önerdiğiniz diğer ipuçları varsa yorumlarınızla paylaşmayı unutmayın.

seo ile ilgili yazdığım diğer yazılar

Bu yazı oztecnic 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

Doğrulanmış (X)HTML - Önemli mi?

oztecnic — Tue, 10 Feb 2009 19:11:00 GMT

Bir web geliştiricisi olarak doğru kod yazmanız gerekir, ancak bu gerçekten önemli mi?

Doğrulamanın ardındaki gerekçelere bir baktım ve web'in en popüler 25 websitesini inceleyerek kodlarının doğru olup olmadığını sorguladım. İşte başlıyoruz...

Doğrulama nedir?
Doğrulama belgelerinizin WWW Konsorsiyumu (W3C) gibi kurumlar tarafından HTML ve XML ile oluşturulan web belge tiplerinin resmi standartları ile uyumlu olup olmadığını test eden bir işlemdir. Aynı işlem WML siteler için WapForum'un yayımladığı standartlara göre yapılır. Normal belgelerimizdeki yazım denetimi ile benzer amacı güderler. (W3C)

Peki neden doğrulamalıyız, getirileri nelerdir?

1. Birbiçimli Olmayan Tarayıcı Doğrulaması
Doğrulanmamış sayfalar tarayıcınızın kodunuzu otomatik olarak doğrulamasına sırtını dayar ve her tarayıcı bunu farklı şekilde yapar. Bu yüzden bir etiketi kapatmayı unutursanız, Firefox bunu gözardı edebilir ancak Safari etmeyebilir bu sebeple farklı tarayıcılarda farklı ve genellikle doğru görünmeyen bir sayfa ortaya çıkar.

2. İşleme Süresi
Eğer kodunuz doğru ise tarayıcınız kodunuzu düzeltmekle uğraşmaz, bu da sayfanızın daha hızlı açılması ile sonuçlanır.

3. Geleceğe Yönelik
Teknolojinin yarın neler getireceğini kestirmek mümkün değildir ancak eğer doğrulanmış bir (X)HTML dosyanız var ise kodunuz gelecekteki web teknolojileri ile sorunsuz çalışacaktır.

4. Google doğrulanmış kodu tercih eder
Shaun Anderson ilginç bir doğrulama testi gerçekleştirmiş; Google doğrulanmış kodu sever mi?

Deneyde aynı içeriğe sahip 4 farklı sayfa doğrulanmış ve doğrulanmamış HTML ve CSS kodları ile kodlanmış. Sonuç ise Google doğrulanmış HTML'ye ve CSS'ye sahip kodu seçmiş ve ilgili sayfayı diğerlerinin üzerinde arşivlemiş.

5. Erişilebilirlik
Doğrulanmış bir koda sahip web sitesinin tüm tarayıcılar tarafından erişilebillir olma ihtimali yüksektir. Buna farklı platformlar ve ekran okuyucuları da dahildir.

6. Bireysel tatmin
Kodunuza doğrulama kontrolü uyguladığınızda ve ekranın üst kısmında yeşil renkli çubuğu gördüğünüzde kendinizi iyi hissedersiniz :)

En sık görülen doğrulama hataları ve düzeltme yöntemleri

a. & işareti (Ampersan)
En sık görülen sorunlardan birisi budur. Ampersanlar '&' şeklinde yazılmalıdır, '&' şeklinde değil. Bu işlem URL yazarken de geçerlidir.
<a href="http://images.google.com/imghp?hl=en&tab=wi">

b. İki yana bloklar (Quotation)
Element özellikleri daima tırnak işaretleri arasında belirtilmelidir.
<body bgcolor="#ffffff">

c. Kapanış etiketleri
Tüm elementler mutlaka kapanmalıdır ve eğer XHTML DTD kullanmışsanız bu durum görsel etiketleri için bile geçerlidir.
<img src='http://www.bildirgec.org/image.jpg' alt="Image" />

d. Belge türleri (Doctype)
Sayfanız mutlaka doğru Belge Türü Tanımlamasına (DTD) sahip olmalıdır ve bu sayfanın en üst kısmına yerleştirilmelidir. Unutmayın ki belge türleri büyük/küçük harfe duyarlıdır.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

e. Elementleri yanlış şekilde iç içe yerleştirmek
Elementler aynı sırada açılıp tersi sırada kapanmalıdır.
Paragraf

Dünya'nın En Önemli Sitelerinin Kodu Doğru mu?
Peki tüm bu bilgilerden sonra popüler web sitelerinin kodları doğru mu? Aşağıda dünyanı en çok ziyaret edilen sitelerinin kodlarının doğru olup olmadığını inceledim ve onları iyiden kötüye doğru sıraladım.

Peki Tasarım Komünitesinde İşler Nasıl
Tasarım ve teknoloji komünitesinin büyük isimlerine bir bakalım.

Sonuç
Web sitelerinizin kodunuzun doğru olmasının önemli olduğunu ve bunu alışkanlık haline getirmeniz gerektiğini düşünüyorum. Buna rağmen yukarıdaki sitelere baktığımda (ki bu sitelerin tamamı mükemmel içeriklere ve tasarımlara sahiplerdir) kodu doğru olmayan bir sitesi sahibi olmanın da dünyanı sonu olmadığı aşikar.

Eğer siz de benim gibi düşünüyorsanız, kodunuz doğru olduğunda geceleri daha rahat uyuyacaksınızdır

Sizin sitenizin kodu doğrulanabiliyor mu?
Bu yazı için web sitelerinin kodlarının doğru olup olmadığını takip etmek zor bir işti, bu yüzden başka sitelerin de kodlarının doğru olup olmadığını görmek güzel olacaktır. W3C Doğrulama Kontrolünü siteniz üzerinde uygulayın ve ardından sonuçları yorumlarınızla paylaşın. Türkiye'nin bazı önemli sitelerin kodlarının doğru olup olmadığını da merak etmiyor değilim.

Kaynak: Lee Munroe

Kullanılabilirlik ve Web Standartları Üzerine Yazdığım Diğer Yazılar

Bu yazı oztecnic 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+ jQuery ve Mootools tab örneği

oztecnic — Wed, 28 Jan 2009 14:01:00 GMT

bu bildiri için 10 adet jquery ve mootools tab örneği topladım umarım beğenirsiniz.

15daysofjquery- jQuery Tabs

Perspective Tabs

MooTabs

Bu yazı oztecnic 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

Delicious Linklerinizi Wordpress'te Yayınlayın!

oztecnic — Wed, 28 Jan 2009 18:19:00 GMT

Başlık biraz uzun kaçtı ama idare edin artık.
Neyse konumuza gelelim biz.Bu sistem sizin Delicious'unuza eklediğiniz linkleri belli periyotlarla sizin blogunuza yazı olarak yolluyor.
Gelelim nasıl yapacağımıza;

1. Bir Delicious hesabımızın olması gerekiyor.(Bunu okuduğunuza göre zaten vardır.) 2. Delicious'a giriş yaptıktan sonra Settings > Blogging > Blog Posting diyoruz.Ve karşımıza şöyle bir ekran geliyor:

3. Bu ekranı kırmızıyla yazdığım gibi doldurun. 4. Ve son olarak "Submit Job" butonuna tıklayın ve olsun bitsin. 5. Takıldığınız, anlamadığınız,uygulayamadığınız bir yer olursa mesaj atabilir veya buradan sorabilirsiniz :)

Bu yazı oztecnic 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