bildirgec.org - microsantim - beğendikleri

css'yi öğrendiniz. peki ya sonra?

microsantim — Sat, 28 Feb 2009 08:10:00 GMT

css'de uzman olmak üzere olduğunuzu mu hissediyorsunuz? sonraki adımınız ne olacak?

bir sonraki adımınızı planlamak, kariyeriniz için önemlidir. hepimizin bildiği gibi zaman para demektir ve zamanımızı en verimli şekilde nasıl harcayacağımız üzerine odaklanmamız gerekir.

bazıları ön-yüz geliştirmeye (front-end development) kendilerini adayıp belki de javascript yeteneklerini ilerletmeyi deneyeceklerdir. bazıları ise tasarım alanında kendilerini geliştirip photoshop ve illustrator, ya da flash gibi araçlara odaklanacaklardır.

yazımın devamında web'in ileri gelenlerinin bu alanda neler söylediklerini bulacaksınız.

chris coyier
burada sorulan "öğrenmem gereken bir sonraki şey ne olmalıdır" sorusu, soruyu soran kişi tarafından cevaplanmalıdır.

web üzerindeki her yetenek kullanışlıdır. eğer zamanınız varsa web'deki her yetenek öğrenmeye değer. genellikle üzerinde çalışmak istediğiniz bir projeniz ya da gerçeğe dönüştürmek istediğiniz bir fikriniz vardır. onu en iyi kılacak şey ne ise onu öğrenin. eğer ne yapmak istediğiniz hakkında en ufak bir fikriniz yoksa, o zaman javascript öğrenin.

www.css-tricks.com

david walsh
öyle ya da böyle, kesinlikle öğrenilmesi gereken şey javascript, tercihen mootools ya da jquery. css uzman olunacak mükemmel bir yetenek olmasına rağmen gün geçtikçe css ve javascript, tarayıcı desteği ve css3 yüzünden bir bütün olarak algılanmaya başlanıyor. javascript. bu konuda hiç şüphem yok.

www.davidwalsh.name

chris spooner
web tasarımının güzel taraflarından birisi de yeni şeyler öğrenmeye her zaman bir yerin olmasıdır. i̇yi bir css bilgisi ve jquery javascript kütüphanesinin temellerini öğrenmek doğal olarak gelişecektir, özellikle çevrimiçi rehberlerin de yardımıyla. jquery kodu belirli sayfa elementlerini hedeflemek için css seçicilerini kullanmakta olduğundan iyi bir css bilgisine sahip olan birisi için bu bir artı olarak algılanabilir. bazı çeşitli komutları ve efektleri oluşturduktan sonra site tasarımlarınıza bazı mükemmel görsel eklemeler yapılabilir.

öte yandan css3 ve html5'in duyurulmasına dair haberler de yer alıyor ki bunların her ikisi de yeni özelliklerle geliyor. şimdi endüstrinin bir adım ilerisinde olup işe alınabilirliğinizi arttırmak için bu yeni özellikleri öğrenmenin tam sırası.

www.blog.spoongraphics.co.uk

alen grakalic
benim önerim javascript'e geçilmesi gerektiği yönünde olacaktır. önerimin bu yönde şekillenmesinin sebebi sırf javascript'in modern web siteleri için olmazsa olmaz konuma gelmiş olmasından ziyade javascript'te uzman olduktan sonra tam bir front-end uzmanı olunmasındandır. tasarım ve css/xhtml/js kodlama yeteneklerine sahip birisi, piyasadaki tüm front-end mesleklerinde kendine yer bulabilir. bu benim başlangıçta hedeflediğim birşeydi. şimdi arabirim tasarlamaktan css kesimine, javascript kodu yazımına kadar her tür istekle karşılaşıyorum.

www.cssglobe.com

steven snell
bana göre html ve css ne tür bir tasarım yapıyor olursanız olun gereklidir. bundan sonra seçilecek şey sizin kendinizi özel olarak geliştirmek istediğiniz alana göre değişecektir. bu javascript olabilir, flash olabilir. benim için bu wordpress ve php idi. ben şimdilik bir php uzmanı olmaktan çok uzağım ancak wordpress ile php uzmanı olmanız gerekmiyor. photoshop ve illustrator yeteneklerinizi geliştirmek tercih edebileceğiniz bir başka yol olaiblir. html ve css'den sonra bence bir tasarımcı olarak gerçekten ne yapmak istediğinize bakmalısınız, zira pek çoğumuz her şeyi öğrenmek zorunda değildir.

www.vandelaydesign.com

cameron moll
ben uzun süredir mükemmel kullanıcı deneyiminin şu üç şey üzerinde geliştiğini söylüyorum: etkileşim, grafik tasarımı ve ileişim. css, etkileşimi sağlamak ve grafik tasarımını tarayıcı üzerinde canlı hale getirmek için kodu bir araç olarak kullanan bir deneyimin sunumudur.

eğer birisi bu araç üzerinde uzmanlaşırsa, ona önerebileceğim şey kullanıcı deneyimi çatısı altında anlamlı iletişimi geliştirebilecek herhangi bir yetenek üzerinde uzmanlaşmasıdır - hem kullanıcı ile arayüz, hem de kullanıcı ile bu deneyimi sunan oluşum arasındaki görsel ve işitsel iletişim.

www.cameronmoll.com

jacob gube
css'yi öğrendikten sonraki adımınız, yazdığınız kodun farklı tarayıcılar ve platformlar altında doğru şekilde çalıştırmanın yöntemlerini öğrenmektir. daha karmaşık tasarımlara indikçe, farklı tarayıcılar tarafından desteklenen css yazmanın zor olduğunun farkına varacaksınız. yeni css yazarları ile deneyimli olanlar arasındaki fark şudur: hangi kodun çalışıp hangisinin çalışmayacağının bilgisi. size şunu söyleyebilirim ki ben css'ye yeni başladığımda css kodumdaki hataları ayıklamak için sayısız saatler harcadım, ancak üzülmeyin. deneyim kazandıkça bu çok daha kolay hale gelecektir. öğrenebilmenin tek gerçek yolu deneyimden ve araştırmadan geçmektedir, bu yüzden hemen koyvermeyin.

ayrıca javascript'in (istemci taraflı betikleme) html/css'yi iyice öğrendikten sonra öğrenilmesi gereken önemli bir şey olduğunu düşünüyorum. css'yi anlamak javascript'i öğrenmenizi kolaylaştıracaktır, özellikle dom elementleri ile çalışırken.

www.sixrevisions.com

dmitry fadeev
konu gerçekten ilginç zira bir süre önce bu benim de başıma gelmişti. css/html'de uzman olduktan sonra aynı şablonları ve sayfaları oluşturmaktan sıkılmıştın ve bunun üzerine ben de yeni bir şeyler öğrenmeye karar verdim. ruby on rails'e odaklandım ve bir süre sonra çalışan bazı küçük web uygulamaları geliştirmeye başladım. eğer bir tasarımcının daha fazlasını öğrenmeye ilgisi varsa, front-end'in yanısıra back-end'e dair bir şeyler öğrenmek de oldukça faydalı olacaktır zira sorunları çözmek için başkalarına olan bağımlılığınız azalacaktır.

öğrenmeye başladığım bir diğer şey de sistem yöneticiliği oldu. slicehost üzerinden kendime bir vps (üzerinde linux os kurulu bir sanal sunucu) aldım ve veritabanı, web sunucusu, ruby, rails gibi şeylerin nasıl ssh üzerinden kurulabileceğini öğrenmeye çalıştım.

üzerinde iyi olmadığım bir şey var ise o da javascript'tir. aslında javascript'te berbatım :) kendime bu konuda bir kitap aldım ve halen okuyabilmiş değilim. mantıksal olarak javascript'in css/html'den sonra öğrenilmesi gereken şey olduğunu düşünüyorum. sadece javascript'i öğrenmekle kalmayın, jquery gibi kütüphaneleri indirin ve onların nasıl çalıştığını öğrenmeye çalışın. jquery gibi bir şey sitenizdeki dinamik elementleri bir araya getirmenizde çok yardımcı olacaktır.

dediğim gibi, web tasarımcıları php, python ya da ruby gibi bazı dilleri öğrenmeye başlamalıdırlar. karmaşık olmayan bir uygulama geliştirebilecek seviyeye kolayca geleceksinizdir ve en azından koda bakıp neler olup bittiğini anlayabilecek ve gerektiğinde bazı düzenlemeler yapabileceksinizdir. örneğin php bilmeyen bir ön-yüz tasarımcısı bir wordpress teması geliştirebilir ancak temayı düzenlerken bazı php kodlarını da temaya dahil etmeleri gerekecektir. eğer tasarımcı biraz php biliyorsa, php kodunu düzenleyip temayı bir derece daha özelleştirebilirler. pek çok programlama dilinin birbirleri ile benzer yanları da bulunmaktadır. bu sebeple birini öğrendikten sonra diğer programlama dillerini anlamanız daha kolay olacaktır.

sistem yöneticiliğinin bir diğer iyi yetenek olduğunu düşünüyorum. biraz sıkıcı ve karmaşık ama öğrenmesi zor değil. eğer bir web tasarımcısı kendi sunucularını kurmayı ve apache'yi düzenlemeyi biliyorsa, kendi sielerini çok daha kolay bir şekilde çalıştıracaklardır. paylaşımlı sunucu firmalarından bir sunucu satın almanıza da gerek yok. linode ya da slicehost üzerinden bir parça almanız yeterli. hatta bu tip firmaların hiçbir şey bilmeseniz bile size rehber olabilecek mükemmel kaynakları bulunuyor. bu sayede ayda 20$ gibi bir rakama, sadece ihtiyacınız olan yazılımların ve bileşenlerin yer aldığı gerçekten hızlı bir web sunucusu oluşturabilirsiniz.

flash? bilmiyorum :) sanırım son yıllarda css/html ve javascript'in bütünleşmesi ile insanların flash'tan gittikçe uzaklaştığını görüyorum.

www.usabilitypost.com

kaynak: sohtanaka.com

sonuç
bana göre öğrenilmesi gereken bir sonraki adım tasarımcının hedeflerine göre değişecektir. kendinize yapmak istediğiniz bir proje ya da bir fikir bulun. hiç olmadı, ziyaret etmekten büyük keyif aldığınız bir web sitesini ya da kullanmaktan bıkmadığınız bir web uygulamasını seçin ve onu oluşturmak için öğrenmeniz gereken neler ise onları öğrenmeye başlayın ve ana hedefiniz, beğendiğiniz uygulamanın ya da sitenin aynısını oluşturmak olsun. bu sayede hem çalışırken büyük zevk almış olur, hem de yeni yetenekler edinmiş olursunuz.

eğer ne öğrenmek istediğinize karar vermişseniz bugüne kadar bildirgeç üzerinde bir dizi rehber yayımladım. bu rehberler sizin için oldukça faydalı birer başlangıç noktası olacaklardır:

Bu yazı microsantim 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 iyi takas siteleri

microsantim — Wed, 04 Mar 2009 08:23:00 GMT

internette takas siteleri varken, param yok bir şey alamam diye düşünmenize gerek yok.Guardian bizler için en popüler takas ile alışverişi sağlayan siteleri listelemiş. Bakalım neler?

www.swapz.co.uk Genel çaplı takas sitesi.
www.swapcycle.co.uk ve www.swapitshop.com arabalara yönelik takas
www.whatsmineisyours.com ve www.big wardrobe.com giyim aksesuarları
www.swishing.org arkadaşlarınız için parti kıyafetleri
www.seedypeople.co.uk bahçıvanlar için
www.readitswapit.co.uk kitap takası
www.u-exchange.com tatil eşyaları

Sevgili kaynak..

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

öğrenilmesi gereken 15 css hilesi

microsantim — Tue, 27 Jan 2009 09:25:00 GMT

Web tasarımcıları ve geliştiricileri olarak zamanla, anahat hedeflerimize ulaşmamıza yardımcı olması için pek çok CSS hilesini ve ipucunu öğreniriz. Bu tekniklerin bir listesini yapmaya kalksanız, projenizin yoğunluğuna göre yüzlerce hileyi bir arada toplamanız gerekebilir. Ancak bu yazıda bulacağınız 15 önemli css hilesi, web geliştiricilerinin karşılaştığı sorunların pek çoğunu giderebilecek kalitededir.

1. Bağıl (relative) pozisyonlanan element içerisinde mutlak (absolute) pozisyonlama
Mutlak pozisyonlanan bir elementi bağıl pozisyonlanan bir element içerisine yerleştirdiğinizde, onun pozisyonu kendisine en yakın olan üst elementin pozisyona göre belirlenecektir. Bu, özellikle bir elementi sayfanızda belirleyeceğiniz bir noktaya sabitlemek istediğinizde oldukça kullanışlı bir hiledir, örneğin başlık (header) damgaları (badge) gibi.

Pozisyonlama hakkında daha fazla bilgi alabileceğiniz siteler:

2. Z-index ve pozisyonlama
z-index kimi zaman geliştiriciler arasında çözümü zor olan bir bulmacaya dönüşebilir. Genellikle bir div elementini diğer bir elementin üzerine yerleştirmek için çok yüksek z-index değerleri atayan tasarımcılarla karşılaşırsınız. Burada unutmamamız gereken, z-index elementinin "position" değeri atanmamış bir element üzerinde çalışmayacak oluşudur. Eğer siz de uyguladığınız z-index kuralının işlevsel olmadığını düşünüyorsanız, kuralı uyguladığınız elemente 'position: relative' ya da 'position: absolute' değerlerini ekleyin.

Z-index hakkında daha fazla bilgi alabileceğiniz siteler:

3. Margin Auto
Bir şablon üzerinde 'margin: auto' değerini kullanmak, o elementin tarayıcı üzerindeki pozisyonunu, tarayıcının kullanıldığı sistemin ekran çözünürlüğüne bakılmaksızın ortalamak için mükemmel bir yöntemdir. Ancak 'margin: auto' değeri uygulandığı elementin 'width' değeri belirlenmediği sürece çalışmaz. Bu ayrıca satıriçi (inline) elementlerde 'margin: auto' değerinin 'display: block' kullanılmadan işlevsel olmayacağı anlamına da gelir.

Margin Auto hakkında daha fazla bilgi alabileceğiniz siteler:

4. Padding Elementini Dikkatlice Ve Doğru Bir Şekilde Kullanın
CSS ile çalışmaya başladığımda genellikle yaptığım hatalardan birisi de onun tüm efektlerini ve CSS Kutu Modeli'ni gözardı etmektir. Kutu modeline göre 'padding' değerinin uygulandığı elementinin genel genişliğini etkilediğini aklınızdan çıkarmayın. Bunu gözardı ettiğinizde elementlerin olması gerektiği yerde olmadığını göreceksinizdir. Örneğin:

#div {
width:200px;
padding: 30px;
border:2px solid #000;
}

Bunun toplam genişliği 264px olacaktır (200 + 30 + 2 + 2). Bunun yanısıra 'padding' özelliğinin 'margin'in aksine negatif değerler içeremeyeceğini unutmayın.

Padding hakkında daha fazla bilgi alabileceğiniz siteler:

W3 Padding Properties

text-indent kullanarak bir metni gizlemek
Sitenizde logo olarak bir resim kullandığınızı varsayalım. Bu resmin H1 etiketi içerisinde olması SEO açısından önemlidir, ancak H1 tagı içerisinde, arama motorlarının okuyabilmesi için bir metin olmasını da isteriz. Bazıları 'display: none' kullanmak isteyebilir ancak bu yöntemi kullanırsak logo resmini h1 etiketinden ayırmamız gerekecektir. 'text-indent' ve negatif değerler kullanarak ziyaretçiler için bir resim, arama motorları için de okunabilecek bir metin kullanmak mümkündür.

h1 {
text-indent:-9999px;/*Metni gizle, SEO için tut*/
margin:0 auto;
width:948px;
background:transparent url("images/header.jpg") no-repeat scroll;
}

Bu kod sayesinde kullanılan metnin herhangi bir çözünürlükte görünmeyeceğinden ancak onun yerine bir resmin görüntüleneceğinden emin olabiliriz. Bu yöntem ayrıca ekran okuyucularının ilgili metni görebilmesini sağlayacaktır, ancak "display: none" için bu geçerli değildir.

text-indent kullanarak metin gizleme yöntemleri hakkında daha fazla bilgi alabileceğiniz siteler

SitePoint - Using text-indent

6. IE Double Float Margin Hatası
Eminim bununla pek çoğumuz boğuşmuşuzdur, zira en sık kullanılan CSS "hilelerinden" birisi de budur. Eğer bu hata ile daha önce karşılaşmadıysanız hemen özetleyelim: IE6'da üzerine 'margin' uygulanmış yüzen (float) bir element kullanıyorsanız, bunun ilgili tarayıcı üzerinde doğru pozisyonlanmadığını göreceksiniz. Ne şans ki IE6'nın bu hatasını gidermek çok basit. Tek yapmanız gereken 'display' özelliğinin diğerini aşağıda gösterildiği şekilde 'inline' olarak belirlemek.

.yourClass {
float: left;
width: 350px;
margin: 20px 0 15px 100px;
display: inline;
}

Bu değişikliğin diğer tarayıcılara hiçbir etkisi olmayacaktır, zira elementin kendisi zaten yüzen bir element olduğundan satır içi görüntülenir, ancak her nedense bu teknikle IE6'daki bu sorun giderilmektedir.

IE'nin marj hatası hakkında daha fazla bilgi alabileceğiniz siteler:

Double Margin Causes and Fixes

7. CSS Kullanarak SPAM'a Karşı Savaşın
Şablon açıklamınızı iyileştirecek güzel bir teknik. CSS-Globe.com sitesinden Alen Grakalic CSS kullanarak nasıl CAPTCHA benzeri bir korumayı sitenize entegre edebileceğinizi anlatmış. İlgili tekniğin uygulandığı bir form şu şekilde olsun:

<label for=”Name”>Ad:</label>
<input type=”text” name=”name” />
<label class=”captcha” for=”captcha”>Cevabınız?</label>
<input type=”text” name=”captcha” id=”captcha” />

'captcha' ID'si için CSS ile bir arkaplan resmi kullanıyoruz. Bu tekniği çözebilmek için spam betiklerinin öncelikle HTML elementini bulması, CSS'nizi taraması, seçicileri karşılaştırması ve ardından doğru seçici ile ona bağlı olan arkaplan imajını bulmasının ardından ilgili imajı okuması gerekir. Bu yöntem oldukça güvenlidir zira pek çok spam betiği bunu başarabilecek kapasitede değildir. Bu yöntemin bir kötü özelliği CSS'nin etkinleştirilmediği tarayıcılarda kullanıcı ne yapacağını bilemez.

Spam'a karşı CSS İle Savaş Açmak hakkında daha fazla bilgi alabileceğiniz siteler:

Fighting spam with CSS

8. IE6 Üzerindeki Saydam PNG Sorununu Gidermek
Hepimizin IE6 üzerindeki saydam PNG sorununun can sıkıcı olduğu konusunda hemfikir olduğuna eminim. Buna yönelik Internet üzerinde pek çok çözüm bulunmaktadır ve bunlar karmaşık JavaScript kodlarından Microsoft'un kendi filtrelerini kullanmaya kadar değişiklik göstermektedir. Unutmayın ki bu tekniklerin pek çoğu Microsoft'un AlphaImageLoader özelliğine dayanmaktadır.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);

IE6'nın PNG saydamlık sorunu hakkında daha fazla bilgi alabileceğiniz siteler:

9. CSS Çoklu Tarayıcı Saydamlığı
İster inanın ister inanmayın tüm tarayıcılar üzerinde CSS'nin saydamlık elementini doğru bir şekilde kullanmak mümkün. Bu teknikle IE, Firefox, Safari, Opera ve Netscape Navigator gibi eski tarayıcıları bile kapsayabiliriz. Chris Coyler'in bu konuda yazılmış mükemmel bir makalesi bulunuyor.

.yourClass {
filter:alpha(opacity=50);/*IE İçin Gerekli*/
-moz-opacity:0.5;/*NN gibi eski Mozilla tarayıcıları*/
-khtml-opacity: 0.5;/*Safari'nin Eski Sürümleri ve "KHTML" tarama motorları*/
opacity: 0.5;/*FF, Safari ve Opera*/
}

Bu kod doğrulanmayacaktır ancak bu özelliği kullanmak isteyen kullanıcılar için bu pek bir sorun teşkil etmez.

CSS Opacity hakkında daha fazla bilgi alabileceğiniz siteler.

10. CSS Konumlandırlabilir Görseller (CSS Image Sprites) Kullanın
CSS Konumlandırılabilir Görseller birden fazla CSS görselinizi tek bir seferde yükleyebilmeniz için mükemmel bir yöntemdir. Bu yöntemle hem sunucuya bindirilen yük azalır hem de şablonunuzun dosya boyutunda önemli bir düşüş gözlenir.

CSS Konumlandırılabilir Görseller birden fazla görsel elementin tek bir görsel üzerinde depolanması ile oluşturulur. Ardından CSS kullanılarak arkaplan pozisyonu, genişliği ve yüksekliği gibi CSS değerleri ile görüntülemek istediğimiz görseli seçeriz.

Konumlandırılabilir Görseller hakkında daha fazla bilgi alabileceğiniz siteler:

11. IE6'yı desteklemek için Koşullu Yorumlar (Conditional Comments) Kullanın
Web geliştiricileri IE'nin bazı özel sürümlerini desteklemek için yeni CSS kuralları ve komutları oluştururlar. Eğer koşullu yorumlar hakkında bilginiz yoksa, aşağıdaki kod içerisinde yer alan stil şablonu, sadece IE 7 ve altındaki tarayıcılarda çalışacaktır.

<!--[if lte IE 7]>
<link rel="stylesheet" media="screen" href="styleIE.css" />
<![endif]-->

Bu kod HTML dosyanızın HEAD kısmına yerleştirilir. Eğer CSS IE'de çalışmıyor görünüyorsa, CSS seçimlerinizde daha doğrudan hedefleyen CSS komutlarını kullanmayı deneyin.

12. CSS Özgüllüğü
Yukarıda da belirtildiği üzere CSS stilleri belirli özgül sırasını takip eder ve hangi değerin hangisinin üzerine yazacağını belirlemek ,için puanlama kullanır. Nettuts'ta yayımlanan bu makalede CSS için puanlama değerleri açıklanmış. Değerler aşağıdaki gibidir.

Elementler: 1 puan
Sınıflar: 10 puan
Belirleyiciler: 100 puan
Satıriçi Stilleme: 1000 puan
Şüpheye düştüğünüzde stil tanımlamalarınızda daha keskin olmaya çalışın. Ayrıca gerektiğinde hata düzeltme işlemleri için !important değerini de kullanabilirsiniz.

CSS Özgüllüğü hakkında daha fazla bilgi alabileceğiniz siteler:

13. Tüm tarayıcılarda minimum yükseklik değerini kullanabilmek
Bir arabirim üzerinde çalışırken genellikle bir element için en düşük yükseklik değerini belirleme ihtiyacı hissederiz ve ardından ilgili yüksekliği, dahilindeki içerik sığmadığında otomatik olarak arttırabilmek isteriz. Ne yazık ki her zaman olduğu gibi IE min-height değerini doğru bir şekilde yorumlamamaktadır. Ancak min-height hızlı hilesi adı verilen bir çözümümüz var. Kod şu şekilde:

#yourId {
min-height:300px;
height:auto !important;
height:300px;/*Needs to match the min height pixels above*/
}

Sade, işlevsel ve doğrulanabilir bir kod. Bu örnek ayrıca '!important' özelliğinin kullanışlı olduğu sayılı örneklerden birini teşkil ediyor.

min-height hilesi hakkında daha fazla bilgi alabileceğiniz siteler:

Using the min height fast hack

14. * HTML hilesi
Eğer IE'ye özgü stil şablonlarına bağlantı vermek istemiyorsanız, o zaman * html hilesini kullanabilirsiniz. Kusursuz bir dünyada HTML elementi daime ana elementtir, bu sebeple HTML'den önce herhangi bir element bulunamaz. Buna rağmen IE, bunun mümkün olduğunu iddia eder. Bu sebeple eğer IE üzerinde bir elementi hedeflemek istersek onu bu şekilde gerçekleştiririz:

* html body div#sideBar {
display:inline;
}

html hilesi hakkında daha fazla bilgi alabileceğiniz siteler:

15. Kayan Kapılar Tekniği
Navigasyon düğmeleri için görsel kullanmanın oluşturduğu önemli problemlerden birisi de istemcinin metninin olması gerektiğinden uzun olma ihtimali ve bunun da düğmenin sınırlarını aşması ya da sınırları dahiline sığmamasıdır. İki görsel ve CSS kayan kapılar tekniği kullanarak içerisindeki metnin uzunluğuna göre genişleyip kısalabilecek düğmeler oluşturabiliriz. Bu tekniğin ardında yatan fikir, her düğme için iki adet görsel kullanmak ve ardından bu görselleri CSS'nin arkaplan tanımlamma özelliği ile düğmelere entegre etmektir. Örneğin:

HTML Dizisi
Başlık Metni

CSS
a.myButton { background: transparent url('right.png') no-repeat scroll top right; display: block; float: left; height: 32px; /* Görsel Yüksekliği */ margin-right: 6px; padding-right: 20px;/*Görsel Genişliği*/ /*Other Styles*/ } a.myButton span { background: transparent url('button_left.png') no-repeat; display: block; line-height: 22px; /* Görsel Yükseliği */ padding: /*İstediğiniz değer ile değiştirin*/ }

Kayan kapılar tekniği hakkında daha fazla bilgi alabileceğiniz siteler:

Ve işte size şablon hazırlarken yardımcı olabilecek 15 CSS tekniğinin de sonuna geldik. CSS tasarımcılar için mükemmel bir araçtır zira kodumuzla daha yaratıcı olabilmemizi ve kendi tekniklerimizi oluşturabilmemize olanak sağlar. Sizin de sık kullandığınız CSS teknikleri var mı? Listeye eklemek istediğiniz teknikler neler olabilir? Yorumlarınızla paylaşın.

Kaynak: ThemeForest

CSS Hileleri ve İpuçları İle İlgili Yazdığım Diğer Yazılar

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

Ücretli & Ücretsiz Kaliteli Blogger Temaları

microsantim — Mon, 26 Jan 2009 16:35:00 GMT

Bu bildiride beğendiğim ücretli ve ücretsiz bazı blogger temalarını, indirme ve satın alma bağlantılarını belirtmeye çalışacağım. Malesef; "mükemmel blogger temaları" "en beğenilen blogger templateleri" gibi bazı başıkların ücretsiz blogger tema sitelerinin "en çok indirilenler" kategorisindeki temaları içermekten ibaret olduklarını gördüm ve gerçekten "güzel sayılabilecek" pek çok temaya blogger kullanıcılarının ulaşamadıklarını farkettim. Umarım bu bildiri böyle bir açığı kapamaya yarar.

Beğendiğim Ücretsiz Temalar :

1- ) Alpha Template

Demo Sayfası - Tema indirme & Ayarlar

2- ) Zinmag Remedy

Demo Sayfası - Tema indirme & Ayarlar

3- ) Rebel Magazine

Demo Sayfası Tema indirme & Ayarlar

4- ) Firebug

Demo Sayfası - Tema indirme & Ayarlar

5- ) Personal Mag

Demo Sayfası - Tema indirme & Ayarlar

6- ) Cellar Heat Light / Image

Demo Sayfası - Tema indirme & Ayarlar

7- ) Cellar Heat Light Text

Demo Sayfası - Tema indirme & Ayarlar

8- ) Cellar Heat Black Text and Image
Demo Sayfası 1 - Demo Sayfası 2
Download Sayfası 1 - Download Sayfası 2

9- ) iTheme Techno
Farklı çeşitleri var. "Tema indirve & Ayarlar" sayfasından örneklerini görebilirsiniz, ben tek ekran görüntüsü veriyorum :

Demo Sayfası - Tema indirme & Ayarlar

10- ) Premium Blogger Template

Demo Sayfası - Tema indirme & Ayarlar

11- ) The Professional Template

Demo Sayfası - Tema indirme & Ayarlar

12- ) Photoblog III

Demo Sayfası - Tema indirme & Ayarlar

13- ) Columnus

Demo Sayfası - Tema indirme & Ayarlar

14- ) Trancparency

Demo Sayfası - Tema indirme & Ayarlar

15- ) Wordpress Admin

Demo Sayfası - Tema indirme & Ayarlar

Ücretli Alabileceğiniz Blogger Temaları :

1- ) Revolution Lifestyle

Demo Sayfası - Tema Satın Alma & Ayarlar

2- ) Revolution Church

Demo Sayfası - Tema Satın Alma & Ayarlar

3- ) NewsTheme

Demo Sayfası - Tema Satın Alma & Ayarlar

4- ) Newsweek

Demo Sayfası - Tema Satın Alma & Ayarlar

5- ) Magaling

Demo Sayfası - Tema Satın Alma & Ayarlar

6- ) Revolution Pro Business

Demo Sayfası - Tema Satın Alma & Ayarlar

7- ) Snapshot

Demo Sayfası - Tema Satın Alma & Ayarlar

8- ) Christine's Blog Templates

9- ) Wordpress to blogger

10- ) Theme Forest

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

Her Web Tasarımcısının Öğrenmesi Gereken 9 Önemli CSS Yeteneği

microsantim — Sat, 18 Jul 2009 08:49:00 GMT

Bu yazı giriş ve orta seviyedeki CSS öğrencilerine hitab etmektedir. Eğer CSS'yi sıfırdan öğrenmek istiyorsanız, o zaman muhtemelen pek çok teknikle, hile ile ve ders ile karşılaşmışsınızdır. Bu yazıda, her web tasarımcısının bilmesi gereken pek çok temel CSS yeteneklerine dair kendi yaklaşımımı yansıtmaya çalıştım. Aşağıdaki makaleleri gerçekten seviyorum ve bu sebeple sizlerle paylaşmaya çalıştım. Umarım beğenirsiniz.

1- CSS Anahatları Oluşturmak

CSS Anahatları Oluşturmak: PSD'yi XHTML'ye dönüştürmek için en iyi dersler

CSS Anahatları: 40+ Ders, İpucu, Demo ve en iyi yöntemler

2- Stilleme ve Listeler Kullanma

3- Kutu Modeli ve Pozisyonlamayı Anlamak

4- Daha iyi CSS Tipografisi

5- Formları Stillemek

6- CSS Çatılarını (Frameworklerini) Kullanmak

En çok kullanılan 12 CSS frameworkü ve onları nasıl anlayacağınız.
Web tasarımı için hangi CSS ızgara frameworkünü kullanmalı?
CSS Frameworkleri + CSS Sıfırlama: Sıfırdan tasarlama.

7- Optimize Etme ve En İyi deneyimler

8- CSS Hileleri ve İpuçları

9- CSS Düğmeleri, Kutuları ve Yuvarlatılmış Köşeler

Kaynak: acomment.

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

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

xp ve bir kaç işlevsel ayar

microsantim — Tue, 12 Aug 2008 12:23:00 GMT

windows xp hala çok kullanılan işletim sistemlerinden. uzun süre de kullanılacağı bir gerçek. windows xp hakkında bir çok ayarın 3. parti bir yazılım kullanmadan kullanıcı tarafından yapılabilmesi için greyknight17 sitesinde sıkça karşılaşılan sorunların çözümlerine yer verilmiş.

1 MSN anlık mesajlaşma programının kaldırılması: denetim masası aracılığıyla kaldıramadığınız windows messenger yazılımının kaldırılması için yapmanız gereken şey çok basit. başlat menüsünden çalıştır sekmesini tıklayıp "rundll32 setupapi,InstallHinfSection BLC.Remove 128 %SystemRoot%\INF\msmsgs.inf " tırnak içindeki ifadeyi çalıştır ekranındaki yazı kutusuna yapıştırmanız ve enter tuşuna basmanız yeterli.

2. internet explorer'ın tüm sürümlerini kaldırmak microsoft her ne kadar explorer tarayıcısının kaldırılmasını içerdiği bazı komponentlerden dolayı önermiyor olsa da, litepc.com sitesinden ieradicator isimli yazılımı indirerek internet explorer'ı kolayca kaldırabilirsiniz.
3. windows'u hızlı kapatmak bazı yöntemler bulunmakta. öncelikle kapanış sesini kullanmıyor olmanız gerekir. bunu yapmak için başlat, denetim masası, ses aygıtları, ses efekti aygıtlatlarından ses efekti tabına ulaşmanız gerekir. windows kapanış sesini hiç biri olarak seçmeniz yeterli. ardından yine başlat butonunu tıklayarak çalıştır sekmesine regedit yazarak kayıt defterini açıyoruz. kayıt defterinin "HKEY_LOCAL_MACHINE/SYSTEM/CurrentControlSet/Control" kısmına kadar ilerliyoruz. "WaitToKillServiceTimeout" ifadesini bulup değerini değiştiriyoruz. bu değer 100-200-300 olarak atanabilir. ne kadar düşük olursa o kadar hızlı kapanır.

4. gereksiz dosyaların silinmesi: C:\Windows\Prefetch içerisindeki tüm dosyaları kontrol etmeksizin silebilirsiniz. aynı kural C:\Windows\Temp için de geçerli.
5. gönder menüsüne sekme eklemek: masaüstündeyken sağa tıkladığımızda gönder sekmesinin açtığı bazı kısa yolları görürüz. bu kısa yollar üzerinde ekleme-çıkarma yapmak istediğimiz zaman C:\Documents and Settings\kullanıcı_isminiz\SendTo klasörüne gitmeniz gerekir. buradan istediğiniz kısayolları silip, ekleme yapabilirsiniz.

6. xp'nin zip dosyalarını kendi dosyasıymış gibi göstermesini önlemek 3. parti bir zip yazılımı kullanıyorsanız, zip dosyalarının windows tarafından normal bir dosya gibi açıyor olmasını istemeyebilirsiniz. bunun için başlat, çalıştır komut satırına "regsvr32 zipfldr.dll" ifadesini yapıştırıp tamam'a tıklıyoruz.

7. kullanıcı saatlerini belirlemek: pazartesiden cumaya kadar olan süre diliminde gün içinde bazı kullanıcı hesaplarının kullanılabileceği saatleri kısıtlayabilirsiniz. başlat menüsünden çalıştır komut satırına "net user bildirgec /time:M-F,8am-10pm." gibi bir ifade yazmanız gerekir. burada bildirgec bilgisayarda o oturumu açacak hesabın ismi oluyor. sabah 8 den akşam 10 a kadar o bilgisayar üzerinde çalışabilir bir yetki verilmiş oluyor. 10 pm değil de 22:35 gibi bir saat de verebiliriz, bu 24 lük saat sistemine göre olan ayardır.

8. yeni yüklenmiş programların vurgulanması: yeni bir program yükledikten sonra başlat menüsünden ilgili programın vurgulandığını görürsünüz. bu bir çok kullanıcı tarafından rahatsız edici olarak algılanıyor. bu durumu inaktif etmek amacıyla başlat, özellikler, başlat menü tabı, özelleştir, gelişmiş tablarından yeni "yüklenmiş programlar vurgulansın" seçeneğini kapatıyoruz.

9. sistem geri yükleme noktası oluşturmak: sisteminizin bir nevi yedeğinin alındığı sistem geri yükleme noktaları xp açısından çok önemlidir. sisteminiz sebebi belli olmayan bir şekilde hasar görebilir ve çökebilir. örneğin bilgisayarınız açılırken f8 tuşuna bastığınızda "bilinen en iyi son konfigürasyona dön" işlemini yapabilmeniz için geri yükleme noktası oluşturmanız gerekir. bunu elle yapmak için; başlat, tüm programlar, donatılar, sistem araçları, sistem geri yükleme menüsüne ulaşmanız gerekir.

10. sistem geri yükleme noktalarını silmek: sistem geri yükleme noktaları bir tür yedekleme işlemi olduğundan oldukça fazla yer tutmaya başlar ve sisteminizde sorunlara yol açar. bunun için önceki tüm sistem geri yükleme noktalarını silmeniz ve ardından hemen yeni bir sistem geri yükleme noktası oluşturmanız gerekir. bunu yapmak için; bilgisayarım, özellikler, sistem geri yükleme seçeneğini inaktif yapın.

11. hibernate seçeneğini kullanmak: hibernate uyguladığınız bilgisayarınızda hiberne edilmiş büyük bir dosya boyutuyla karşılaşabilirsiniz. eğer bu seçeneği kullanmıyorsanız kaldırmanızda sakınca yoktur. bunun için başlat, denetim masası, performans ve bakım, güç seçenekleri, hibernate seçeneiğini inaktif edin. bunu kontrol etmek için de c sürücüsü içerisinde "hiberfil.sys" dosyasını arayın. f3 tuşuna basarak "hiberfil.sys" ismini aratıp bulduğunuz dosyayı silin.

12. çoklu dosya isimlendirme: bazen bir klasör içerisinde bir çok dosyayı sıralı bir şekilde isimlendirmek isteyebilirsiniz. örneğin kameranızdan aktardığınız resim-fotoğraf dosyalarına başka isim vermek ve tek tek uğraşmak istemiyorsunuz. bunun için istediğiniz dosyaları seçip, f2 tuşuna basıyoruz. ardından istediğimiz bir ismi veriyoruz. "gezi fotoğrafları" gibi bir isimlendirmenin ardından tüm fotoğrafların "gezi fotoğrafları(1)", "gezi fotoğrafları(2)"... gibi isimlendirildiğini göreceksiniz.

13. online aktivasyon problemi: tüm kullanıcıların en büyük sorunlarından biri de aktive edilmiş işletim sisteminin yeniden kurulum yapıldığında bir kez daha aktive edilmesi zorunluluğudur. bu durumdan kurtulmak için eğer önemli bir donanım değişikliğiniz yoksa "C:\Windows\System32" klasörüne gidip "wpa.dbl" dosyasına göz atıyoruz. o dosyayı bir ortama kaydedip (cd, flash bellek vs..) yeni kurduğumuz işletim sisteminde yine aynı klasöre kopyalıyoruz. herhangi bir problem olmaması açısından da yeni kurduğumuz işletim sistemindeki "wpa.dbl" dosyasının ismini "wpa.old" olarak değiştiriyoruz. ardından bir önceki yedeklediğimiz "wpa.dbl" dosyasını "C:\Windows\System32" klasörüne yapıştırıyoruz.

14. sürücü gizlemek: bilgisayarınızdaki sürücülere erişilmesini istemiyorsanız izleyeceğiniz adımlar çok kolay. öncelikle başlat butonundan çalıştır komut satırını açıyoruz. "gpedit.msc" ifadesini girip tamam'ı tıklıyoruz. gpedit, Grup İlkesi Nesne Düzenleyicisi anlamına gelir ve gruplar içerisindeki yetkilendirmelerle ilgili ayarların tutulduğu bir yönetimsel araçtır. gizlemek istediğimiz sürücüler için, kullanıcı yapılandırılması altında seçip yönetim şablonlarını seçiyoruz. yönetim şablonları altında "windows gezgini" satırını tıklayıp ilgili ayarları görüyoruz. "belirtilen sürücüleri bilgisayarımda gizle" satırını çift tıklayıp, açılan arayüzda "etkin" seçeneğini aktif olarak seçtikten sonra istediğimiz sürücüleri gizleyebiliriz.

15. varolan işlemcinizle daha hızlı çalışın: başlat, çalıştır komut satırına "Rundll32.exe advapi32.dll,ProcessIdleTasks" yazıp tamam'a tıklayın.
16. rezerve internet hızını artırmak: bitakım sebeplerden dolayı varolan internet bağlantınızın %20 si kadarının kırpıldığı bilinmektedir. bunu istemiyorsanız değiştirme imkanınız var. bunun için başlat, Çalıştır, gpedit.msc,bilgisayar yapılandırıcısı,yönetim şablonları, ağ, Qus paket zamanlayıcısı, ayarlanabilen bant genişliğini sınırla, etkin, bant genişlik sınırı = 0, uygula, tamam.
17.dosya gizlemek: gizli dosyaların gösterilmesi esnasında bile gösterilmeyen dosyalarınız olmasını istiyorsanız bir toplu işlemler içeren .bat dosyası oluşturarak bunu yapabilirsiniz. (daha önce bir bildiride bu kodu yazmıştım) öncelikle dosya uzantısı değiştirebilmek için klasör seçeneklerinden "Bilinen dosya türleri için uzantıları gizle" yanındaki tiki kaldırmamız gerekiyor. ardından, yeni bir text dosya oluşturup içine

cls
@ECHO OFF
title Folder kilitli
if EXIST "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}" goto UNLOCK
if NOT EXIST kilitli goto MDLOCKER
:CONFIRM
echo Dosyayi Acmak Istiyor musunuz?(E/H)
set/p "cho=>"
if %cho%==E goto LOCK
if %cho%==e goto LOCK
if %cho%==h goto END
if %cho%==H goto END
echo Hatali Secim.
goto CONFIRM
:LOCK
ren kilitli "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
attrib +h +s "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
echo Dosya Kilitlendi
goto End
:UNLOCK
echo Dosyayi acmak icin sifreyi giriniz
set/p "pass=>"
if NOT %pass%== 123 goto FAIL
attrib -h -s "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
ren "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}" kilitli
echo Dosya Acildi
goto End
:FAIL
echo Hatali Sifre
goto end
:MDLOCKER
md kilitli
echo Basarili
goto End
:End

kodunu yapıştırıyoruz. şifre şu an için 123 ama değiştirebilirsiniz.

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

wordpress rss ile içerik çekme eklentisi wp-o-matic

microsantim — Sat, 01 Mar 2008 13:30:00 GMT

wp-o-matic

Her ne kadar kullanımı etik olmasada wordpress tabanlı bloglarınıza wp-o-matic eklentisi sayesinde belirlediğiniz bir rss kaynağından, kaynağı istediğiniz aralıklarla kontrol ederek sitenize içerik ekleyebilirsiniz.
Bir çok rss ile veri çekme eklentisinden farklı olarak istediğiniz kaynaktaki yazıları istediğiniz kategorilere ekleyebiliyorsunuz.Eklentinin bir diğer özelliği ise çektiğiniz verilerdeki istediğiniz kelimeyi, istediğiniz başka bir kelimeyle değiştirebilir, yazıların başına ve sonuna istediğiniz gibi eklemeler yapabilirsiniz.
Eklentiyi buradan bilgisayarınıza download edebilirsiniz.

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

usta bir tasarımcı olmanın kuralları #2

microsantim — Tue, 29 Jul 2008 16:08:00 GMT

Kural İki: Renklerini sınırla.
Usta bir tasarımcı olmanın yedi kuralının ikincisidir. Önce ilk kuralı okumak isteyebilirsiniz.

Yazı tiplerininizi sınırlamanın son kuralıymış gibi geliyor kulağa değil mi? Aynen! Renklerimizi, yazı tiplerimizle aynı nedenden sınırlamak istiyoruz. Tasarımda kullandığımız renkleri sınırlamak, tasarımımızın daha tutarlı olmasını sağlayacaktır. Yani, her şey uyumlu görünecektir. Aynı bir spor takımının üniforması veya bir şirketin markalaması gibi.

Yazı tipi seçiminde olduğu gibi, renkleri sınırlamak sadece bir rehberdir, kural değildir. Tasarımınızda bir hayli gökkuşağı gibi bir sürü renk kullanabilirsiniz, ve harika görünebilir. Ama bir renklendirme stratejisiyle başlamalı ve buna sonuna kadar uymalısınız. Renklerinizi tasarımınızla uyumlu bir şekilde kullanın.
Yeni başlayanlar için, önce renk değerlerinden bahsedelim. Bir rengin değeri, rengin ne kadar aydınlık veya ne kadar karanlık olduğudur. Bir sarı örneğin, epeyce aydınlıktır. Bir mor epeyce karanlıktır. Tabii ki, bir rengin değer yelpazesi vardır. Örneğin mor, çoğumuzun karanlıkla özdeşleştirerek düşündüğü, ama aynı zamanda oldukça açık değerde bir mor elde edebileceğiniz renktir. Aşağıda renklerin ve onların ilgili değerlerini gösteren bir örnek var. Onun yanında da tek bir renk için renk yelpazesini görebilirsiniz.

renk / değer / değer yelpazesi

Renk planımı seçerken uyguladığım bir kural: renk planınızda mutlaka renklerin değer yelpazesi olduğundan emin olun. Her tasarımda, kontrastı üretmek için biraz açık renge ve biraz karanlık renge ihtiyacınız olacak. Örneğin, tasarımınızın arkaplanı karanlık ise bir de açık renge ihtiyacınız olacak ki metin rahatça okunabilsin. Ya da tam tersi, açık renk bir arkaplanınız varsa metninizin okunabilmesi için açık bir renk gerekli olacak.

Ayrıca genellikle renk planımı seçerken 2 ila 5 renk seçerim. Seçenek sayısını arttırın ve tasarımda iyi sonuçlar elde edeceksiniz. Aşağıda bir araya getirdiğim bir renk planının örneği var.

Görebileceğiniz gibi bir karanlık renk, bir orta değerli renk ve bir de açık renk seçtim. Sağa doğru ise her seçtiğim renk için bir değer yelpazesi hazırladım. Projemde palet niyetine kullanacağım renkler, bu koleksiyondaki renkler olacak. Bir kere paletim hazır olduğunda, sadece bu paletteki renkleri kullanmak için elimden gelenin en iyisini yapmaya çalışacağım.

Tamam, şimdi kaç tane renk seçeceğimiz ve hangi değerlerde olmaları gerekiyor gibi teknik renk seçimi işlemlerini hallettiğimize göre, sırada ne var? Sırada ne olacağını söyleyeyim, en zor kısım; o 2 ila 5 rengin hangileri olması gerektiğine karar vermek! Şahsen bunu zaman zaman zor bir iş olarak görüyorum. Aşağıda renk planımı yaparken aldığım yardımlar ve teknikler var:

Sıcaklık yelpazesine uyun. Ya tüm sıcak renkleri ya da tüm soğuk renkleri seçin. Sıcak renkler kırmızılar, turuncular, sarılar, kahverengiler vb. Soğuk renkler ise maviler ve morlardır. Ben şahsen, yeşilleri ise nötr olarak görmekteyim. Eğer tüm renklerinizi bir sıcaklık aralığında seçerseniz, büyük ihtimalle uyumlu olacaklardır.

İlham almak için www.colorlovers.com gibi bir siteyi kullanın. Bu mükemmel sitenin tüm olayı renk planlarıyla ilgili. Sayfa sayfa renk planları bulabilirsiniz.

Bir gözünüz etrafta olsun. Her tarafınızda renk planları vardır. Markette torbanıza bakın, Starbucks’taki tablodaki renklere bakın, Doğa Ana’ya bakın! Hoşunuza giden bir renk dizisi gördüğünüz zaman, not alın ve bilgisayarınızda bunu tekrarlayıp tekrarlayamayacağınıza bir bakın.

Var olan şirket renklerine dikkat edin. Sık sık, bazı markaların renklerinden yararlanıyorum. Logolarına ve renk yelpazesine bakıyorum daha sonra bunu başlangıç noktam olarak alıyorum. Daha sonra belki bir veya iki renk ekleyebiliyorum.

Aşağıda oldukça kısıtlı renk yelpazesi kullanarak hazırladığım bitmiş bir tasarım var.

Gördüğünüz gibi, kısıtlı renk yelpazesi ve yazı tiplerimi sınırlamak her şeyi bir arada, düzenli gösteriyor.

Bu derslerin basit olduğunu biliyorum… ama bunlar tasarımın esaslarıdır. Yani, bilgileri biraz tazelemek kimseyi öldürmez. Beş kural daha kaldı. Geri kalan beş kuralın daha enteresan olacağına söz veriyorum. Zaman ayırdığınız için teşekkür ederim!

Bill

kaynak

Tarafımdan çevirilmiştir, yazı bana ait değildir.

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

usta bir tasarımcı olmanın kuralları #3

microsantim — Thu, 31 Jul 2008 06:05:00 GMT

Bu yazıyı okumadan önce usta bir tasarımcı olmanın birinci ve ikinci kuralını okumak isteyebilirsiniz.
Tasarımınızdaki kontrastın iyi olması, renk seçimlerinizle doğrudan orantılıdır. Kontrast, tasarımınızdaki renklerin değerlerindeki farklılıklardır. Değer ise bir rengin ne kadar aydınlık veya ne kadar karanlık olduğudur. Hiç beyaz bir çalışma alanı üzerine birinin şöyle bir espri yaptığını duydunuz mu: “Hey, bu kar fırtınasındaki beyaz bir inek!”? Bu, sıfır kontrasta örnektir. Beyaz üzerinde beyaz sıfır kontrasttır. Hiçbir şey göremezsiniz.

Çok basit değil mi? Yani demek istediğim ne kadar aptalca bir yazı bu? Tasarladığım şeyin görünebilir olması gerektiğini açıklıyorum? Bu bir ders için çok gerizekalı bir konu değil mi?

Yanlış.

Çünkü maalesef, sürekli tasarımcıların kontrastla ilgili problemler yaşadığını görüyorum. Bir tek o da değil, kontrast, uygun bir şekilde kullanıldığında önemli bir araçtır.

Çok sık gördüğüm bir hata şu: Tasarımcılar kontrast yaratmak için değer değişikliği yerine renk değişikliği kullanıyorlar. Örneğin, orta değerde bir mavi, orta değerde bir kırmızının tam tepesinde durarak kontrast oluşturuyor. İkisi arasındaki farklılığı görebilirsiniz. Ama aynı değerden iki renk bir arada olduğu zaman (“vibrating”), mavi ve kırmızının buluştuğu çizgide, gözünüz ikisi arasında ileri geri gider, tereddütte kalır. Bu neredeyse yazının nabzı atıyormuş hissi verir.

Eğer amacınız gerçekten canlı bir şey yaratmaksa, bu tekniği kullanabilirsiniz. Ama gözlere fazla yüklenecektir ve bir çok insan bunu rahatsız edici bulacaktır. İşte aynı tasarımın daha fazla kontrast sahibi farklı renkler kullanılarak hazırlanmış hali:

Bu ikinci olan, açıkça gözlere daha az yükleniyor.
Tasarımınızın açık ve kolay okunur olup olmadığını anlamak için, her şeyi bir an için siyah beyaz yapabilirsiniz. Illustrator’da bunu tasarımı seçtikten sonra “Edit>Edit Colors>Convert to Grayscale” yönergesini izleyerek; Photoshop’ta ise tasarımınızı düzleştirdikten (flat) sonra, “Image>Adjustments>Desaturate” yönergesini izleyerek yapabilirsiniz.
Her iki şekilde de, bu testi yaptıktan sonra yaptığınız şeyi geri almanız gerekecek.
İşte aynı tasarımın, biri iyi kontrastla diğeri kötü kontrastla hazırlanmış hali. Ve her birinin altında ikisinin de siyah beyazda nasıl görüneceği var.

solda: iyi kontrast / sağda: kötü kontrast

Soldaki tasarımdaki yazıları okumanın ne kadar kolay olduğunu görebilirsiniz, özellikle siyah beyaza döndürüldüğü zaman. Sağ taraftaki tasarım ise şekilleri belirlemek için daha az kontrast ve daha çok renk farklılığı kullanmış.
Her zaman aldığım bir soru da şu: “Bir arkaplan filigranı (watermark) için hangi saydamlık (opacity) seviyesini kullanmalıyım?”. Bence iyi bir filigran arkaplanı %10-%15 saydamlıkta olmalıdır. Bir kez daha –bunların hepsinin amacı, tasarımınızdaki kontrastın sürekliliğini sağlamaktır. Eğer arkaplan açık renkse –o zaman filigran, uygun bir açıklıkta ve tam tersi olmalıdır. Aşağıda iyi ve kötü filigran için örnekler var:

arkaplandaki bu filigran %15 şeffaflığa ayarlandı. iyi kontrast!

arkaplandaki bu filigran %50 şeffaflığa ayarlandı. kötü kontrast!

Kontrastla ilgili olarak belirtmek istediğim diğer bir şey ise bir araç olarak kullanılabileceğidir. Eğer, örneğin, izleyicinizin dikkatini tasarımınzdaki önemli bir şeye çekmek istiyorsanız, bunu kontrastla başarabilirsiniz! Tüm tasarımı açık renkte tutabilir ve dikkat çekmek istediğiniz şeyi karartabilirsiniz. Aşağıda bu şekilde iyi tasarlanmış bir tanıtım sayfası var:

Bu, E-Harmony’nin web sitesindeki tur bölümünden bir sayfa. İnsanlara bir tur vermek isterlerken, gerçekten istedikleri insanların üye olmasını sağlamak. Yani, bu sayfaya baktığınızda, sayfadaki en büyük ve karanlık şey nedir? Bir kızın tıklanamayan resmi ve “Get Started Now/Hemen Başlayın” butonu. Açıkça, “Get Started Now/Hemen Başlayın” butonuna tıklamanızı istiyorlar. “Next Step/Sıradaki Adım” butonuna kıyasla, “Get Started Now/Hemen Başlayın” butonunun ne kadar büyük ve karanlık olduğuna bakın. “Next Step/Sıradaki Adım” butonu, turdaki birinin tura devam etmek için tıklaması gereken bir buton. Ama “Get Started Now/Hemen Başlayın” butonunun ne kadar çekici olduğunu fark ettiniz mi? Ve neden? Neden sayfadan üzerinize atlıyor? Basit: Kontrast!

Bu, tasarımda basit ama temelde kritik bir dersin sonu oluyor. Bunu okuduğunuz için teşekkür ederim. Dört basit kural daha var. Bunlar bittikten sonra söz veriyorum size nasıl çizileceğini öğreteceğim!

Bill

Kaynak

yazı tarafımdan çevrilmiştir, bana ait değildir.

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

hayranlık uyandıran 37 jQuery uygulaması

microsantim — Mon, 28 Jul 2008 20:58:00 GMT

aşağıdaki adreste, bize her zaman lazım olacak jQuery uygulamaları ufak açıklamalar ve preview-demo şeklinde anlatılmış.
yetmemiş, yazar bir de internet üstünde çalışan ve her zaman işe yarayabilecek olan uygulamaları da listelemiş.

birkaç tanesi aşağıda:

slider gallery:
apple'ın web sitesindekine benzer, ürün kaydırma çubuğu, az ürününüz varsa ve internette bir mağazanız, bu sizin sitenizde çok şık durabilir.

slider gallery

demosu burada. script ana sayfası burada.

sliding image puzzler:
internet sitenizde, ziyaretçilerinizin oynayabileceği bir puzzle oyunu yaratın, parçaların sayısını belirleyeibliyorsunuz ve geçişlerdeki slide efekti de görmeye değer.

sliding image puzzler

demosu burada . script ana sayfası burada.

jQuery flash plug-in:
jQuery'yi daha önce Flash dosyası embed etmek için kullandınız mı? kullanmadıysanız ve istiyorsanız, gideceğiniz yer burası.

jQuery flash plug-in

script anasayfası burada.

writemaps:
bu site de, bir web servisi, jquery kullanarak sürükle-bırak şeklinde, kolayca sitemap hazırlayabiliyorsunuz. sitenin kullanımı çok kolay.

writemaps - online site haritası hazırlayın

script anasayfası burada.

listenin geri kalanı ise burada.

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