arkaplan | bildirgec.org

yazılara verilen hoş görünümlerin çekiciliğini anlatmaya gerek yok sanırım. örneğin hoş ve sade bir logonun bazen ziyaretçide bıraktığı intiba onun siteye bakışını değiştirebilir. benim de bu konuda araştırmalarımda yararlandığım, eğitimlerden seçtiğim birkaçının burada paylaşılmasının iyi olacağını düşündüm. Şurada gördüğüm bir photoshop eğitimini ve kullanılan tekniklerin çok kullanışlı ve yararlı olduğunu düşündüm. aynı teknikleri kullanarak siz istediğiniz her objeye gayet hoş bir gerçeklik kazandırabilirsiniz. İçinde öğrenebileceğimiz birçok şey var. İsterseniz linki takip ederek eğitimi orijinalinden de takip edebilirsiniz ama ben de bu yazıyı yazarken adım adım uygulayacağımdan orijinalinde yaşayabileceğiniz eksiklikler ya da atlamalar yaşanmayacaktır. Öyleyse yazımıza başlayalım:

çalışmamızın son hali bu şekilde olacak

Başlarken
En başta ışık ve gölgeyle alakalı aşağıdaki basit resmi incelemekte fayda var. Işığın vuruş yönü, gölge ve gölgenin düşüşü hakkındaki mantığımızı netleştirmek için bir göz atıp eğitime başlayalım.

light diagram

Blogdesingblog.com blog tasarlerken dikkat edilmesi gereken noktaları 9 parçaya ayırarak anlatıyor. Bu başlıkların Türkçe karşılıklarından çok genellikle İngilizce adlarına yatkın olunduğu için İngilizce adlarını da beraber vermek bu anlatım için daha yararlı olacaktır.
Bu dokuz alt başlık şöyle.

Başlık (Header)
İçerik Alanı (Content Area)
Birincil yönlendirici (primary navigation)
İkincil yönlendirici(secondary navigation)
Manşetler (Headlines)
Yorumlar (Comments)
Makale Sonu (Post’s Footer)
Sayfa Altı (Footer)
Reklamlar (Advertisements)

HEADER - başlık

Başlık ziyaretçilerin siteye girişlerinde karşılaştıkları ilk bölge olduğu için sitenin en önemli kısımlarından biridir. blogu diğer bloglardan ayırabilecek ve öne çıkarabilecek bir yapıda olduğu için üzerinde önemle durulması gerekir. Başlık benzersiz ve hatırlaması kolay olmalıdır. Bu yüzden blog tasarımcıları başlık üzerinde son derece titiz çalışırlar, öyle ki sadece hazır bir tasarımı kullanan bloggerlar dahi başlık kısmını kendilerine uyarlamaya çalışırlar. Blog başlığı tasarımını populer kılmak için Vinh Le'nin kaleme aldığı şu makaleye göz gezdirmekte fayda var.

not: 2008 yılında yayınlamış bir makale olmasından dolayı verilen örneklerden bazılarında tasarımlar değişmiş. Ancak bu makalenin orjinalinin yayınlandığı siteye giderek orada kaydedilmiş olan örnekleri inceleyebilirsiniz.

Birkaç mükemmel header örneği

1.Octwelve

octwelve

speed dial ya da Türkçe ismiyle hızlı erişim, internette sıklıkla ziyaret ettiğimiz sitelere erişimi kolaylaştıran ve tarayıcımızı daha etkin kullanmamızı sağlayan kişisel bir başlangıç sayfası.

Opera'nın icat ettiği daha sonra Firefox ve Chrome'un eklentilerle takip ettiği ve geliştirdiği bu başlangıç sayfasını Opera kullanıcıları da Firefox ve Chrome'daki SpeedDial eklentisinde olduğu gibi özelleştirebilir ve böylece kendileri için daha iyi bir başlangıç sayfası oluşturabilirler.

Opera'da hızlı erişimde yapabileceklerimiz:

• Arkaplan resmi eklemek
• Hızlı erişimdeki pencere (bağlantı) sayısını ayarlama
• Hızlı erişim pencerelerindeki resimlerin özelleştirilmesi

İlk iki ayarı hızlı erişim sayfasında sağ alt köşede bulunan Hızlı erişimi yapılandır düğmesi yoluyla yapabilirsiniz.

Hızlı erişim sayfasındaki pencerelere (bağlantılara) ait küçük resimleri nasıl değiştireceğinizi bu yazıda bulabilirsiniz.

Bildiğimiz facebook görünümü bir süre sonra sıkıcı olabiliyor. Daha önce bu görünümü değiştirmek için seçenekleri karıştırmış ve bir sonuç elde edemememiş olabilirsiniz.

Facebook'un bu görünümünü değiştirmek mümkün olsa güzel olmaz mıydı?

İyi haber bu görünümü değiştirmek gayet basit işlemlerle yapılabiliyor. Kötü haber ise oluşturduğunuz yeni görünümü yalnızca sizin görüyor olmanız.

1. Seçenek: Yontoo Layers Browser Plugin

Facebook görünümünü bu tarayıcı eklentisi sayesinde değiştirebilirsiniz. Eklenti firefox ve internet explorer'da çalışıyor. Yüklerken bir uyarı vermediğinden dolayı bütün tarayıcılarınızın pencereleri kapanacak, buna hazırlıklı olarak yüklemenizi tavsiye ederim.

Eklentiyi yükledikten sonra siteye girip temaları uygulayabilirsiniz.

Temalardan birini beğendiğinizde "Select This Layout" seçeneğinden temayı yükleyebilirsiniz.

malum kodlama yapan herkesin başının belasıdır internet explorer denen tarayıcı. kodları anormal bir şekilde yorumlar. microsoft'un vurdumduymazlığı nedeniyle birçok insan hala internet explorer 6.0 kullanır ve siz de sitelerinizi onlara doğru dürüst göstermek için çırpınır durursunuz. diğer internet tarayıcıları yeni standartları destekleme konusunda birbirleri ile yarışırken internet explorer'ın hiç acelesi olmaz. neyse ki css3pie (progressive internet explorer) var.

css3pie (progressive internet explorer) nedir?

başımızın belası, sitelerin görünümünün katili internet explorer'a css3 yetenekleri kazandıran bir dosyadan başka bir şey değil. hemen alt kısımda internet explorer'dan alınmış ekran görüntüsünü görebilileceğiniz üzere de oldukça tatmin edici bir sonuç verdiğini söylemek mümkün.

resmin büyük halini görmek için tıklayın

desteklediği css3 özellikleri

• border-radius
• border-image
• box-shadow
• multiple background images (arkaplanda çoklu resim)
• linear-gradient (arkaplan için renk geçişleri)

Daha önce haziran 2009'un en iyi jquery derslerini görmüştük. Bu yazımızda ise Mart 2010'un en iyi jquery derslerini göreceğiz.

1. How to Create an Infinite Scrolling Web Gallery (Sınırsız kaydırma web galerisi nasıl oluşturulur?)

2. Advanced jQuery background image slideshow (Gelişmiş jquery arkaplan imaj slayt gösterisi)

web browserlar tam anlamıyla CSS3'ü desteklemese de web sitelerinde css3 sıkça kullanılmaya başlandı. bu makalede css3 dünyasında nelerin olduğuna değineceğiz. aşağıda sizlere ilham vereceğini düşündüğüm farklı tarzlarda css3 örnekleri mevcut. css3 ile neler yapılabilir sorusunun cevabına yanıt bulabileceğiniz örneklere göz atalım.

CSS3 & jquery saat

analog saat - tutorial

3d cube that rotates using arrow keys- tutorial
(yön tuşlarıyla hareket ettirebileceğiniz 3d küp) -