Posts made in Mart, 2010
31 Mar 2010 tarihinde eklendi. Blog | 0 yorum
Daha temiz ve pürüzsüz bir tasarım için çoğu zaman vektörel tasarımlara başvuruyoruz. Bunda tasarımın hatlarını istediğimiz gibi değiştirebilmemizin ve çözünürlüğünü bozmadan istediğimiz kadar büyütebilmemizin de önemli rolü var tabi. Ve çoğu zaman vektörel tasarımlar oldukça fazla zamanımızı alabiliyor. Öyle olunca da hazır vektörel tasarımlar kullanıp, istediğimiz gibi düzenleyerek sonuca daha çabuk ve kolay ulaşabiliriz. Ancak aradığımız hazır vektörel dosyaları her zaman bulamayabiliriz. Bu noktada işinizi biraz olsun kolaylaştırabileceğini düşündüğüm, vektörel setlerden oluşan ücretsiz bir kaynak yayınlamak istedim.
Adobe Photoshop ve Illustrator‘da kullanabileceğiniz PSD ve AI formatlarında bu hazır vektörel grafik setlerini ücretsiz indirmek için resimleri tıklamanız yeterli.
Devamını Oku
30 Mar 2010 tarihinde eklendi. Blog | 0 yorum
Google Buzz, geçtiğimiz Şubat ayında sosyal medya dünyasına, dolayısıyla da hayatımıza giriş yaptı. Google faktörü olunca da hayatımıza girer girmez yüksek ses getirdi. Hemen akabinde başlayan kişisel hak ihlali ile ilgili tartışmalar döne dursun, Google Buzz kullanıcıları bu durumdan çok da şikayetçi gibi görünmüyorlar. Özellikle benim gibi makale yayınlayan, günlük yazan blog kullanıcıları Google Buzz’ı ilk çıktığı günden beri düzenli olarak kullamaya devam ediyor.
Sevin ya da sevmeyin, bundan sonra bloglarda “Google Buzz’da yayınlayın” ikonları ile sıkça karşılaşacaksınız. Blog yazılarını Buzz’da yayınlatmak isteyen kullanıcıların işini kolaylaştıracak, 24 adetten oluşan Google Buzz ikon seti webdesignerdepot.com tarafından yayınlandı ve ben de sizinle paylaşmak istedim.
İkon resimlerinin altında bulunan Download butonunu tıklayarak ücretsiz indirebilir ve blogunuzdaki sosyal medya ikonlarının yanına istediğiniz Buzz ikonunu ekleyebilirsiniz.
Devamını Oku
29 Mar 2010 tarihinde eklendi. Blog | 30 yorum
Kendinize ait bir e-ticaret siteniz olsun istiyorsunuz ve nereden ve nasıl başlamanız gerektiğini bilmiyorsanız sorun değil! Bu makalede size en çok kullanılan ve ücretsiz indirip sunucunuza kurabileceğiniz, açık kaynak kodlu alışveriş sistemi olan Prestashop‘u tanıtacağım. Prestashop konusunda tecrübe edinmiş web tasarımcıların ve site sahiplerinin de ilgisini çekecek bir şeyler var elbette; Prestashop ile yapılmış e-ticaret sitelerini inceleyerek kendi sitenizi gözden geçirip daha profesyonel bir görünüş için düzenleme yapabilirsiniz. Çünkü bu siteler Prestashop’la yapıldığına inanılmayacak kadar iyi görünüyorlar.
Önce bu işe yeni başlayacaklar için Prestashop’un ne olduğu ile başlamakta fayda görüyorum.
Prestashop nedir?
Prestashop, ücretsiz indirip kullanabileceğiniz ve aynı zamanda açık kaynak kodlu olduğu için istediğiniz gibi düzenleyip geliştirebileceğiniz, PHP tabanlı bir e-ticaret yönetim sistemidir. Bana kalırsa en iyi açık kaynak kodlu e-ticaret sistemi de diyebilirim. Şu ana kadar 50.000‘in üzerinde üyesi, 33.000 civarı da Prestashop kullanan alışveriş sitesi bulunuyor. Ki bu rakamlar açık kaynak kodlu bir sistem için hiç de azımsanacak küçüklükte değil.
Bir çok insanın bu sistemi kullanma sebebi ise aynı: Hızlı ve kolay kurulumu ve modül yapısı ile kolaylıkla düzenlenebilir ve geliştirilebilir olması. Birazcık Php, Html ve CSS bilgisiyle sistemi istediğiniz gibi düzenleyebilir, kendi temanızı oluşturabilirsiniz. Eğer düzenleme konusunda hiç bir teknik bilginiz ve deneyiminiz yoksa hazır temalarıyla ve modülleriyle zaten işinizi rahatlıkla görebilecek bir alışveriş sitesi hazırlayabiliyorsunuz.
Prestashop’un sadece ön planda değil, arka planda da aynı derecede kullanışlı bir yapıya sahip olduğunu rahatlıkla söyleyebilirim. Ürün girişi ve düzenlemesi, sipariş yönetimi, kategori düzenlemesi, modül yönetimi gibi ayarları olan çok kolay ve kullanışlı bir yönetim paneli var.
Şimdi genel olarak hem sitedeki hem de yönetim panelindeki özellikleri sıralayalım.
Arayüz özellikleri
- Anasayfada “yeni ürünler”, “en çok satanlar” gibi özel ürün bölümleri
- Ürün detay sayfaları
- Alışveriş sepeti yönetimi
- Müşteri kaydı ve üyelik hesabı yönetimi
- Sınırsız ödeme yöntemleri (Kredi kartı, taksit seçenekleri, havala-eft vs)
- İletişim formu
- Bilgilendirme sayfaları (Kullanıcı sözleşmesi, site kuralları, hakkımızda vs)
- RSS Özelliği
Yönetim Paneli özellikleri
- Gelişmiş metin editörü
- Sınırsız kategori ve alt kategori ekleme
- Sınırsız para birimi ekleme
- Kullanıcı yönetimi
- Sipariş yönetimi
- Modül yönetimi
- SMS ve mail ile bilgilendirme
- Düzenlenebilir sipariş durumu ve teslimat duyuruları
- Satış raporları
- Farklı dil seçenekleri
- Permalink ve Friendly URL özelliği
- SSL Şifreleme
Sistemi, hem görünüşüyle hem de yönetim paneli ile birlikte test edebileceğiniz demo sayfası da var. Yönetim panelini test edebileceğiniz kullanıcı bilgileri:
Username: demo@prestashop.com
Password: prestashop_demo
Detaylı bir giriş bölümünden sonra artık Prestashop kurulumu ile ilgili rehber bölümüne geçebiliriz. Ama öncelikle Prestashop’u kurmak için hosting kiralamadan önce sunucu ile ilgili sistem gereksinimlerini dikkate almanızda fayda var.
Prestashop İçin Sistem Gereksinimleri
- Linux, Unix or Windows OS
- Apache 1.3 or IIS 6 web server
- PHP 5.0 ya da daha üstü
- MySQL 5 ya da daha üstü
Prestashop Kurulumu
Prestashop kurulumu için sistem gereksinimlerini sağlayan bir sunucu kiraladıktan sonra yapmanız gereken ilk şey Prestashop sistemini ücretsiz olarak indirmek. Prestashop’un son Türkçe sürümünü bu adresten indirebilirsiniz.
Daha sonra da PDF formatındaki ayrıntılı ve Türkçe Prestashop Kurulum rehberini bu linkten indirebilirsiniz. Rehberde anlatılan bütün adımları sırasıyla uyguladıktan sonra Prestashop’u sunucunuza sorunsuz olarak kurmuş olacaksınız. Bundan sonrasında geriye, modül ve tema yüklemek gibi istediğiniz değişiklikleri yaparak yönetim panelinden etkinleştirmek kalıyor.
Modül yüklemek
Prestashop’ta bütün uygulamalar ve bölümler modül sistemi ile çalıştığı için kendi sitenize uygun modüllere ihtiyacınız olacak. Modülleri Prestashop.com, Presta-tr.com gibi sitelerden ücretsiz olarak indirebilirsiniz. Gerekli modüllerin yüklenmesi çok basit bir işlemden oluşuyor. Aşağıdaki işlem sırasını uygulamanız yeterli.
- Bilgisiyarınıza indirdiğiniz modülü klasör halinde sunucunuzdaki /modules klasörüne FTP aracılığıyla kopyalayın.
- Yönetim paneline girin ve “Modüller” sekmesinden modülü bulup “yükle” butonuna basın.
- Bazı modülleri yükledikten sonra “Düzenle” (ya da “Konfigure”) linki belirir. O linki tıklayarak modülle ilgili gerekli düzenlemeleri yapabilirsiniz.
Hepsi bu kadar.
Tema Yüklemek
Prestashop kurduktan sonra sitenizin daha güzel bir görünüme sahip olmasını istiyorsanız internette ücretsiz yayınlanan Prestashop Temaları’ndan faydalanabilirsiniz. Türkçe Prestashop temaları için prestashopturkiye.com ve presta-tr.com sitelerini tavsiye ederim. Tema yüklemek te modül yüklemek kadar basittir. Aşağıdaki işlem sırasını izleyin, yeter.
- Temayı bilgisayarınıza indirin ve klasörü zip dosyasından çıkarın.
- Temayı klasör halinde sunucunuzdaki /themes klasörüne kopyalayın.
- Yönetim panelinde bulunan Ayarlar sayfasından Görünüş sekmesine tıklayın.
- Açılan sayfada yüklediğiniz temaları görebilirsiniz. İstediğiniz temayı seçerek “Kaydet” butonuna basın.
Böylelikle alışveriş siteniz daha güzel bir görünüme sahip olacaktır.
Yine de bence Prestashop’un tek zayıf noktası arayüz tasarımı ve internette gezinen hazır temaların yetersiz tasarımlara sahip olması. Profesyonel görünen tema bulmak da malesef çok zor. Bu noktada daha iyi bir arayüz tasarımı için Php ve Html bilgisi olan birilerinden yardım alabilirsiniz. Zira bazı Prestashop kullanıcılarının sitelerini ne kadar profesyonel düzenlediğini gördükçe kendi siteniz için de aynı düzenlemeyi yapmak isteyebilirsiniz. Böylece daha fazla müşteri kazanma ve daha çok satış yapmak için doğru bir adım atmış olursunuz.
Aşağıda Prestashop kullanan profesyonel görünümlü e-ticaret sitelerini görebilirsiniz.
Prestashop kullanan güzel alışveriş siteleri
Hepsi yabancı dilde olsa da Prestashop’un klasik görünümünden ne kadar farklı ve profesyonel düzenlenebileceğine dair en doğru örnekler olduğunu düşünüyorum.
Siz de alışveriş sitenizde Prestashop kullandıysanız, site adresinizi bu makaleye yorum yazarak ekleyebilir, sitenizin tanıtımını yapabilirsiniz.
Devamını Oku
29 Mar 2010 tarihinde eklendi. Blog | 0 yorum
Geçtiğimiz hafta işlerim dolayısıyla o kadar yoğun bir hafta geçirdim ki anlatamam. Aklımda yazmak istediğim çok faydalı makale konuları vardı. Ama yoğunluktan dolayı yalnızca aşağıdaki makaleleri hazırlayabildim. Ancak yine de Google Webmasters ile ilgili olan makalenin bir çok web tasarımcıya ve site sahibine faydalı olduğunu düşünüyorum. En azından geçtiğimiz hafta da işe yarar bir şeyler yapabilmişiz : )
Bakalım OZD Tasarım’ın 6. haftasında neler yayınlamışız?
20+ Çılgın İkon Setleri
Ajax Teknikleri ve Dersleri
Google Webmaster ile kırık linkleri tespit edin ve silin
Web Tasarım Kaynakları #5
30 Futurist Yazı Tipi
Devamını Oku
26 Mar 2010 tarihinde eklendi. Blog | 0 yorum
Bu futuristik – teknolojik yazı tiplerini her projenizde kullanamayacağınız kesin ama mutlaka bir konsept ya da kurumsal bir tasarım çalışmasında (teknoloji sitesi, elektronik ürün tanıtım sitesi vs) ihtiyaç duyabileceğiniz tarzda çok kaliteli
30 adet futurist yazı tipi ücretsiz indirilmeyi bekliyor. Sadece web tasarımı değil tabi özellikle logo ve afiş tasarımı konusunda da ilham verici yazı tipleri bulunuyor bu kaynakta. Bu nedenle sadece web tasarımcıların değil bütün grafik tasarımcıların da arşivine eklemesi gerektiğini düşünüyorum. Bu nedenle
aext.net‘in ücretsiz olarak paylaşıma sunduğu bu yazı tipi kaynağını ben de sizinle paylaşmak istedim. İşinize yaraması dileğiyle..
This post was published by Peter Olexa in Mar 25, 10 and it has 13 Comments
It’s clear that futuristic fonts are not suitable for every creative project you are working on. They should be used in designs that are intended to be ultra-modern or forward thinking.
To help you with the right choice, I put together a list of 30 free futuristic fonts which belong to my favorite nowadays. Enjoy!
Devamını Oku
23 Mar 2010 tarihinde eklendi. Blog | 9 yorum
Web sitelerimizde çok sık olmasa da kırık linklerle karşılaştığımız durumlar olabiliyor. Küçük bir harf hatasından dolayı yanlış yazdığımız bir link ya da başka sebeplerden dolayı oluşan kırık linkler sayfa karşılığı olmadığından 404 hatasına yol açarlar. Bir de üstüne web siteniz yüzlerce sayfadan oluşuyorsa bütün linkleri tek tek tespit etmek zor ve can sıkıcı bir durum hal alabilir. Özellikle de bu linkler Google tarafından indexlendiyse…
Eğer siteniz WordPress gibi bir içerik yönetim sistemi ise Broken Links Checker gibi hazır eklentiler kurup, kırık linkleri tespit ederek düzeltebilir ya da tamamen silebilirsiniz. Peki WordPress kullanmayanlar için kırık linkleri tespit etmenin daha kolay bir yolu var mı derseniz, elbette var. Hem de hiç yabancı olmadığımız bir isim olan Google Webmaster (Google Web Yöneticisi Araçları) bu işi başarıyla yapabiliyor.
Web tasarımcı ya da site yöneticisi olup da Google Webmaster hizmetini kullanmayan yoktur herhalde. Yine de bir çoğumuz bu hizmeti sadece site haritası göndermek için kullanıyoruz. Peki ya kırık linkleri tespit edip silmek için de oldukça kullanışlı ve pratik bir özelliği olduğunu biliyor muydunuz?
Google Webmaster’ın bu özelliğine geçmeden önce kırık linklerin hangi sebeplerle oluşabileceğine bir göz atalım:
1. Farkına varmadan harf hatası yapılan ya da tamamıyla yanlış yazılan linkler
2. Google’a indexlendikten sonra başlığı değiştirilen bir sayfanın permalink’inin de değişmesi ile oluşan bozuk linkler
İşte böyle durumlarda Google Webmaster yardımımıza koşuyor. Peki bu işi nasıl yapıyor, daha fazla uzatmadan hemen konuya geçelim.
Google Webmaster ile kırık linkleri tespit etmek
Sitenizdeki kırık linkleri tespit etmek için yapmanız gereken tek şey Google Webmaster hesabınızla giriş yapıp, sitenizi seçtikten sonra aşağıdaki işlemleri sırasıyla gerçekleşirmek.
1. Soldaki menüden Tanılamalar (Diagnostics) menüsündeki Tarama Hataları (Crawl Errors) linkini tıklayın.
2. Açılan sayfada Bulunamadı (Not Found) sekmesini tıklayarak sitenizdeki kırık linklerin listesini görebilirsiniz.
3. Tespit edilen kırık linklerin Google’da indexlendiğini kontrol edin. Google’a kırık linki kopyala yapıştır yaparak arayabilirsiniz.
Tespit edilen kırık linkleri Google’dan silmek
Hatalı linklerinizin Google’da indexlenmesi hiç profesyonelce değildir. Bu nedenle, tespit ettiğiniz kırık linklerin Google’dan silinmesini de gerçekleştirmeniz gerekiyor. Bunun için de yapılacak işlem oldukça basit:
1. Site Yapılandırma (Site Configuration) menüsünde bulunan Tarayıcı Erişimi (Crawler Access)’ni tıklayın.
2. Açılan sayfada URL’yi Kaldır (Remove URL) sekmesini tıklayın.
3. Yeni Kaldırma İsteği (New Removal Request) butonunu tıklayın. Ve açılan sayfada sileceğiniz linklere göre seçeneklerden birini seçin. Genelde ilk sıradaki Tek Tek URL’ler (Individual URLs) seçeneği işimizi görüyor.
4. İleri butonuna bastıktan sonra açılan sayfadaki link satırına kırık linki yazıp Ekle butonunu tıklayın.
5. Bütün kırık linkleri tek tek bu şekilde ekledikten sonra Kaldırma İsteğini Gönder (Submit Removal Request) butonunu tıklayın.
Hepsi bu kadar!
Kaldırma isteği gönderdiğiniz linklerin takibini yine Site Yapılandırma menüsündeki Tarayıcı Erişimi sayfasından yapabilirsiniz.
Devamını Oku
23 Mar 2010 tarihinde eklendi. Blog | 1 yorum
Hem kullanışlı olması hem de ihtiyacı karşılaması bakımından, şu sıralar web sitelerinde Ajax uygulamaları kullanmak moda oldu. Sürükle-bırak alışveriş sepetleri, otomatik tamamlayan arama motorları, puan verme sistemleri gibi eğlenceli uygulamalar web sitelerimiz için gerçekten çok çekici olabiliyor. Ben de bunun üzerine, javascript, php ve ajax’la arası iyi olan daha profesyonel tasarımcılar için bir makale yayınlama gereği duydum.
Ama öncelikle bilmeyenler için Ajax’ın ne olduğuna kısaca değinmekte fayda görüyorum.
Ajax Nedir?
Hemen belirteyim bir çok kişinin yeni yeni tanışıp kullanmaya başladığı Ajax bir program dili ya da teknolojisi değildir. İsim olarak Asynchronus Javascript and XML‘in kısaltması olan Ajax, adından da anlaşılabildiği üzere Javascript ve XML’in bir arada kullanıldığı bir yöntemdir. Ajax yönteminde Javascript ve XML bir arada kullanılırlar ve farklı zamanlarda çalışabilirler.
Ne olduğundan kısaca bahsettikten sonra Ajax derslerine geçebiliriz artık.
Ağırlıklı olarak Jquery ve Php kullanılarak hazırlanan bu Ajax uygulamalarını önizleme linkleri ile test edebilir, resimlerin üzerine tıklayarak derslere ulaşabilirsiniz.
Alışveriş sepetine sürükle bırak tekniği
Bu derste, Php, CSS ve Jquery kullanılarak veritabanından çağırılan bütün ürünleri sürükle bırak yönetimiyle alışveriş sepetine ekleme tekniği anlatılıyor.
Önizleme>>
Linkleri Bit.ly şeklinde kısaltma
Bu Ajax tabanlı teknikle, Twitter’ın link kısaltma servisi Bit.ly ve Jquery kullanarak kendi sayfanıza ekleyebileceğiniz bir URL kısaltma uygulaması geliştirebilirsiniz.
Önizleme>>
Ajax tabanlı Twitter listesi
Bildiğiniz üzere Twitter‘ın kategorilere göre düzenleyebileceğiniz “liste oluşturma” özelliği bulunmakta. Bu dersteki API ile Twitter’daki gibi bir widget nasıl oluşturulur öğrenebilirsiniz.
Önizleme>>
Jquery – Ajax ile Silme işlemi
Web tasarımcılar için çok kullanışlı bir uygulama olan bu teknik sayesinde, bir içeriği hem sayfadan -ajax sayesinde- hem de veritabanından silebiliyorsunuz. Demo’daki X işaretlerine tıklayarak silme işleminin nasıl gerçekleştiğini görebilirsiniz.
Önizleme>>
Puan verme sistemi
Jquery, Ajax ve Php ile bir içeriğe puan verilebilen oylama sistemi hazırlayabilirsiniz. Web siteniz için özgün bir uygulama olabilir.
Önizleme>>
Dosya yükleme sistemi
Jquery-Ajax kullanarak oluşturabileceğiniz dosya yükleme sistemi ile sayfa yenilemeden çoklu dosya yükleyebilirsiniz.
Önizleme>>
Facebook tarzı arama motoru
Bu derste Jquery, Php ve Ajax kullanarak Facebook tarzı otomatik tamamlama yapan bir arama motoru hazırlayabilirsiniz.
Önizleme>>
Vista tarzı Ajax takvim
Otomatik ya da isteğe göre değişen stilleri ile Vista görünümlü çok şık bir takvim hazırlama dersi. Javascript efektleri, takvime ekstra güzellik katmış.
Önizleme>>
Ajax Captcha Güvenlik Scripti
Sitenizdeki formlara güvenlik scripti olarak ekleyebileceğiniz çok farklı bir captcha scripti. Scriptte güvenlik gereği, sizden istediği objeyi dairenin içine sürüklemeniz gerekiyor. Görünümü bakımından da çok çekici bir captcha sistemi.
Önizleme>>
Ajax ile çoklu dosya yükleme sistemi
Jquery kullanılan bu Ajax uygulamasında çoklu dosya yükleme sisteminin nasıl hazırlanacağı anlatılıyor.
Önizleme>>
Devamını Oku
22 Mar 2010 tarihinde eklendi. Blog | 2 yorum
Haftanın ilk makalesi biraz sıradışı oldu ama eğlenceli ikonlar olduğu kesin : ) Sizi bilmem ama ben bu tarz ikonları çok beğeniyorum. Keşke bir de bunları tasarımlarımda kullanabileceğim bir web sitesi ya da başka bir projede yer alsaydım. Ben olmasam da belki aranızda bu çılgın ikon setlerini tasarımlarında kullanmak isteyecek arkadaşlar olacaktır. 20+ çılgın ikon seti iconshock tarafından ücretsiz olarak paylaşıma sunuldu. Ben de sizinle paylaşayım dedim.
Kimbilir belki ben de bir gün bu ikonları kullanma ihtiyacı duyarım. Siz de şimdilik kullanmayacak olsanız dahi, bence arşivinize katmaya değer son derece sıradışı ve kaliteli ikon setlerini yeri gelmişken kaçırmayın derim.
Devamını Oku
22 Mar 2010 tarihinde eklendi. Blog | 0 yorum
Bu blogu açmaya karar verdiğimde sizlerle beraber benim de web tasarımı ile ilgili çok şey öğreneceğime emindim. Zaten asıl nedenleri bir yana, aynı zamanda bu amaçla da açtığımı söylesem yalan olmaz. Ancak bu kısa sürede bu kadar çok şey öğreneceğimi kestirmem imkansızdı. 5. haftayı geride bıraktık ve bu hafta öğrendiklerimle kendimi kendimden bir adım önde görüyorum :) umarım siz de benimle birlikte web tasarımıyla ilgili faydalı bilgiler öğrenip kendinizi geliştirebilme imkanı buluyorsunuzdur.
Bu hafta neler yaptığımıza şöyle bir bakıyorum da ücretsiz kaynaklardan daha çok makale yazabilmiş olmama sevindim.
Bakalım 5.hafta neler okumuşuz…
Jquery İle PHP İletişim Formu
35+ Sosyal Medya İkon Setleri
Müşterilerin web tasarımcıda aradığı 5 özellik
Web Tasarım Kaynakları #4
Htaccess dosyası ile 5 önemli ayar
Html kodlamasında işinize yarayacak ipuçları
Smush.it ile resim dosyalarınız daha az yer kaplıyor
Devamını Oku
