bildirgec.org - burc - beğendikleri

Eski Dos Oyunlarını Bulabileceğiniz 7 Site

burc — Thu, 23 Sep 2010 06:31:00 GMT

Bilgisayarla tanışıklığı biraz erken olanlar ms-dos oyunlarını hatırlarlar. Hatta bu oyunları hayranlık derecesinde seven insanlar da tanırım. Eğer siz de bu tarz insanlardan biri iseniz, bu sitelerde aradığınız şeyi bulacaksınız.

abandonware games:

Aksiyon, yarış, RPG ve strateji kategorilerinde 700 farklı oyunu barındıran bu site iyi bir dos oyunu arşivine sahip.

dos games:

abandonware'den sonra en büyük koleksiyona sahip olan site dos games. 500'ün üzerinde oyun barındırıyor. Oyunları türlerine göre listeleyebilirsiniz.

free game downloads:

Değişik kategorilerde oldukça iyi miktarda oyun barındırıyor. Kategoriler altında yüzlerce oyun sizi bekliyor. Sitede ayrıca ateri oyunları da bulunmakta.

href="http://www.freeclassicdosgames.com/">free classic dos games:

Bu site yaklaşık 200 oyunu barındırıyor. Her oyunla ilgili ekran görüntüleri, incelemeler de bulunuyor.

rgb classic games:

Bu site klasiklerin yanında "modern" oyunları da barındırıyor. İstediğiniz oyunları kategorilerde arayabilir, forumlarda dos oyunu severlerle bir araya gelebilirsiniz.

free game empire:

Bu site dos oyunlarının yanında dos oyunlarını çalıştırmak için gerekecek emulatörleri vs. barındıran bir site.

play.vg

indirip oynamaktansa, oyunları online oynayıp eğlenmek isteyenler bu site sizler için. wii'de oynadığınız tenis oyunlarını bırakın! burada piksel piksel tenis oyunları sizleri bekliyor.

kaynak

telefonunuza ses indirebileceğiniz 5 site.

en sevdiğiniz siteleri bir sayfaya toplayın!

google'dan yeni hamle: google instant

diğer yazılarım

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

Php güvenlik araçları

burc — Thu, 06 May 2010 11:57:00 GMT

php, open source olmasının yanısıra çok geniş bir yapıya sahip olması bazı projelerde güvenlik açıklarına sebep olabilmektedir. bu açıkların genel anlamda bir kısmını biliyoruz bilmediklerimiz içinse, bu amaca hizmet eden araçlar işimize yarayabilmektedir. işte onlardan birkaçı;

PhpSecInfo

php güvenliği için çok yararlı olan bu araç detaylı raporlar sunmakta. Eğer hatalar var ise bu hataların nasıl düzeltilebileceğine dair bilgiler de veriyor.

PHP Security Scanner

Bu araç ise güvenlik açıkları için PHP kodu veya herhangi bir dizini taramak için kullanılabilir. PHP Security Scanner olası sorunları daha iyi görüntülemek için yararlı UI özellikleri ve aramada dizin ya da dosyaları filtreleme için temel arama fonksiyonlarını destekler.

Spike PHP Security Audit Tool

bu güvenlik aracı ise statik bir analiz yapmaktadır. siz projenizi geliştirme aşamasında iken güvenlik açıklarını tarayarak size doğru yolu göstermekte.

Bu yazı burc 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 2.0 için Tasarım Araçları

burc — Fri, 20 Nov 2009 12:26:00 GMT

Web 2.0 gelince web siteleri dahada güzelleşip renklendi.Fakat eski tasarımcıların bazıları buna uyum sağlayamadı.Örneğin bir arka plan için photoshop vb. program ile uğraşmak istemiyorsanız aşağıdaki araçlar tam size göre. Sizin için butonlar, arka planlar, rozetler, yükleniyor simgelerini birkaç dakikada oluşturabilirler. Bazen dar zamanda yapmak zorunda olduğunuz bir iş varsa sizin için hayat kurtarıcı olabilirler. Sizin 10 dakida yapıcağınız işi 1-2 dakika gibi kısa sürede bitirirler.

Favico

(Çok kullanışlı bir favicon oluşturucu. Web siteleriniz için favicon oluşturabilirsiniz.)

SpiffyBox

(Artık yuvarlak köşeli kutu ve bloklar yapmak için uğraşmanıza gerek kalmayacak. Bu servis sizin için yapıyor ve size css, html kodlarınızı veriyor. Size bunları web sitenize eklemek kalıyor.)

Ajax Load

(Dolu dolu bir web siteniz var ise yavaş yüklenecektir. Birçok sitede gördüğünüz yükleniyor iconları bu site yardımı ile web sitenize ekleyebilirsiniz.)

Web 20 Badges Generator

(web 2.0 ilk çıktığında rozetler çok modaydı. Bu rozetler hem web sitenizi çok şık gösterir hem de oldukça ziyaretçi çeker. Yuvarlak, kare, yıldız vb. rozetleri bu uygulama ile herşeyini ayarlayıp üstüne yazı da yazarak web sitenizde yayınlayabilirsiniz.)

Buttonator

(Eğer çok az zamanınız varsa ve web siteniz için buton yapmak istiyorsanız bu site tam size göre. O sizin yerinize her şeyi yapıyor.)

Load Info

(Başka bir ajax yükleme jenaratörü.Ajax Load'dan daha fazla seçenek bulunuyor. 16*16, 24*24, 48*48 boyutlarında oluşturabilir arkaplan vb. gibi seçenekleri değiştirip kullanabilirsiniz.)

Stripe Generator

(Web 2.0 ile gelen başka bir yenilik ise şeritli (çizgili) arka planlar.Eğer uğraşıp uzun uzun yapmak istemiyorsanız bu jenaratör sizin yerinize herşeyi yapıyor. Renkleri çizgilerin nasıl olacağını seçin anında arkaplanınız oluşturulsun)

Bg Patterns

(Eğer çizgili arka planlar yerine daha dikkat çekici arka planlar kullanmak istiyorsanız bu servis tam size göre. Birçok seçeneği isterseniz eğip bükerek arka planınızı birkaç dakikada oluşturabilirsiniz.)

Adobe Kuler

(Web siteleri için uyumlu renk kombinasyonları üreten kullanışlı bir jenarotör. Ayrıca adobe tarafından yapılmış)

CSS Typeset

(Farklı yazı tiplerini değiştirip anında css kodunu alabileceğiniz harika bir jenaratör.)

Blind Text Generator

(Yazınızı farklı biçimlere çeviren. Paragraflara bile ayırabilen ilginç bir jeneratör.)

Reflection Maker

(Web 2.0 logolarının güzel kılan bir şeyde aşağıda oluşan yansımalarıdır. Bu jenaratör bunu sizin yerinize anında yapabiliyor.)

Kaynak ; quaness

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

1990-2009 bilgisayar oyunu arayüzleri

burc — Mon, 16 Nov 2009 12:22:00 GMT

Arkadaşlarla beraber, o eski güzel günleri hatırlıyoruz da, hep beraber Doom, Mortal Kombat, Quake veya War Craft oynardık. Hem de daha Pentium 133 MHz bir bilgisayar üzerinde. Sound Blaster ve 4MB ekran kartı ile. O günden bu günlere çok şey değişti.
Bilgisayar oyunları, 90'larda hatırladıklarımızdan çok daha eskiye dayanıyor aslında. Yaratılan ilk bilgisayar oyunu, 1947 yılında yapıldı, adı "Tennis For Two". Ve osiloskop benzeri bir cihazla oynanıyordu.

tennis for two

Apple II'nin, Commodore 64 ve ZX Spectrum'un 70'lerin sonlarında ve 80'lerin başında piyasaya çıkmasıyla, bu bilgisayarları alabilecek kadar parası olanlar evlerinde bilgisayar oyunu oynamaya başladılar. 80'lerin ortasına geldiğimizde oyun sektörü büyük bir atılım yaptı ve günümüzün standartlarına ulaştı.
Aslına bakılırsa 90'lar bilgisayar oyun sektörü için tam anlamıyla bir altın çağ oldu ve çok sayıda büyük oyun şirketine can verdi. activision, electronic arts, blizzard ve id software.
Tasarım ve grafik özellik açısından bakacak olursak bilgisayar oyunları çok gelişti ve git gide de gelişmeye devam ediyor. 90'ların bilgisayarları ve oyunları hakkında 2009'da bir yazı yazmak oldukça komik aslında; ancak 16bit ekran kartı, 100MHz işlemciden de çok şey beklememek lazım doğrusu. Günümüzde ise 3.6GHz işlemci ve Nvidia GeForce 9400 gibi donanımlarla muhteşem görsel efektler yaratılabiliyor.
1990

Nintendo, "Super Famicom" 16 bit oyun konsolunu duyurdu.
Creative Lab, "Soundblaster Pro"yu duyurdu.

wing commander

super mario world

final fantasy iii

commander keen

1991 * Grafik hızlandırıcı kartları doğdu. * id software kuruldu. * Tim Berners ve Lee, interneti dünyaya tanıttılar. * intel, 486sx işlemcisini satmaya başladı.

civilization

road rash

the legend of zelda

neverwinter nights

1992 * Microsoft, Windows 3.1'i duyurdu.

mortal kombat

wolfenstein 3d

dune ii

1993 * Microsoft, Windows NT ve MS-DOS 6'yi duyurdu. * intel, pentium 60MHz işlemcisini duyurdu.

sim city 2000

doom

virtua fighter

master of orion

1994 * Ve Commodore, iflasını ilan etti. * Voodoo ekran kartları ile tanınan 3DFX şirketi kuruldu. * Sony, ilk Playstation'ı duyurdu.

heretic

warcraft

tekken

1995 * ilk e3, oyun fuarı, Las Vegas'ta gerçekleştirildi. * Microsoft, Windows 95'i duyurdu. * Microsoft, DirectX 1.0'ı duyurdu. * ATX anakartları doğdu.

warcraft ii

the need for speed

command and conquer

1996 * intel, 200MHz işlemcisini duyurdu. * DirectX 2.0 duyruldu. * Nintendo, ilk 64 bit oyun konsolunu duyurdu.

quake

duke nukem 3d

m.a.x.

1997 * Wi-Fi duyruldu. * DirectX 5.0 duyruldu. * intel, MMX işlemcilerini duyurdu. * ilk DVD satıldı. * intel, 233MHz işlemcilerini tanıttı.

grand theft auto

total annihilation

age of empires

final fantasy vii

quake 2

diablo

1998 * intel, celeron işlemcisini duyurdu. * amd 3dnow! doğdu. * Rockstar Games, kuruldu.

" border="0" />
half life

starcraft with broodwar expansion

microsoft flight simulator 98

starcraft

unreal

1999 * Sega, Dreamcast'i duyurdu. * Pentium iii 500 MHz işlemci duyruldu. * nVidia, gpu (Graphics Processor Unit)'i duyurdu.

everquest

heroes of might and magic iii

2000 * Playstation 2, masaüstü bilgisayarlardan daha iyi grafikler ile duyruldu.

the sims

counter strike

colin mcrae rally 2

grand theft auto 2

2001 * Microsoft, XBox ile oyun konsolu sektörüne giriş yaptı.

max payne

grand theft auto 3

return to castle wolfenstein

halo

empire earth

2002

mafia

diablo ii lord of destruction

warcraft 3

neverwinter nights

splinter cell

dungeon siege

battlefield 1942

baldur’s gate – dark alliance

2003 * Nokia, ilk mobil oyun konsolu telefonu duyurdu. N-Gage * Sony, Playstation Portable geliştirildi.

call of duty

prince of persia

max payne 2

rise of nations

tony hawk’s underground

2004 * Acclaim şirketi, iflasını duyurdu.

doom 3

world of warcraft

grand theft auto san andreas

far cry

half life 2

halo 2

2005 * XBox 360 duyruldu. * Sony, Playstation Portable'ı duyurdu.

medal of honor – european assault

f.e.a.r.

age of empires 3

guitar hero

need for speed most wanted

2006

the godfather

gears of war

the legend of zelda: twilight princess

elder scrolls iv – oblivion

hitman blood money

prey

heroes of might and magic v

titan quest

2007 * Blizzard, Starcraft ii'yi duyurdu. * 3d realms şirketi, duke nukem forever için tanıtıcı videolar yayımladı.

halo 3

super mario galaxy

crysis

call of duty iv – modern warfare

unreal tournament 3

fifa 08

the witcher

guitar hero 3

2008 * Blizzard, Diablo ii'yi duyurdu.

grand theft auto iv

prince of persia

metal gear solid 4

shaun white snowboarding

command and conquer 3 kane’s wrath

madden nfl 09

fallout 3

super smash bros. brawl

2009

f.e.a.r. 2

alan wake

starcraft 2 terrans: wings of liberty

diablo 3

Bunlardan hangisi sizin favoriniz? Bizimle favorilerinizi paylaşın. Liste hakkındaki düşüncelerinizi yazın ve eksik olduğunu düşündüğünüz bir oyun varsa ekleyin.

Kaynak

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

Seo Analiz Araçları

burc — Fri, 25 Sep 2009 06:34:00 GMT

Seo Analiz Araçları

Arama motorlarında belirli yerlere gelmek, rakipleriniz arasından kolayca sıyrılmak için sitelerinizin W3C uyumu, XHTML yapısı, H1-H6 etiketlerinin kullanımının en iyi şekilde olması lazım.

Yukarıda iyi yerlere varmak için saydığımız faktörleri analiz eden ve çıkan hataları report ederek bizlere sunan siteleri kısaca tanıyalım.

raven

Bu araç sitenizin kaynağını inceliyor ve 100 üzerinden puan veriyor. Siteniz 100'ün altında puan alırsa kaynaktaki hataların neden kaynaklandığını belirtiyor ve nasıl çözeceğiniz hakkında yorumlar yapıyor.

http://bildirgec.org/ scored 65 out of 100

2.aracımız reactionengine gireceğiniz keyword ile içeriğinizi değerlendiriyor ve bu keyword'un kullanım sıklığını görüntülüyor. Ayrıca XHTML etiket kullanımı konusunda uyarılarda bulunuyor.

reactionengine

Pineberry

3.aracımız Pineberry SEO, çalışma mantığı aynı bir üstte bahsettiğim reactionengine ile aynı. Belirleyeceğiniz keyword çerçevesinde sitenizin kaynağını inceleyip değerlendiriyor.

Pineberry

4.aracımız SEO Workers kodlamada yapmış olduğunuz hataları ve anahtar kelimelerin kullanım yüzdelerini hesaplıyor.

Seo Workers

5.aracımız Website Grader, 6 farklı şekilde web sitenizin seo değerini hesaplıyor ve kaynakta oluşan problemleri düzeltmeniz için sizlere önerilerde bulunuyor.

Website Grader

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

hayatı kolaylaştıracak 11 css3 tekniği

burc — Thu, 10 Sep 2009 09:03:00 GMT

Hayatı kolaylaştıracak CSS tekniği nasıl mı olur? İşte cevabı... CSS3 birçok yeni nesil tarayıcıda desteklenmeden önce CSS ile yapmaya uğraştığımız birçok efekt vardı. Örneğin Yuvarlak Köşeler (rounded corners) yapmak için ekstra bir imaj ya da javascript dosyası kullanmak zorundaydık. Lakin CSS3 ile beraber ,bu çok kullanılan ama yapılması biraz külfetli olan efektler, rahatça yapılmaya başlanacak. Bu yazıda CS3 desteği ile gelen ve kod yazma süresini oldukça aza indirecek efektleri göreceğiz.

1. Yuvarlak Köşeler
jquery eklentisini kullanarak, yada top şeklindeki bir imaj dosyasını CSS Sprite tekniği ile bölerek yapabildiğimiz yuvarlak köşeleri artık kısa bir kod ile yapabileceğiz.

rounded corners


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

2. Eleman Gölgesi
Türkçe mealini eleman gölgesi olarak telaffuz edebileceğimiz Box Shadow'u aslında jQuery'nin dropShadow eklentisi ile kolayca yapmak mümkündü. Şimdi ise sadece 3 satırlık bir kod ile yeni nesil tarayıcılarda bu özelliği kullanmak mümkün.

box shadow


box-shadow: 5px 5px 2px black;  
-moz-box-shadow: 5px 5px 2px black;  
-webkit-box-shadow: 5px 5px 2px black;

3. Yazı Gölgesi
CSS ile yazı gölgesi yapabilmek için eskiden iki divi üst üste getirip, araya çok ufak bir top margin ve left margin koyuyorduk. İki div'de farklı renklerde aynı yazının bulunmasına da önem gösteriyorduk. CSS3 ile yazı gölgesi desteği de geldi.

text shadow

Eski tip yazı gölgesi
<style type="text/css"> .font { font-size: 20px; color: #2178d9; } .fonts { position: relative; } .fonts .font { position: absolute; z-index: 200; } .fonts .second { top: 1px; color: #000; z-index: 100; } </style> <div class="fonts"> <span class="font">The quick brown fox jumps over the lazy dog.</span> <span class="font second">The quick brown fox jumps over the lazy dog.</span> </div>

Yeni tip yazı gölgesi
<style type="text/css"> .font { font-size: 20px; color: #2178d9; } .font { text-shadow: 0 1px 0 #000; } </style> <span class="font">The quick brown fox jumps over the lazy dog.</span>

4. Font Desteği
Cufon, sIFR, FLIR gibi servisleri sırf CSS'in desteklemediği fontlar için kullanmadık mı? Hala çok popüler olan bu servisler gelecekte tarihin tozlu sayfalarında yerlerini alacaklar. Çünkü CSS3 ziyaretçinin bilgisayarında bulunmayan fontları indirerek gösterime izin vermekte.

font face

Yaşasın @font-face
<style type="text/css"> @font-face { font-family: 'Loyal'; src: url('loyal.ttf'); } .font { font-family: Loyal; font-size: 20px; } </style> <span class="font">The quick brown fox jumps over the lazy dog.</span>

5. Opaklık
Zaman zaman png dosyaları ile sağladığımız, zamanla css'nin de içine sızan opacity'i CSS3 ile tüm tarayıcılar destekleyecek.

Eski usul opaklık ayarlama
<style type="text/css"> .box { opacity: .6; // all modern browsers (this is CSS3) -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE 8 filter: alpha(opacity=60); // IE 5-7 } </style> <div class="box">  </div>

CSS3 ile opaklık ayarlama
<style type="text/css"> .box { opacity: .6; } </style> <div class="box">  </div>

6. RGBA Desteği
Herkes RGB'nin red, green ve blue (kırmızı, yeşil ve mavi) olduğunu bilir. Ama nedir bu A harfinin anlamı? A harfi Alpha'nın baş harfidir. Alpha ise transparanlık değerini belirlemektedir. Daha önce php ile sağlanan rgba desteği artık CSS3 ile server tabanlı bir uygulama olmaktan kurtuluyor.
CSS3 kullanımı
<style type="text/css"> .box { background: url(rgba.php?r=239&g=182&b=29&a=.25); } </style> <div class="box">  </div>

7. Arkaplan Resmi Boyutu
Arkaplan resmini Windows'taki döşeme usulü kutumuzun içine yapıştıran CSS'e resmin boyutlarını belirtmek için bol satırlı tanımlamalar yapardık.
<style type="text/css"> .box { position: relative; overflow: hidden; } .box img { position: absolute; top: 0; left: 0; width: 50%; height: 50%; z-index: 100; } .box .content { position: absolute; z-index: 200; } </style> <div class="box"> <div class="content">  </div> <img src="http://nettuts.s3.amazonaws.com/423_screenr/200x200.jpg" alt="" /> </div>

Fakat dediğimiz gibi CSS3 hayatı kolaylaştırıyor.
<style type="text/css"> .box { background: #ccc url(http://nettuts.s3.amazonaws.com/423_screenr/200x200.jpg) no-repeat; -webkit-background-size: 50%; /* Safari */ -o-background-size: 50%; /* Opera */ -khtml-background-size: 50%; /* Konqueror */ } </style> <div class="box">  </div>

8. Çoklu Arkaplan Resmi
Bir içeriğin arkaplanına iki resim üst üste atayabilmek için, iç içe iki div tanımlamalı, bir de üsttteki resmin arkaplanını transparan yapmak zorunda kalırdık. Çok şükür ki CSS3'e gelen özellik ile bir elemana birden çok arkaplan resmi tanımlayabilecek, bunları sıralayarak hangisinin daha üstte görüneceğini belirleyebileceğiz.

<style type="text/css">
.box {
width: 200px;
height: 150px;
background: url(images/text.png) center center no-repeat, url(images/bg.png) repeat-x;
}
</style>
<div class="box">
    <!--CONTENT-->
</div>

9. Hücreler
bir paragrafı iki hücre halinde sayfaya yansıtmak için çok kez javascript'e başvurduk, sayfalarımızı gereksiz kodlarla doldurduk. CSS3 bu uğraşımıza çare bulmuş ve nihayet hücrelendirmeyi bünyesine katmış.

hücrelendirme

<style type="text/css">
.columns {
-moz-column-count: 2;
-webkit-column-count: 2;
}
</style>
<div class="columns">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>

10. Kenarlık Resmi
Border olarak tanımladığımız ve sadece çizgiden ibaret olan bu elemanlar sizin de canınızı sıkmadı mı? Eğer cevabınız evet ise, CSS3 kullanarak borderlarınıza istediğiniz resimleri koymanızda hiçbir sakınca yok!

border'a resim koymak css3 ile mümkün olacak

<style type="text/css">
.box {
border-width: 20px;
-webkit-border-image: url(images/border.png) 27 round;
-moz-border-image: url(images/border.png) 27 round;
border-image: url(images/border.png) 27 round;
}
</style>
<div class="box">
    <!--CONTENT-->
</div>

11. Animasyonlar
jQuery ile yapabildiğimiz animasyonlar Webkit'li tarayıcılarda hiç javascript kodu yazmadan görülebilecek.

<style type="text/css">
.box {
position: relative;
-webkit-transition: top 300ms linear;
}
.box:hover {
top: 20px;
}
</style>
<div class="box">
    <!--CONTENT-->
</div>

Sözün Özü
Yakın gelecekten CSS3'ün iyice yaygınlaşması ile bir işe ayrılan zamanda azalmalar olacaktır. Her ne kadar IE başta olmak üzere tarayıcıların birbirleriyle olan uyumsuzluğuna bir çare bulunamasa da CSS3, birkaç popüler uygulama için bu uyumluluğu sağlayacak gibi görünüyor.

Not: Bu yazının orjinali Nettuts sitesinde 11 Classic CSS Techniques Made Simple with CSS3 başlığı ile yayınlanmış olup, bildirgeç için Tükçe'ye çevrilmiş ve yazar tarafından yorumlanmıştır.

İlgilinizi çeker mi?

Beni takip edin
basarozcan: RSS, Twitter, FriendFeed

Bu yazı burc 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ımcılar İçin 25+ Grafikli Bilgi

burc — Tue, 23 Jun 2009 17:57:00 GMT

Grafikli bilgiler hızlı örnek bilgiler için harika bir yol olabilir. Uzun raporlar yerine bir grafik üzerinde istediğinizi kolayca öğrenebilme imkanına sahip olabilirsiniz.

Aşağıda web tasarımcıların işine yarayabilecek 25+ grafikli bilgi yer almaktadır.

1. web trend map 4 (web trend haritası)

2. period table of typefaces (punto'nun periyodik tablosu)

3. global internet traffic map (küresel internet trafiği haritası)

4. classifying experiences (deneyimleri sınıflandırmak)

5. flickr user model (flickr kullanım modeli)

6. the browser wars (tarayıcı savaşları)

7. a month of spam (aylık spam)

8. the life of an article on the web (web üzerinde yaşayan makaleler)

9. online communities map (çevrimiçi iletişim haritası)

10. map of the world 2.0 mosaic (dünya'nın 2.0 mozaik haritası)

11. the internet’s undersea world (internetin denizaltı dünyası)

12. search engine spider traps (arama motoru örümcek tuzağı)

13. google pagerank explained (google pagerank açıklaması)

14. building a company with social media (sosyal medya ile şirket kurmak)

15. seo check list (seo kontrol listesi)

16. the life cycle of a blog post, from servers to spiders to suits—to you () (Örümcükler için sunuculardan yaşam döngüsü)

17. software wars (yazılım savaşları)

18. who participates online (kimler çevrimiçi oluyor)

19. what 16 million colors looks like (16 milyon renk görünüyor gibi)

20. periodic table of visualization methods (görselleştirme yöntemlerinin periyoduk tablosu)

21. periodic table of the internet (internet'in periyodik tablosu)

22. country codes of the world (dünya'nın ülke kodları)

23. apple’s tipping point: macs for the masses (apple'ın ipucu noktası: kitleler için mac'ler)

24. infoporn: the cost of living on the bleeding edge of technology

25. map of all yahoo! apis and services (tüm yahoo haritası! api'ler ve servisler)

26. digital media weights and measures (dijital ortam ağırlıkları ve önlemleri)

27. global color usage with respect to time and location / 2009 / sml + adobe kuler pulse (Dünya çapında ilgili zaman ve konum ile renk kullanımı)

28. facebook vs. twitter (facebook ve twitter karşılaştırması)

yazılarımı takip edebilirsiniz.

blog | friendfeed | twitter
kaynak: webdesignerdepot.com

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

burc — 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ı burc 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

Çapraz Tarayıcı Uyumluluğu İçin Altın Değerinde İpuçları

burc — Mon, 16 Feb 2009 19:13:00 GMT

Internet Explorer'la çalışmak her seviyeden web tasarımcısı için bazen sorun olabilir. Ancak bu sorun olmak zorunda olacağı anlamına gelmiyor. Hepsi olmasa da pek çok Internet Explorer hatası, hatanın nasıl oluştuğunu anladıktan sonra kolayca düzeltilebilir. Bu yazımda özellikle giriş seviyesindeki kullanıcılar için çapraz tarayıcı uyumluluğunu sağlayabilmeleri için önemli problemleri ve çözümlerini listeledim.

Yazımda en çok kullanılan tarayıcı sürümleri olan Firefox 2+, Safari 3+ ve Internet Explorer 6+'ya odaklandım. Her ne kadar IE6'nın kullanım oranı gün geçtikçe düşüş gösteriyor olsa da, bu onu desteklememeniz gerektiği anlamına gelmez, zira halen pek çok kullanıcı hangi tarayıcı sürümünü kullandığını bilmemektedir. Eğer bu IE6 hatalarını biliyorsanız, tarayıcı üzerinde test yapmadan bile sitenizin doğru görünüp görünmediğini anlayabilirsiniz. Bu makale süper deneyimli web tasarımcılarına yönelik olmamakla birlikte IE6'nın çapraz tarayıcı uyumluluğuna yönelik gizlerini anlamanıza yardımcı olacaktır.

Özet
Makalenin tamamını okumak istemeyenleriniz için aşağıda makalenin bir özetini bulabilirsiniz.

Daima STRICT DOCTYPE ve standartlarla uyumlu HTML/CSS kullanın
CSS'nizin en başında daima sıfırlama (CSS RESET) kullanın.
Firefox'ta metin işleme sorunlarını gidermek için -moz-opacity:0.99, Safari'de ise text-shadow: #000 0 0 0 kullanın.
Görselleri asla CSS ya da HTML ile yeniden boyutlandırmayın.
Her tarayıcıda metinlerin nasıl işlendiğini test edin. Lucida kullanmayın.
BODY üzerinde metni % ile boyutlandırıp sitenin geri kalanında em kullanarak metin boyutlandırması yapın.
Üzerine float uygulanmış tüm anahat divleri display: inline ve overwlow: hidden içermeli.
CSS3 seçicilerini kullanmayın.
Alpha'yı yüklemediyseniz saydam PNG kullanmayın.

Element Uyumsuzlukları
Her tarayıcı farklı elementleri farklı şekillerde yorumlar - farklı miktarlarda boşluklar, marjlar, sınırlar vs. Bunun anlamı eğr siz öntanımlı stilleri kullanırsanız, kodunuz doğru olsa bile siteniz farklı tarayıcılarda farklı şekillerde görüntülenebilir.

Çözüm
Yapmanız gereken ilk şey, ki pek çoğunuzun bunu bildiğini düşünüyorum, stillerinizi sıfırlamaktır. Sıfırlamak, stillerinizin en üst kısmına yerleştireceğiniz ve elementler üzerindeki boşlukları, marjları, sınırları ve diğer uyuşmazlıkları sıfırlayıp onları standart olarak yeniden inşa eden bir kod parçasıdır.

Eric Meyer'in reset.css dosyasını indirin ve stillerinizin en başına yerleştirin. İşte bu kadar. Temiz, çapraz tarayıcı uyumlu stillere kavuştunuz.

Görsel İşleme
IE6 ve IE7'nin her ikisi de yeniden boyutlandırılmış görselleri inanılmaz derecede kötü bir şekilde işler. Bir görselin boyutunu CSS ya da HTML kullanarak değiştirdiğinizde görsel inanılmaz derecede kötü görünür.

Çözüm
Yapmayın. Görsellerinizi sitenize yerleştirmeden önce istediğiniz boyuta göre yeniden boyutlandırın.

Metin İşleme
Tüm hataların IE'den kaynaklanmadığını söylemiştim. Safari 3+ açık renkli metinlerin koyu renkli arkaplan üzerinde işlenmesi sırasında bir soruna sahip. Kimileri bunun iyi ya da kötü olup olmadığı konusunda farklı görüşlere sahip olabilir, ancak ilgili metni daha aydınlık görüntülemenin bir yolu var. Safari 3.1'de standart metin aşağıdaki şekilde işlenmektedir.

Çözüm
Oldukça kolay. Tek yapmanız gereken aşağıdaki stillemeyi CSS kodunuza dahil etmek.

p {text-shadow: #000 0 0 0;}

#000 kullandığınız arkaplan rengi olmalı. Seçtiğiniz elementlerde muhtemelen siz daha özgün olmak isteyeceksinizdir. Bunu BODY etiketi üzerinde kullanmanızı önermem. Düzeltmek isteyeceğiniz diğer elementler li, dt, dd, blockquote vs olabilir. Daha 'ince' görüntülemek istediğiniz tüm elementlerde bu düzeltmeyi kullanın.

Bazıları Safari'de tipografi için bunun iyi olmadığını söylüyorlar ve metnin standart işleme ile daha güzel göründüğünü söylüyorlar ki ben de onlara katılıyorum. Ancak bazılarının buna katılmadığını da biliyorum. Ayrıca arkaplan rengine, metin rengine ve metin seçimine karar verirken hangisinin daha iyi olduğuna da karar veremeyiz. Bu durumda seçim tamamen kişisel tercihinize ve sitenizin içeriğinin nasıl olduğuna kalmış.

Bu düzeltmeyi Firefox üzerinde kullanmak için opacity düzeltmesini kullanacağız.

p {-moz-opacity: 0.99;}

Bu düzeltmeyi kullanırken dikkatli olmalısınız zira düzeltmenin uygulandığı element içerisinde bir Flash dosyası bulunuyorsa ilgili dosya doğru görüntülenmemektedir.

İlgili düzeltmeler uygulandıktan sonra metnimiz aşağıdaki şekilde görünecektir.

Yazıtipi Seçimi
Hepimizin kullandığı bazı ortak web yazı tipleri vardır - Arial, Georgia, Verdana vb. Hem PC hem de Mac kullanıcılarının bilgisayarlarında bulunan yazı tipleri de mevcuttur - Century Gothic, Arial Narrow vs. Buna rağmen farklı tarayıcıların ve işletim sistemlerinin yazı tipi işleme yöntemleri farklıdır ve sizin bu farklılıkların farkında olmanız gerekir, zira yanlış bir yazı tipi kullanırsanız siteniz çok çirkin görünebilir.

Çözüm
Kullanacağınız yazı tipinin seçimi tamamen sizin tercihinize bağlıdır. Yazı tipini kullanmak güvenli olduğu sürece sorun yoktur ancak bu işleme sorunlarının farkında olmanız gerekir. Kullanmamanız gereken bir yazı tipi muhtemelen Lucida Grande/Sans zira IE üzerinde bu yazı tipi korkunç görünüyor. Yazı tipinin Safari'de (Mac) nasıl işlendiğine bir bakın.

Güzel değil mi? Internet Explorer (PC)'de yazı tipinin bu şekilde görüntüleniyor olması ise çok kötü.

Kimileri Lucida Sans yazı tipinin de işletim sisteminin ClearType özelliği açıldığında düzgün göründüğünü belirtirken, kimileri de halen yanlış göründüğünü belirtiyor. Bu durumda yapılması gereken en doğru şey muhtemelen Lucida Sans kullanmamak olacaktır. Bunun yerine Arial ya da başka bir san-serif yazı tipi kullanmayı tercih etmelisiniz.

Yazıtipi Boyutlama
Metni yeniden boyutlandırma işlemi farklı tarayıcılarda ve işletim sistemlerinde farklı şekillerde işlenir. Örneğin IE pixel kullanılarak boyutlandırılmış bir metni yeniden boyutlandırmayacaktır. Eğer metinleri em kullanarak boyutlandırırsak, o zaman da IE metni yeniden boyutlandırdığımızda boyutunu abartacaktır.

Çözüm
Yazı tipi boyutlandırmaya yönelik kendinize referans alabileceğiniz en iyi kaynak, Richard Rutter'ın yazdığı CSS'de Metin Nasıl Boyutlandırılmalıdır makalesidir. Sonuç ise, metninizi BODY elementi üzerinde yüzde kullanarak boyutlandırıp, stilin geri kalanında em kullanarak boyutu belirlemek. Satır yüksekliği için de yine pixel yerine em kullanırsanız farklı tarayıcılarda doğru işleme sonuçlarını alırsanız.

Burada hatırlamanız gereken şey öntanımlı yazı tipi boyutunun 16px olduğudur. Bu durumda örneğin yazı tipini 12px'e dönüştürmek için kullanmamız gereken kod şudur:

body {font-size: 75%; line-height: 1.5 em;}

Şimdi boyutlandırmanızı em kullanarak yapabilirsiniz:

h1 {font-size: 3em;}

Önerilen bir diğer teknik ise yazı tipinizi önce 10px'e indirgemektir. Bu durmda metninizi em kullanarak yeniden boyutlandırmak daha kolay olacaktır. Örneğin:

body {font-size: 62.5%; line-height: 1.5em;}
h1 {font-size: 1.8em; /* 18px */}
p {font-size: 1.2em; /* 12px */}

Bu tekniği kullanırsanız dikkat etmeniz gereken bir konu var ki o da insanların Internet Explorer üzerinde küçük yazı tipi seçeneğini kullanmaları durumunda metniniz okunamayacak derecede küçük olabilir. Her ne kadar bu seçeneği bilinçli olarak seçen kullanıcı sayısının yok denecek kadar az olduğunu düşünsem de bu ayrıntıyı bilmenizde yarar var.

Yüzen Elementlerde Çifte Marj
CSS Anahatlarımızı birbiri ardına yüzen (float) divler kullanar oluştururuz, tıpkı bir tür yatay tetris gibi. Satırın sonuna gelindiğinde ise satıra sığmayan div bir sonraki satıra kayar. Bir ızgara oluşturmak için sık kullanılan yöntem aşağıdaki gibidir:

#content {float: right; width: 300px; margin-right: 10px;}
#sidebar {float: right; width: 100px;}

Bu kod "normal" bir tarayıcıda aşağıdaki gibi görünmelidir.

Ancak IE'de bu aşağıdaki gibi görüntülenecektir.

Gördüğünüz üzere marj iki defa işlendi. Yüzen element ile aynı yönde bulunan her marj iki defa işlenecektir. Neden diye sormayın, IE bu. Bunun anlamı sol tarafaki elemente uygulanan marj, kodda belirtilenin aksine 20px olarak işlenecektir ki bu da muhtemelen anahattı bozacaktır.

Çözüm
Bu sorunu gidermek için anahat divlerinize display: inline yerleştirmelisiniz.

#content {float: right; width: 300px; margin-right: 10px; display: inline;}
#sidebar {float: right; width: 100px; display: inline;}

Bu sayede marj hatasını da gidermiş olduk. Her ne kadar bu yüzen element ile aynı yöndeki tüm marj elementlerini etkilese de bu düzeltmeyi yüzen tüm div elementlerine eklemek kullanışlı olabilir. Ne zaman yüzen tarafta marj kullanmak isteyeceğinizi önceden kestiremezsiniz. Bu kod diğer hiçbir tarayıcıyı etkilemeyeceğinden kullanışlı olabilir.

Genişleyen Kutu
Genişleyen kutu problemi pek çok CSS anahattında sorun oluşturur. birbiri ardına yüzen elementler içeren ve öntanımlı genişlikleri bulunan divleri içeren bir anahat kullanmanız durumunda eğer ilgili divin genişliğinden daha geniş bir genişliğe sahip bir görsel ya da boşluk içermeyen bir metin kullanmanız durumunda ilgili anahat IE6'de yanlış görüntülenecektir. Örneğimize bir bakalım:

#content {float: right; width: 300px; margin-right: 10px; display: inline;}
#sidebar {float: right; width: 100px; display: inline;}

Pek çok tarayıcıda bu aşağıdaki şekilde işlenecektir:

Buna rağmen IE6'da anahattımız bozulacaktır:

Çözüm
Burada kullanacağımız çözüm overflow özelliğini kullanmaktır. Eğer overflow: hidden değerini anahat divlerine dahil ederseniz, anahat IE6'de bozulmayacaktır.

#content {float: right; width: 300px; margin-right: 10px; display: inline; overflow: hidden;}
#sidebar {float: right; width: 100px; display: inline; overflow: hidden;}

Her ne kadar ekleyeceğiniz bu kod sorunu giderse de bazı karmaşık anahatlarda başka sorunlara yol açabilir. Bunun yanı sıra IE6 dışındaki tarayıcılarda metnin otomatik olarak iki satıra bölümlenmesinin aksine alana sığmayan metnin görünmemesine neden olacaktır.

Yüzen Elementleri Kapsamak
Burada anlatmak istediğimiz şey kapsayıcı bir divin içerisindeki divleri doğru bir şekilde kapsamamasıdır. Aşağıdaki örneğe bir bakın.

Kapsayıcının içerisindeki divleri nasıl doğru bir şekilde kapsadığını gördünüz mü? Olması gereken de bu zaten. Buna rağmen bazen bu şekilde sonuçlanmayıp aşağıdaki gibi bir hal alabiliyor.

Kapsayıcı doğru bir şekilde içerisindeki divleri kapsamıyor. Muhtemelen kapsayıcınıza bir arkaplan resmi atamadığınız sürece bunu fark etmeyeceksinizdir.

Çözüm
Bu sorunu gidermeye yönelik birkaç çözüm bulunmakla birlikte kullanılabilecek en iyi yöntem kapsayıcınıza overflow: auto; ya da overflow: hidden değerlerinden birisini atamaktır.

#container {width: 966px; margin: 0 auto; overflow: auto;}

overflow: auto değerinin Firefox üzerinde bazen sorunlara yol açabileceğini unutmayın. Eğer bunu kullandıktan sonra bir sorunla karşılaşırsanız, onun yerine overflow: hidden kullanmayı deneyin. Eğer bu da sorun oluşturuyorsa o zaman şuradaki makaleye bir göz atın. Bunu eklemenin dışında IE6 üzerinde anahattınızın tetiklenmesi gerektiğini de unutmayın. Bunu elementinize yükseklik ve genişlik atayarak yapabilrsiniz. Eğer kapsayıcınıza bir genişlik değeri vermek istemiyorsanız o zaman height: 1%; ya da zoom: 1; değerlerinden birini verebilirsiniz.

CSS Seçicileri
Her ne kadar hepimiz CSS3 seçicilerini kullanmaya can atsak da, IE6 bu seçicilerin büyük bir kısmını desteklememektedir. Bırakın CSS3'ü, IE6'nın desteklemediği CSS2 seçicileri bile vardır. İşte kullanmamanız gereken seçicilerin bir listesi:

E > F
E + F
E ~ F
:root
:last-child
:only-child
:nth-child()
:nth-last-child()
:first-of-type
:last-of-type
:only-of-type
:nth-of-type()
:nth-last-of-type()
:empty
:not()
:target
:enable
:disabled
:checked
E[değer] seçicilerinden herhangi biri
:first-child
:lang()
:before
::before
:after
::after

Elbette bu seçicilerin pek çoğu daha Firefox 3 üzerinde de desteklenmiyor. Desteklenen seçicilerin tam bir listesi için evotech.net üzerinde yer alan tarayıcılarda css seçiciler için destek yazısına bir göz atın.

Çözüm
Standart seçicileri kullanmaya devam edin. Sadece IE üzerinde çok önemli bir değişiklik yapmayacağı sürece E + F, F, E > F, E ~ F seçicilerini kullanın. Eğer gerçekten bu seçicileri kullanmak istiyorsanız, o zaman IE8.js'yi deneyebilirsiniz. Bu JavaScript kütüphanesi IE6'ya seçiciler için daha iyi destek sunmasına rağmen sitenizi yavaşlatacaktır. Ancak biz IE6 kullanıcılarını dikkate almıyoruz, öyle değil mi?

PNG Saydamlığı
IE6 PNGler üzerinde alfa saydamlığı desteklemiyor. Bu muhtemelen IE üzerinde gördüğümüz en rahatsız edici sorun.

Çözüm
Bu problem için bir dizi çözüm bulunuyor. Ya IE'ye özgü bir stil şablonunda AlphaImageLoader'ı kullanacaksınız ya da bu sorunu gidermek için oluşturulan çeşitli JavaScriptlerden birine başvuracaksınız. Hangisini tercih ederseniz edin, tekrar eden saydam arkaplan görsellerini IE6 üzerinde kullanabilmenin bir yolu yok.

AlphaImageLoader'ı kullanmak biraz zahmetli. Saydam olan tüm PNG görsellerine aşağıdaki özellikleri ekleyin (CSS'nizin doğrulanabilmesini istiyorsanız o zaman bu kodu IE'ye özgü bir stil şablonu içerisine yerleştirin).

.saydam {background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.bildirgec.org/images/transparent.png', sizingMethod='image/scale/crop');}

Tüm PNG görsellerinizi "saydam" sınıfına dahil ettiğinizi varsayarsak yukarıdaki kodu kullanabilirsiniz. Ayrıca 1x1 saydam bir png oluşturup src değerinde onun konumunu belirtmeniz de gerekiyor. Geçtiğimiz yıl 24ways üzerinde bu konuda muhteşem bir makale yayımlandı.

Bu sorunu giderebileceğiniz daha da iyi bir yöntem, Blueprint CSS Çatısı'nın geliştiricisi Olav Bjorkoy'un şuradaki makalesinde anlattığı yöntemi uygulamak. AlphaImageLoader'e benzer bir yöntem ancak onun yerine saydamlığı tetikleyen bir betiğe bağlantı veriyorsunuz.

Kullanabileceğiniz üçüncü yöntem ise IE8.js'yi kullanmak. Bu yöntem öncekinden de güvenli ve bir sorunla karşılaşmanız neredeyse mümkün değil. HTML'niz üzerinde bu betiğe bağlantı verin ve betik dosya adı -trans ile biten tüm png dosyalarının saydamlık sorununu giderecektir (örneğin resim-trans.png).

Tüm bu yöntemleri kullanmanıza rağmen saydam pngler ile sorun yaşamanız halen olasıdır. Bu yöntemlerden herhangi birini kullandıktan sonra IE6 üzerinde sağlam bir test uygulamayı unutmayın.

Kaynak: Anthony Short

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

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

Website Ziyaretçilerinizin İlk İzlenimini Etkileyen 21 Faktör

burc — Wed, 28 Jan 2009 09:17:00 GMT

Sitenize yeni bir ziyaretçi geldiğinde sitenize dair ilk izlenimi çabuk bir şekilde oluşacaktır. İyi bir ilk izlenim, ziyaretçinizin sitenize yeniden gelmesini sağlayabilecek önemli faktörlerden biri iken, kötü bir ilk izlenimin bıraktığı izlerin üstesinden gelmek zordur.

Yazının devamında bulacağınız liste sitenizi ziyaret eden ziyaretçilerin ilk izlenimlerini etkileyen 21 faktörü listelemektedir. Bu listenin faktörlerin sadece bir kısmı olduğunu ve tüm faktörleri oluşturmadığını unutmayın. Eğer istersiniz sizce önemli olan faktörleri de yorumlarınızla paylaşabilirsiniz.

1. Açılma Süresi
Pek çoğumuz yavaş açılan web sitelerine karşı sabırsızızdır. Diğer yandan hızlı açılan web siteleri ziyaretçileri siteniz üzerinde gezinmeye teşvik edecektir, zira her bir sayfanın açılması için uzun süre beklemeyeceklerini bilirler.

2. Hata Mesajları
Eğer sitenizi ziyaret eden ziyaretçiler hata mesajları alıyorlarsa ve sitenize erişmede sıkıntı yaşıyorlarsa, sitenizden etkilenmeyeceklerdir ve sitenizi bir kez daha ziyaret etmeyeceklerdir. Sitenizde oluşabilecek pek çok hata bulunmaktadır. BlogStorm'un yayımladığı şu makale bir adet başarısız siteyi ele alıyor ve problemlerini irdeliyor.

3. Renkler
Sitenizin görünümü hiç şüphesiz ilk izlenimde oldukça etkilidir. Sitenizin genel renk şeması, sitenizin çekiciliğinde önemli rol oynar. Doğru renk kombinasyonlarını seçmek zor olabilir, ancak İnternet üzerinde size bu konuda yardımcı olabilecek pek çok araç bulunmaktadır. Renklerin psikolojisine dair kaynaklar ve bağlantılar için Web siteniz için mükemmel renkleri bulun adlı yazıyı ya da bildirgec üzerinde yayımladığım Tasarımcılar İçin Renk Planlama (Color Scheming) adlı yazımı okuyabilirsiniz.

4. Logo / Marka
Sitenizin genel görünümünü etkileyen bir diğer faktör de sitenizin logosu ve markasıdır. En önemlisi sitenizde kullanacağınız logo işinizi ya da kurumunuzu sizin ziyaretçilerinizin düşünmesini istediğiniz şekilde düşünmesine yol açabilecek şekilde markalaştırabilmelidir. Daha fazla bilgi için David Airey'in yazdığı Bir logoyu mükemmel yapan nedir? başlıklı yazıyı okuyabilirsiniz.

5. Başlık Görselleri
Baskın başlık görselleri sık kullanılır ve ilk izlenime güçlü etkileri olabilir. Kişisel olarak ben bloglarda büyük boyutlu başlıkları seven bir değilimdir ancak bazı blog tasarımcıları bunu mükemmel bir şekilde uygulayabiliyorlar. Şahsen ben içeriğin sayfanın üst kısmında başlamasını isterim ancak pek çok ziyaretçi benimle aynı fikirde değildir. Nate Whitehill sitesinde oldukça çekici bir başlık görseli kullanmaktadır.

6. Tipografi
Görece etkili olan bir diğer element ise tipografi ve yazıtipleridir. Tipografideki değişiklik önemli bir değişiklik olmayabilir ancak sitenizin genel görünümünü tümden değiştirebilecek kapasitededir. Mark Boulton tarafından yazılan Daha İyi Tipografi İçin 5 Basit Adım makalesi size konu ile ilgili daha detaylı bir bilgi verebilir.

7. Anahat
En önemli tasarım elementlerinden birisi de anahattır (layout). Hangi anahattı kullanırsanız kullanın, kullanacağınız anahat sitenizdeki önemli öğelere ziyaretçinin dikkatini çekebilmelidir. Anahat sadece çekici bir tasarım oluşturmak için kullanılmakla kalmaz, ayrıca sitenizi ziyaretçilerinizin daha kolay bir şekilde kullanabilmelerini de sağlar. Web sitelerinin pek çoğu standart tasarım elementlerini kullansa da sitenizi diğerlerinden ayırabilmenin bir yolu da anahat üzerinde yaratıcılığınızı konuşturmaktır. Elbette yaratıcı bir anahattın sitenizin kullanılabilirliğini azaltmaktansa işlevselliğini arttırmayı tercih etmelisiniz.

8. Reklamlar
Sitenize dair kötü bir izlenim uyandırmanın en kolay yollarından birisi de sitenizi reklamlarla doldurmaktır. Günümüzün İnternet kullanıcılarının pek çoğu siteler üzerinde reklam gördüklerinde şaşırmazlar ancak çok fazla ve yanlış türde kullanılan kötü bir şekilde yerleştirilmiş reklamlar ziyaretçilerinizin sitenizden kolayca soğumasını sağlayabilir.

Genel bir kural olarak reklamlarınızı ziyaretçilerinizin sitenizdeki içeriği okumalarına engel olmayacak bir şekilde yerleştirmelisiniz, tabi eğer sitenizin amacı tıklama başına reklamlar üzerinden para kazanmak değilse. Hareketli reklamlar da bir diğer önemli konudur zira bu tip reklamlar site ziyaretçilerinizin dikkatini kolayca dağıtabilirler.

Ziyaretçilerizi ilgilendiren ve sitenizin ana içeriği ile karışmayan reklamlar kullanırsanız ziyaretçileriniz bunu kötü algılamayacaklardır.

9. İtibarınız
Sitenizi ilk kez ziyaret eden ziyaretçilerinizin bir kısmı daha önce sizin hakkınızda bilgilendirilmiş olabilir. Çoğu zaman sizin hakkanızda sitenize bağlantı veren bir başka site üzerinde bilgi sahibi olmuşlardır. Bu durum özellikle blogcular arasında yaygındır. Eğer o ziyaretçi siteniz hakkında olumlu bir yorum okumuşsa onun ilk izlenimini olumlu yönde etkileyebilecek bir itibar bırakmışsınızdır. Bu durum ziyaretçiniz eğer sizin hakkınızda kötü yorumlar okumuşsa aksi yönde de işleyebilir.

10. Navigasyon Kolaylığı
Muhtemelen hepimiz üzerinde okunacak pek çok içerik bulunan bir site görünen ancak istediğimiz şeyi bulamadığımız bir site ile karşılaşmışızdır. Kötü bir navigasyona sahip bir web sitesinden daha rahatsız edici bir şey var mı bilmiyorum. İyi tasarlanmış bir navigasyona sahip web sitesinin, ziyaretçilerinizin sitenizdeki deneyimleri üzerinde çok pozitif bir etkisi olabilir.

11. Amacınızın Netliği
Yeni ziyaretçiler sitenizin varoluş amacını çabucak anlayabilmelidirler. Pek çok sitesi bunu sitelerinin üst kısmında sitenin içeriğini özetleyen bir tanım kullanarak başarırlar. Hakkında sayfaları da iletişim açısından önemli elementlerden biridir.

12. Profesyonel Olmayan Öğeler
Düşük kalitede animasyonlu GIF görselleri gibi bazı öğeler ve sayaçlar kötü bir ilk izlenim oluşturabilirler. Genel olarak sitenizi 10 yıl önce tasarlanmış gibi gösterebilecek her şeyden uzak durulmalıdır.

13. Görsellerin ve Fotoğrafların Kalitesi
Yüksek kalitede bir fotoğrafın ya da grafiğin tasarım üzerinde bırakabileceği etki gerçekten inanılmazdır. Ne şans ki İnternet üzerinde yüksek kalitede düşük ücretli fotoğraflar bulabileceğiniz pek çok resim bulunmaktadır hatta bunlardan bazıları ücretsizdir. İyi bir ücretsiz resmi bulmak için harcayacağınız zaman, daha çabuk bulacağınız ve sadece birkaç lira ödeyerek sahip olabileceğiniz resimlerle kıyaslandığında, harcanmaya değmez. İnternet üzerinde fotoğraf bulabileceğiniz sitelerin bir listesine ulaşmak için bu makaleyi okuyabilirsiniz.

14. Erişilebilirlik
Web tasarımında erişilebilirlik son zamanların popüler konusu haline gelmiştir. Gerçek olan şu ki ziyaretçilerinizin pek çoğu ortalama ziyaretçi kategorisine düşmeyecektir. Bazılarının engelleri olacak, bazıları eski bir tarayıcı kullanıyor olacak, bazılarının da yavaş bağlantıları olacaktır. Eğer web siteniz siteniz tarafından erişilebilir olmazsa, bu ziyaretçileriniz üzerinde kötü bir izlenim bırakacağının garantisidir.

15. Açılır ve gizli-açılır pencereler
Günümüzde pek çok İnternet kullanıcısı bir tür pop-up engelleyicisi kullanmaktadır. Pek çok ziyaretçi, engellenemeyen açılır pencerelerden hoşlanmazlar ve bu da kötü bir izlenime yol açar. Buna rağmen bazı siteler halen açılır pencereleri verimli bir şekilde kullanmaktadırlar, bu sebeple açılır pencere kullanmadan önce artıların ve eksilerini iyi bir şekilde tartmanız önerilir.

16. Video ve Ses
Gün geçtikçe daha fazla İnternet kullanıcısı yüksek hızlı bağlantılara sahip oldukça ses ve video içerikli web siteleri daha yaygın kullanılmaya başlayacaktır. YouTube gibi sitelerin başarısı bu tip elementlerin pek çok ziyaretçi tarafından olumlu karşılandığının bir göstergesidir. Genel bir kural olarak ses ve video içerikleri otomatik olarak başlatılmamalıdır.

17. İştiraklar ve Kurumlar
Ziyaretçiler sitenizi ilk kez ziyaret ediyor olabilirler ancak birlikte iş yaptığınız ya da ürünlerinizi kullanan diğer firmaların ismini görerek siteniz hakkında olumlu bir izlenime kapılabilirler. Buna güzel bir örnek olarak Media Temple web sitesi gösterilebilir. Media Temple'nin ana sayfasını ziyaret eden ziyaretçiler Nike, Sony ve Starbucks gibi firmaların Media Temple hakkındaki yorumlarına ulaşacaklardır. Eğer ziyaretçinizin ürünleriniz ve hizmetleriniz hakkında şüpheleri varsa, bunun gibi iyi bilinen şirketlerin ilk izlenime katacağı olumlu katkı kaçınılmazdır.

18. İçeriğin Kalitesi
Elbette kaliteli içerik bu listenin dışında kalamazdı. Her ne kadar sitenin içeriği, tasarımı kadar ilk izlenime etkisi olan bir element olmasa da, siteniz üzerinde bir dakikadan daha uzun süre kalan bir ziyaretçinin ilk izlenimi üzerinde hatırı sayılır bir etkisi olacaktır. Bu özellikle bloglar için önemli bir faktördür. Siteniz ilk kez ziyaret eden bir ziyaretçi mükemmel bir içeriğe ulaşırsa, siteniz hakkındaki ilk izlenimi hiç şüphesiz olumlu olacaktır.

19. Ton
İçeriğin kendisinin yanısıra içeriğin tonu da ilk izlenimde etkilidir. Daha önce güçlü içeriğe sahip ancak yazarı tarafından olumsuz bir tona sahip pek çok blogla karşılaştım.

20. Yorumların Sayısı ve Geri İzlemeler
Blogunuzu ilk kez ziyaret eden ziyaretçilerin pek çoğu, yazılarınızdaki yorumların sayısına dikkat edeceklerdir. Yorumların ve geri izlemelerin sayısının fazlalığı, ziyaretçilerin ilgil içeriğin başkaları tarafından önemsendiği ve bu sayede onun değerli olduğu izlenimini uyandırır. Öte yandan hiçbir yorumu bulunmayan yazılar, ziyaretçinin ilgili içeriği kimlerin okuduğunu düşünmesine yol açar.

21. Flash Girişler
Olumlu ya da olumsuz, flash girişleri (intro) bulunan sitelerin ziyaretçilerin ilk izlenimine etkisi olacaktır. Ben pek çok web sitesinde flash girişi bulunmasından hoşnut değilimdir. Bu tip girişlerin bazı endüstrilerdeki bazı web sitelerinde yeri olduğunu düşünürüm, mesela film ya da rock müzik gruplarının web siteleri gibi. Eğer ziyaretçilerinizin sizden bir flash girişi beklemediğini düşünüyorsanız flash girişi kullanmaktan kaçınırım.

Kaynak: Vandelay Design Blog

Kullanılırlık ve Tasarımcı İpuçlarına Yönelik Yazdığım Diğer Yazılar

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