Posts made in Mayıs, 2010
Haftalık OZD #15
15. haftayı geride bırakırken şöyle bir düşünüyorum da, o yoğunluğun içinde 3 makaleyi bile yayınlayabildiğime şaşıyorum açıkçası:) 1 eksik 1 fazla devam ediyoruz sonuçta. Peki neler yayınladık? Her tasarımcının ihtiyacı olan ücretsiz font indirilebilen 10 site ile haftaya başlamıştık. Sonrasında ise CSS 3‘ün bizi kendisine hayran bırakan sıradışı yeteneklerini tanıttım size. Çok değil en fazla 4-5 yıl sonra Internet Explorer 6, 7 ve 8 tarihe karıştıktan sonra, CSS 3′ü destekleyen IE 9.0 versiyonu ile birlikte artık bütün sitelerde gradient ve yansıma gibi görsel düzenlemeleri sadece CSS 3 ile yapabileceğimizi gördük. Dün ise Medialoot‘un tasarımcılar için özel olarak tasarlayıp ücretsiz olarak yayınladığı portfolyo ikon setini sizinle paylaştım. 16.haftada görüşmek üzere.
Ücretsiz font indirebileceğiniz 10 site
CSS 3′ün 5 temel yeteneği
Tasarımcılar için portfolyo ikon seti
Tasarımcılar için portfolyo ikon seti
Geçtiğimiz günlerde Medialoot Designer’s Portfolio adı ile tasarımcılara özel ikon setini ücretsiz olarak yayınladı. Sette yüksek kalitede tasarlanmış 256×256 px ölçülerinde 12 adet ikon bulunuyor. İkon setini .zip dosyası şeklinde indirdiğinizde, dosyanın içinde, ikonların PNG formatları ile birlikte PSD dosyalarını da göreceksiniz. Böylece, ikonların renk ve şekillerini kendinize göre düzenleyebilirsiniz.
Kendi tasarımlarınızı yayınladığınız bir portfolyo siteniz varsa ya da yakında olacaksa, bu ikon setleri web sitenizi çok daha şık ve kaliteli gösterecektir. Aşağıdaki linklerden, ikonların yüksek çözünürlükte örneklerini görebilir ve seti PSD dosyaları ile birlikte 4.4. MB’lık .zip formatında ücretsiz olarak indirebilirsiniz.
Yüksek çözünürlükte önizleme>>
Ücretsiz olarak indir>>
Devamını OkuCSS 3′ün 5 temel yeteneği
CSS 3.0 yayınlandığından beri, bir yandan onunla neler yapılabildiğini hayretler içinde izliyorum, bir yandan da öğrenmeye çalışıyorum. Border-radius, box-shadow ve text-shadow özelliklerini zaten artık her projemde kullanıyorum. Ancak bunlardan başka, bütün tarayıcılar tarafından desteklenmediği için henüz kullanmaya alışmadığımız (veya tercih etmediğimiz) sıradışı yetenekleri var. Sıradışı diyorum çünkü bir gün sadece CSS ile nesnelere yansıma verebileceğimiz aklıma bile gelmezdi. Artık yavaş yavaş CSS 3′ün 5 yeni özelliğine alışıp, CSS deneyimimizi bir kaç adım daha öteye taşımak iyi olacaktır. Çünkü yakın gelecekte, bu temel özellikleri sık sık kullanmak durumunda kalacağımıza eminim.
1) Gradient
CSS 3.0′ın bize sunduğu en güzel nimetlerden biri olan Gradient özelliğinin Linear Gradient ve Radial Gradient olmak üzere 2 farklı kullanımı var. Ve bu özellikleri DIV, SPAN, P gibi bütün HTML elementlerinde kullanabiliyorsunuz. Bu özellik sayesinde, hiç resim dosyası kullanmadan gradientli butonlar ve arkaplan görüntüleri yapmak artık mümkün oluyor. Böylece web sitelerinin yüklenme hızları da katbekat artıyor.
Şimdilik destekleyen tarayıcılar: Firefox 3.5+ , Chrome 2+, Safari 4+
Linear Gradient
Firefox için kullanım şekli:
|
1 2 3 |
background-image: -moz-linear-gradient(top, #F00, #F60)
<img class="size-full wp-image-3522 alignnone" title="css-3-linear-gradient" src="http://www.ozdtasarim.com/wp-content/uploads/2010/05/css-3-linear-gradient.jpg" alt="" width="200" height="150" /> |
Webkit tarayıcıları için kullanım şekli:
|
1 |
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #F60),color-stop(1, #F00)) |
Radial Gradient
Firefox için kullanım şekli:
|
1 |
background-image: -moz-linear-gradient(top, #F00, #F60) |
Webkit tarayıcıları için kullanım şekli:
|
1 2 3 4 5 |
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #F60),color-stop(1, #F00))
<img class="size-full wp-image-3525 alignnone" title="css-3-radial-gradient" src="http://www.ozdtasarim.com/wp-content/uploads/2010/05/css-3-radial-gradient.jpg" alt="" width="200" height="150" />
<strong>Örnekler:</strong> <a href="http://css-tricks.com/examples/CSS3Gradient/">http://css-tricks.com/examples/CSS3Gradient/</a> |
2) Açılı Döndürme
CSS 3′ün transform özelliği ile birlikte gelen yeteneklerinden biri de, bütün html elementlerini verilen bir açı değerine göre döndürmesi.
Destekleyen tarayıcılar: Firefox 3.5+ , Chrome 2+, Safari 4+
Kullanım Şekli:
|
1 2 3 4 |
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
<img class="alignnone size-full wp-image-3526" title="css-3-transform" src="http://www.ozdtasarim.com/wp-content/uploads/2010/05/css-3-transform.jpg" alt="" width="234" height="197" /> |
Örnekler: http://css3.bradshawenterprises.com/
3) Yansıma
Favorilerimden biri kesinlikle bu özellik. Yazılara ve DIV’lere yansıma özelliği vererek harikalar yaratabiliyorsunuz. Şimdilik sadece Chrome ve Safari tarafından destekleniyor. Umarım yakında Firefox tarafından da desteklenir.
Kullanım Şekli:
|
1 2 3 |
-webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(100, 100, 100, 0.4)));
<a href="http://www.ozdtasarim.com/wp-content/uploads/2010/05/css-3-reflection.jpg"><img class="alignnone size-full wp-image-3527" title="css-3-reflection" src="http://www.ozdtasarim.com/wp-content/uploads/2010/05/css-3-reflection.jpg" alt="" width="232" height="188" /></a> |
Örnek: http://jcargoo.110mb.com/cssreflection/
4) Yeniden Boyutlandırma
CSS 3′ün resize özelliği ile DIV’leri mouse ile tutup sürükleyerek yatay ve dikeyde boyutlandırabiliyoruz. Yani bir kutunun büyüklüğünü gerçek zamanlı olarak istediğimiz kadar değiştirebiliyoruz. Aşağıdaki örnekten ne demek istediğimi daha iyi anlayacaksınız. Bu özelliği de şimdilik sadece Chrome ve Safari destekliyor.
Kullanım Şekli:
|
1 2 3 4 |
overflow: hidden;
resize: both;
<img class="alignnone size-full wp-image-3528" title="css-3-resize" src="http://www.ozdtasarim.com/wp-content/uploads/2010/05/css-3-resize.jpg" alt="" width="223" height="136" /> |
Örnekler: http://www.css3.info/preview/resize/
5) Kenar Çizgi Aralığı
CSS 3′ün outline-offset özelliği ile sahip olduğu bu yetenek de kutulara verdiğimiz çerçeve çizgisine aralık vermeye yarıyor. Yani kutunun kenar çizgisini belirlediğimiz bir değer kadar kenarlardan uzaklaştırabiliyoruz. Chrome veya Safari ile aşağıdaki örnekte ne demek istediğimi görebilirsiniz.
Kullanım Şekli:
|
1 2 3 4 5 6 |
outline: solid 1px #f00;
outline-offset: 5px;
<img class="alignnone size-full wp-image-3530" title="css-3-outline-offset" src="http://www.ozdtasarim.com/wp-content/uploads/2010/05/css-3-outline-offset.jpg" alt="" width="225" height="167" />
<strong>
</strong> |
Örnek: http://www.css3.info/preview/outline/
Devamını OkuÜcretsiz font indirebileceğiniz 10 site
Tipografinin tasarımda vazgeçilmez olması ile yazı tipi seçimi her tasarımcı için çok büyük önem kazandı. Çünkü bir metindeki yazı tipi, farkında olarak ya da olmayarak metnin verdiği mesajın etkisini bile değiştirebiliyor. Bu nedenle de biz tasarımcılar için fontlar günlük yaşantımızın birer parçası olmaya başladı. Her ne kadar Helvetica fontu ile her zaman müşteriyi memnun bırakan sonuçların ortaya çıktığına inansam da, bu her işimizde aynı fontu kullanacağımız anlamına gelmiyor. Bir çoğumuz gibi fontlara ücret de ödemek istemediğimizden ücretsiz font indirebileceğimiz sitelerin listesini bir kenara not almaktan başka çaremiz yok. Bu nedenle ücretsiz font indirebileceğimiz en iyi 10 font sitesini bir araya getirerek yayınlamak istedim. Daha önce de Yeni başlayanlar web tasarımcılar için online araçlar başlıklı makalede kendisinden bahsettiğim üzere, başı Dafont.com çekiyor. Ama bazen Dafont’ta da bulamadığımız fontlar olabiliyor. Bakalım başka hangi sitelerden ücretsiz font indirebiliyoruz?
Dafont.com
Fontcubes.com
Urbanfonts.com
Abstractfonts.com
FFonts.net
Fontstock.net
Fontspace.com
Searchfreefonts.com
Highfonts.com
1001fonts.com
Haftalık OZD #14
OZD Tasarım olarak 14. haftayı da geride bıraktık. İnternet ve web tasarım dünyasında son derece sevindirici gelişmelerin olduğu bir haftaydı şahsen. Biz web tasarımcılar için bu gelişmelerden en önemlisi, Google’ın font-face hizmetini duyurarak işimizi çok kolaylaştıran bir uygulamaya imza atması oldu bence. Google font-face ile ilgili makalemin yanı sıra, ücretsiz hazır alışveriş sitesi arayanlar için Magento‘nun tanıtımı ve ücretsiz Magento temalarını, yeni başlayanlardan profesyonellere kadar her html kodlayıcısının işine yarayacak olan CSS ve HTML 5 özellik şemalarını ve son olarak da OZD Tasarım’da klasik haline gelen web tasarım kaynaklarının 10.sunu bulabileceğiniz makalelerle haftayı kapattık. 15. haftada görüşmek üzere…
CSS ve HTML 5 Özellik Şemaları
Magento Tanıtımı ve Ücretsiz Magento Temaları
Google’dan font-face hizmeti: Google Font API
Web Tasarım Kaynakları #10
Web Tasarım Kaynakları #10
2 haftadır Web Tasarım Kaynaklarına devam edince, hafta bitmeden hemen hazırlayıp yayınlamak istedim : ) Yine ücretsiz yazı tipi, photoshop fırçaları ve photoshop action setleri, PSD formatında website şablonları ve buton setleri, sosyal medya ikonları gibi web tasarım aşamasında ihtiyaç duyacağımız türden, oldukça kullanışlı ve güzel kaynakları bir araya getirdim. Beğeneceğinizi ve işinize yarayacağını umuyorum. Bakalım 10. web tasarım kaynaklarında neler var?
Patriot Anthem Font
Candy Inc. Font
Night Stalker Font
Robotic Sosyal Medya İkon Seti
Social Networking İkon Seti
Paper Planet İkon Seti
Design Solutions Website Template (PSD Dosyası)
Pro Blog Design Website Template (PSD Dosyası)
XXMortaniXX Photoshop Fırça Seti
Vector Linedots Photoshop Fırça Seti
Black & White With Lights – Photoshop Action Paketi
WSBlogz Buton Seti (PSD Dosyası)
Thesis Theme - PSD Buton Seti
Google’dan font-face hizmeti: Google Font API
Google yine yaptı yapacağını ve web tasarım dünyasında son zamanlarda çok moda olan font-face kullanımına özel hizmetini, Google Font API adı ile hayata geçirdi. Şahsen beni oldukça sevindirdi bu gelişme. Benim kadar bir çok web tasarımcının da hoşuna gideceğine eminim. Bu hizmet sadece font-face‘den mi oluşuyor diye merak edenlere cevabım “evet, sadece font-face özelliği ile sitenize sistem fontlarının haricinde çok daha güzel fontlar yüklemenizi sağlıyor” olacaktır.
Kullanımı da çok basit
Bu hizmetin yanında gelen Google Font Directory‘den bir yazı tipi seçtiğinizde, Google size bir CSS linki veriyor. Bu linki sitenizin html yapısına ekleyip, fontun adını da nerede kullanmak istiyorsanız o bölümün CSS’ine ekleyerek kullanabiliyorsunuz.
Google’ın linkini verdiği CSS dosyasında bulunan kodlar sadece aşağıdaki satırlardan ibaret.
|
1 2 3 4 5 6 |
@font-face {
font-family: 'Fontun Adı';
font-style: normal;
font-weight: normal;
src: local('Fontun Adı'), url('http://themes.googleusercontent.com/font?kit=X-CahsKZZcJfSyZ_tX4ptg') format('truetype');
} |
Aşağıdaki gibi fontu kullanmak istediğiniz bölümün font-family özelliğine fontun adını yazmanız yeterli. h1 ve h2′yi örnek olarak yazdım.
|
1 2 3 |
h1, h2{
font-family: 'Fontun Adı', serif;
} |
Peki “ben zaten CSS dosyama @font-face’i ekliyorum ve sitede sorunsuz görünüyor. Google’dakinin farkı ne?” diye soracak olursanız ona da cevabım hazır : ) Bu soruya cevap olarak, Google Font API’yi kullanmanın avantajlarını sıralayabiliriz.
Google Font API’nin Avantajları
+ Bant Genişliği: Google, font dosyalarını kendi bünyesinde bulundurarak, her defasında yüklenen fontların kendi sunucumuzun bant genişliğini artırmasını önlemiş oluyor.
+ Yükleme Hızı: Bildiğiniz üzere @font-face’le eklenen fontların tarayıcıda yüklenmesi zaman alıyor. Google sunucuları bu noktada hızlarını konuşturarak, fontların normalden daha hızlı yüklenmesini sağlamış oluyorlar.
+ Önbellek Sorunu: Aynı font dosyası birden fazla sitede kullanıldığında tarayıcıda önbellek (cache) problemi görülebiliyor. Google hizmetinde bunun kesinlikle olmadığı iddia ediliyor.
Ajax Libraries adı ile Jquery, Mootools gibi Javascript kütüphanelerini de kendi bünyesinde bulundurarak aynı tarz bir hizmet sunan Google, yazılımcılardan sonra bu defa da biz tasarımcıların yüzünü güldürmeyi planlıyor anlaşılan. Eğer bu hizmeti uygulamalı olarak test etmek isterseniz bu örneğe göz atabilirsiniz.
Ayrıca font directory’deki fontların tarayıcıda nasıl göründüklerine preview sayfasından bakabilirsiniz. Türkçe karakterleri destekleyen fontların Google’dan kullanılabilmesi için nasıl bir gelişme olacak, ilerleyen zamanlarda hep birlikte göreceğiz.
Devamını OkuMagento Tanıtımı ve Ücretsiz Magento Temaları
Aynen osCommerce ve Prestashop gibi ücretsiz hazır e-ticaret sistemi olan Magento, kullanıcıları tarafından her zaman en iyi hazır alışveriş sistemi kabul ediliyor. Prestashop‘u ne zaman savunmaya kalksam karşıma mutlaka birileri Magento’yu çıkarıyor çünkü. “Israr ettiklerine göre vardır bir bildikleri” diyerek, kullanıcılarını sevindirecek bir arşiv yayınlıyor olduğumu baştan söyleyeyim.
Şu bir gerçek ki, internette ücretsiz olarak bulunabilen Magento temaları, Prestashop’un estetikten yoksun, zayıf temalarından kat kat güzel ve profesyonel görünüyor. Magento’nun çekici gelmesinin en önemli yanlarından biri de bu sanırım. Eğer siz de Magento ile yapılmış bir alışveriş sitesine sahipseniz ya da bir Magento geliştiricisiyseniz, aşağıdaki 16 adet temayı ücretsiz olarak indirmemeniz için bir neden görmüyorum : ) Her biri birbirinden estetik ve profesyonel görünüyor.
Temaları sıralamadan önce, çok zaman ve para kaybına maruz kalmadan alışveriş sitesi açmak isteyenlerin ilgisini çekeceğine emin olduğum Magento’yu tanıtmakta fayda görüyorum.
Magento nedir?
Yazının başında da söylediğim gibi Magento, açık kaynak kodlu hazır e-ticaret yazılımı. Çok fazla geçmişi olmamakla birlikte (yaklaşık 2 senedir kullanılıyor), internette ürün satışı yapmak isteyenler için oldukça ideal ve kullanışlı bir sanal mağaza sistemi. Hatta tanınır tanınmaz da “En İyi Yeni Proje” ödülüne layık görüldü. Açık kaynak kodlu oluşundan dolayı Magento geliştiricileri tarafından sürekli olarak optimizasyon ve hata ayıklama sürecinden geçerek, daha kararlı versiyonları yayınlanıyor. Ücretsiz olması sizi yanıltmasın, Magento o kadar profesyonel bir e-ticaret betiği ki kurumlara özel ücretli versiyonu da var. Bu kadar profesyonel olması ile birlikte kurulumu, düzenlenmesi ve geliştirilmesi de rakiplerine nazaran çok daha zor tabiki. Ama bir kez alıştığınızda başka bir yazılıma ihtiyaç duymayacağınız söyleniyor, sadık kullanıcıları tarafından. Çok fazla teknik detaya girmeden genel özelliklerini sıralayalım:
Genel Özellikleri
- Site yönetimi,
- Mobil ticâret,
- Pazarlama promosyonları ve araçları,
- Uluslararası destek,
- Arama motoru optimizasyonu (seo),
- Ödeme,
- Nakliye,
- Ücret,
- Sipariş yönetimi,
- Müşteri servisi,
- Müşteri hesapları,
- Katalog yönetimi,
- Katalog tarama,
- Ürün tarama,
- Analiz ve raporlama,
- Müşteri yorumları,
- Çapraz satış,
- Müşteri etiketleri,
- Ürünleri karşılaştırma,
- Talep listeleri,
- Google Base entegresi,
- Google Website Optimizer entegresi
Yani gördüğünüz üzere, neredeyse bir alışveriş sitesinden beklediğiniz her şeyi ücretsiz olarak sunuyor Magento.
Eğer Magento kullanmaya karar verirseniz; aşağıda sıraladığım linkleri mutlaka bir kenara not alın. Çünkü Magento’nun kurulumu, kullanımı, düzenlemesi ve bütün ayarları için her türlü desteği bu linklerden bulabilirsiniz.
Magento demo önizleme (İndirmeden önce göz atmak isterseniz)
Magento admin paneli önizleme (Yönetici panelini test edebilirsiniz)
Magento kurulumu (Resimli Anlatım)
Magento Resmi Forumu (Her türlü Türkçe destek için)
Ücretsiz Magento Temaları
Magento kurulumunu gerçekleştirdiyseniz ya da zaten hali hazırda bir magento sisteminiz varsa aşağıdaki temaları ücretsiz olarak indirip kullanmaya başlayabilirsiniz.
CSS ve HTML 5 Özellik Şemaları
CSS’in zamanımın büyük bölümünü kapladığı şu dönemde, CSS ile ilgili daha fazla makale yayınlamak benim için “eve iş taşımak” gibi bir durum oluyor:) Ama her CSS&Html kodlayıcısının işine kesinlikle yarayacak olan bu özellik şemalarını (cheat sheet) paylaşmamak olmazdı. CSS 2.1 ve CSS 3.0‘ın en önemli özelliklerini ve alabilecekleri değerleri ve anahtar kelimeleri gösteren bu şemalar GoSquared tarafından hazırlandı ve Smashing Magazine tarafından geçtiğimiz günlerde yayınlandı. CSS kodlaması yaparken o an için aklınıza gelmeyen özellik ya da değerler olduğunda bu özellik şemalarının elinizin altında olmasını isteyebilirsiniz.
CSS 2.1 şemasında Font, Text, Margin, Padding, Border, Position, Background, List ve Media özellikleri ile aldığı değerler gösteriliyor. CSS 3′te ise tanıştığımız günden bu yana neredeyse her projemizde kullanmak istediğimiz yuvarlak köşe ve gölge özelliklerinin yanında Multiple Column, RGBa, Font Face, Box Resize, Outline ve Gradient özelliklerini aldığı değerlerle birlikte görebiliyorsunuz. Tabi ki CSS’in bütün özellikleri bu şemada bulunanlarla sınırlı değil. Ama bu şemaların asıl amacının, en çok kullanılan özellikleri bir araya getirerek web tasarımcılara kullanım kolaylığı sağlamak olduğunu düşünüyorum.
Her iki şemayı da aşağıdaki linklerden isterseniz resim dosyası şeklinde görüntüleyebilir isterseniz PDF formatında bilgisayarınıza indirebilirsiniz.
CSS 2.1 Özellik Şeması: Görüntüle
CSS 2.1 Özellik Şeması: İndir (PDF, 0.2 MB)
CSS 3.0 Özellik Şeması: Görüntüle
CSS 3.0 Özellik Şeması: İndir (PDF, 0.2 MB)
Html 5
CSS ile ilgilenip de Html 5′ten haberi olmayan bir web tasarımcı olduğunu hiç sanmıyorum. Henüz bütün tarayıcılar tarafından bütün özellikleri ile birlikte desteklenmese de, meraklıları olarak Safari, Chrome gibi yeni nesil tarayıcılarla Html 5 örneklerini incelemeye çoktan başladık bile. CSS 3 ve Html 5‘in birlikte kullanımıyla ortaya ne derece müthiş çalışmaların çıktığına hepimiz şahit oluyoruz. Eğer siz de Html 5 yazmaya başladıysanız ya da bir an önce başlamak istiyorsanız, Veign.com tarafından hazırlanan Html 5 özellik şeması sizin için rehber niteliğinde bir kaynak olacaktır.
Aynı şekilde bu şemayı da aşağıdaki linklerden resim dosyası şeklinde görüntüleyebilir ya da PDF formatında indirebilirsiniz.
Html 5 özellik şeması: Görüntüle (.gif, 1017×836px)
Html 5 özellik şeması: İndir (76 Kb)
Devamını OkuHaftalık OZD #13
OZD Tasarım’ın 13. haftasını da geride bıraktık. Geçtiğimiz haftanın ilk makalesi olarak “Yeni Tipografi Hareketi” başlığı altında Emre Becer’in Modern Sanat ve Yeni Tipografi kitabını tanıtmaya çalıştım. Tipografi sanatının görsel sanatlarda günümüzde nasıl kullanılmaya başlandığını en güzel örneklerini usta bir kalemden okuyarak kendinizi tipografi konusunda geliştirmek istiyorsanız bu kitabı kesinlikle tavsiye ediyorum. Hemen sonrasında internet ve tasarımla ilgili blog yazarları için oldukça kullanışlı, yepyeni bir WordPress teması olan Design Panel‘i tanıtarak ücretsiz olarak paylaşıma sunulduğunun haberini verdim. CSS ve Html kodlayıcıları için online grid sistemleri, blog tasarımcıları için de paylaştığım 5 ikon seti ile haftayı kapattık. Takipte kalmaya devam edin. Görüşmek üzere…
Yeni Tipografi Hareketi
Ücretsiz Design Panel WordPress Teması
Online CSS Grid Sistemleri
Bloglarınız için 5 ikon seti
Sponsorlar
