bildirgec.org - oguzguc - beğendikleri

Web Sitenizi Yayımlamadan Önce Yapmanız Gereken 15 Önemli Kontrol

oguzguc — Fri, 10 Apr 2009 06:45:00 GMT

Web sitenizin tasarımı hazır, içerik yönetim sistemi muhteşem çalışıyor, içerik siteye eklendi ve müşteriniz son derece memnun. Artık sitenizi yayımlamanın vakti geldi. Yoksa gelmedi mi? Bir web sitesini yayımlarken genellikle onu yayımlamak için duyduğunuz sabırsızlık nedeniyle birkaç önemli noktayı atlarsınız. Bu yüzden sitenizi dünyaya duyurmadan önce yapılması gerekenleri içeren bir kontrol listesi bulundurmanız ve onu her yeni web sitesini yayımlamadan önce kontrol etmeniz, sitenizin geleceği ve kalitesi açısından önemlidir.

Bu makalede, bir websitesi resmiyete kavuşmadan önce kontrol edilmesi gerekenlerin bir listesini bulacaksınız. Makale içerisinde genellikle unutulan küçük ayrıntılar yer alıyor ve bunlar zamanında yapıldığı taktirde hem sizin daha az zamanınızı alacaktır, hem de genel olarak kullanıcı deneyimine olumlu katkıları olacaktır.

1. Favicon

Favicon bir web sitesini sekme ya da pencre üzerinde tanıtmaya yardımcı olur. Faviconlar genellikle bir web sitesinin yer imlerine eklenmesi durumunda da adres ile birlikte istemci üzerine kaydedilir. Ancak bundan emin olmak için aşağıdaki kodu sitenizin head etiketleri arasına yerleştirmeniz gerekir.

<link rel="icon" type="image/x-icon" href="/favicon.ico" />

Eğer iPhone için bir favicon kaydetmek istiyorsanız, o zaman aşağıdaki kodu da eklemelisiniz.

<link rel="apple-touch-icon" type="image/x-icon" href="/favicon.ico" />

2. Başlıklar ve Meta Verisi

Sayfanızın başlığı SEO (Arama Motoru Optimizasyonu) için en önemli elementtir. Bunun yanısıra kullanıcılarınızın ziyaret ettikleri sayfada ne olduğunu anlamaları açısından da önem taşır. Sayfa başlığının her bir sayfada değişmesine ve sayfa içeriği ile alakalı olmasına özen gösterin.

<title>Web Sitenizi Yayımlamadan Önce Yapmanız Gereken 15 Önemli Kontrol | bildirgec</title>

Meta description (açıklama, tanımlama) ve keyword (anahtar kelime) etiketleri SEO için artık çok önemli olmasa da (en azından en çok kullanılan arama motorları için), siz yine de onları sayfanıza eklemeye özen gösterin. Her bir sayfada açıklamanın değiştiğine ve sayfanın içeriği ile alakalı bir açıklama olması gerektiğine dikkat edin zira genellikle bu açıklama, Google'nin arama sonuçları sayfasında göstereceği şey olacaktır.

3. Çapraz Tarayıcı Kontrolleri

Tasarımınızın mükemmel göründüğünü düşündüğünüz anda onu Internet Explorer üzerinde kontrol ettiğinizde öyle olmadığını anlayacaksınızdır. Web sitenizin farklı tarayıcılarda aynı şekilde görünmesi oldukça önemlidir. Her şey %100 aynı olmasa bile en azından ana işlevselliği korunmalıdır ve kullanıcı herhangi bir problemin varlığını sezmemelidir. Kontrol etmeniz popüler tarayıcılar Internet Explorer 6, 7 ve 8, Firefox 3, Safari 3, Chrome, Opera ve iPhone olmalıdır.

4. Yazım Denetimi

Her şeyi okuyun. Eğer daha önce okumuş olsanız bile tekrar okuyun. Bir başkasına da okutun. Genellikle bu kontroller sırasında hatalı olan şeyleri fark edecek ve onları değiştirmek isteyeceksinizdir. Sitenizdeki metni içerik konusuna hedefleyerek onu az tutmayı deneyin. Uzun metin bloklarını daha kısa paragraflara bölün. Yazı genelinde başlıklar kullanın ve listeler kullanarak okurlarınızın kolay bir şekilde içeriğinizi tarayabilmesini sağlayın. Uyarı kutuları gibi dinamik metinleri de unutmayın.

Onlarsız Yapamayacağınız 20 Tipografi Uygulaması

5. Bağlantılar

Tüm bağlantılarınızın çalışacağını sanmayın. Onlara tıklayın. Harici web sitelerine bağlantı verirken bağlantıların başına "http://" eklemeyi unutmuş olabilirsiniz. Bağlantılar sayfadaki metnin geri kalanından daha ön planda olmalıdır. Bağlantı olmayan bir metnin altını çizmeyin zira bu kullanıcının kafasını karıştıracaktır. Ziyaret edilmiş bağlantılarınız için de ayrı bir stil uygulamayı ihmal etmeyin.

Buraya Tıklamayın! Bağlantıları Doğru Kullanmak

6. İşlevsellik Kontrolü

Sitenizdeki her şeyi derinlemesine kontrol edin. Eğer bir iletişim formunuz var ise, kendinize bir mesaj göndermeyi deneyin ve kullanıcıların ne ile karşılaşacaklarını kendiniz görün. Sitenizi başkalarınızın test etmesini sağlayın. Sadece arkadaşlarınızın ya da diğer aile üyelerinizin değil, web sitenizin hedeflediği pazar alanındaki kişiler tarafından test edilmesini sağlayın. Arkanıza yaslanın ve bir kullanıcının sitenizi nasıl kullandığını izleyin. Bir başkasının sitenizi kullanma şeklini gördükten sonra sizin sandığınızdan ne kadar farklı olduğunu anladığınızda çok şaşıracaksınız. Kontrol edilmesi gereken şeyler arasında iletişim formları, arama özellikleri, alışveriş sepetleri ya da giriş alanları yer almalıdır.

7. Sorunsuz İndirgeme

Web siteniz JavaScript'in etkin olmadığı tarayıcılar üzerinde de çalışmalıdır. Kullanıcılar genellikle güvenlik için JavaScript'i kapatırlar, bu yüzden buna hazırlıklı olmalısınız. JavaScript'i Firefox üzerinde kolayca etkisizleştirebilirsiniz. Formlarınızı kontrol ederek JavaScript'in etkin olmadığı durumlarda bile sunucu tarafflı kontrollerden sorunsuzca geçtiğini ve güzel görünümlü AJAX parçalarını kontrol edin ve JavaScript etkin olmadığında bile bunun sitenizin genel kullanılırlığını engelleyip engellemediğini inceleyin.

Website Ziyaretçilerinizin İlk İzlenimini Etkileyen 21 Faktör

8. Doğrulama

100% doğrulanmış bir web sitesini hedeflemelisiniz. Her ne kadar doğrulanmamış bir web sitesi dünyanın sonu olmasa da sitenizin doğrulanmamasına sebep olan hataları bilmek ve o can sıkıcı hataları giderebilmek, kodunuzun ve sitenizin kalitesi açısından da önemlidir. Sitenizin doğrulanmamasına sebep olacak hatalar arasında alt etiketi içermeyen görseller, kapanış etiketleri kullanılmaması ve & yerine & kullanılmamış olması.

9. RSS Bağlantıları

Eğer web siteniz bir bloga ya da haber akışına sahipse, kullanıcılarınızın abone olabilecekleri bir RSS bağlantısı olmasına özen gösterin. Kullanıcılarınız RSS beslemelerini kolayca bulabilmelidir. Aşağıdaki kodu sitenizin head etiketleri arasına eklerseniz, destekleyen tarayıcılarda adres satırının hemen yanında standart RSS simgesi görünecektir ve kullanıcılarınız o simgenin üzerine tıklayarak sitenize abone olabilirler.

<link rel="alternate" type="application/rss+xml" title="Site or RSS title" href="link-to-feed" />

10. Analiz

Sitenizin ziyaretçi istatistiklerini takip edebileceğiniz bir tür site analiz aracı kullanmak, sitenizin ne kadar başarılı olduğunu ve hedeflerinizin ne kadarının gerçekleştiğini anlamanız açısından önemlidir. Günlük tekil ziyaretçişleri, aylık sayfa gösterim sayılarını ve tarayıcı istatistiklerini takip edin. Tüm bu veriler sitenizin yayında olduğu ilk günden itibaren takip edilmelidir. Google Analytics pek çok web sitesi sahibi arasında popülerdir. Kullanabileceğiniz diğerleri ise Clicky, Kissmetrics (halen kapalı beta formunda), Mint ve StatCounter gösterilebilir.

11. Sitemap

Sitenizi barındırdığınız sunucunun ana dizini üzerine (sitenizin ana sayfasının bulunduğu dizin) sitemap.xml dosyası eklemeniz durumunda arama motorları sitenizi daha kolay bir şekilde arşivleyebilecektir. Bu dosyanın içeriği, sitenizdeki tüm sayfaların adreslerinden oluşmaktadır. XML-Sitemaps web sitesi, sizin için kolayca sitemap.xml dosyasını oluşturacaktır. Bu dosyayı oluşturduktan sonra ilgili dosyayı sitenizin ana dizinine yüklemelisiniz, bu sayede dosyanın adresi http://www.sitenizinadresi.com/sitemap.xml olmalıdır.

Eğer WordPress kullanıyorsanız, Google XML Sitemap Eklentisi sayesinde siz ne zaman blogunuza yeni bir yazı yazarsanız, ilgili eklenti sitemap dosyanızı otomatik olarak güncelleyecektir. Ayrıca sitenizi ve sitemap adresinizi Google Webmaster Araçlarına eklemeyi unutmayın. Bu araç Google'ye bir sitemap sahibi olduğunuzu söyler ve ardından ilgili araç aracılığı ile sitenizin en son ne zaman Google tarafından arşivlendiği ve sitenizdeki hangi sayfaların Google tarafından erişilemediği gibi bilgilere ulaşabilirsiniz.

12. Koruyucu Tasarım

Genellikle pek üzerinde durulmayan koruyucu tasarım elementi 404 sayfasıdır. Eğer bir kullanıcı siteniz üzerinde bulunmayan bir sayfayı ziyaret ederse, 404 sayfası görüntülenir. Bu, pek çok farklı sebep yüzünden olabilir. Bu sebepler arasında bir başka web sitesinin sitenizde yer almayan bir sayfaya bağlantı vermesi sonucu olabilir. Kullanıcılarınızı ana sayfaya yönlendiren bir 404 sayfası oluşturarak kullanıcılarınızı sitenizde tutabilirsiniz. Ayrıca ziyaretçilerinizi alakalı sayfalara da yönlendirmeyi tercih edebilirsiniz.

Bir diğer koruyucu tasarım tekniği ise formunuzun doğrulanıp doğrulanmadığını kontrol etmektir. Form alanlarınıza alışılmışın dışında veriler girerek (örneğin çok fazla sayıda karakter, numara alanlarına harf girmek vs) formuzun çalışıp çalışmadığını ve bir hata vermesi durumunda ise kullanıcılarınızın bu sorunu giderebilmeleri için neler yapması gerektiği konusunda bilgilendiren bir mesajın belirip belirmediğini kontrol edin.

13. İyileştirin

Web sitenizin en yüksek performansta çalışmasını istersiniz. Bunu siteniz yayımlandıktan sonra düzenli olarak kontrol ederek gerçekleştirebilirsiniz ancak siteniz yayımlanmadan önce de kontrol etmeniz gereken bazı şeyler vardır. HTTP isteklerini azaltmak, CSS sprites (hareketleri) kullanmak, görsellerinizi web için optimize etmek, JavaScript ve CSS dosyalarınızı sıkıştırmak gibi önceden alabileceğiniz tedbirler, sitenizin daha hızlı açılması ile sonuçlanacak ve ayrıca sunucunuza daha az yük getirecektir.

Ayrıca, kullandığınız yayımlama motoru ile değişmekle birlikte, daha ciddi tedbirler almayı da deneyebilirsiniz. Örneğin, eğer WordPress kullanıyorsanız, caching adı verilen ve dinamik sayfaları önceden işleyerek onları HTML biçimine dönüştüren ve bu sayede sunucunun işlemcisini çok daha az yoran eklentileri kullanmayı deneyebilirsiniz. WP-Cache eklentisi bu alanda işinizi görecektir.

14. Yedekleyin

Eğer web siteniz bir veritabanı üzerinden çalışıyorsa, o zaman bir yedekleme stratejisine ihtiyacınız olacaktır. Yoksa verilerinizi kaybettiğiniz gün geldiğinde, neden verilerimi yedeklemedim diye kendi kendinizi yer bitirirsiniz. Olmaz demeyin, oluyor. Eğer WordPress kullanıyorsanız, WordPress Veritabanı Yedekleme Eklentisini kullanın. Eklenti sayesinde sitenizin düzenli olarak yedeğinin alınmasını sağlayabilir, ve bu yedeklerin elektronik posta adresine gönderilecek şekilde ayarlayabilirsiniz.

15. Yazdırma Stil Şablonu

Eğer bir kullanıcı web siteniz üzerindeki bir sayfayı yazdırmak istiyorsa, o kullanıcının sitenizdeki gezinti elementleri ya da harici tasarım elementlerinin kağıt üzerinde görünmesini istememe, sadece içeriğin görünmesini isteme ihtimali oldukça yüksektir. İşte bu yüzden yazıcılar için bir stil şablonu oluşturmak önemlidir. Ayrıca yüzen elementler gibi bazı CSS elementleri, yazıcı çıktısı üzerinde güzel görünmezler.

Bilgisayarların yazıcı çıktısı alınması sırasında otomatik olarak algılayacakları bir stil şablonu oluşturmak için aşağıdaki kodu sitenizin head etiketleri arasına yerleştirmeniz yeterlidir.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Koddan da anlayacağınız üzere yazdırma stil şablonunuzu print.css üzerinde oluşturmalısınız.

Kontrol Listesini İndirin

Kısa bir süre önce Dan Zambonini, bir web sitesi hem yayımlanmadan önce hem de yayımlandıktan sonra yapılması gereken kontrolleri içeren oldukça detaylı bir kontrol listesi hazırladı. Diğer şeylerin yanısıra Ultimate Website Launch Checklist, içerik ve stil ile alakalı kontrolleri, standartlar ve doğrulamayı, arama motoru görünürlüğünü, işlevsellik testini, güvenlik ve risk oluşumlarını, performansı ve pazarlamayı da içeriyor.

İlgili kontrol listesinin pdf sürümü de bulunuyor. Bu kontrol listesi özellikle gündelik projeleriniz üzerinde oldukça faydalı olmasının yanısıra siteniz yayımlandıktan sonra hatalarla karşılaşma olasılığınızı da en az seviyeye indirecektir.

Ayrıca David Leggett'in hazırladığı Hızlı Kullanılabilirlik Kontrol Listesi'ne de bir göz atmak isteyebilirsiniz. Bu liste, özellikle tasarımcıların projelerini tasarlarken, kullanılabilirlik ve erişilebilirlik kontrolleri için yapmaları gerekenleri içeriyor. Her ne kadar bu listedekilerin hepsi her web sitesi için geçerli olmasa da, sitenizi tasarlama aşamasında bir göz atmanızda fayda var.

Sizin Listeye Eklemek İstediğiniz Diğer Kontroller Neler?

Kendinize bir yapılacaklar listesi oluşturun ve herhangi bir web sitesini hazırlamadan önce ona bir göz atın. Yukarıdaki listede yer almayan ve sizin de listeye eklemek istediğiniz herhangi bir kontrol öğesi var mı? Yorumlarınızla paylaşın.

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

Websitenizi Hızlandıracak ve Kodunuzu İyileştirecek 15 İpucu

oguzguc — Wed, 08 Apr 2009 07:06:00 GMT

Bir süre kodlama yaptıktan sonra artık kendinizi tekrar etmeye başlar, aslında ne kadar zeki olduğunuzu unutursunuz. Kaç yüz tane klavye kısayolunu hafızamızda tutuyoruz? Kaç tane kodlama dili öğrendik? Kaç tane çatı? Kaç tane hile? Web geliştirme/tasarım dünyasının zor bir endüstri olduğunu söylemek, işin kolayına kaçmak olur. Ayrıca bugün bildiğimiz şeylerin pek çoğu, birkaç yıl sonra artık kullanılmayan teknolojiler listesindeki yerini alacaktır.

Bugünkü yazımızda özellikle giriş seviyesindeki geliştiricilerin geliştirmek için harcadığı süreyi kısaltacak ve daha verimli şekilde kodlama yapabilmelerini sağlayacak bir dizi ipucunu bulacaksınız. İpuçlarının arasında zaman kazandıran ipuçlarının yanısıra bazı özel programlama dillerine özgü ipuçları sayesinde web uygulamalarınızın verimliliğini de arttırabileceksiniz.

Görsellerinizi Daha Fazla Sıkıştrın

Photoshop üzerinde "Save for Web" (Web İçin Kaydet) aracını kulandığınız zaman, görsellerinizi sıkıştırarak dosya boyutunu indirgeyebilirsiniz. Ancak ilgili dosyaların kalitesinden ödün vermeden daha da fazla sıkıştırabileceğinizi biliyor muydunuz? Smush.It adındaki bu site sizler için bu işlemi hallediyor.

Peki Bu Nasıl Mümkün Olabiliyor?

Smush.It ekibi bunun için bir dizi araç kullanıyor:

Görselin biçimini algılamak ve onu GIF ya da PNG'ye dönüştürmek için ImageMagick,
PNGlerin gerekli olmayan bölümlerni kaldırmak için pngcrush. Site ayrıca daha da iyi png optimizasyonu için pngout, optipng, pngrewrite gibi diğer araçları da inceliyor,
JPEGlerdeki tüm meta verilerini kaldırmak ve progresif JPEGler oluşturmak için jpegtran (şimdilik etkin değil),
GIF animasyonlarını, farklı çerçevelerdeki tekrar eden pikselleri kaldırmak için gifsicle.

Bu yüzden yeni bir sitenin duyurusunu yapmadan önce, sitenizin URL'sini Smush.It'e girerek tüm görsellerinizin otomatik olarak optimize edilmesini sağlayablirsiniz. Eğer site, görsellerinizi optimize ederek kalitesinden ödün vermeden dosya boyutunu önemli ölçüde düşürebilirse (ki büyük ihtimalle sonuç bu olacaktır), o zaman sitenizde kullandığınız görselleri Smush.It'in verdikleri ile değiştirebili ve gerekirse HTML ve CSS dosyalarınızı da güncelleyebilirsiniz. Hazır görsel dosya biçimlerinden bahsediyorken, dosyalarınızı PNG biçiminde kaydetmek her zaman en doğrusu olacaktır. Artık demode olan animasyonlu GIF görselleri kullanmadığınız sürece PNG biçimini kullanmayı alışkanlık haline getirin.

Akıllı Olun. Kod Parçacıkları Kullanın.

Pek çok IDE, "code snippet" (kod parçacığı) panelini destekler ve bu paneller aracılığı ile özellikle sık sık kullandığınız kod parçacıklarını kategoriler altında depolayabilirsiniz. Sırf müşterinize tasarımın nasıl olacağını göstermek için her seferinde lipsum.com web sitesini ziyaret ederken mi buluyorsunuz? Bunun yerine neden birkaç paragraflık lorem ipsum metnini kod parçacığı olarak kaydetmeyesiniz ki? Örneğin Dreamweaver uygulamasında "Shift F9" klavye tuş kombinasyonunu kullanarak kod parçacığı sekmesini açabilirsiniz. Ardından sizin için uygulan olan kod parçacığını yine sizin için uygun olan yere sürükleyip bırakabilirsiniz. Bu özellik kod yazarken bana çok fazla zaman kazandırıyor.

Console.log() Hata Ayıklamasını Kullanın

jQuery kütüphanesini indirdiniz ve sözdizimini anlamak için çabalıyorsunuz. Bu sırada bir yerde takıldığınız ve $bilmemne değişkenin neye eşit olduğunu bilmiyorsunuz. Sorun değil, tek yapmanız gereken console.log($degiskenadi); kodunu eklemeniz.

Ardından Firefox'u çalıştırın (Firebug eklentisinin kurulu olduğundan emin olun) ve F12'ye basın. Doğru değişken değeri ile karşılaşacaksınız.

Şimdi ise bunu sonsuzlukla çarpın ve zamanın derinliklerine götürün. Bunun sonucunda bile Firebug ve console.log()'un ne kadar kullanışlı olduğunu fark edemeyeceksiniz :)

Web Geliştirici Araç Çubuğunu İndirin

Chris Pederick tarafından geliştirilen bu inanılmaz derecede yardımcı Firefox eklentisi size sayısız seçenek kuluyor. Bu eklenti sayesinde sitenizdeki CSS dosyalarını eşzamanlı olarak düzenleyebilmeniz mümkün. Eklentinin desteklediği diğer özellikler ise:

JavaScript'i kolayca etkisizleştirmek,
CSS'yi kolayca etkisizleştirmek,
Hızlı HTML / CSS doğrulama bağlantıları,
Cetveller,
Çerezleri etkisizleştirme,
Ve daha sayısız kullanışlı özellik.

Web Developer Toolbar eklentisi, her web geliştiricisinin Firebug ile birlikte kullanması gereken bir eklenti.

Betik Etiketlerini Alta Yerleştirmeyi Deneyin

Günümüzde kullandığımız pek çok tarayıcı, aynı sunucu adı üzerinden eş zamanlı olarak en fazla iki adet dosyayı indirebilir. Ancak bir betik indirirken diğer dosyaların indirilebilmesi için önce betiğin tamamen indirilmiş olması gerekir.

Bu yüzden mümkün olduğu kadar betiklerinizi çağıran bu kodları belgenizin sonuna eklerseniz, görseller ve css gibi diğer bileşenlerin önce indirilip sitenizin görüntülenebilmesini, ardından da son olarak bu betiklerin indirilebilmesini sağlayabilirsiniz.

Unutmayın, bu yöntem kullandığınız betiğin işlevine göre kullanılabilir ya da kullanılamayabilir. Bu sebeple betik kodlarınızı belgenizin alt kısmına taşıdıktan sonra sitenizi test etmeyi unutmayın.

Yayım Yaparken, CSS ve JavaScript Dosyalarınızı Sıkıştırın

Eğer performans, web siteniz için önemli ise, o zaman sitenizi yayımlamadan hemen önce CSS ve JavaScript kodlarınızı sıkıştırmanızı öneririm. Bunu geliştirme işinizin en başından itibaren yapmaya kalkışmayın zira bunun size yarardan çok zararı dokunur. Ancak kodlamayı bitirdikten sonra kodunuzu sıkıştırabilirsiniz.

JavaScript Sıkıştırma Servisleri

CSS Sıkıştırma Servisleri

JavaScript kodlarını paketlemek için kullanabileceğiniz diğer iki servis ise YUI Compressor ve JSMin.

Bnun yanısıra HTML kodlarınızı da sıkıştırmayı deneyebilirsiniz, ancak bunu önermem. HTML dosyalarınızı sıkıştırarak kazanacağınız dosya boyutu gerçekten çok az.

jQuery Kolay ve Hızlı İpuçları

Kısa bir süre önce tvdesign.co.uk'den Jon Hobbs-Smith, 25 jQuery ipucunu listelediği mükemmel bir makale yazmıştı. Bu sayfayı yer imlerinize eklemeyi ihmal etmeyin. İşte bu yazıdan benim en beğendiğim birkaç ipucu.

jQuery'de Bir Elementin Olup Olmadığını Kontrol Etmek

if ($('#myDiv).length) {
// bu kod sadece #myDiv ID'sinin bulunduğu zaman çalışacaktır.
}

Kontekst Kullanın

Pek çok insan, DOM elementlerine erişirken, jQuery'nin ikinci bir parametreyi kabul ettiğinin farkında değildir. Aşağıdaki koda bir bakın.

var myElement = $('#someElement');

Bu kod, jQuery'nin tüm DOM'u geçmesini gerektirir. Bunun yerine ikinci bir parametre ekleyerek hızı oldukça arttırabiliriz.

var myElement = $('#someElement', $('.someContainer'));

Yukarıdaki kodda jQuery'e, .someContainer elementi içerisinde arama yapmasını ve onun dışındakileri dikkate almamasını söylüyoruz.

Sınıflar Yerine IDler Kullanın

jQuery ile IDlere erişirken, kütüphane bilinen getElementById yöntemini kullanır. Ancak sınıflara erişirken jQuery, DOM'u geçebilmek için kendine özgü yöntemleri kullanmayı dener, zira getElementByClass diye bir yöntem yoktur. Sonuç olarak, ID yerine sınıf kullanmanız durumunda işlem biraz daha uzayacaktır.

25 İpucunun Tamamını İnceleyin

$_POST Yerine Mümkünse $_GET Kullanın

Eğer AJAX istekleri yaparken $_GET ve $_POST arasında bir seçim yapma şansınız varsa, $_GET kullanın.

Yahoo! Mail ekibi, XMLHttpRequest kullanırken, POST'un tarayıcılar üzerinde iki işleme neden olduğunu görmüştür. POST, ilk olarak başlıkları, ardından da verinin kendisini göndermektedir. Bunun yerine GET kullanmanız durumunda, eğer çok fazla çereziniz yoksa, sadece bir TCP paketi gönderilmektedir.

Unutmayın - $_GET verisini her zaman kullanamazsınız. ilk olarak ne yaptığınızdan emin olun ve querystring ile veritabanı erişimini hiçbir zaman karıştırmamanız gerektiğini unutmayın. Kısa bir süre önce Twitter arkadaşlarımdan bir tanesi, bana URL'sinde bir MySQL sözdizimi olan bir web sitesi gönderdi. Bunu asla yapmayın!

Pratik Olduğunda Kütüphaneleri ve Çatıları Kullanın

İster PHP kullanın ister ASP.NET, mooTools ya da jQuery, ya da tüm bunların bir birleşimi, uygun olduğu zamanlarda çatıları kullanmayı deneyin.

Örneğin:

Eğer basit bir statik web sitesi kullanıyorsam sadece fare imlecini bir elementin üzerine getirdiğimde bir efektin belirmesini istiyorsam, bunun için jQuery kütüphanesini kullanmam doğru olmaz.
Eğer statik web sitemin en karmaşık özelliği bir XML dosyası üzerinden veri almak ise bunun için bir çatı kullanmama gerek yok. Bu gibi durumlarda sitem hem daha yavaş çalışacak, hem de daha fazla bant genişliği kullanacağı için bana daha pahalıya malolacak.

Ancak eğer tam bir içerik yönetim sistemi ve karmaşık veri erişim yöntemlerini gerektiren bir web sitesi geliştiriyorsam, o zaman beğendiğim çatılara bir göz atmayı ihmal etmem.

Unutmayın - çatıların sizin için çalışmasını sağlayın, tam tersini değil. Bu kararları verirken zeki olun.

YSlow

YSlow, web sitenizi inceleyip onun mümkün olan en verimli şekilde çalışıp çalışmadığını kontrol eden ve size öneriler sunabilen mükemmel bir servis. Yahoo! geliştirme ekibi, kısa bir süre önce, web uygulamaları geliştirirken takip etmeniz gereken öğelerin yer aldığı bir kılavuz yayımlamıştı.

Ayrıca dilerseniz Yslow Screencastı'na bir göz atarak bu zaman kazandırıcı ipuçlarının neler olduğunu görebilirsiniz. Vaktiniz olduğunda kesinlikle izlemenizi öneririm.

Klavye Kısayolları. Öğrenin!

Pek çok deneyimli tasarımcılar ve geliştiriciler burada bana katılacaktır, eğer sitemde ya da tasarımımda ne zaman bir değişiklik yapmak istesem elimi fareye uzatıp araç çubuğuna gitmiş olsaydım, çok zaman kaybetmiş olurdum. Klavye kısayollarını o kadar uzun zamandan beri kullanıyorum ki artık bu kısayolların işlevlerin hangi araç çubuğu ya da hangi menü altında olduğunu unuttum diyebilirim. Tek bildiğim, "Shift X"in doğru paneli açtığıdır.

İşe yeni başladığınızda bu kısayolları öğrenmek size zaman kaybı gibi görünebilir. Ancak sizi temin ederim ki yanılıyorsunuz. Size Google üzerinde "X keyboard shortcuts" (X klavye araması) (burada X kullandığınız yazılımın adını temsil ediyor, örneğin Photoshop için "Photoshop Keyboard Shortcuts") araması yapmanız. Ardınan bulduğuğnuz tablonun yazıcıdan çıktısını alın ve bilgisayarınızın yanına koyun. Ondan sonraki birkaç haftalık süre içerisinde fareye mümkün olduğu kadar az dokunarak bu kısayollar üzerinde pratik yapmayı deneyin. Klaye kısayollarını bilmek, uzman kullanıcılar ile giriş seviyesindeki kullanıcıları birbirinden ayıran belki de en önemli etkenlerden biridir.

Yeni Web Sitesi Şablonu Oluşturun

İtiraf edin, her web sitesi gelişmiş ve karmaşık uygulamalar gerektirmez. Bazen, hatta belki de kimileri için çoğu zaman, sadece bugüne kadar yaptığımız işlerin yer aldığı bir web sitesini göstermek isteyebiliriz. O zaman bu gibi durumlarda kullanabilmek için her yeni bir web sitesi oluşturacağımızda kullanacağımız bir web sitesi "şablonu" oluşturmayalım?

"Template" klasörümün içerisine "JS" ve "CSS" klasörlerini yerleştirdim.

"JS" klasörüm, DD_belatedPNG.js dosyasını içeriyor (bu dosya, IE6'de PNGlere 24 bit saydamlık desteği getiriyor).
"CSS" klasörümde ise içi boş "default.css" dosyamın yanısıra benim hazırladığım sıfırlama dosyası yer alıyor.

Bunun yanısıra index.html(php) dosyamın içerisinde de projelerimin pek çoğunda kullanacağım birkaç kod parçası yer alıyor. Bu kod öyle aman aman özel bir kod değil ancak bunu önceden hazırlamak size zaman kazandıracaktır.

Kullandığım index.html dosyasının bir örneği

Yukarıdaki kodda da göreceğinz üzere önce CSS ve JavaScript dosyalarıma bağlantı verdim ve ardından Google jQuery dosyasına da bağlantıyı ekledim. son olarak document.ready() jQuery fonksiyonunu oluşturdum ve standart "container" divimi açtım.

Bu kod her ne kadar basit görünse de inanın size zaman kazandıracaktır. Bu sayede ne zaman yeni bir web sitesi oluşturmanız gerekirse, o zaman tek yapmanız gereken "template" klasörünün içerisindeki bu dosyaları kopyalamaktır.

Satıriçi ve Harici Karşı Karşıya

Genelde tüm CSS ve JavaScript dosyalarınız sayfadan çıkarılmalı ve kendi harici dosyalarında korunmalıdırlar.

Bunu neden yapmalıyız?

Daha temiz kod,
Sunumun ve içeriğin birbirinden ayrılması önemlidir,
Harici dosyalar kullanarak onları istemcinin sisteminde depolamış oluyoruz. Bu, HTML dosya boyutunu düşürmenin yanısıra harica HTTP isteğine de yol açmıyor, zira ziyaretçi ya da istemci ilgili dosyayı ilk kez istediğinde depoluyor ve sonraki seferlerde aynı dosyayı indirmiyor.

Eğer sadece birkaç satırlık stiliniz var ise o zaman onun için harici dosya oluşturmayabilirsiniz. Bu gibi durumlarda, ama sadece bu gibi durumlarda, ilgili kodu HTML içerisine gömebilirsiniz.

PHP Betiğinin JavaScript İle Çağırılıp Çağırılmadığını Kontrol Edin

AJAX aldı başını gidiyor, özellikle en sonunda, JavaScript kütüphaneleri sağolsun, kullanıcı dostu hale geliyor. Bazı durumlarda betiğin JavaScript ile mi çağırılıp çağırılmadığını belirlemeniz gerekebilir. Bu görevi yerine getirmek için kullanabileceğiniz birkaç yöntem bulunmaktador.

Bunlardan birisi POST'u gönderirken JavaScript'iniz ile özgün bir anahtar değerini JavaScript'inize iliştirmektir. Ardından PHP kullanarak bu anahtarın varolup olmadığını kontrol edebilirsiniz. Eğer var ise, o zaman JavaScript etkin olduğunu anlarız.

Daha iyi bir yöntem olarak PHP'nin HTTP_X_REQUESTED_WITH özelliğini kullanmaktır. Şöyle ki...

if isset($_SERVER['HTTP_X_REQUESTED_WITH']) {
// kodunuzu buraya yazın ve JavaScript'in etkin olduğundan emin olun
} else {
// JavaScript'in etkin olmadığı kullanıcılar için birleyler yapın.
}

Google CDN'ye Bağlantı Verin

Kısa bir süre önce Google jQuery gibi popüler betikleri kendi sunucularında depolamaya başladı. Eğer bu tip kütüphanelerden birisini kullanıyorsanız, o zaman ilgili betiği kendi sunucunuzda depolamaktansa bu betikleri Google CDN üzerinden çağırmanız şiddetle önerilir.

AJAX Kütüphaneleri API'si

Peki Ama Neden?

Caching (Depolama): Bu tip betikleri Google CDN üzerinden çağıran web sitelerinin sayısı gün geçtikçe artmaktadır. Bu sebeple eğer siz de ilgili dosyayı Google sunucusu üzerinden çağırırsanız, ziyaretçiniz muhtemelen o dosyayı sizin siteniz üzerinden indirmeyecektir, zira bir başka site üzerinden aynı dosyayı daha önce indirmiş olabilir. İlgili dosyayı daha önce indirmiş bir ziyaretçi sizin sitenizi ziyaret ettiğinde istemci, Google sunucularından 304 (değiştirilmemiş) mesajı alacak, bu sebeple de o dosyayı doğrudan istemcinin yerel bilgisayarı üzerinden kullanacaktır. Bunun sonucunda da sizin web uygulamanız kullanıcıya daha çabuk açılacaktır.
Eş Zamanlılığı Arttırın: Daha önceki bir ipucunda bundan bahsettim. Bu fazladan dosya isteğini kaldırarak istemcinin daha fazla içeriği eş zamanlı olarak indirebilmesini sağlamış olursunuz.

Firefox Eklentilerini Kullanın

Ben Google Chrome'nin büyük bir fanatiğiyim. Çok hızlı açılıyor ve JavaScript'i diğer tüm tarayıcılardan daha hızlı çalıştırıyor (Firefox'un henüz yayımlanmamış 3.1/3.5 sürümü sanırım Chrome'nin hızını yakalayacak).

Buna rağmen bu, Firefox'u kısa bir süre içerisinde bırakacağım anlamına gelmiyor. Bu tarayıcın için sunulan bazı kullanışlı eklentiler gerçekten büyüleyici. İşte benim beğendiklerim:

Yardımcı Olduğunda IDE Kullanın

Tıpkı günümüzde Microsoft'tan nefret etmek ne kadar moda ise, geliştirme yaparken IDE kullananlara saldırmak ta o kadar moda. Bu gerçekten çok saçma.

Pek çok durumda, gelişmiş bir IDE kullanımı çok önemlidir, özellikle nesne yönelimli programlama (OOP) dilleri üzerinde çalışırken. Şimdi, eğer sadece sade bir HTML şablonu oluşturuyorsanız, o zaman Notepad++ ya da Coda/ sizin için mükemmel bir araç olacaktır. Aslında, bu araçların kullanımını bu gibi durumlarda öneririm. İhtiyacınız olmadığında bu tip programları kullanarak işinizi daha da zorlaştırmayın. Ancak, gelişmiş uygulamalar geliştirirken, IDE'nin avantajlarından da faydalanın.

Hepsi Bu Kadar!

Sanırım şimdilik bu kadar yeterli. Umarım bunlardan bazıları (belki de hepsi) sizi daha iyi birer tasarımcı ya da geliştirici kılmaya yardımcı olacaktır. Sizin beğendiğiniz kısayollar hangileri? Yorumlarınızla paylaşın.

İpuçları Hakkında Yazdığım Diğer Yazılar

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

oguzguc — 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ı oguzguc 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 zaman aradığımız 29 adet CSS/Ajax/Java/Dhtml Galeri sistemi

oguzguc — Thu, 05 Feb 2009 17:38:00 GMT

1 . Minishowcase
Minishowcase küçük ve çok basit bir Ajax galeri sistemi. Kullanım konusunda basitliği ile tasarımcı dostu diyebilirim. mutlaka inceleyin.

2. JonDesign’s SmoothGallery
JS dosyası sadece 16kb olan bu galeri sisteminde Jon Design birçok sitede gördüğümüz bir yapıyı bizimle paylaşıyor. Koyu renk tasarım seçmiş ve fotoğraf ağırlıklı bir tasarım anlayışına sahip tasarımcılar için birebir.

3. Ajax Photo Gallery
Birçoğumuzun bildiği Agile Gallery basit ve öz.

4. Pyxy-gallery
Bu sistem biraz eski olmasına rağmen çeşitli düzenlemeler ile tasarımınıza en iyi uygulayabileceğiniz galeri sistemlerinden birisidir.

5. Zenphoto
Online galeri çözümlerinin bence cevabı Zenphoto sistemidir. Birçoğumuzda elbet bir şekilde bu sistem ile buluşmuşuzdur:) fazla söze gerek yok.

6. Couloir.org: Resizing, Fading Slideshow Demo - AJAX Slideshow
Bu sistemi şiddetle incelemenizi öneririm. Belki biraz flash galeri sistemlerini anımsatıyor ama kullanımı ve düzenleme altyapısı okadar basit ki... imaj portfolyo ve fotoğrafçılar için en uygun sistemlerden biri diyebilirim!

7. Grey Box
Buna da şiddetle bir bakın demek zorundayım. Tasarımında çok fazla imaj külfeti olanlar için mükemmel bir çözüm olabilir.

8. LightBox 2
Yabancı gelmedi biliyorum evet, doğru hepimizin bildiği o muhteşem script.

9. Multifaceted Lightbox
Bu galeri sistemi için aslında fazla söze gerek yok, tekrarlıyorum fotoğrafçılıkla uğraşanlar için gayet başarılı bir sistem.

10. Slightly ThickerBox 1.7
Basit ve öz Light Box2 ye benzerliğiyle bilinen galeri sistemi.

11. TripTracker
Bu sistem isminden de anlayabileceğimiz gibi gezilerimiz için yarattığımız galerilere en iyi çözüm. Bunların dışında Şiddetle öneririm!

12. Slimbox, the ultimate lightweight Lightbox clone
Mootols tabanlı o güzel galerilerden biri daha.

13. Suckerfish HoverLightbox
Bu sistemi çok beğeneceğinizden eminim. Klasik fikirlerden bıkmış olanlar için ideal olabilir.

14. Suckerfish HoverLightbox Redux
Bir önceki sistemimizin farklı bir versiyonu, değişik diyebilirim :)

15. ThickBox 2.1.1
İşte bir klasik daha.

16. A Photograph Gallery
Görünüm olarak hepimizin anımsayacağı bir sistem olan A photograph gallery çeşitli görsel düzenlemeler ile güzel olabilir. CSS Tabanlı.

17. A simple CSS photo-album
İsminden zaten anlıyoruz ki ->

18. Cross Browser Multi-Page Photograph Gallery
İşte Bu! dediğim galeri sistemlerinden birisi benim çok işime yaramıştır eminim sizin de yarayacak!

19. CSS Image Gallery
Basit ve Öz.

20. CSS: Photo Showcase
Bu sistemi kullanmanızı şiddetle tavsiye ederim özellikle portfolyo sistemlerinde gayet şık olabiliyor.

21. HowerBox Image Gallery
Birçoğumuzun en az bir kere kullandığını düşündüğüm sistem.

22. Photo Scroll Gallery
Bu sistemi de sörf yaparken çok görmüşüzdür.

23. Sliding Photograph Galleries
Bu sistemi birçok kişi bir şekilde reklam ve google adsense yapısı gibi kullanıyor.

24. xImgGallery - Javascript Image Gallery & Slideshow
Kullanım açısından çok basit olan bu sistem biraz düzenleme sayesinde tasarım ile tam uyum sağlıyabilir.

25. Easy Album
Bu sistemi de birçoğumuz yakından tanıyacaktır. Çok çok basit ve kullanıcı dostu bir galeri sistemi. Basit kullanımı ile kullanıcılarınıza en iyi sunumu yapabilirsiniz.

26. Image Gal
Mini galeri diyebileceğimiz bir sistem. basit imaj gösterim sistemlerini sevenler için ideal.

27. Highslide JS
Bu sistem de hepimizin kullandığı mevcut diğer sistemler ile çok benzerlik taşıyan bir galeri sistemi. Tavsiye ederim.

28. Satellite
FlickR ile de çok iyi entegre çalışabilen bir sistem. Şu anda galiba ücretli veya üyelik gerektiriyor.

29. Dhonishow

Buna da kesin bakın derim, CMS sistemini kullanan arkadaşlarımız elbet latest photos gibi bir modülü buna uyarlayabilirler.

Kaynak : Neredeyse 2 yıldır kullandığım bu galerileri bir araya toplayan smashing magazine sitesinden kendi derlemelerim.

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

Hiçbir Zaman Ölmeyecek 28 Photoshop Dersi

oguzguc — Sun, 04 Jan 2009 11:01:00 GMT

Rehberlerle ilgili garip olan şey, sayılarının çok fazla olması. Hstta o kadar fazla ki bazen nereden başlayacağınızı bile kestiremiyorsanız. 1000'in üzerinde rehberin bulunduğu bir adres dizinim olduğunu ve onların yarısını bile hiçbir zaman bitiremeyeceğimi düşündüğümü hatırlıyorum. Bunun üzerine ben de elimdeki arşivi filtrelemeye başladım ve hiçbir zaman üzerinde çalışmayacağım rehberleri eledim ve saatler süren çalışmanın sonucunda elimdeki rehber sayısnı 100'e indirgedim. Bu 100 rehberin arasından kolleksiyonumdaki en iyiler olarak nitelendireceğim 28 tanesi üzerinde çalıştım.

Bu muhteşem rehberleri size farklı teknikleri ve stilleri nasıl kolayca uygulayabileceğinizi gösterenler arasından seçtim. Bu rehberler sayesinde photoshop deneyimimi arttırdım.

Bu rehberleri favori siteler listenize "nasılsa bir gün çalışırım" diye ekleyip unutmaktansa gerçekten zaman ayırıp rehberleri uygulamanızı öneririm. Şimdi ya da hiçbir zaman.

Reklamcılık ve Ürün Tasarımı
İlginç ve güzel bir telefon reklamı duvar kağıdı. Bu rehber ilginç ve güzel görünümlü bir telefon reklamı duvar kağıdı hazırlamanın detaylı aşamalarını açıklıyor.

Büyüleyici Nike Reklamı. Nike gibi bir şirket için reklam tasarlamak pek çok tasarımcının rüyalarını süsler. En azından bir gün sizi işe alma ihtimaline karşın hazırlıklı olun.

Taslak bir araba çizimi nasıl işlenir?Emre Hüsmen bize bir taslak çizimin Photoshop üzerinde nasıl işlenebileceğini gösteriyor. Bu rehbere başlamadan önce biraz Photoshop deneyiminizin olması gerekiyor, bu yüzden bu rehbere başlamadan önce diğerlerine bir göz atın.

HTC Touch Diamond tarzında bir cep telefonu oluşturun. Kendi gizli ürününüzü tasarlamayı ve bir gün o ürünün gerçek bir ürün olarak pazarlanacağı günleri düşünerek iç geçirdiğinizi biliyoruz. Peki neden şimdi başlamayın? Bu rehber ile konsept tasarımlar ve gerçekçi ürün şablonları tasarlamayı öğreneceksiniz.

Ürün tasarlamak Eğer en sevdiğiniz gizli hobiniz Internet'e Apple dedikoduları sızdırmaksa, o zaman bu rehber sayesinde gerçekçi ürün tasarımları oluşturabileceksiniz.

Profesyonel Laptop Reklamı Tasarlayın. Bu rehber size kendi birleşme noktalarınızı nasıl tasarlayabileceğinizi ve bu teknikleri kullanarak nasıl ekran patlama efekti oluşturabileceğinizi öğreneceksiniz.

Azıcık kirli, eski ve vektör

Bir fotoğraftan vektör kompozit efekti oluşturun. Bu rehber size bir resmi alıp (rehberde bir kadın resmi kullanılmış) onu nasıl tümüyle vektör şekillerden olluşmuşçasına tasarlayabileceğiniz öğretiliyor. Rehber süresince kırpma maskeleri ve zemin değiştirme gibi bazı basit teknikler kullanılarak bu özel efekte adım adım ulaşacağız.

Fotoğraflarınıza çekici retro kıvrımları dahil edin. Retro geometrik şekilleri fotoğraflara dahil etmek bazen muhteşem sonuçlar doğuruyor. işte bu rehber size bunu nasıl yapacağınızı öğretiyor.

Sarmallarla tasarlamak Eğer sarmallar size yetmiyorsa ve kendi sarmal tasarımlarınızı oluşturmak istiyorsanız o zaman bu sarmallı yolculuğa hazırsınız.

nasıl mükemmel bir yeşil elma illüstrasyonu oluşturulur? bu rehberde size nasıl parlak yeşil bir elme çizeceğinizi göstereceğim. Rehber süresince çeşitli boyama tekniklerine değineceğiz. Eğlenceli bir rehber ve yeni birşey öğreneceksiniz.

ahşapa gömülü woofer oluşturmak. bu rehberde size bir woofer tasarlamayı ve arkaplanı için basit bir ahşap yüzey oluşturmayı öğreteceğim. Rehberde ayrıca woofer'ı olduğu yerde tutacak bazı vidalar oluşturacağız. Sağlam bir müzik açın ve çalışmaya başlayın.

kirli kutu tasarımı Nasıl büyüleyici şablon tasarımları oluşturacağınızı öğrenin. Bu rehber süresince nasıl dağılma noktası filtresini kullanabileceğinizi öğrenecek ve bu filtre ile nasıl profesyonel sonuçlara ulaşabileceğinizi kavrayacaksınız. Rehberin sonunda gerçek görünümlü ve bolca kullanılmış bir kutu görünümüne kavuşacaksınız, sanki dünya çapında seyahata çıkmış gibi. Bu teknikleri kullanarak kendi tasarımınızı da geliştirebilirsiniz.

Detaylı pusula simgesi Bu rehberde gölge ve yansıma efektlerini kullanarak illüstrasyona nasıl gerçeklik katabileceğimizi göstereceğiz. Tıpkı her simge tasarımında olduğu gibi genel tasarım ve detaylardaki incelik sizi kaliteli sonuçlara ulaştıracaktır.

Bir bardak biraBu rehberde içinde bira olan bir bardak çizeceğiz. Önce kıvrımlı ve yansımalı bir bardak oluşturacak, ardından içine biraz bira koyacak, biraya baloncuklar ekleyecek ve son olarak gölge ve yansımaları uygulayacağız. Aynı zamanda umarım birkaç kullanışlı tekniği de öğrenmiş olursunuz.

Eski mektup. Görünüşe göre herkes birşeyleri eski ya da kirli yapmakla uğraşıyor. Bu rehberde 50'ler tarzında bir aşk mektubu nasıl oluşturulur onu göstereceğim. Rehber süresince köşeleri kıvıracak, posta pulu oluşturacak ve fırça motoru, dikdörtgen aracı, katman stilleri, dolgu modelleri ve sizi bir sonraki seviyete yükseltecek bazı gelişmiş teknikleri kullanarak eski tarz sınırlar oluşturacağız.

İmaj Hileleri

Mükemmel yalan. Bu rehber 2 çok sık kullanılan tekniği kullanarak nasıl kusursuz cilt oluşturabileceğinizi anlatacak.

Uç Makyaj. Bu rehber cilt tonları, gölge işlemeleri ve ışık modelleri kullanarak etkiyi arttırmayı, gözler ve saçlarda iyileştirme yaparak muhteşem bir portre fotoğrafı oluşturmayı hedefliyor.

Ayar katmanları ile karma resim oluşturmak Photoshop ile karma resimler oluşturmanın üçte biri tekniğe, üçte ikisi ise hayal gücüne dayanır. Aşağıdaki örnekte tasarımcı, bir fırtına öncesi sessizlik sırasında bir kızın fotoğrafını işlemiş.

torbadan kamuflaj dijital kolaj çalışması. Bu rehber motiflerin yerleşimini nasıl kontrol edebileceğinizi ve bir imaja nasıl kamuflaj gibi arkaplan öğesi olarak atayabileceğinizi gösteriyor. Rehber ayrıca aynı motifin nasıl öne çıkarılabileceğini ve tasarımın diğer bölümlerinde nasıl gerçek bir motifmişçesine görünülenebileceğini de gösteriyor.

Sıradan bir atı robo-at'a dönüştürün Robo-at sizi kurtarmaya geliyor. Çok başarılı olan bu rehberde kendi robot görünümlü nesnenizi nasıl oluşturabileceğinizi gösteriyor. Muhtemelen zamanınızı en çok alacak olan ancak bir o kadar da çalışması eğlenceli bir rehber.

Tipografi

Yanan metin. Alevler Photoshop'ta işlemesi genelde zor öğelerdir, ancak bu rehberde size bir alev resmini kullanarak metni nasıl üzerine işleyebileceğinizi göstereceğim. Eseri karanlık arkaplan üzerinde güzel bir metin efekti ile tamamlayacağız.

Çim metin efekti Bu rehberde bir yeşillik resmini, kalem aracını ve biraz da sabrımızı kullanarak güzel görünümlü bir efekt oluşturacağız.

Uzay ve Ötesi

Uzay ve gezegen. Aşağıdaki teknikler size aşağıda son halini gördüğünüz fotoğrafa ulaşmak için kullandığım teknikleri içeriyor. Her ne kadar aşağıdaki imaj üç saatlik bir çalışmanın ve pek çok ayrıntının eseri olsa da, siz bu işin nasıl yapıldığını kavrayacaksınız.

Ay tutulması efekti Muhteşem sonuçları olan görece basit bir rehber.

Sadece doku kullanarak gezegen oluşturmak. Photoshop'ta sadece bir doku kullanarak, neredeyse gerçekçi görünen bir gezegen oluşturn.

Boyama

Deri boyama. Bu güzel rehber size nasıl deri boyayabileceğinizi öğretiyor.

Doğadan esinlenen boyalı arkaplan resmi oluşturun. Eğer websiteniz ya da blogunuz için boyalı arkaplan istediyseniz, bu rehber tam istediğinizi veriyor.

Efektler

Bay Su Adam. Normal bir insanı sudan oluşmuş bir insana nasıl dönüştürebileceğinizi öğrenin.

Kaynak: Kumail.H.T's Blog

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

Startups.com'dan yeni siteler

oguzguc — Sat, 20 Dec 2008 09:03:00 GMT

Aslında amacım TechCruch'da robin wauters tarafından yayınlanan dataopedia incelemesinden alıntılar yapmaktı ama bu siteyi geliştiren startups.com'un diğer uygulamalarını görünce hepsini birden tanıtmak gibi zor bir işe soyunmaya karar verdim. KillerStartups.com'un sahipleri 6 haneli bir rakama startups.com domain ismini aldıktan sonra önce twingr.com'u şimdi de dataopedia'yı hizmete aldılar.

KillerStartups bu uygulama aslında basit bir blog havasında, yeni çıkan siteleri tanıtıyor ama Amerika'da en çok tıklanan ilk 5bin sayfa arasında yer alıyor. her gün 15 yeni "start" alan siteyi inceliyorlar.

Twingr twingr aynı twitter gibi mikro blogging yapılan bir site, Amerika2da ilk 100bin'e henüz girememişler. kendi ufak tarikatınızı oluşturup aranızda en çok 140 karakterlik mesajlar gönderebiliyorsunuz

dataopedia istediğiniz siteye ilişkin bulabildiği tüm bilgiyi aktarıyor. BUnlar arasında genel rank'ına ilişkin istatistiki bilgiler, whois search'i, twitter'da verilmiş linkler ve varsa yapılan yorumlar yer alıyor. Eğer telefondan erişiyorsanız mobile yüzü ile hizmet veriyor.
Kaynak :bu-bu ve bu

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

Obama'yı Zafere Götüren Pazarlama Stratejileri

oguzguc — Thu, 13 Nov 2008 19:29:00 GMT

Bilindiği gibi Barack Obama artık Amerika'nın yeni başkanı. Amerika'da seçim süreci bizim ülkemize göre hem daha uzun hem de daha kapsamlı geçiyor. Tabii bunda kampanya bütçelerini göz ardı etmemek lazım.

Ama bütçe ne kadar iyi olursa olsun, iyi stratejiler gütmedikçe başarı gelmez. Obama'nın da başkan olduğunu düşünürsek uyguladığı stratejilerin başarılı olduğunu varsayabiliriz.

Özellikle internet ortamını inanılmaz iyi kullanması, bu stratejilerin en önemlilerinden biri.

Kampanya sürecinde kullanılan pazarlama stratejileriyle ilgili pazarlama gurusu Seth Godin'in şu makalesi okunabilir. Ayrıca Newsweek'te şu, Businessweek'te de bu makale bu pazarlama stratejilerini irdelemekte.

Bir de Obama'nın "biz" söylemine odaklanan şu makale var ki en ilki çekici olanı.

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

Online web ve tasarım yayınları(dergiler vs) listesi

oguzguc — Sun, 07 Sep 2008 06:03:00 GMT

online web ve tasarım dergileri gerçekten meraklıları için zevkle takip edilen yayınlar. özellikle tasarım adına bildiklerim arasında çok güzide dergiler var. eğer öğrenmek istediklerinizi bir dergi de bulmak istiyorsanız ve basılı yayınlardan bıktıysanız buradaki dergilere bir göz atın. lütfen siz de bildiğiniz yerli web ve tasarım konulu online dergileri de yorumlarda paylaşın.

1. Computer Arts - kaliteli online dersler

2. Urban Collective - yaratıcı imajlar

3. Beast the bible of inspiration - tipografi, illustrasyon

4. Vitamin - Css, tasarım, Web uygulamaları

5. Booooooom - muzik,tasarım vs üzerine güzel makaleler

6. Communication Arts - reklam tasarımcılığı

7. Smashing magazine -web tasarım merkezi

8. CSS Globe - üyelerden gelen web standartları

9. .net - profesyonel tasarımcı ve web geliştiricilere

10. Design is kinky - ilham verici tasarım ve portfoliolar

11. Design melt down - web tasarımı burada

12. Digital web magazine - iş,css, sosyal ağlar vs

13. Eye magazine - grafik tasarım üzerine

14. Format - ilham verici makaleler

15. Graphis - fotografik ilham kaynakları(şu an mesgul)

16. Net diver - tasarım ve dijital kültür

17. Sitepoint - ilginç sanayi haberleri

18. Surf Station - ilginç sanat ve tasarım vak'aları

19. The dezine - ilham verici işler galerileri

20. Think Faest! - blog üzerine

21. My computerlove - ilginç makaleler merkezi

22. Design Diary - sanat ve tasarım

Kullanıcılardan gelenler:

1. Typesites - tipografi ve web siteleri

2. I love typography - tipografi tabiki

3. Free Design Magazine - bedava kaynaklar ve tasarım

4. Destructed - sanatsal bir pdf dergi

5. A list Apart - web ve tasarım ortaklığı

6. Graphic Competitions - grafik tasarım yarışmaları

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

45 adet mükemmel web template

oguzguc — Sat, 26 Jul 2008 13:03:00 GMT

güzel tasarım yazıları yayınlayan yabancı sitelerden dzineblog, burada 45 adet mükemmel web template i yayınlamış. hepsi de önizleme ve download linkleri ile beraber.

bu yazıya daha fazla ne yazılır bilmiyorum ama kontrol etmenizi tavsiye ederim.

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

App-Stick: USB 'de taşınabilir, 350+ Ücretsiz Program

oguzguc — Tue, 22 Jul 2008 19:59:00 GMT

usb flash bellek programları

App-Stick, USB flash bellekler aracılığı ile her zaman yanınızda olacak, ücretsiz programların listelendiği bir dizin sitesi.

Site de, 13 kategori (ses ve görüntü, grafik, güvenlik, internet, programlama, sistem araçları, gizlilik...) başlığı altında toplanmış, şu an için 350'den fazla program (Skype, Filezilla, Firefox, Opera, Audacity, VLC, Winamp...) yer alıyor.

App-Stick: USB 'de taşınabilir, 350+ Ücretsiz Program

App-Stick sitesine gitmek için buraya tıklayabilir, ayrıca Favoriler sayfasından en çok tercih edilen programları görebilirsiniz.

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