bildirgec.org - poshet303 - beğendikleri

Harikulade CSS3 Tekniklerinden Bir Demet!

poshet303 — Mon, 07 Jun 2010 12:04:00 GMT

Web tasarımı bu günlerde HTML5 ve CSS3 ile büyük bir Upgrade yaşamakta. Tarayıcı desteklerinin giderek artması ile somut kullanımını giderek daha sık görmeye başladığımız, web dillerinin bu yeni versiyonları için hazırlanmış örnekleri ve eğitimleri, ilgili web sitelerinde çok daha fazla sayıda görmek mümkün.

Aşağıda listelenmiş olan CSS3 eğitimleri (teknikler, örnekler) ile, daha önceleri yapamadığınız veya yapmak için ek bazı dosyalara/görsellere ihtiyaç duyduğunuz, "göreni kendisine hayran bırakan" tasarımsal özellikleri, CSS3 ile nasıl yapabileceğinizi öğrenebilir ve hemen denemeye başlayabilirsiniz.

Apple HTML5 Showcase: Apple tarafından yakın zaman önce açılan ve içeriğinde HTML5 ve CSS3 tekniklerinin bulunduğu bir tanıtım sayfası.

CSS3 Butonlar - Demo

CSS3 İle Sütun Grafikler (Bar Graph) - Demo

CSS3 Aşağı Açılır Menü (Dropdown Menu)

CSS3 Konuşma Balonları (Speech Bubbles) - Demo

CSS3 Yuvarlak Kenarlar ve imleç etkileşimi (Border Radius Hover States) - Demo

CSS3 Gölgeleme (Box Shadow)

[Bonus+++++]
+Flash ile Görsellere Büyüteç Etkisi!
+Tweetmojo İle Webcam'li Tweetler!
+jQuery Scrollable ile Web Sayfalarını Hareketlendirin!
+Tasarımcılar İçin Ücretsiz, Legal ve Kaliteli Kaynaklar
+Google'dan SEO Dersi:URL Adresleri Nasıl Olmalı?
[Kaynak] mashable
[Paylaş] Sosyal Medya paylaşım sayfası burada.
[algoz Takip Noktaları] Bildirgeç Profil
Blog FF Twitter Facebook + Buzz E-posta RSS Mobil iPhone

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

Görsellerinizi 3 Boyutlu Sunmanız İçin: Piecemaker!

poshet303 — Sun, 11 Apr 2010 10:18:00 GMT

Resim veya fotoğraflarınızı 3 boyutlu (3D) bir ortamda sunabilmeniz için geliştirilmiş açık kaynak kodlu ve Flash ile hazırlanmış bir görsel sunum eklentisi/galerisi olan Piecemaker, kendi alanı için iyi bir alternatif görünümünde.

Ücretsiz olarak indirip kullanabileceğiniz Piecemaker eklentisinin en önemli özelliği ise; herhangi bir Flash bilgisine gerek duymadan, XML dosyası üzerinde yapacağinız değişiklikler ile, gösterim için kullandığı 3 boyunlu animasyonu düzenlebilmeniz ve görsellerinizi ekleyebilmeniz.

JPG, GIF ve PNG formatlarını destekleyen Piecemaker ekletisi ile beraber gelen ve kaynak kodların bulunduğu fla dosyasını da inceleyebilir ve düzenleyebilirsiniz.

Piecemaker için hazırlanmış ve demo gösteriminin bulunduğu tanıtım sayfasına buradan, kullanımı ve kaynak kodları ile ilgili çeşitli bilgilerin yer aldığı sayfaya buradan ve diğer demo sayfasına da buradan ulaşabilirsiniz.

[Bonus+++]
+10 Best Free Minimal WordPress Themes
+amazon'dan 773 adet ücretsiz ve yasal mp3!
+225.000.000 adet ücretsiz pdf ekitap!
[Kaynak] Piecemaker
[Paylaş] Sosyal Medya paylaşım sayfası burada!
[algoz Takip Noktaları]
Blog FF Twitter Facebook Buzz E-posta RSS Mobil iPhone

10-30/04/2010

Algoz Destek Bekliyor...

2010 Blog Ödülleri için beni desteklemek isterseniz; buradan oy verebilirsiniz.
Şimdiden Teşekkürler...

algoz.bildirgec.org (profil)

10-30/04/2010

Algoz Destek Bekliyor...

2010 Blog Ödülleri için beni desteklemek isterseniz; buradan oy verebilirsiniz.
Şimdiden Teşekkürler...

algoz.bildirgec.org (profil)

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

Bu Web Bileşenlerini Denemek Lazım: Alloy UI

poshet303 — Thu, 04 Mar 2010 15:12:00 GMT

Html ile yapılandırılmış, Css ile biçimlendirilmiş ve JavaScript'le de hareketlendirilmiş bir kullancı arayüzü (User Interface/UI) kütüphanesi/çatısı olan Alloy UI, bünyesindeki şık tasarımlı ve çok işlevli bileşenleri ile, dinamik ve zengin içerikli web uygulamalarının/sitelerinin, çok daha kısa sürelerde tamamlanmasını sağlamakta.

Web uygulamalarınızda kullanabilmeniz için sadece YUI Library'e ihtiyaç duyan Alloy UI bünyesindeki bileşenlerden bazıları:

AutoComplete: otomatik tamamlama.

Treeview Ağaç görünümlü menü.

Dialog Diyalog/İletişim pencereleri.

Ratings Puanlama.

Loading Mask Yükleniyor maskesi.

Liferay (açık kaynak kodlu portal sistemi) geliştiricileri tarafından geliştirilmiş olan ve şu anda ön sürümü kullanımda olan Alloy UI'nin kararlı (stable) sürümünün 1 Nisana kadar kullanıma sunulması hedeflenmekte.

Henüz eğitici dokümanları hazırlanmamış olan Alloy UI bünyesindeki tüm bileşenleri buradan inceledikten sonra buradan indirip, deneyebilirsiniz.

Bonus+++:
+70 Free Icon Sets

+Google'dan Webmaster'lara İpuçları
+SEO'yu Google'dan Öğrenmeye Başlayın

Kaynak: Alloy UI
Paylaş: Sosyal Medya paylaşım sayfası burada!
algoz Takip Noktaları:
Blog FriendFeed Twitter Facebook E-posta RSS Mobil iPhone

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

ilham verici content sliders tasarımlar

poshet303 — Tue, 09 Mar 2010 07:54:00 GMT

content sliders, (kayan menü, sürgülü menü) her türlü bilgiyi görüntülemek için geliştirilmiş son derece kullanışlı bir web uygulamasıdır. metinleri, fotoğrafları, reklamları otomatik slayt özelliği yanında butonlarla manuel olarak göstermeniz mümkün. ziyaretçilerin anında dikkatini çekmek, ziyaretçilerinizin bilgiye hızlı ulaşımını kolay ve şık bir şekilde content sliders ile sunabilirsiniz. content sliders kullanımında sınırlar aşılmış gibi görülüyor, e-ticaret sitelerinde ürün tanıtımında, bloglarda popüler konuların sunulmasında, kimi zamanda web siteleri reklam gösterim aracı olarak content sliders kullanmakta. peki nasıl bir content sliders tasarımı derseniz, aşağıda sizlere ilham vereceğini düşündüğüm content sliders tasarımları bulunmakta.

the great bearded reef

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

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

jquery content sliders gösterim eklentileri

poshet303 — Sun, 14 Mar 2010 12:26:00 GMT

content slider'lar bir önceki yazımda belirttiğim gibi çok çeşitli uygulama alanına sahip içerik gösterim eklentileridir. web sayfalarınıza kolayca entegre edebileceğiniz jquery ile geliştirilen content slider aşağıda listelendi.

1- jquery tools scrollable - tutorial - demo - download -

2- anythingslider jquery plugin - demo - download - tutorial -

3- sliding boxes and captions with jquery - demo - download - tutorial

4- making a content slider with jquery ui - demo - download - tutorial

5- creating a slick auto-playing featured content slider - demo - download - tutorial

6- create featured content slider using jquery ui - demo - download - tutorial

7- jquery.scrollto - demo - download - tutorial

8- moving boxes - demo - download - tutorial

9 - imageswitch - demo - download - tutorial

10 - jcarousel - demo - download - tutorial

11- using the wonderful jflow plugin - demo - download - tutorial

12- create beautiful jquery slider - demo - download - tutorial

13 - step by step to create content slider using jflow - demo - download - tutorial

kaynak

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

Microsoft'un yeni tasarım programları Expression Studio ve eğitim siteleri

poshet303 — Fri, 09 Nov 2007 06:07:00 GMT

Microsoft ; Windows Vista'nın da çıkmasıyla .Net Framework 3.0 duyurmuş ve bu frameworkun 4 önemli parçasından ( WPF,WCF,WWF,Cardspace) Vista'da da kullandığı yeni nesil grafik motoru olan WPF (Windows Presentation Foundation)

ile çok etkileyici sonuçlar aldı.Böylelikle son kullanıcının da bu arayüzleri geliştirebilmesi için geliştirmekte olduğu tasarım programları yardımıyla bu 3D ve yüksek çözünürlüklü videoları destekleyen,.Net veritabanlı uygulamalarla entegre windows ve web uygulamaları tasarlamamızı imkan veriyor. WPF uygulamalarını geliştiren bu programları Expression Studio

paketi altında topladı ve WPF uygulamalarını 3D ve video kalitesinden ödün vermeden bu programlar yardımı ile internete taşımamıza imkan veriyor.Bu teknolojinin adıda uzun süre WPF-e (everywhere) idi,ancak geçtiğimiz ay bu teknolojiye Silverlight adını vererek 1.0 sürümünü duyurdu.Ancak aynı flash programındada olduğu gibi websitenizi Silverligt ile yaparsanız ziyaretçilerin 1mb lık bir plug-in dosyası yüklemesi gerekiyor,yüklü olmayan ziyaretçilere download adresi gösteren bir banner çıkıyor.Microsoft bu plug-in bir windows update veya live messenger ile yaymayı düşünüyor.(Son günlerde patent olayları nedeniyle bundan kaçınacağı facebook gibi youtube'un flash'a yaptığı katkıyı -ziyaretçilere flash playerın her yeni versiyonunun otomatik yüklenmesi-facebook ile silverlighta yapmayı düşündüğü konuşuluyor.)Microsoft tarihinde bir ilke de imza atarak hem opensource hemde MAcintosh ve Linux içinde bu plug-in ve Silverlightı geliştirmeye karar verdi.Macintosh için programların versiyonları çıkmayacağı duyurulsada silverlight plug-in hazır ve dağıtılıyor,Linux içinde Moonlight adı verilecek olan versiyonu Novell hazırlıyormuş.

WPF grafikleri tamamen open source,XAML ( Extensible Application Markup Language) adı verilen bir dille yazılıyor.
Tüm programlar XAML uyumlu.Yeni Frontpage diyebileceğimiz Expression Web yeni nesil web tasarım programı.Webteki yeni standartlarla(XHTML,CSS,XML..) çalışabilen ,Visual Studio .Net projeleriyle de uyumlu bir html editörü,özellikle Microsoft veritabanları ile(SQL,Access,XML...)code-free sürükle bırak ile temel veritabanı uygulamaları çok rahat yapılabiliyor.PHP desteği eksik ancak Mix2007'deki konferanslarda v2 de gelicek olduğu söylendi.Silverlight kullandığınız projeleri html kaynaklı sayfalara entegre etmek için Expression Web tek program.Diğer tarafta Expression Design ile tasarımcılar kendi alışık oldukları tasarım toollarını kullanarak arayüzlerini çizerken XAML kodları da arkaplanda oluşuyor,bu kodları Flash'a rakip geldiği bahsedilen Expression Blend'e aktarıp orada da animasyonu kazandırıp oradan da Visual Studio ile databinding(veritabanına bağlama) işlemleri şuanda Javascript ile yapılabiliyor.Şuanda beta bile değil Alpha durumunda olan Silverlight 1.1 ile de .Net yani C# ve VB kodları yazılabilir hale gelecekmiş.
Visual Studio 2008 ile beraber Expression Studio v2 Şubat 2008 de bu entegreyi tamamlamış olarak
çıkacak.O zamana kadar bu programların triallarını bu adresten indirip kurcalayabilir,ingilizce olarak bazı eğitim adreslerindeki tutorialları buradan,buradan,buradan,buradan,buradan,buradan ,buradan,buradan ve buradan indirip izleyebilirler.Türkçe olarak ise çok yeni bir teknoloji olduğundan eğitimi üzerine çokta kaynak olmamakla nedirtv.com sitesinde Daron Yöndem hocanın bazı eğitimleri,ayrıca kendi blog adresindede , birkaç blogda da bazı makaleler bulunmakta. Sizde bu programlarla daha geç olmadan tanışın.

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

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

Bilmeniz Gereken 21 Harika Css Tekniği

poshet303 — Mon, 03 Aug 2009 09:02:00 GMT

CSS, güncel tasarımın temellerindendir. Yaklaşık 10 yıl önce yapılan basit tasarımları göz önüne alırsak, css'in ne kadar büyük bir önem taşıdığını görebiliriz. Birbirinden etkili css tekniklerine aşağıdan ulaşabilirsiniz.

1. Cross Browser CSS SlideShow

Sadece css kullanarak çapraz tarayıcı resim galerisi nasıl oluşturulacağı hakkında harika bir örnek.

2. CSS Based Image Maps

Sadece css kullanarak resim haritası oluşturma dersine ulaşabilirsiniz.

3. No JavaScript LightBox Using CSS

Css ile lighbox oluşturma dersi. Javascript gereklidir.

4. Image Replacement for Buttons

Gönder butonu resim ile değiştirebilirsiniz.

5. Animated Navigation Menu using CSS

Css kullanarak animasyonlu navigasyon menüsü oluşturma üzerine harika bir ders.

6. Tree Like Navigation Using CSS

İç içe listeli navigosyan gibi ağaç menü oluşturmak. Sitemap oluşturmak için çok kullanışlıdır.

7. CSS Gradient Text Effect

Sadece css kullanarak göz alıcı başlıklar oluşturabilirsiniz.

8. CSS Menu List Design

Çok kolay anlaşılır bu ders liste tasarımı hakkında bilgiler vermektedir.

9. Creating Liquid Layouts With Negative Margins

10. Making Your Footer Stay Put With CSS

Bu ders ile alt bölüm için css düzenlemesini nasl yapabileceğinizi görebilirsiniz.

11. Simple, Scalable CSS Based BreadCrumbs

Ölçeklenebilir güzel ekmek kırıntısısı navigasyonu oluşturmak.

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

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

Sitenizi Css Galerilerine Göndermek İçin En Hızlı Yol

Web Tasarımı ve Geliştiricileri İçin 15 Faydalı CSS Forum

Haziran 2009'un En İyi Css Tasarımları

Ücretsiz Css Şablonu İndirmek İçin 35 Mükemmel Web Sitesi

Web Tasarımcılar İçin Gayet Faydalı 15 "Css Grid Yerleşimi" Üreteci

10 Ücretsiz Css ve Xhtml Web Şablonu

30 Olağanüstü Css Menü Tekniği

101 Daha Kaliteli Css ve XHTML Web Şablonu

101 Yüksek Kaliteli Css ve XHTML Web Şablonu

kaynak: webdeveloperplus.com

yazılarımı takip edebilirsiniz.

blog | friendfeed | twitter | delicious

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

Alan adı (domain) nasıl alınır, yönetilir ve ipuçları hakkında

poshet303 — Thu, 15 Jan 2009 12:24:00 GMT

İnternet dünyasına başlangıç olarak ilk adımı atmak istiyorsanız en başta yapmanız gereken kendinize ait bir alan adınızın (domain) olması.

Bu konuda bir girişimde bulunmak isteyen insanların en fazla merak ettikleri konu alan adını nereden, nasıl, ne şekilde alıcağım ve sağlıklı bir şekilde nasıl alan adını yöneteceğim konusudur.

Eğer ben sadece blog yazacağım, websiteme fazla vakit ayırmayacağım diyorsanız ücretsiz blog servislerinin vermiş olduğu alt alan adlarını (subdomain) kullanmanızı tavsiye ederim. Kendinize ait alan adı almak istiyorsanız hadi başlayalım;

1.Nereden?

Bu konuyu iki sınıfa ayıracağım;
A.ingilizce hizmet veren firmalar
B.Türk firmalar

A. ingilizce bilen kişilerin alternatifleri ve kaliteli hizmet alma şansı daha yüksek. bu sektördeki popüler ve güvenilir firmalara bir bakalım;

enom
namecheap
godaddy
melbourne it
tucows

B.Türk firmalar ;

alantron
ihs
isimtescil

2.Nasıl alacağım ?

Her domain satan firmanın ana sayfasında arama kutusuna benzer bir kutucuk görürsünüz oraya almak istediğiniz adı sonuna da uzantısını yazınız. (.com, net, org, com. tr vs...)

bildirgeç.org'u alacağınızı düşünelim. öncelikle şunu belirteyim; alan adlarında türkçe karakter kullanamazsınız. bildirgeç.org'u alırken "ç" yerine "c" yazmak ya da "ı" yerine "i", "ğ" yerine "g" gibi harf değiştirmeleri kullanarak almalısınız. arama kutusuna bildirgec yazıp sonuna .org uzantısını seçip domain'in önceden alınıp alınmadığını kontrol ediyoruz, eğer available yazarsa (uygun) alınmaya uygun demektir ve ödeme işlemlerine başlayabilirsiniz. "peki ödeme şekli nasıl olacak" sorusuna 2 seçenek önerebilirim.

a.kredi kartı
b.internet üzerinden sanal bankalar ( paypal, moneybookers vs.)

ödemenizi yaptıktan sonra domain firmasından size mail gelecek. bu mailde onay ve domain panelinize giriş bilgileriniz yer alıcaktır. Bunları kesinlikle kimseyle paylaşmayın.

3.Nasıl yönetilir?

Domain'i aldıktan sonra panelinize giriş yapıyorsunuz. ilk aklınıza gelmesi gereken DNS dir. Çünkü alan adınızı hosting firmanızın size vermiş olduğu dns adresleriyle kendi hostunuza yönlendiriceksiniz. Bu adresler genellikle;

ns1.bildirgec.org
ns2.bildirgec.org şeklinde olur.

dns ayarlarınızı yaptıktan sonra domain'i kilitleyip (lock) oturumunuzu kapatıyorsunuz. Eğer sitenizi başka bir yere taşırsanız (başka bir host firmasına) onların verdiği dns'lerle eski dns'leri değiştiriyorsunuz. Domain'i başka bir domain'e de yönlendirebilirsiniz. yönlendirme işlemini domain redirect'den (alan adı yönlendirme) istediğiniz adresi yazıp direk yapabiliyorsunuz.

4.İpuçları

*Buraya yazdığım firmaların hepsi ICANN yazmanı olan firmalar yani bir domain'i kendileri yaratabilir, kendileri silebilir, her türlü işlem yapmaya yetkin firmalardır.

bu resmi, domain alırken firmanın ana sayfasında mutlaka arayın. Bu resmin olmadığı firmalar genelde sadece satış konusunda size yardımcı olabilir satış sonrası hizmetleri pek sağlıklı değildir ve çok fazla sorunla karşılaşabilirsiniz. Benim de sadece ICANN yazman firmaları buraya koymam bu nedenlidir.

*Alan adı Panel şifrenizi kesinlikle kimseyle paylaşmayın size güven veren bir kişiye size yardımcı olması için bir kere dahi olsa şifresinizi verirseniz tüm domain'lerinizin çalınma riskiyle karşı karşıya kalabilirsiniz.

*özellikle yabancı firmalarda kupon sistemi mevcuttur. Domain alırken forumlarda o firmanın o ayki kuponunu aratarak indirimlerden yararlabilirsiniz.

*Kişisel bilgilerinizi doğru yazın herhangi bir nedenle alan adınıza el konabilir. Eğer whois sorgularında kişisel bilgilerinizin görünmesini istemiyorsanız paralı ya da ücretsiz whois privacy (kişisel bilgilerinizin gizliliği) satın alabilirsiniz.Namecheap de ücretsizdir.

*Alan adlarınızı yenilemeyecekseniz kesinlikle otomatik yenileme (auto renew) yapmayın siz farkında olmadan kredi kartınızdan ya da paypal hesabınızdan para çekilip yenileme yapılır. Eğer askere gideceğim ya da unuturum alan adımı da kaybetmek istemiyorum derseniz auto renew (otomatik yenileme) yapabilirsiniz.

Bu yazı poshet303 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ında Boşlukları Verimli Olarak Kullanmak

poshet303 — Thu, 22 Jan 2009 08:07:00 GMT

Beyaz Boşluk (White Space) Nedir?

Basitçe anlatmam gerekirse beyaz boşluk bir tasarımın farklı elementleri arasındaki boşluktur - metinler, resimler, paragraflar, başlıklar, altlıklar, bağlantılar vb. Bu boşluk bir sayfa üzerindeki farklı elementler arasındaki boşluktur, harfler arasındaki boşluk, bir paragrafın satırları arasındaki boşluktur.

Beyaz boşluk bir web sitesinin kolayca taranabilmesini sağlar. Ziyaretçinin sitenizi ziyaret ettiğinde gördüğü metin miktarını azaltır ve bu vesileyle okumayı daha da kolaylaştırır. Sayfanıza kutular ve çizgiler gibi yeni elementler eklemenize gerek kalmadan tasarım elementlerinin görsel olarak ayrımını kolaylaştırır. Bu boşluklar doğru kullanıldığında sayfanızın temiz ve profesyonel görünmesini sağladığı gibi, sitenizin karmaşık görünmemesini, taze görünümünü korumasını sağlar.

Beyaz boşluk ne yazık ki güçlü bir web tasarımında en az dikkate alınan elementlerden birisidir. Beyaz boşlukların parlak ve ışıldayan bir tasarımının olmamasının, onun web sitesi için önemli olmadığı anlamına gelmez.

Bu konudaki araştırmamıza başlamadan önce gelin tasarımlarında beyaz boşlukları verimli bir şekilde kullanan bazı web sitelerine bir göz atalım.

1. Made By Sofa

Made By Sofa web sitesi, sitenin üst kısmında büyük boyutlu bir imaj ve imajın alt kısmında ana içerik ve navigasyon öğeleri kullanılarak güçlü bir tasarım oluşturmuş. Sofa başlıklar, paragraflar ve slogan elementlerini birbirinden ayırmak için beyaz boşlukları kullanmış. Aşağıdaki yakınlaştırılmış resme bir bakın:

Not: Gölgelenmiş alanlar beyaz boşlukları temsil etmektedir

Beyaz boşlukların bu şekilde kullanımı sayesinde site daha organize ve bölümlenmiş bir yapıya kavuşurken, site ziyaretçilerinin de içeriği okuyabilmesi ve site içeriğini hızlı ve verimli bir şekilde taraması (tabir-i caizse şöyle bir göz atması) kolaylaştırılmış.

2. Information Architects

Information Architects web sitesi de beyaz alanları kullanarak logo, metin, paragraflar ve başlıklar gibi bazı site elementlerini birbirlerinden ayırmış ve site tasarımının temiz ve sade olmasının önünü açmış. Aşağıdaki imaj, ilgili sitenin tasarımının yakından bir görünümü.

Not: Gölgelenmiş alanlar beyaz boşlukları temsil etmektedir

Beyaz Boşlukları Nasıl Verimli Bir Şekilde Kullanabilirsiniz?

Beyaz alanları verimli bir şekilde kullanabilmek bazen zorlu bir iş olabilir. Yazının devamında size bu alanda yardımcı olabilecek bazı ipuçlarını listelemeye çalıştım:

1. Satır Aralığı (Line Spacing)
Bir paragraf içerisindeki satırların aralığı, konu sitenin okunabilirliği ve taranabilirliğine geldiğinde en büyük farkı oluşturan en önemli unsurlardan birisidir. Eğer satırlar birbirlerine çok yaklaştırılırsa, o sayfanın içeriğini taramak neredeyse imkansız hale gelir. Eğer satırlar birbirinden çok uzaklaştırılırsa, o zaman ziyaretçileriniz satırların birbirlerinden bağımsız olduğu hissine kapılacaklar ve konuyu bütünleştiremeyeceklerdir.

Siz de satır aralıklarınızın yukarıda iki örneğin arasında bir yerlerde (ne çok az ne de çok fazla) olmasını isteyeceksinizdir. CSS'de satır aralıkları hakkında teknik bir makale arıyorsanız, o zaman CSS line-height değeri makalesi size yardımcı olacaktır.

2. Marjlar (Margin)
Marj, bir tasarımdaki elementleri çevreleyen boşluklara verilen addır. CSS Marjları bu boşluğu kendi avantajınıza kullanabilmeniz için mükemmel bir yoldur. Marjlarla çalışırken hatırlamanız gereken birkaç unsur bulunmaktadır.

Tutarlılık
Anahattınız üzerindeki marjlarınızın geneli birbirleri ile tutarlı olsun. Boşuklarınızda ne kadar tutarlı olabilirsiniz, siteniz o kadar profesyonel ve organize görünecektir. Marjları düşünürken hem dikey hem de yatay marjları göz önünde bulundurun, zira bunların her ikisinin de tasarımın geneline önemli etkileri bulunmaktadır.
Çok fazla olmasın
Marjlarınızı çok yüksek tutmayın. Birbirlerinden olması gerektiğinden fazla ayrılmış site elementleri, yukarıdaki satır aralığı örneğimizde de görebileceğiniz üzere içeriğin birbirleri ile olan ilişkisini kaybetmesine yol açabilir. Ayrıca bir sayfaya sadece sınırlı sayıda pikselin sığabileceğini de unutmayın, bu sebeple ekranın büyük kısmını boşluklarla da doldurmayın (tabi eğer sitenizin içeriği bu tip marjların kullanılmasını gerektirmiyorsa).
Çok az da olmasın
Unutmayın, burada beyaz alanları öğrenmeye çalışıyoruz, bu sebeple tasarımlarınızda en azından biraz beyaz boşluğun olmasına özen gösterin. Bir metnin resme, yan çubuğua, başlığa, navigasyon çubuğuna ya da sitenin diğer herhangi bir elementine çok yakın olması durumunda tasarımınız biraz sıkışık görünecektir ki bu da ziyaretçilerinizi rahatsız eder. Ziyaretçilerinizin biraz nefes alabilmesi için bu boşluklara özen gösterin.

3. Minimalist Tasarım Beyaz Boşluğa Eşit Değildir

Modern tasarım dünyasının problemlerinden biri de pek çok insanın beyaz boşlukları minimalist tasarımlarla bütünleştiriyor oluşu. Bu kesinlikle yanlıştır. Bir sitede çok miktarda metin bulunuyor olabilir ancak bu o sitenin kolayca okunabilir ve taranabilir bir web sitesi ol(a)mayacağı anlamına gelmez. Beyaz boşlukların doğru kullanımı ile bu pek tabi mümkündür.

Örnek olarak Smashing Magazine'yi ele alalım. Bu sitenin tabir-i caizse kulaklarından içerik fışkırıyor, bununla birlikte site yöneticileri sitenin taranılabilirliğini ve okunabilirliğini en yüksek seviyede tutmayı başarabilmişler. Site yönetimi bunu renklerin ve metin boyutlarının doğru seçimi ile beyaz boşlukların doğru kullanımı ile başarmışlar.

Yine aşağıda site tasarımına yakından bir bakış atalım:

Site tasarımında metinlerle resimlerin, navigasyon elementleri ile içerik ve yan barın arasındaki görsel ayrımı fark edebildiniz mi? İşte bu tümüyle beyaz boşlukların doğru kullanımı ile sağlanmış durumda.

4. Başlıklar (Headings)
Bşlıklar site içeriğinizi yönetilebilir parçalara ayırabilmek için mükemmel bir yoldur. Bu makaleyi okurken 4 farklı başlığın kullanıldığını görmüşsünüzdür: H1, H2, H3, H4. Bu başlıklar büyük, koyu, altı çizili "bölüm başlıkları"ndan oluşuyor ve siz bu makale süresince bunu görebiliyorsunuz.

Çevirmenin notu: Makalenin orjinal yazarı kendi site tasarımında başlıkları kullanım şekline göre makalenin bu kısmını yazmış. Bildirgec üzerinde, üzülerek söylüyorum, başlık yönetimi beni pek tatmin etmiyor. Makalenin bu kısmında adı geçen kullanım örneğini görmek için yazının sonunda göreceğiniz kaynak bağlantısına tıklayınız.

Burada yapmanız gereken başlıkların alt ve üst kısımlarındaki boşluğa ve bu boşlukların makalenin taranabilirliğini nasıl etkilediklerine dikkat etmektir. Örneğin, sitenin H2 etiketlerinde (ikinci en büyük başlık) metin ile alt çizgi arasında 5 piksel boşluk bulunuyor. Ayrıca yine aynı etiketin üst ve alt kısmında 15'er piksellik marj yer alıyor. Bu beyaz boşluklar makalenin bölümlerini sizin görsel olarak ayırabilmenizi ve içeriği tararken onları kolayca seçebilmenizi sağlıyor.

Bu boşlukları oluşturarak içeriğin taranması büyük ölçüde kolaylaştırılırken, ziyaretçinin hangi imi ya da hangi başlığı okumak istediğine karar vermesi kolaylaşıyor. Eğer başlıklar doğru kullanılmamış olsaydı, okur tüm makaleyi okumak zorunda bırakılırdı ki bu da bu tip uzun makaleler için okuyucu açısından tam bir işkencedir.

Eğer siz de benim H2 etiketini nasıl stillendirdiğimi merak ediyorsanız, o zaman aşağıdaki kodu style.css dosyanıza kopyalamanız yeterli.


h2 {
font-size: 28px;
padding-bottom: 5px;
border-bottom: 3px solid #2a2a2a;
letter-spacing: -1px;
color: #2A2A2A;
margin-top: 15px;
margin-bottom: 15px;
}

5. İmajlar

İmajlarla metnin arasında kullanacağınız boşluk, bir tasarımın güzel ya da çirkin olup olmayacağını belirleyebilecek kadar önemlidir. Eğer kelimeler imaja çok yakın olursa, o zaman içerik çok karmaşık görünecek ve okunması da bir o kadar zorlaşacaktır. Eğer kelimeler imajdan çok uzak olurlarsa, o zaman birbirleri ile olan bağlantısı kopacaktır.

Web Design Tuts websitesinde imajlarımı organize etmek ve onların görsel olarak mümkün olduğu kadar çekici olabilmesini sağlayabilmek için bazı özel imaj sınıfları kullanırım. Ne zaman bunun gibi bir makale yazsam, bir imaj için aşağıdaki kodu kullanırım.

<img class="imagelist" src=# />

Bu imajı da CSS ile stillemek için aşağıdaki yöntemi kullanırım:


.imagelist {
border: 5px solid #cacaca;
margin-top: 15px;
margin-bottom: 15px;
}

Kullandığım imajlar ile başlıkların üst ve alt kısımlarında 15'er piksellik boşluklar bırakarak tutarlılığı nasıl koruduğumu fark edebildiniz mi?

Modern Web Tasarımında Beyaz Alanlar
Eğer makaleyi buraya kadar okuduysanız, o zaman beyaz boşluğun neden önemli olduğunu artık anlamışsınızdır: Siteyi temiz göstermek, okuyucular için okunmasını kolaylaştırmak ve sitenin daha profesyonel görünmesini sağlamak bunlardan sadece birkaçı. Yine makale süresince beyaz alanların birbirleri ile tutarlı marj, metin ayrımı ve imajlarla başlıkların görsel ayrımı için kullanıldığından da bahsetmiştim. Ancak halen beyaz alanların "iyi" kullanımının ne olduğunu merak ediyor olabilirsiniz.

Aşağıda listelediğim web siteleri, beyaz alanların doğru kullanılarak ziyaretçileri ile iletişimi güçlendiren web sitelerine iyi birer örnektir.

1. Surfstation

Kullanılan beyaz alanın nasıl site içeriği ile yan çubuğu birbirinden ayırdığına dikkat edin. Site ziyaretçilerinin siteyi taramasını kolaylaştıran ve ihtiyaçları olan içeriği kolayca bulabilmelerini sağlayan yegane unsur işte budur.

2. Jason Santa Maria

Jason'un web sitesi çizgilerin ve beyaz boşlukların zekice kullanılmış kombinasyonu ile içeriğini temiz ve verimli bir şekilde ziyaretçilerine aktarabiliyor.

3. Digital Mash

Avustralyalı Tasarımcı Rob Morris'ın web sitesi Digital Mash, navigasyon, ana resim ve sayfanın alt kısmında bulunan dört adet içerik alanını içeren çok sade bir tasarımı kullanıyor. Marjların nasıl birbirleri ile uyumlu ve içeriğin nasıl kolayca okunabilir olduğuna ve metinler arasındaki boşluklar ile başlıkların ve simgelerin nasıl güzel kullanılmış olduğuna bir bakın.

4. Odd Web Things

Metin tabanlı bir web sitesi olan Odd Web Things, beyaz boşlukları kendi logolarını yan çubuktan, yan çubuğu kendi portfolyalarından ve portfolyalarından da kendi bloglarını ayırmak için kullanmış.

5. Vitor Lourenco

Vitor'un sitesi tümüyle beyaz bir arkaplan üzerinde oraya buraya yerleştirilmiş tipografi kullanmış. Koyu navigasyon, güçlü bağlantılar ve kullandığı sade renk şeması bu websitesini işler kılmış.

Beyaz Alanlar'a Dair @Twitter Görüşü

Bu makaleyi yazarken beni Twitter üzerinden takip eden bazı kişilerin görüşlerini aldım. Onlara şu soruyu sordum: "Bir web tasarımında beyaz alanlar sizce neden önemlidir?" İşte onların cevapları:

@Brendan: - Beyaz alanlar! Bence beyaz alanların doğru kullanılması, odağın içeriğin kendisine çekilebilmesi ve profesyonel görünüm için önemlidir.

@Brandon: - Önemlidir çünkü bilgi ve tasarım elementleri, büyük bir karmaşa yaratmaktansa birbirleri ile ilişkilendirilebilir.

@sthursby: - Bir ziyaretçiyi web sitenize bağlayabilmek için sadece birkaç saniyeniz varken, o süreyi ziyaretçinin aradığı içeriğe kolayca ulaşabilmesi için doğru kullanmak gerek.

@Hyermish - Beyaz alanlar, sadeliğin bir illüsyonu olmakla birlikte bazen karmaşıklığı da giderebilir.

@Drew_Douglass - Benim beyaz alanları kullanmaktaki ana sebebim, odağı sayfanın bir elementine çekmek ve bakışları o içeriğe yönlendirmektir.

Kaynak: Web Design Tuts

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

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

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

jQuery İle Kolayca İpucu (Tooltip) ve İmaj Önizleme Oluşturma Yöntemleri

poshet303 — Thu, 08 Jan 2009 07:45:00 GMT

jQuery'i ve onun geliştiricilerin hayatını kolaylaştırma yöntemlerini seviyorum. Her ne kadar jQuery'i kabullenmek benim biraz zamanımı alsa ve halen kendi ihtiyacım olan kodları kendim yazmayı tercih etsem de, jQuery'nin avantajlarını inkar edemem. Son zamanlarda fare imlecini bir bağlantı üzerine getirdiğimde imaj önizlemesini görüntülemem gereken bir proje aldım. Biliyorsunuz, hani şu link üzerine farenizi götürdüğünüzde çıkan kutucuklar içerisinde imaj görüntülenmesi. Halihazırda o proje üzerinde jQuery kullanılıyor olmasından ötürü bunu bir fırsat olarak gördüm ve bu gelişmiş kütüphane ile neler yapılabileceğini araştırmaya koyuldum. Bir süre sonra da çok basit bir betik hazırlarken buldum kendimi. Bugün, size bu çok ama çok basit betiği kullanarak oluşturulmuş 3 örneği göstereceğim.

3 ipucunu bir arada indirin

Özellikler ve Prensipler
Bu betiğin yaptığı şey bir öğe üzerine fare imlecinizi götürdüğünüzde gövdeye bir element yerleştirmek. Bu elementin nasıl görüntüleneceği CSS ile tanımlanıyor (mutlak (absolute) konumlandı ve üzerine stil uygulandı) ve bu sayede bizim tek yapmamız gereken o elementi bir içerik ile doldurmak, fare pozisyonunu hesaplamak ve ona uygun olarak elementi hareket ettirmek. Fare imleci nesne üzerine götürüldüğünde, içeriğindeki element de onunla birlikte hareket ediyor ve fare imleci elementin üzerinden kaldırıldığında, içeriğindeki element siliniyor.

Bu betiği uygulama üzerinde görebileceğiniz birkaç örnek:

Örnek 1: Bugüne kadarki en basit jQuery Tooltip (İpucu)

Bu betik A etiketinin başlığını (title etiketinin değerini) alıyor ve açılır elementin içerisine yerleştiriyor.

<a href="http://www.hafif.org" class="tooltip" title="meraklı ol!">ipucu için farenizi buraya sürükleyin</a>

Betiği uygulama üzerinde görün

Örnek 2: Resim Önizleme Galerisi

Burada bir dizi önizleme resmimiz bulunuyor. Her önizleme resminin üzerine fare imleci getirildiğinde betiğimiz, önizleme resminin bağlantıladığı resmi görüntüleyecek. Bu yöntem içeriği erişilebilir kılıyor aynı zamanda, zira JavaScript'in aktif olmadığı tarayıcılar ve sistemler üzerinde de bağlantıya tıkladığınızda resmin kendisine ulaşabilyorsunuz.

<a href="1.jpg" class="preview"><img src='http://www.bildirgec.org/1s.jpg' alt="gallery thumbnail" /></a>

Betiği uygulama üzerinde görün

Örnek 3: URL Önizlemesi İçeren Bağlantılar

Bu yöntem biraz daha uğraş gerektiriyor ancak sitenize fazladan bir özellik eklemek istiyorsanız buna değer. Burada ihtiyacınız olan şey hedef URL'nin bir ekran görüntüsü. İlgili sitenin ekran görüntüsünü A etiketinin REL değerine girdikten sonra betiğimiz işin geri kalanını halledecek.

<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg">Css Globe</a>

Yine eğer önizleme resmine bir açıklama eklemek istiyorsanız o zaman TITLE değerini doldurabilirsiniz:

<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg" title="Web Standards Magazine">
Css Globe</a>

Betiği uygulama üzerinde görün

3 ipucunu bir arada indirin

Kaynak: CSS Globe

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