bildirgec.org - Forzaken - beğendikleri

A'dan Z'ye 50 tane İçerik Yönetim Sistemi (CMS)

Forzaken — Mon, 20 Apr 2009 14:33:00 GMT

Bildiğiniz gibi içerik yönetim sistemleri kodlama yapmayı bilmeyen insanlar için kurtarıcı niteliğindedir. Gerek kullanımı olsun, gerek eklentileri, gerekse de tasarımı bizi oldukça rahat ettirir. Ancak sonra şu sorun ortaya çıkar; yapacağımız siteye göre hangi içerik yönetim sistemini kullanacağız? Amacına uygun bir içerik yönetim sistemi bulmak bazen gayet zor olabilir. İsteklerinizi tamamen karşılaması için epey araştırma yapmak zorunda kalabilirsiniz. bu bildiride sizler için bu içerik yönetim sistemlerinden pek duyulmayanları ve hepimiz tarafından bilinenleri sunacağım.

Anantasoft Gazelle CMS 1.0

İndir - Demo

Atarone 1.3

İndir - Demo

Bigace 2.5

İndir - Demo

bitweaver 2

İndir - Demo

*Campsite 3.2.1 (Önerim)

İndir - Demo

ClanSphere 2009.0 rc (Clan Sitesi)

İndir - Demo

CMS Made Simple 1.5.3 (Önerim + TR Dil Destekli)

İndir - Demo

CMS-Bandits

İndir - Demo

CompactCMS

İndir - Demo

Concrete5 5.1.1 (Kolay Yönetim Paneli)

İndir - Demo

DBHcms 1.1.4

İndir - Demo

Diferior 8.0

İndir - Demo

*Drupal 6.10 (önerim + TR Dil Destekli)

İndir - Demo

e107 (TR Dil Destekli)

İndir - Demo

*Elxis 2008 (Önerim + TR Dil Destekli)

İndir - Demo

Enano CMS

İndir - Demo

Etomite 1.1

İndir - Demo

Exponent 0.9

İndir - Demo

*eZ Publish (Önerim + TR Dil Destekli)

İndir - Demo

Fundanemt

İndir - Demo

Geeklog

İndir - Demo

glFusion 1.1.3

İndir - Demo

Guppy (TR Dil Destekli)

İndir - Demo

Icy phoenix

İndir - Demo

ImpressCMS 1.1.2

İndir - Demo

Jaws (TR Dil Destekli)

İndir - Demo

*Joomla (Önerim + TR Dil Destekli)

İndir - Demo

Limeware CMS (Sade, Kolay, Tatlı)

İndir - Demo

LoveCms

İndir - Demo

*MemHT Portal (Kesinlikle Öneririm + TR Dil Desteği)

İndir - Demo

MiaCMS

İndir - Demo

*Phenotype (Önerim)

İndir - Demo

PHP-Fusion 7 (TR Dil Destekli)

İndir - Demo

PHP-Nuke 8 (TR Dil Destekli)

İndir - Demo

PhpMySport 1.4 (Maç Sitesi)

İndir - Demo

Pixie

İndir - Demo

Redaxscript

İndir - Demo

Seagull

İndir - Demo

*SilverStripe (Kesinlikle Öneririm + TR Dil Destekli)

Bu içerik yönetim sistemi ile ilgili yazdığım detaylı yazıya burdan ulaşabilirsiniz.

sNews (TR Dil Destekli)

İndir - Demo

Stash (Önerim + Sanatçı / Grup Sitesi)

İndir - Demo

TangoCMS

İndir - Demo

TRIBiQ CMS (İşyeri Sitesi + TR Dil Desteği

İndir - Demo

Triton

İndir - Demo

*TYPOlight (Önerim + TR Dil Destekli)

İndir - Demo

Xaraya 1.1.5

İndir - Demo

XOOPS (TR Dil Destekli)

İndir - Demo

Zimplit (Önerim + Küçük + Kullanışlı)

İndir - Demo

Zikula

İndir - Demo

Sizlerde bu listede olan içerik yönetim sistemlerinden deneyimli olduklarınız hakkında yorum yaparsanız sevinirim :)

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

Modern Web Tasarımında Dokular

Forzaken — Sat, 14 Mar 2009 07:26:00 GMT

Eğer CSS galerilerinde ya da tasarım için ilham alabileceğiniz diğer kaynaklardaki iyi tasarlanmış sitelere bakarsanız, modern Web tasarımında dokuların kullanımının oldukça yaygın olduğunu fark edeceksinizdir. Dokuların bu kadar popüler olmasının ardında yatan nedenlerden birisi de dokuların oldukça değişken olmalarıdır. Dokular tasarım stillerinde sayısız biçim ve yöntem kullanılarak kullanılabilir. Farklı web sitelerini inceledikçe, web tasarımcılarının dokuları ne şekilde kullandıklarını anlayacaksınızdır.

Web tasarımında dokular, ziyaretçilerin neredeyse fark edemeyecekleri kadar sade bir biçimde kullanılabildikleri gibi, bir tasarımın ana elementi olarak da kullanıldıkları görülmüştür. Dokuların değişkenliği sebebiyle tipografi, ışık ve renk gibi diğer tasarım elementleri ile mükemmel bir şekilde harmanlanabilirler.

Dokuları kullanan web sitelerini incelediğinizde, dokuların arkaplan görseli olarak, başlıklarda, altlıklarda, yan çubuklarda, içerik alanlarında ve hatta yazıtipleri üzerinde bile kullanıldığını göreceksiniz. Her ne kadar dokular bazen tasarımın "kirli" (grunge) tarzı ile bütünleştirilseler de, aslında kullanım alanları "pis" görünümlü olan web sitelerin çok ötesine gitmektedir. Dokular doğru kullanıldıklarında, neredeyse tasarımın her tarzına bir derinlik katarlar. Bu yazıda dokuları farklı şekillerde kullanan 50 örnek web sitesine bakacağız.

Dokuların tasarımcılar için çok kullanışlı olmasının bir diğer sebebi de Photoshop ya da benzeri bir program kullanarak onları tasarımlara eklemenin çok çabuk ve kolay olmasıdır. Makalenin ilerleyen bölümlerinde dokuları kendi çalışmalarınıza uygulayabileceğiniz farklı teknikleri de inceleyeceğiz.

Galeri: Modern Web Tasarımında Dokular

Yazının bu bölümünde dokunun eklenmesi ile tasarımın iyileştirildiği 50 adet web sitesini inceleyeceğiz. Bu web siteleri dokunun kullanılış biçimlerine göre kategorilendirilmiş durumdalar. Örneklerin çoğu muhtemelen birden fazla kategoriye dahil edilebilir ancak onların aşağıdaki şekilde kategorilendirilmelerinin sebebi, onların çeşitliliğini göstermek ve tasarımın özel bir elementini vurgulamak içindir.

Dokunmuş Arkaplanlar

Konu modern web tasarımında dokulara geldiğinde, arkaplan görselleri muhtemelen dokuların en sık kullanıldığı tasarım elementidir. Aşağıdaki örneklerde de görebileceğiniz üzere arkaplan görseli olarak dokuların kullanılmasının tasarıma inanılmaz derecede büyük etkileri olabilir. Dokuları bu şekilde kullanabilmenin sayısız yolu bulunmaktadır ve aşağıdaki örnekleri tasarlayan pek çok tasarımcı da büyüleyici çalışmalar ortaya çıkarabilmek için yeteneklerini kullanmışlardır.

Edit Studios

Pek çok tasarımcı ve tasarım stüdyosu, web sitelerinde karanlık arkaplanlar kullanmaktadırlar. Ancak Edit Studios, sitesindeki arkaplanda doku kullanmayı tercih ederek tasarımına değişkenlik dahil etmeyi başarmış. Ana içerik kısmının arkaplanında birkaç çatlak bulunuyor ve tasarımın geri kalanı ile arkaplanının "kirli" tarzı, karanlık arkaplan üzerinde aşırıya kaçmıyor.

Jobs on the Wall

Web Designer Wall, özellikle renkli ve sanatsal arkaplanları ile tanınır. Sitenin meslek forumu ise benzer şekilde yaratıcı ancak daha az renkli bir arkaplanı doku içeren bir yaklaşımla kullanmayı tercih etmiş. Arkaplanın dokusu bir mantar panoyu temsil ediyor. Sitenin geri kalanında kullanılan zımba gibi bazı görsel ayrıntıların da arkaplan dokusu ile nasıl bütünleştiğine dikkat edin.

GoodBytes

GoodBytes'ın arkaplan görseli birbirlerinin üzerini örten mor renkli farklı şekilleri içeriyor ve bu doku, logonun yer aldığı kısım için hafifçe aydınlatılmış. Bu efektin sonucunda da, doku kullanılan bir arkaplanın tasarıma ne derecede bir zenginlik kattığını görüyorsunuz. Bir de aynı tasarımı doku olmadan sabit renkli bir arkaplanla hayal edin. Ne kadar farklı değil mi?

Grace Church of Alexandria

Doku görünümü için ahşap arkaplanların kullanımı ne kadar yaygınsa, tuğla arkaplanlar daha az yaygın. Grace Church web sitesinin ana içerik alanı çok temiz ve tuğla desenli doku arkaplanı üzerinde yer alıyor.

Jason Bradbury

Jason Bradbury'nin web sitesi rasgele beliren birden fazla arkaplanı bir arada kullanıyor. Kullanılan arkaplanların bir çoğu doku desenini içeriyor. Aşağıdaki ekran görüntüsü o dokulardan birisini, kirli bir Britanya bayrağını gösteriyor. Dokunun uygulandığı bayrağın uyandırdığı his, uygulanmamış olanına kıyasla çok daha farklı.

Doejo

Doejo portfolyo web sitesi sade bir anahatta sahip. Sitenin altlık kısmı hariç tamamı hafif bir doku içeriyor ve bu doku siteye farklı bir his kazandırıyor.

Design Sponge

Design Sponge'nin görece dar olan ana içerik kısmı, dokulu arkaplanı ön plana çıkarıyor. Görselde, doğal renkleri içeren tuval benzeri bir öğe kullanılmış.

Here's Life Mission America

Here's Life Mission America'nın içerik alanı ilk bakıldığında farkedilebilemeyecek hafif dokuya sahip. Ancak onun altında kullanılan parçalanmış sınır, dokuyu daha belirgin hale getiriyor.

Bart-Jan Verhoef

Bart-Jan Verhoef, dokuyu, sitesine eski kağıt görünümü kazandırmak için kullanmış. Arkaplanın yanısıra sitedeki logo ve sitenin kendisinin de "pis", dokunmuş bir efekte sahip olmasına dikkat edin.

Church on the Rock

Church on the Rock web sitesinin neredeyse tamamında doku efekti kullanılmış. Bazı ahşap efektler başlık görselinde kullanıldığı gibi, aşağıdaki ekran görüntüsünde de doku içeren görselin bir örneğini göreceksiniz.

Design Comission

Design Comission sitesi de temiz içerik alanının ardında doku içeren bir arkaplan kullanan bir diğer site. Sitenin arkaplanının sol kısmınd kullanılan hafif kırmızı renk, siteye çeşitlilik katmış.

Creative Nights

Creative Nights web sitesinin mavi renkli içerik alanı ve doku uygulanmış koyu mavi bir arkaplanı bulunuyor. Uygulanan aydınlık efekti, içerik alanını belirginleştirmek ve arkaplanın geri kalanını daha karanlık yapmak için kullanılmış.

Fall for Tennessee

Tennessee tatil serisindeki web sitelerinin tamamının tasarımları iyi. Sonbahar web sitesi ise dokulu ve sonbahar renklerine sahip bir arkaplan içeriyor.

Carbonica

Carbonica doğaş renklere sahip dokuları sitenin genelinde kullanmış. Başlıklar, simgeler ve yan çubuk üzerindeki gezinti menüsü de ayrıca dokulu yazıtipleri içeriyor.

Sollievo

Sollievo'nun kahverengi arkaplanına uygulanmış hafif doku efekti tek başına belki pek belirgin olmasa da ana içerik alanındaki parçalanmış kağıt efekti ile birleştiğinde daha belirgin bir doku hissinin oluşmasına sebep oluyor.

Gareth Dickey

Gareth Dickey'in web sitesinin başlık ve arkaplanı bir illüstrasyon içeriyor. Dokuda kullanılan illüstrasyon her ne kadar pek belirgin olmasa da siteye farklı bir görünüm kazandırmış olduğu kesin.

Bright Creative

Dave Shea'nın stüdyosu Bright Creative sitenin genelinde doku kullanmış. Başlıkta doku uygulanmış koyu kırmızı ve gövde de doğal renkli doku kullanılmış.

NK'MIP Resort

NK'MIP Resort'un web sitesinin "pis" bir görünümü, karanlık doku uygulanmış arkaplanı ve daha aydınlık dokulu içerik alanı bulunuyor.

Design Reviver

Design Reviver'in koyu dokulu arkaplanı sayfanın altına doğru düz renkli bir arkaplana geçiş yapıyor. Beyaz renkli başlık alanının bazı bölümlerinde de doku mevcut.

Moustache Me

Moustache Me tıpkı Jobs on the Wall sitesinde olduğu gibi koyu renkli arkaplan üzerinde daha aydınlık mantar pano efektini kullanmış. Bant görselleri ve zımbalar da mantar pano görünümünü tamamlar nitelikte.

Dokulu Başlıklar

Pek çok web sitesi başlıkları hem tasarımın ana bir öğesi olarak hem de diğer web sitelerinden farklı olmak için belirgin bir şekilde kullanıyor. Genellikle görseller için ayrılan geniş bir alan özellikle belirgin dokular için mükemmel bir ortam oluşturuyor. İyi tasarlanmış web sitelerini inceledikçe, dokuların başlık kısmında kullanıldığı pek çok web sitesi ile karşılaşacağınız kesin. Aşağıdaki örnekler de bu yöntemin kullanım olanakları açısından faydalı olabilir.

Acceptance

Acceptance sitesinin başlığı siyah ve mavi renk üzerine doku uygulamış. Özellikle renklerin daha koyu olduğu köşelerde uygulanan doku daha belirgin. Gezinti menüsü üzerine fare imlecini getirdiğinizde de benzer bir doku ile karşılaşacaksınız.

Slabovia.tv

Slabovia.tv web sitesine doku kazandırmak için ahşap arkaplan kullanılmış ancak bununla birlikte balık alanı da doku içeriyor. Başlığın arkasında fincan izi olması güzel bir ayrıntı ve web sitesinin sloganı da bir bant üzerine el ile yazılmış hissi uyandırıyor.

Sienna Online

Sienna Online sitesinin karanlık siyah bir arkaplan kullanılmış ancak başlık kısmında bol miktarda doku yer alıyor. Başlık görselinin eski kağıt görünümü var.

Electric Pulp

Electric Pulp sitesinin açık renkli arkaplanı üzerinde hafif bir doku mevcut ancak bu sayede başlığın ön planda belirmesi sağlanmış. Logo alanı da ayrıca bazı dokular içeriyor.

Rocket Club

Rocket Club web sitesinin başlık kısmına uygulanan yüksek miktarda doku, sitenin genel görünümünü önemli miktarda değiştiriyor. Doku ayrıca grubun yarı saydam görselinin ardından da seçilebiliyor.

Wandering Goat Coffee Company

Wandering Goat Coffee Company web sitesinin başlığı üzerine uygulanan keten bezi görseli başlığa derin bir doku kazandırmış. Logonun kendisine de ayrıca doku uygulanmış.

The Man In The Sea

TheManInTheSea sitesinin arkaplan görseli başlığı ve içerik alanının dışında kalan bölümlere doku katıyor ancak içeriğin okunulabilirliğini arttırmak için gerekli alanlarda düz beyaz renge geçiş yapıyor.

The Resume Girl

The Resume Girl web sitesi, başlık üzerinde bir dizi doku kullanmış. Beyaz alanda sayfa dokusu gözlenirken, gezinti menüsünün de yırtık köşeler içeren kendine özgü bir dokusu mevcut. Yeşil renkli yıldız patlaması alanı da yine doku içeriyor.

Thuiven

Thuiven portfolyo web sitesinde kullanılan temiz tasarımın başlık kısmı üzerinde hafif bir doku yer alıyor. Başlık ayrıca doğal arkaplan üzerine çoklu çizgiler içeren desen barındırıyor.

Yan Çubuk Dokusu

Her ne kadar arkaplan görselleri yan çubuklar için sütun oluşturma amaçlı kullanılsa da, bu görsellerde doku kullanmak, genel arkaplan üzerinde doku kullanmak kadar yaygın değiller. Aşağıda listelenen web siteleri dokuları yan çubuklar üzerinde farklı şekillerde kullanmışlar. Bu alanda birkaç farklı yaklaşım aşağıda listelenmiş.

Napa Bar and Kitchen

Napa Bar and Kitchen web sitesi çok fazla doku içermiyor. Koyu renkli yan çubuk üzerindeki doku baskın değil ancak tasarımın geneline güzel bir katkı sağlıyor.

Rob Goodlatte

Rob Goodlatte'nin web sitesinin her yerinde doku bulunuyor ancak yan çubuk üzerinde kullanılan doku çok belirgin zira dokuların bu şekilde kullanılması sık rastlanılan bir durum değil. Yan çubuk tsarımı genellikle çok sadedir ve üzerinde fazla durulmaz, ancak Rob'un yan çubuğu görünümü sebebiyle dikkatleri üzerine çekiyor.

Branded07

Branded07 koyu mavi renkli yan çubuğu, açık renkli arkaplan içeren ana içerik alanı ile kontrast oluşturması için kullanmış. Bu koyu renk hafif bir doku içeriyor. Aynı koyu renkli doku ayrıca sitenin başlık alanında da kullanılmış.

Adventure Trekking

Branded07'nin tasarımında olduğu gibi Adventure Trekking'in tasarımı da dokuları her yerde kullanmıyor. Sadece birkaç yerde kullanıyor. Yan çubuk kısmı da katlanmış ve yırtık kağıt dokusunu üst kısmında kullanmış. Doku kullanılmayan ve daha aydınlık içerik alanı ile yan yana geldiğinde bu yan çubuk daha ön planda beliriyor.

Doku İçeren Gezinti Menüleri

Gezinti menüler bir web sitesinin görsel olarak en ilgi çekici alanı olabilirler. Dokular, elbette, farklı ve çekici bir görünüm için menülerin arkaplan görsellerinde de kullanılabililer. Burada da bu alanda farklı yaklaşımları bulacaksınız. Listedeki sitelerin hepsi, standart gezinti menüsünü şu ya da bu şekilde geliştirmek için doku kullanma yoluna gitmiş.

Matt Dempsey

Matt Depsey'in portfolyo web sitesinin arkaplanı, turuncu renkli fırça darbelerini içeriyor. Doku uygulanmış bu fırça darbeleri ayrıca sitenin gezinti menüsünde de kullanılmış ve gezinti menüsünün öğeleri üzerine fare imleci getirildiğinde, renk tonu açılarak eylemle etkileşim sağlanmış.

Von Dutch

Von Dutch sitesinin genelinde sanatsal doku elementlerini kullanmış. Sitenin ana gezinti menüsünün arkaplanında kullanılan doku uygulanmış görseller sebebiyle menü daha ilgi çekici hale getirilmiş. Her bağlantıda farklı bir görsel yer alıyor.

Alpine Meadows

Alpine Meadows web sitesinde bir dizi farklı doku yer alıyor ancak gezinti menüsünde kullanılan doku muhtemelen en ilgi çekici olanı. Yıpranmış efekt uygulanan doku tasarımın odak noktası haline gelmiş.

Blue Moon

Blue Moon sitesindek tuğla arkaplan hiç şüphesiz siteye yüksek miktarda doku kazandırmış ancak gezinti menüsünde kullanılan paslı dokunun bir benzerinin yazıtipi üzerinde de uygulanması, siteye derinlik katmış.

Astuteo

Astuteo portfolyo web sitesi, etki uyandırmak için dokuyu sitenin sadece belirli bölümlerinde kullanan temiz tasarımlı siteler arasında yer alıyor. Ana gezinti menüsünü de içeren başlık kısmında kullanılan doku, sitenin geri kalanında gözlenen beyaz arkaplan ile kontrast oluşturmuş.

Helmy Bern

Herny Bern sitesindeki başlık kısmı ve gezinti menüsünde yüksek miktarda doku kullanıldığı gözleniyor. Özellikle yırtık mukavva görünümü en çok ilgiyi çeken kesim. Bunun yanısıra yan çubuk üzerinde de benzer bir doku kullanılmış.

The Ernest Hemingway Collection

Ernest Hemingway Collection bir masaüstü ortamını sitesinin arkaplanı olarak kullanırken ana içerik alanı masanün üzerinde yer alıyor. Ana gezinti elementinde koyu kayverengi deri hissi uyandıran bir doku kullanılmış.

Hafif Doku Kullanımı

Dokunun en ilginç kullanım örneklerinden bazıları dokuyu çok hafif miktarda kullanmasına rağmen ilgi çekmeyi başarıyor. Bazı tasarımcılar, dokuları, sitenin baskın elementi haline gelmeden bile başarılı bir şekilde kullanmayı başarıyorlar. Aşağıdaki örneklerde, ayrıntıya verilen önem sonucunda muhteşem sonuçların alındığını göreceksiniz.

Henry Jones

Henry Jones'in portfolyo web sitesi dokuları bir nebze de olsa kullanmakta bir sakınca görmemiş. Başlık alanını çevreleyen sınır çizgileri ve gezinti menüsü üzerindeki birkaç küçük noktaya dikkatli bakarsanız doku uygulandığını göreceksiniz. Logo alanının gri renkli alt sınır alanı da aynı şeyi yapmış. Her ne kadar bu tasarım elementleri siteyi ziyaret ettiğiniz ilk birkaç saniyelik sürede kendini belli etmese de, tam bir görünüm oluşturmaya yardımcı oluyorlar.

Denver Seminary

Logonun ardında düz mavi arkaplan rengi kullanmaktansa Denver Seminary'nin web sitesi bir tür mavi tonu üzerinde hafif doku elementlerini içeriyor. Uygulanan bu doku sayesinde hem logoya hem de başlık alanına görsel bir ilgi çekilmiş oluyor.

College Park Church

College Park Kilisesi'nin web sitesinin genelinde farklı doku tipleri kullanılmış. Başlık kısmında yer alan yeşil renkli çubuğun ardında uygulanan dokunun yanısıra onun hemen altında da doku kullanıldığı gözleniyor. Her ne kadar uygulanan bu dokular ilk bakışta kendini belli etmese de, başlık kısmını tasarımın geri kalanı ile bütünleştiriyor.

Drew Dellinger

Düz bir arkaplan kullanmaktansa Drew Dellinger'in web sitesinin arkaplanında hafif bir doku kullanılmış. Tıpkı bu bölümdeki diğer örneklerde olduğu gibi site genelindeki herhangi bir element ziyaretçinin dikkatini diğerlerinden daha fazla çekmiyor ancak bu web sitesi, özellikle hafif miktarda doku kullanımının tasarımı nasıl etkileyebileceği güzel bir şekilde örneklendirilmiş.

Square Space

Squarespace'nin doku kullanımı, Drew Dellinger'inkine çok benziyor. Karanlık arkaplana hafif miktarda uygulanan doku, web sitesinin farklı bir his uyandırmasına neden oluyor. Squarespace sitesinin alt kısımlarına ilerledikçe, doku uygulanmış arkaplanın yavaşça düz renkli arkaplana geçiş yaptığını göreceksiniz.

Inca Un Calator

Inca Un Calator'un tasarımı dikey olarak farklı bölümlere ayrılmış. Her bir bölümde farklı bir renk ve doku harmanlaması uygulanmış. Dokular ve bir bölümden diğerine geçişte gözlenen değişiklik her ne kadar çok belirgin olmasa da, sitenin genel görünümünü olumlu yönde etkilemiş.

Aten Design Group

Aten Design Group web sitesi, tıpkı diğer pek çok portfolyo web sitesinde olduğu gibi karanlık bir arkaplan içeriyor. Ancak arkaplan, uygulanan hafif doku sebebiyle biraz değişiklik göstermiş.

Dokuları Tasarıma Eklemenin Farklı Yolları

Dokuları tasarıma dahil etmek birkaç farklı şekilde mümkündür. Eğer Photoshop üzerinde deneyimli iseniz, benzer örnekleri farklı şekillerde oluşturmak çok basittir. Yazının devamında doku içeren web siteleri oluşturabileceğiniz birkaç farklı tekniği bulacaksınız.

1. Kendi Dokunuzu Oluşturmak İçin Ücretsiz Resimleri Kullanın

Photoshop üzerinde oluşturduğunuz neredeyse her bir şeye doku eklemenin en kolay ve hızlı yolu, bazı katman efektleri ile birlikte basit ücretsiz görseller kullanmaktır. Günümüzde İnternet'in yaygınlaşması ile birlikte yüksek kaliteli ve ücretsiz dokuların sayısı da oldukça fazla. Eğer para harcamak istiyorsanız onun için de pek çok seçenek mevcut.

En iyi doku kaynaklarını bulabileceğiniz sitelerin bir listesini vermeden önce, Tutorial9 web sitesinden David Leggett'in resimlere doku eklemek isimli rehberine bir göz atmanızı öneririm.

Eğer kendi çalışmalarınıza doku eklemek istiyorsanız, faydalanabileceğiniz kaynaklar şunlar olabilir:

Smashing Magazine (13 ücretsiz kolleksiyon)
stock.xchng
Texture King
Grunge Textures
Dr. Web Textures
Urban Dirty
Free 3ds Textures
CG Textures
Lost and Taken

2. Photoshop'ta Kendi Dokunuzu Sıfırdan Oluşturmak

Bir doku oluşturmak için görsel kullanmak yerine, herhangi bir görsel kullanmadan aynı efekte Photoshop üzerinde de ulaşabilirsiniz. Eğer bazı önemli teknikleri biliyorsanız, Photoshop üzerinde doku oluşturmak aslında o kadar da zor değildir ve zamanınızı harcamaz. Bunun yanısıra görsel kullanırken karşılaşabileceğiniz sınırlamaların da önüne geçmiş olursunuz.

Doku oluşturmak için kullanılabilecek farklı teknikleri öğreten bazı Photoshop rehberleri bulunmaktadır. Aşağıda bunlardan birkaçını bulacaksınız.

Sıfırdan Photoshop Kağıt Dokusu Oluşturmak ve Ardından O Dokuyu Kullanarak Sıfırdan "Kirli" Web Tasarımı Oluşturmak

Ahşap Doku Oluşturma Rehberi

3. Doku Oluşturmak İçin Photoshop Fırçalarını Kullanmak

Photoshop fırçaları, kendi efektlerinizi sıfırdan oluşturabilmek için kullanışlı bir yöntem olduğu gibi, İnternet üzerinde Photoshop fırçaları bulabileceğiniz sayısız kaynak yer almaktadır. Fırçalar, tasarımlarınıza o "pis" görünümü eklemeniz için mükemmel bir yöntemdir. Aklınıza gelebilecek her tür doku tipi için ücretsiz fırçalar bulabilmek mümkündür, burada önemli olan şey, en doğru fırçayı bulmaktır. Bu ücretsiz fırçaların kullanımının kolay oluşu sayesinde, kendiniz deneyerek sizin için en uygun olan sonuca ulaşmanız yapılabilecek en doğru şeydir. Aşağıda size bu konuda yardımcı olacak bazı kaynakları bulacaksınız.

4. Hazır Dokuları Kullanın

Kendi çalışmalarınız üzerinde kullanabileceğiniz dokuları bulmak yerine, üzerlerine doku uygulanmış görselleri satın alıp çok az ya da hiçbir çaba sarfetmeden onları projeleriniz üzerinde kullanabilirsiniz. Pek çok tasarımcı kendi çalışmalarını iStockphoto, Stockxpert, ve Vector Stock gibi siteler üzerinden satmaktadırlar. Çalışmanız için doğru görseli bulmak her zaman kolay bir iş değildir ancak bulmanız durumunda onun size kazandıracağı zaman için ödediğiniz ücret çok cüzi kalacaktır.

5. Dokuları Taramak

Tarama tekniği, kendi görsellerinizi Photoshop üzerinde sıfırdan oluşturmaya ve ücretsiz doku görselleri ile çalışmaya benzer. Burada tek yapmanız gereken, doku uygulanmış bir kağıt parçası ya da ona benzer bir nesneyi alıp tarayıcınız üzerinden Photoshop'a aktarmak ve ardından üzerinde gerekli değişiklikleri yapmaktır. Eğer bu yaklaşımla ilgileniyorsanız, Bittbox üzerinde yer alan kağıt tarama ve Photoshop üzerinde dokularla çalışma dersi ilginizi çekebilir.

Photoshop ve Illustrator İle İlgili Yazdığım Diğer Yazılar

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

Daha hızlı pc için birkaç aparat

Forzaken — Thu, 24 Jul 2008 08:18:00 GMT

hayatıızı kolaylaştıracak 2 extension shell (eklenti program) var.

birçoğumuz bilgisayarlarında "Objectdock" yada "Rocketdock" gibi yazılımlar kullanıyorlar. Bunlar bilgisayarı şık gösteren yazılımlar gerçekten. Bazen problem yaratsalar da şık olduklarını inkar edemem. Ama bunların yanında çok daha kullanışlı ekranınızda yer kaplamayan yazılımlarda var. Direct Folder (indirmek için tıklayın, kullanımını izleyin ) programı farenizin,

benim menüm

klasörler yada masaüstüne çift tıklamasıyla açılan bir menü yaratıp içine ihtiyacınız olan her türlü program, menü, link, klasör yerleştirmenizi sağlıyor. Kullanımı çok basit ve inanılmaz pratik. Kullanmaya başladığınız anda pcnizi hızlı kullanmaya başladığınızı göreceksiniz. Artık sık kullandığınız program ve klasörler çift tıklamanızın altında olacak.

sağ klik

bir diğer yazılım ise özellikle vista kullnaıcıları için. xp kullananlarınız belki bilirler "total copy" kopyalama extensionunu. ama bu totalcopy vista sürümü bile vistada çalışmıyor. bunun için "teracopy" (indirmek için, portable versiyonunu indir, )var. peki diyosunuzki zaten vista yada xp kopyalama işlemini gayet güzel yapıyor. hayır yanılıyorsunuz ne yazikki yapmıyor özellile xp hiç yapmıyor. Siz kopyalarken durma yada devam etme ihtiyacı hiç duymadınızmı yada kopyalama yaparken hatalı bozuk dosyalar yüzünden tüm kopyalama işleminiz yarıda kapanmadı mı? eminim birçoğunuzun başında bu dediklerim gelmiştir. işte sağklik ile sürükleyip "Buraya Kopyala" yada "Buraya Taşı" butonlarının hemen üstüne yerleşen bu küçük eklenti size kopyalamadan bile zevk aldıracak hemde sorunsuz bir şekilde. artık Lost dizisini 4.2GB lık dvd den pc ye kopyalarken karşılaştığınız bölümlerden bir tanesi okunamıyor hatası yüzünden yarıda kesilmeyecek. Hatalı dosya skip edilip kalındığı yerden devam edilecek. küçük ama inanın format attıktan sonra ilk kurduğum programdır.

kopy

bu iki eklentinin yanında xp kullanıcıları için küçük ama yararlı başka programcıklarda üreten ve ücretsiz kullanıma açan www.codesector.com ailesine teşekkürlerimi bir borç bilir, incelemenizi de tavsiye ederim.

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

CSS'de Yardıma İhtiyacınız Olduğunda Kullanabileceğiniz 10 Kaynak

Forzaken — Mon, 02 Mar 2009 07:37:00 GMT

CSS'de Yardıma İhtiyacınız Olduğunda Kullanabileceğiniz 10 Kaynak

Zaman zaman bir web tasarım ya da geliştirme projesi üzerinde çalışırken bir yardıma ya da rehbere ihtiyacınız olacaktır. Her ne kadar İnternet üzerindeki css kaynaklarının sayısı gün geçtikçe artsa da, bu yazıda CSS ile bir sorun yaşadığınızda size yardımcı olabilecek 10 adet gerçekten kullanışlı kaynağı listelemeye çalıştım.

Stack Overflow

Stack Overflow bir sosyal medya sitesi ve bir forumun kombinasyonundan oluşmuştur. Özellikle programlama ve geliştirmeye yönelik zengin içeriğe sahip bir sitedir (CSS, sitede tartışılan konulardan sadece biri). Stack Overflow'un amacı programcılara soru sorup onların sorularına cevap verebileceğiniz bir platform oluşturmak. Sitede herkes bir soru sorabilir (bir hesap bile açmanıza gerek yok) ve ardından sitedeki diğer kullanıcılar sorularınıza cevap verebilirler. Diğer kullanıcılar sitedeki cevaplara artı ya da eksi puan vererek en iyi cevabın seçilebilmesine yardımcı oluyorlar.

CSS-Discuss.org

CSS-Discuss CSS ile ilgili sorunlara yönelik çok geniş katılımcı sayısına sahip bir elektronik posta forumudur. Dilerseniz listeye dahil olup soru sorabilir ya da soruları cevaplayabilir, arşivi ziyaret edip sorunuza yanıt arayabilir, ya da wiki üzerinde gezinere içeriğe katkıda bulunabilirsiniz.

CSS Kopya Kağıdı

CSS Kopya Kağıdı özellikle fazladan bir yardıma ihtiyacınız olduğunuzda kullanabileceğiniz her zaman yanınızda taşıyabileceğiniz eşsiz bir kaynak. Tek sayfalık PDF belgesini bilgisayarınıza indirip yazıcıdan çıktısını alabilirsiniz. Belge tüm seçicileri ve özellikleri kapsıyor.

CSS Shorthand Kopya Kağıdı

Eğer CSS dosyalarınızın boyutunu indirgemek ve performansını arttırmak istiyorsanız, CSS Shorthand Kopya Kağıdı bu alanda mükemmel bir kaynak. Yine tek sayfadan oluşan bu PDF dosyası sayesinde bazı teknikleri kullanarak daha verimli CSS kodları yazabileceksiniz.

Web Geliştirici Eklentisi

Chris Pedrick'in Web Geliştirici eklentisi genel web geliştirme ve CSS çalışmalarınıza yeni bir soluk ve esneklik katıyor. Araç çubuğunu kullanarak bir elementi etkileyen tüm stilleri listeleyebilir, CSS kaynak kodunu görebilir, blok elementlerini boyutunu görebilir ve CSS'yi etkisizleştirerek sayfanızın nasıl görüntülendiğini görebilirsiniz.

Firebug

Bir diğer eklenti olan ve bence tüm web geliştiricilerinin bilgisayarında sorgusuz sualsiz kurulu olması gereken, parmaklarınızın ucuna sayısız CSS bilgisini getirebilen Firegug ile herhangi bir web sayfası üzernde JavaScript ve HTML'nin yanısıra CSS kodunuzu düzenleyebilir, izleyebilir ve hatalarını ayıklayabilirsiniz. CSS ile çalışan herkes için Firebug, kodunuzu hızlıca düzenlemek ve test etmek için ideal bir araç. Özellikle kodunuzun sitenize nasıl etki edeceğini kodunuzu yazdığınız anda eş zamanlı olarak görmek istediğinizde oldukça kullanışlı hale geliyor.

CSS-Tricks

CSS-Tricks, CSS'ye gönül vermiş pek çok kişinin abonesi olduğu popüler bir blog. CSS-Tricks yazarı Chris Coyler, CSS'yi her açıdan ele alan makaleleri ve dersleri düzenli olarak yayımlıyor. Uzun süredir yayımda olan sitenin arşibi CSS hakkında daha fazla şey öğrenmek isteyen herkes için birşeyler sunuyor. Chris'in makalelerin yanısıra site bünyesinde yardım alabileceğiniz aktif bir forum da bulunuyor.

CSS Kullanarak Herşeyi Yapmak: 50+ Yaratıcı Örnek ve Ders

Noupe bir süre önce CSS'de yapabileceğiniz şeylere yönelik 50 örnek adlı bir makale yayımladı. Eğer yeni fikirler arıyorsanız bu makale mükemmel bir kaynak teşkil ediyor. Eğer özel bir soruna yönelik yardım ediyorsanız, sorununuza yönelik bir kaynak listede yer alıyor olabilir. By yazıda listeleri stillemek, formlarla, altlıklarla ve görsel değiştirmeleri, görsel konumlandırmaları, diğer görsel teknikleri, metin ve bağlantı efektleri, navigasyon, galeriler, yuvarlatılmış köşeler gibi pek çok alanda kaynak mevcut.

CSS Anahatları: 40+ Ders,, İpucu, Demo ve En İyi Deneyimler

Noupe'den bir diğer mükemmel makale daha. Bu makale, CSS'nin belki de en çok baş ağrıtan sorunu olan anahatlara yönelik. eğer siz de anahattınızın istediğiniz gibi çalışmamasından şikayetçi iseniz, muhtemelen burada sorununuzun çözümü halihazırda mevcuttur.

CSS Sütunlarınızın Bozulmasının Ana Nedenleri

Warspire üzerinde yer alan bu kaynak, sütunlar ve anahatlarla çalışırken sık görülen sorunları gidermeye yönelik yardım içeriyor. Makale görülmesi muhtemel problemleri ve problemin çözümünü içeriyor. Çözümde, kullanılması gereken kodlar da yer alıyor.

Kaynak: Vandelay Design Blog

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

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

Sott yazı tipi derleme 01

Forzaken — Wed, 18 Feb 2009 13:10:00 GMT

Sott FreelanceDesigner tasarımda en çok kullanılan ve dikkat çekici fontlar serisi... QmerDesign arkadaşımızın serilerine ek olarak.

QuickSand

Andrew Paglinawan tarafından tasarlanan quicksand fontu kullanım açısından modern ve ilgi çekici. Kategorisi Sans-Serif

QuickSand

Buradan yükleyebilirsiniz.

Sketch Rockwell
Şu sıralar raket pano reklamlarında da kullanılan bir font. Kategori: Hand Drawn

Sketch Rockwell

Buradan indirebilirsiniz.

sansation
özellikle kurumsal kimlik materyalleri yapanların kullandığı bir font. Kategori:Sans-Serif

sansation

fertigo

fertigo

MyFonts.com a üye olup buradan indirebilirsiniz.

MISO
Proje çizimlerinde sayı ve diğer karakterler için kullanılan bir font.

miso

Buradan indirebilirsiniz.

birth of a hero

birth of a hero

Buradan indirebilirsiniz.

baar sophia

baar sophia

Buradan indirebilirsiniz.

marlon book

marlon book

Buradan indirebilirsiniz.

perspective sans

perspective sans

Buradan indirebilirsiniz.

advent

advent

Buradan indirebilirsiniz.

mind riders

mind riders

Buradan indirebilirsiniz.

knarf art font

knarf art

Buradan indirebilirsiniz.

jackdaw pixel font

pixel font

Buradan indirebilirsiniz.

exus pilot

exus pilot

Buradan indirebilirsiniz.

wheelchair sans

wheelchair sans

Buradan indirebilirsiniz.

apogée sans

apogée sans

Buradan indirebilirsiniz.

indeal regular

indeal regular

Buradan indirebilirsiniz.

bobel

bobel

Buradan indirebilirsiniz.

ilk serimiz bu kadar... umarım işinize yarar...

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

Ücretsiz ve Yüksek Kaliteli 100 XHTML/CSS Şablonu

Forzaken — Tue, 17 Feb 2009 14:34:00 GMT

Eğer daha önce çeşitli kaynaklar üzerinde yer alan (X)HTML/CSS şablonlarına bakmadıysanız, bu yazıda bulacağınız şablonların kalitesi sizi şaşırtabilir. Günümüzde WordPress temaları büyük ilgi ve alaka görüyor gibi olsa da halen ücretsiz bir şekilde yayımlanan pek çok (X)HTML/CSS şablonları bulunuyor.

Bu yazıda 100 ücretsiz yüksek kaliteli şablonu inceleyeceğiz. Umarız bunlardan bazıları tasarım ve geliştirme için harcayacağınız sürenin kısalmasına yardımcı olacaktır. Her ne kadar pek çoğu hem bireysel hem de kurumsal kullanımlar için ücretsiz olsa da, siz yine de ilgili şablonları kullanmadan önce lisans bilgilerine bir göz atmayı ihmal etmeyin.

Ücretsiz ve Yüksek Kaliteli 100 XHTML/CSS Şablonu

Package | Kayıt gerekli.

Consultant | İndir

Environmental Brand | İndir

Internet Jobs | İndir

Internet Music | İndir

Greefies | İndir

Squick Design | İndir

Harvest | İndir

Blackberry | İndir

Flower Shop | İndir

Lingerie Store | İndir

Web Application | İndir

Internet Studio | İndir

Puzzled | İndir

Journey of Love | Kayıt gerekli.

Strockes | Kayıt gerekli.

EC Mania | Kayıt gerekli.

Cluster | Kayıt gerekli.

Business Events | İndir

Cool Web | İndir

Genious Web | İndir

Expert Vision | İndir

Intercraft | İndir

Clean Design | İndir

Business Design | İndir

Delicious Fruit | İndir

Multiflex 3 | İndir

Simple Life | İndir

Street Style | İndir

Miss Understood | İndir

Street Life | İndir

skuteczni | İndir

Clarity | İndir

The Old Forest | İndir

Typography Paramount | İndir

Subordinate | İndir

Nature's Charm | İndir

Zenlike | İndir

Clicker | İndir

Biz Company | İndir

Atractive Business Temp | İndir

Happy Template | İndir

Internet Encyclopedia | İndir

Concept Nova | İndir

Free Full CSS Template | İndir

Black Eyed Susan | İndir

Collaboration | İndir

Breakfast | İndir

News Flash | İndir

Discovery | İndir

Adios | İndir

Old Architecture | İndir

Business Company Dark Blue | İndir

Electronix | İndir

Photo Gallery Green | İndir

Quartz Storage | İndir

Aero Solutions | İndir

Keep It Simple | İndir

Decent Photo Gallery | İndir

Consulting Services | İndir

Flare | İndir

Water Spill | İndir

Inverted Headline | İndir

Choice | İndir

Purple | İndir

Business Elegance | İndir

Kaynak: Smashing Magazine

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

Solidworks nedir, ne işe yarar, nasıl öğrenilir?

Forzaken — Mon, 21 Apr 2008 10:32:00 GMT

Solidworks

Solidworkstemel olarak bir bilgisayar destekli tasarım (3D CAD) olmasının yanında üzerinde barındırdığı test ve modül sistemleri sayesinde pek çok sektörde özenle ve sevgiyle kullanılan bir program. Peki solidworks kullanarak neler yapılabilir;

Solidworks kullanarak ölçülü ve vektör tabanlı 3D çizimler yapılabilir.
esnek yapısı sayesinde yaptığımız çalışmaları pek çok program üzerinde kullanabiliriz.
Yaptığımız çizimler üzerinden teknik veriler alabiliriz.
Montaj modülü sayesinde ayrı ayrı yaptığımız çalışmaları bir araya toplayabilir birlikte çalışabiliriz.
Yaptığımız parçalar üzerinde darbe, statik v.b testler yapabilir çok ayrıntılı sonuçlara ulaşabiliriz.
Çalışamalarımızı animasyon eklentisi sayesinde hareketlendirebiliriz.

Çizim Örneği

solidworks hangi sektörlerde ve nerelerde kullanılır?
Aslında bu sorunun cevabı; çizim gerektiren her sektörde solidworks kolayca ve rahatça kullanılabilir. Kullanım stili ve çalışma mantığının kolaylığı yanı sıra zengin içerikli bir program olduğu için uzun süre kullananlar bile her zaman solidworksten öğrenecek bir şeyler bulabilmektedir.

Türkiye'de solidworks konusunda derslere, örnek çalışmalara ve buradan (Solidworks Türkiye) şuradan (Makine Mühendisleri Portalı) ve oradan (Forum1923) ulaşabilirsiniz..

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

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

2008'in En İyi JavaScript Kaynakları

Forzaken — Sun, 25 Jan 2009 10:11:00 GMT

Geçtiğimiz yılın en iyilerini içeren listelere bir yazı ile de ben eşlik etmek istedim. Konumuz JavaScript. 2008 yılında başta JavaScript kütüphaneleri olmak üzere JavaScript'in genelinin yeni nesil web uygulamalarındaki önemi bir kez daha kanıtlanmış oldu. JavaScript ve onunla birlikte çalışabilen üçüncü parti çözümlerin birlikte kullanımı sonucunda harikalar yaratabilen web geliştiricileri, eserlerini tüm Internet kullanıcıları ile ücretsiz olarak paylaşmaktan çekinmediler.

Biz de bu yazımızda 2008 yılının en iyi JavaScript kaynaklarını derlemek istedik. Yazının devamında bulacaklarınızın arasında kaynaklar, kullanışlı dersler, bazı görüşler ve ilginç JavaScript kullanım örneklerine ulaşacaksınız.

Bu tip kaynaklardan her zaman öğrenebileceğiniz bir ya da iki ders mutlaka vardır ve eğer siz bunları verimli bir şekilde kullanırsanız bu yıl portfolyonuzdaki yeteneklere bir yenisini daha ekleyebilirsiniz.

sIFR Lite
"Bir zamanlar bazı çok başarılı web geliştiricileri sIFR'ı yarattılar. Hedefleri, HTML manşetlerini güzel görünümlü yazıtiplerine dönüştürmekti ve işte bu web geliştiricileri amaçlarına da başarılı bir şekilde ulaştılar. Kodlarına bakarak ben de sIFR'a daha nesne yönelimli bir yaklaşımla sIFR'ın 'lite' sürümünü oluşturdum. sIFR lite'yi okumak daha kolay ve kullanımı daha yenilikçi."

Siteyi ziyaret edin

DD_belatedPNG
IE6 için 24-bit PNG alpha-translucency background-image + background-position + background-repeat desteği olan, transparan (saydam) PNG'lerin IE6 üzerinde en sonunda tümüyle sorunsuz çalışabilmesini sağlayan bir yaklaşım. Mucize gibi işliyor!

Siteyi ziyaret edin.

The EqualHeights jQuery Plugin
"CSS ile eşit yükseltiye sahip sütunlar oluşturmak bazen bir işkencedir. Kim bu tip karmaşık CSS kodları ile uğraşmak ister ki? jQuery kod parçacıklarının yardımı ile bir grup elementin yüksekliklerini eşitlemeniz mümkün.

Siteyi ziyaret edin.

jQuery.popeye - satıriçi lightbox alternatifi
"Bu eklenti sırasız imaj listelerini kutu içerisinde birer birer önizlemesini göstererek bir tür lightbox alternatifi oluşturuyor. Kutu üzerinde beliren kontrol elementleri ile imajlar arasında gezinmek mümkünken, dilenen imaj tam boyutlu olarak görüntülenebiliyor. Kutu tam boyutlu imajı görüntüleyebilmek için genişlerken aynı sırada kontrol öğeleri de gizleniyor. Kutu üzerine bir tıklama ile kutu eski küçük haline geri dönüyor."

Siteyi ziyaret edin.

DD_Roundies
Internet Explorer'da yuvarlatılmış köşeler ekleyebilmenin en kolay yolu.

"Bir yuvarlak köşeli kutu için 9 hücreli tablo kullanmaya son. İmaj kullanmaya son. Satırlarca HTML kodu eklemeye son. IE için JavaScript çözümü, diğer 'gerçek tarayıcılar' için CSS3 elementleri otomatik olarak entegre ediliyor"

Siteyi ziyaret edin

jQuery Corners 0.3
"Bu jQuery eklentisi güzelce yuvarlatılmış köşeleri web sitelerinize entegre edebilmenizi sağlıyor. Hem de herhangi bir imaj ya da karmaşık kodlar kullanmadan".

Siteyi ziyaret edin

Superfish jQuery Menü Eklentisi
"Superfish, Suckerfish tarzında gelişmiş bir jQuery menü eklentisi olup halihazırda varolan CSS menülerin üzerine entegre ediliyor (böylece JavaScript'in etkin olmadığı durumlarda bile menünüz sorunsuz çalışıyor). Entegre edildiğinde menünüze çok beğenilen gelişmiş özellikler eklenmiş oluyor."

Siteyi ziyaret edin

JavaScript Hepimizi Kurtaracak
Eric Meyer, tarayıcıların yeni web dillerini desteklemesini beklemektense neden JavaScript kullanarak tarayıcılara bu özellikleri kazandırmamız gerektiğini anlatıyor.

Siteyi ziyaret edin

CSS Sprites2 - Şimdi JavaScript Zamanı
"Web siteleri arasındaki farklar genellikle yoğun flash kullanılan web siteleri ile web standartlarını takip eden siteler arasında değişir. Flash arayüzler genellikle daha canlı görünürler ve kullanıcı isteklerine, standartlara bağımlı web sitelerinin erişemediği dinamiklikte cevap verir. Son zamanlarda bu özellikle değişiklik göstermeye başladı. Özellikle Prototype, Scriptaculous, Moo, YUI, MochiKit ve diğer tüm JavaScript kütüphanelerinin de yardımı ile standartlara bağlı web siteleri de kullanıcı isteklerine dinamik bir şekilde cevap verebilir oldular. Şimdi CSS Sprites tekniğine 4 yıl öncesinden yenien bir göz atmanın ve projelerimize canlılık kazandırmanın mümkün olup olmadığını öğrenmenin zamanı geldi."

Siteyi ziyaret edin.

jParallax
"jParallax seçili elementi bir 'pencereye', bir 'görüş alanına' ve onun astlarını da mutlak olarak pozisyonlayıp görüş alanı içerisinden görülebilen bir nesneye dönüştürüyor. Bu katmanlar, fare hareketleri ile ve kendi boyutlarına ve tanımlanan katman özelliklerine göre hareket ettirilebiliyor. Sonuç ise çok gerçekçi bir paralaks eylem yaratıyor. Muhtemelen kafanız karıştı. Aşağıdaki bağlantıya tıklayın. Ne demek istediğimi anlayacaksınız."

Siteyi ziyaret edin

JavaScript kullanmadan sabit altlıklar
Sadece CSS kullanarak sabit altlıklar oluşturabilmenizi sağlıyor. Kullanılan teknik IE 5.5 üzerindeki tüm tarayıcılarda çalışıyor.

Dinamik Anahat
"Dynamic Layout basit bir basit bir JavaScript kütüphanesi olp sitenin genişliğini geçerli tarayıcınızın genişliğine göre otomatik olarak değiştirebilmenizi sağlıyor."

Siteyi ziyaret edin

AJAX Kullanmayı Bırakın!
"Ajax kullanışlı bir fikir olmasına rağmen her fikir gibi bu da bir süre sonra kolayca proje üzerine entegre edilip edilmediğine göre iyi ya da kötü damgasını yer. Bunu kolaylaştıran unsur ise teknolojidir - ki bu durumda kullanılan teknoloji henüz olgunlaşmamış bir teknolojidir, çünkü kullanıcı gruplarını ardında bırakır. En dikkat çekeni ve etkileneni bu yardımcı teknolojileri kullanırken, teknolojileri tam olarak desteklemeyen tarayıcıları kullanmak zorunda olduğunuzda belirir..."

Siteyi ziyaret edin

sIFR İle Nasıl Çalışılır?
"Bu dersin amacı sIFR'in resmi sitesindeki bilgiyi süzerek onu sitenize nasıl entegre edebileceğinizi adım adım anlatmaktır. Bu dersi takip ettikten sonra sIFR'ın nasıl çalıştığına dair genel bir bilgi sahibi olacak ve ileri seviyede sIFR tekniklerini öğrenebilmek için kendinize bir taban oluşturacaksınız"

Siteyi ziyaret edin

FancyZoom
Web sayfalarınız için Javascript ile yumuşak imaj yakınlaştırma efekti.

FancyZoom

JavaScript ile dönen 3B küp
Ne azı ne de daha fazlası.

Siteyi ziyaret edin.

14KB JavaScript ile Super Mario
"Basit ve sıkıştırılmış bir JavaScript dosyası ile neler yapılabileceğine dair güzel bir örnek. Herhangi bir imaj kullanmadan ve her bir elementin JavaScript ile işlenerek oluşturulduğu inanılmaz bir örnek."

Siteyi ziyaret edin.

Kullanıcı Arayüzünüzü Güçlendirmek İçin 10 JavaScript Tekniği
"Javascript web geliştirme ortamında genellikle estetik bir dil olarak kullanılmaktadır. Bunun anlamı web geliştiricilerinin JavaScript'i sadece tek bir şey için, ziyaretçi'nin deneyimini iyileştirmek için kullanması gerektiğidir. Bir sitenin kullanıcı arabirimi açısından iyileştirilebilmesini sağlayacak pek çok kullanışlı ve zeki yöntem bulunmaktadır. Geliştiric, neredeyse ihtiyacı olan her bir JavaScript kod parçacığını Internet üzerinden bulabilir."

Siteyi ziyaret edin

25 Büyüleyici JavaSciprt Oyunu
"AJAX'ın da yükselişi ile JavaScript, her web tasarımcısının ve geliştiricisinin iyi bilmesi gereken bir dil haline geldi". Form kontrolleri, uyarıllar ve benzer JavaScript kullanımının aksine JavaScript yardımı ile neredeyse her şeyi yapabilmeniz mümkün.

Siteyi ziyaret edin

En Sık Kullanılan 5 İşlevsel Yer İmi
"İşlevsel yer imleri, JavaScript'in etkinleştirildiği ve yer imlerinize sürükleyip bırakabileceğiniz, üzerine tıklandığında da o an ziyaret ettiğiniz web sitesi ile ilgili eylemler gerçekleştirebilen programcıklardır. En iyi işlevsel yer imleri, bir araç çubuğundan beklenebilecek kalitede eylemler gerçekleştirebilmenizi sağlar. Buna rağmen bunlar JavaScript ile yazıldıkları için, herhangi bir kurulum gerektirmeden doğrudan tarayıcı üzerinde çalışabilirler. Bu listede en başarılı 5 işlevsel yer imi (bookmarklet) incelenmiş."

Siteyi ziyaret edin

10 Gelecek Vadeden JavaScript Çatısı
"jQuery, MooTools, Prototype ve YUI gibi popüler JavaScript frameworkleri / kütüphanelerinin JavaScript framework arenasında artık sağlam bir yeri bulunmaktadır. Ancak yeni frameworkler arayan maceracı geliştiriciler için gelecek vadeden pek çok JavaScript kütüphanesi / çatısı bulunmaktadır. İşte bu makalede popüler olanların dışında 10 adet gelecek vadeden JavaScript çatısı inceleniyor."

Siteyi ziyaret edin

Tasarımcılar ve Geliştiriciler İçin 5 Adet Kullanışlı Kodlama Çözümü
"Genellikle yaratıcı ve gerçekten büyüleyici tasarım çözümleri pek bilinmezler çünkü biz tasarımcılar onlara pek dikkat etmeyiz. Kendi projelerimizle meşgulken karmaşık kodlar arasında resmin tamamını gör(e)meyiz. Aslında pek çok tasarımcı bizim o an yapmaya çalıştığımız şeyi yapmış ve bir ders olarak Internet üzerinde paylaşmış durumdalar. Peki biz neden bunlardan faydalanmayalım?"

Siteyi ziyaret edin

WebHizmetlerini AJAX İle Çağırmak
Bu rehber size JavaScript kullanarak nasıl WebHizmetleri (WebServices) ile çalışabileceğinizi gösterecek.

Siteyi ziyaret edin

JavaScript Pretty Date
"...Eski JavaScript tarihlerini güzel bir şekilde biçimlendirmenize yarayan bir yöntem."

Siteyi ziyaret edin

Ve diğer önemli bağlantılar

Kaynak: DesignShack

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

Forzaken — 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