bildirgec.org - gemeaux - beğendikleri

Web tasarımcıları için PDF skeç kağıtları

gemeaux — Mon, 26 Apr 2010 09:28:00 GMT

Projelere başlamadan önce projenin gidişatını belirleyecek planın yapılması gerekir. Bu plan ana maddelerden başlayarak daha spesifik özelliklere kadar projenin baştan sonra kağıt üzerinde ve kafalarda bitirilmesi gerekir. ve işler tasarım kısmına geldiğinde tasarımın bir taslağını yapmak, tasarımın sağlıklı olması açısından çok önemlidir. Tasarımı bitmiş bir sitenin hatta xhtml/css kodları yazılmış bir sitenin üzerinde değişiklik yapmak çok sıkıntılı ve kafa karıştırıcıdır. bunu engellemek için tasarım ve uygulamanın kaba bir skeçinden başlayarak ince detaylara kadar kağıda çizilmesi gerekir.

Web sitesinin skeç'ini çizerken işi hem biraz eğlenceli hale getirmek hem daha profesyonel görünmek ve daha sağlıklı bir sonuca ulaşmak için PDF formatında skeç kağıtları düzenlemişler.

Web Sketch

UI Stencils

960 grid system template

960 sketch pdf template

Grid Paper

all konigi pdf templates

Paper Browser

paper browser pdf template (horizontal)

paper browser pdf template (vertical)

mbti sketching paper for ideation

mbti sketching paper (a4)

mbti sketching paper (a3)

mbti sketching paper (letter)

mbti sketching paper (legal)

sketching grid paper

concept7 a4 sketching grid paper

concept7 a3 sketching grid paper

6 pages template

6 pages pdf template

paper wireframe templates

paper wireframe templates (pdf templates)

paper wireframe templates (psd and pdf templates)

sketchboards

multi page template (ppt template)

single page template (ppt template)

Wireframe Template

pdf wireframe template

Bu yazı gemeaux tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

en iyi icon tasarım dersleri

gemeaux — Thu, 25 Mar 2010 10:06:00 GMT

web tasarımda iconlar (simgeler) kullanıcıya basit ve etkili bir şekilde mesaj iletmek için kullanılır. kusursuz tasarımın temeli, diğer web bileşenleri ile uyumlu bir arayüz oluşturmaktır. birçok tasarımcı hazır icon kullanmayı tercih eder. bazen projeye aranan kan bir türlü bulunamaz, tasarımcı kendi iconunu oluşturmaya başlar. sizlere hem ilham vereceğini düşündüğüm hemde farklı teknikler kullanılarak birbirinden farklı icon tasarımı oluşturabileceğiniz dersler listelendi.

1- create a golden, vector compass in illustrator
( illusator'da altın renkli pusula oluşturma)

2- design a stylish mail icon
(şık mail icon tasarımı)

3- create a van icon in photoshop
(photoshopta minibüs icon tasarımı)

4- vintage mac icon
(mac modeli icon tasarımı)

5- create a leather-textured, realistic briefcase icon
(deri dokulu evrak çantası iconu oluşturma)

6- usb hard drive device icon
(usb disk aygıt iconu)

7- computer icon tutorial
(bilgisayar iconu oluşturma)

8- creating a set of digital painting icons – camera icon
(Fotograf makinası iconu oluşturma)

9- photoshop ipod portable speaker icon
(photoshopta taşınabilir ipod hoporlör icon)

10- create a custom mac osx style ring binder address book icon
(spralli mac osx tarzı adres defteri)

11- how to make a calendar icon
(nasıl takvim iconu oluşturulur)

12- make a handy 3d vector calendar icon
(3D masa takvimi iconu oluşturma)

makalenin devamında geri dönüşüm, askeri şapka, güvenlik, kamera lensi, ipod shuffle, posta zarfı, mini icon, rulo fırça , gözlük, çalar saat, kurşun kalem gibi icon tasarım dersleri bulunmakta.

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

İstanbul'dan Facebook Geçti!

gemeaux — Wed, 14 Oct 2009 06:40:00 GMT

Buradan duyurusunu yaptığım Facebook Developer Garage İstanbul Etkinliği, pazar günü (11 Ekim 2009) İstanbul Bilgi Üniversitesinin Dolapdere Kampüsü'nde gerçekleşti.

Katılımcılar tarafından oldukça yararlı bulunan etkinlikte, katılımcılara konuşmacılar tarafından farklı konular ile ilgili çeşitli sunumlar gerçekleştirildi.Aşağıdaki listede bulunan linkler aracılığı ile sizler de bu sunumlara erişebilirsiniz.

Özkan Altuner: 1-Facebook Developer Garage Nedir? : burada 2-Facebook Toolkit, FBML ve .NET kullanarak nasıl bir Facebook uygulaması yapılır? :burada

Özgür Demir: GWT, FQL ve iFrame kullanarak nasıl bir Facebook uygulaması yapılır? : burada

Emre Sokullu: Facebook API kullanımını. :burada

Tolga Arıcan: Uygulamalardan nasıl gelir elde edilir. :burada

Özgür Alaz: Facebook Çağında Pazarlama teması. :burada

Justin Osofsky: Facebook Connect ile ilgili bilgiler. :burada

Facebook Developer Garage İstanbul ile ilgili çeşitli fotoğraflara ve videoya buradan ulaşabilirsiniz.

Bonus+++++++++:
+Facebook Merkezi'nden Fotoroman Tadında Görüntüler
+Facebook Connect'iniz 3 Adımda Hazır!
+Facebook Developer Garage İstanbul'da!
+facebook, fbfund ile yine para kazandırıyor
+Digg Facebook Connect'i ekledi
+Facebook, Lite ile Twitter Killer Olma Amacında!
+iPhone İçin Facebook 3.0 Yolda!
+Facebook Open Stream API'yi duyurdu
+Facebook Twitter'ı Bağladı!

Kaynak: Facebook Event
algoz: Blog FriendFeed Twitter Facebook Email RSS

Bu yazı gemeaux 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 Yüksek Çözünürlüklü Çiçek Fırça Seti

gemeaux — Mon, 27 Apr 2009 14:12:00 GMT

Creative Commons lisansı altında yayınlanan ücretsiz yüksek çözünürlüklü fauna fırça setine aşağıdan ulaşabilirsiniz.

Önizleme

Lisans Detayı

Bu fırça seti creative commons tarafından lisanslanmıştır. kişisel veya ticari amaçlarınız için kullanabilirsiniz.

Fırça Setini İndirin

Bilgisayarınıza indirmek için buraya tıklayabilirsiniz.

ayrıca aşağıdaki yazılarda ilginizi çekebilir.

6 yüksek çözünürlüklü çöp fırça seti

20 Güzel Klasikleşmiş Photoshop Fırça Seti

22 Fantezi Photoshop Dersi ve 125 Photoshop Fırçası

35+ Faydalı Photoshop Eklentisi

web ve grafik tasarımcıları için harika kaynaklar

kaynak: sixrevisions
diğer yazılarım
yazılarımı rss üzerinden takip edebilirsiniz

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

22 Fantezi Photoshop Dersi ve 125 Photoshop Fırçası

gemeaux — Tue, 14 Apr 2009 17:11:00 GMT

fantezi sanat eseri çalışmaları her zaman eğlencelidir. Bu 22 derste periler, kale, ejderha, kanat gibi çalışmalar yer almakta. Bunun yanında 125 photoshop fırçasını fantezi çalışmalarınızda kullanabilirsiniz.

22 Fantezi Photoshop Dersi

1 - Making of a Forest Magical Scene (Sihirli Orman Sahnesi Yapımı)

Making of a Forest Magical Scene

Bu ders ile bir orman sahnesi oluşturmayı örneklerle görebilirsiniz.

2 - Creating your own Fairytale Scene (Peri Masalı Sahnesi Oluşturma)

Creating your own Fairytale Scene

Bu ders ile birkaç kolay adımda peri masalı sahnesi oluşturabileceksiniz.

3 - Making of a Floating Island (Yüzen Ada Yapımı)

Making of a Floating Island

Bu ders ile birkaç resim kullanarak yüzen ada yapma adımlarını görebilirsiniz.

4 - Stunning Dragons Attack in Photoshop with 3D Features (Photoshop'da 3d özellikleri ile harika dragon saldırıları)

Stunning Dragons Attack in Photoshop with 3D Features

Bu derste ejderha, duman, ateş, duman ve diğer çılgın şeyleri nasıl oluşturabileceğinizi göreceksiniz.

5 - Mysterious Lighting (Gizemli Aydınlatma)

Mysterious Lighting

Bu ders ile birkaç resimle denizde yüzen bir kale yapımını öğrenebileceksiniz.

6 - Nightly Prayer (Gece İbadeti)

Nightly Prayer

7 - Dark scenery (Koyu Manzara)

Dark scenery

8 - Blending Tutorial (Harman Dersi)

Blending Tutorial

9 - Fantasy Light Effects in Photoshop (Photoshop'da Fantastik Işık Efektleri)

Fantasy Light Effects in Photoshop

10 - Fairy Night (Peri Gecesi)

Fairy Night

11 - Light in Forest Photo Effect (Ormanda Işıklı Fotoğraf Efekti)

Light in Forest Photo Effect

12 - Mysterious Moonlit Landscape (Gizemli Ay Işığı Manzarası)

Mysterious Moonlit Landscape

13 - Angel Praying on the Cloud (Bulut Üzerinde Melek Duası)

Angel Praying on the Cloud

14 - How to Create a Fantasy Photo Manipulation (Fantastik Fotoğraf İşlemi Nasıl Oluşturulur?)

How to Create a Fantasy Photo Manipulation

15 - How to Design a Dramatic Winged Dragon with Photoshop (Photoshop İle Dramatik Kanatlı Ejderha Nasıl Tasarlanır?)

How to Design a Dramatic Winged Dragon with Photoshop

16 - How to Create a Dark Surreal Illustration in Photoshop (Photoshop'da Gerçek Dışı Karanlık Tanımı Nasıl Oluşturulur?)

How to Create a Dark Surreal Illustration in Photoshop

17 - Create Spectacular Concept Art in Photoshop (Photoshop'da Muhteşem Sanat Kavramı Nasıl Oluşturulur?)

Create Spectacular Concept Art in Photoshop

18 - Awesome Fantasy Style Castle Scene Creation in Photoshop (Photoshop'da Harika Fantezi Kale Sahnesi Oluşturma)

Awesome Fantasy Style Castle Scene Creation in Photoshop

19 - Fantasy Forest with Artemis (Artemis ile Fantastik Orman)

Fantasy Forest with Artemis

20 - Beautiful Underwater Scene (Güzel Sualtı Sahnesi)

Beautiful Underwater Scene

21 - Design an Epic Fantasy Scene with Photoshop (Photoshop ile Film Fantezi Sahnesi Tasarlama)

Design an Epic Fantasy Scene with Photoshop

22 - The Making of Secret Pond (Gizli Göl Yapımı)

The Making of Secret Pond

125 Photoshop Fırçası

1 - Dreamy Fantasies 1 (8 fırça seti)

Dreamy Fantasies

2 - Dreamy Fantasies 2 (7 fırça seti)

Dreamy Fantasies 2

3 - Dreamy Fantasies 3 (10 fırça seti)

Dreamy Fantasies 3

4 - Dreamy Fantasies 4 (8 fırça seti)

Dreamy Fantasies 4

5 - Dreamy Fantasies 5 (6 fırça seti)

Dreamy Fantasies 5

6 - Dreamy Fantasies 6 (8 fırça seti)

Dreamy Fantasies 6

7 - Dreamy Fantasies 7 (8 fırça seti)

Dreamy Fantasies 7

8 - Dreamy Fantasies 8 (12 fırça seti)

Dreamy Fantasies 8

9 - Dreamy Fantasies 9 (8 fırça seti)

Dreamy Fantasies 9

10 - Fantasy Butterflies (8 fırça seti)

Fantasy Butterflies

11 - Fantasy Lighting Kit (19 fırça seti)

Fantasy Lighting Kit

12 - Arcane Circles (23 fırça seti)

Arcane Circles

kaynak: 10steps.sg
diğer yazılarım
yazılarımı rss üzerinden takip edebilirsiniz

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

90 tane ilham alınası şahane logo...

gemeaux — Tue, 14 Apr 2009 18:31:00 GMT

hem web hem de grafik tasarımcıların her zaman ilham kaynaklarına ihtiyaçları vardır. tasarımcılar özellikle logo tasarımları için ilham kaynaklarına daha fazla ihtiyaç duyarlar.
işte tasarımcılara ilham kaynağı olabilecek 90 tane logo...

kaynak: smashingmagazine, smashingmagazine.

takip edin: bildirgeç friendfeed rss

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

47 Profesyonel Poster ve Reklam Tasarımı Dersi

gemeaux — Mon, 13 Apr 2009 20:20:00 GMT

Tutorials for Creating Professional Posters and Ads

Grafik tasarımcılarının öncelikli pazarlarından olan, poster ve reklam tasarımının, profesyonel örneklerini ve nasıl yapıldıklarını ayrıntılı olarak görebileceğiniz 47 dersi aşağıda bulabilirsiniz.

Özel Photoshop ve Illustrator Efektleri

Film Afişi

Bilimkurgu

Taşınabilir Oyun Aleti

listenini devamını görmek isterseniz, buraya tıklayabilirsiniz.

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

İyi Bir Web Sitesinin Sahibi Olması Gereken 15 Anahtar Element

gemeaux — Tue, 27 Jan 2009 18:55:00 GMT

Bir web sitesini tasarlarken ve geliştirirken göz önünde bulundurmak gereken pek çok ayrıntı vardır. Gerçekte bu ayrıntılar sonsuz bir listenin birer parçası gibi görünebilirler ancak listeye dikkatli bakıldığında bu elementlerden birkaçının diğerlerinden daha önemli olduğu ve bu elementlerin de en başarılı web siteleri tarafından kullanıldığı gözlenir.

Web sitenizin planlama aşamasını tamamladığınızda geriye kalan elementler Kullanıcı Arayüzü Tasarımı'ndan İçerik Oluşturmaya, oradan da geliştirme aşamasının kendisine kadar değişen geniş bir kategori yelpazesine yayılır. Elbette Arama Motoru Optimizasyonu (SEO) için de dikkat edilmesi gereken bazı ayrıntılar var ama şimdilik onu bir kenara bırakalım.

İşte en iyiyi hedefleyen her web sitesinin sahibi olması gereken 15 anahtar element.

1. İyi Görsel Tasarım
İlk olarak... Görsel tasarım. Sizi bilmem ama ben bir web sitesini ziyaret ettiğimde eğer site beni görsel olarak tatmin etmiyorsa o siteyi kısa sürede terk ederim.

Bunu derken her iyi web sitesinin görsel olarak güzel görünmesi gerektiğini söylemeye çalışmıyorum, ama eğer bir web sitesi 1994'ten beri güncellenmemiş gibi görünüyorsa, diğer mükemmel web sitelerinin yanında sönük kalacağı aşikardır.

Temiz ve sade bir tasarım genellikle ihtiyacınız olan tek şeydir. Sitenizdeki parıltılı nesneler de güzeldir ancak ben "az ama öz" teorisine inanlardanım. Tasarımınızın kalabalık olmasını istemezsiniz. Onun sadece güzel görünmesini, böylece rakiplerinizin önüne geçerek potansiyel müşterilerinizin dikkatini çekmesini istersiniz.

İlk izlenim önemlidir. Her ne kadar tek başına iyi bir tasarım bir kişiyi sitede tutmaya yetmese de, göz alıcı tasarımlar ziyaretçinin sitenizde daha uzun süre kalmasını sağlayacak, en sonunda da aradıkları içeriğe ulaşabilmek için daha fazla çaba sarfetmiş olacaklardır.

2. Düşünceli Kullanıcı Arayüzü

İyi tasarımla birlikte iyi bir kullanıcı arayüzü de gelir. Kullanıcı arayüz, başarılı işlevselliği olan sitelerin temelini oluşturur. Bir siteyi tasarlarken daima averaj kullanıcıyı göz önünde bulundurmalısınız. Sitenizi kimler ziyaret edecek - ideal müşteriniz kimler? Teknolojiye yatkınlar mı? Bilgisayar bilgileri iyi mi?

İdeal ziyaretçinizin bir görselini kafanızda canlandırmak ve siteniz için yapacağınız tasarımı planlandırırken bunu göz önünde tutmak daima yardımcıdır. Sitenizi ziyaret eden ziyaretçilerin birşey satın almadan ya da sitenize abone olmadan önce onların ihtiyacı olabilecek her şeyi sunduğunuzdan emin olun.

Navigasyonunuzun kolayca farkedilebilebilir olmasını ve site genelinde tutarlı bir şekilde kalmasını sağlamalısınız. Hem ana navigasyon üzerinde hem de içerik alanınızdaki bağlantılarda kullanıcının nereye tıklaması gerektiğini kolayca anlamalarını sağlayın.

3. Öncelikli navigasyonunuz görünebilir olsun
Gezinmesi kolay bir web sitesi sahibi olmanın bir bölümü, önceliğin navigasyonda olmasını sağlamakta yatar. Sitenizin anahtar bölümlerine bağlantılar içeren kesim, sitenizin ilk bakışta görünebilir alanında olmalıdır. Günümüzün büyüyen monitör boyutları göz önüne alındığında görünen kesim site tasarımınızın üst kısmındaki 500-600 piksellik kısma işaret ettiğini unutmayın.

Bu alan içerisinde yer alabilecek elementler logonuz (ki bu logo sitenizin ana sayfasına bağlantı içermelidir) ve bunun yanısıra sitenizin ana alanlarına bağlantılar olabilir. Bu kısmda eğer alt sayfalara bağlantı verebilirseniz çok güzel olur ancak çoğu durumda bu, tasarımınızın kalabalık olmasına yol açacaktır.

Örneğin "Ana Sayfa | Hakkında | Servisler | SSS | İletişim" bağlantılarını sitenizin en üst kısmında kolay bulunabilecek bir yere yerleştirebilirsiniz. Biyografi ve Özgeçmiş gibi alt sayfaları, sitenizin yan çubuğuna ya da dahil oldukları sayfa başlığının altına bağlantı olarak yerleştirebilirsiniz.

Burada önemli olan şey tutarlılıktır. Hem ana bağlantılarınızın hem de alt bağlantılarınızın sitenizin geneli boyunca aynı yerde olmasına özen gösterin.

Bu Konu İle İlgili Aşağıdaki Yazıları da Okumak İsteyebilirsiniz

jQuery'nin En Pratik ve Yaratıcı 20 Kullanımı

4. Altlık Kısmında Navigasyonu Tekrar Edin
Eğer sitenizdeki ana navigasyon için görseller (ya da flash) kullanırsanız, sitenizin altlık kısmında navigasyon içeriğini tekrar etmeniz önemlidir. Sitenizin üst kısmında metin bağlantılar kullanıyor olsanız bile altlık kısmında bu bağlantıları yinelemeniz yardımcı olacaktır. Ziyaretçilerinizin sitenize baktıklarında aradıkları içeriğe kolayca ulaşabilmelerini sağlamalısınız.

Çoğu zaman altlık kısmı "Kullanım Sözleşmesi" gibi diğer bilgileri de içerebilir. Bu alanda bulunması kolay olması gereken ancak üst kısımdaki ana navigasyon bölümünde yer alacak kadar önemli olmayan bağlantıları listeleyebilirsiniz.

5. Anlamlı İçerik
"İçerik her şeydir" sözünü daha önce duymuşsunuzdur. İlk bakışta göze hoş gelen bir web sitesi sahib olabilirsiniz ancak o sitenin içeriği doyurucu değilse, ziyaretçinizin sitenizde uzun süre kalmayacağından emin olabilirsiniz.

Web siteniz için içerik yazarken şirketiniz, ürünleriniz, hizmetleriniz gibi öğeler hakkında yardımcı ve öğretici bilgiler sunabilmeniz önemlidir. Eğer bir blogunuz varsa, uzmanlık alanınıza yönelik bilgilendirici makaleler inanılmaz derecede yardımcı olacaktır.

Kendinizi ya da şirketinizi satmanız her ne kadar önemli olsa da, bunu ziyaretçilerinizin gözüne sokmamalısınız. Özellikle bloglarda blogunuzu ziyaret eden kullanıcıların daima sizin kişisel yaşamınız hakkında birşeyler okumak istediğini sanmayın - ziyaretçileriniz onlara nasıl yardımcı olabileceğinizi bilmek için oradalar.

6. Düzgün Hakkında Sayfası
Bu makalenin yazarının sitesindeki 10 popüler sayfası arasında (ana sayfadan, blogdan, 3 özel blog girdisinden ve portfolyo sayfasından sonra) Hakkında sayfası gelmektedir. İster inanın ister inanmayın, sitenin Hakkında bölümü, hizmetler ve portfolyo sayfalarından daha çok dikkat çekmektedir.

Bunun tek açıklaması vardır ki o da insanların meraklı olduğudur. İnsanlar bir şirketin ya da blogun ardında kimlerin olduğunu bilmek isterler. Ben biyografi sayfama kendi fotoğrafımı eklemek konusunda biraz utangaçtım, ancak birkaç ay önce en sonunda kendi fotoğrafımı ilgili sayfaya ekledim. Meraklılık hissinin neler yaptırabileceğine inanamazsınız. Şöyle bir baktığımda ben de kendimi sık sık bir tasarımcının ya da yazarın Hakkında sayfasını okurken buluyorum.

Kendi geçmişiniz ve bunun işinize ya da uzmanlık alanınıza olan etkileri hakkında bilgilerden bahsedin. Hakkında sayfası potansiyel müşterilerinize kendiniz hakkında biraz daha fazla bilgi verir ve sitenizin daha "kişisel" bir görünüme bürünmesini sağlar. Eğer yazınızı okuyorlarsa ve sizin hakkınızda biraz daha fazla şey bilmek istiyorlarsa, Hakkında sayfası sayesinde sizinle daha iyi bir bağ kuracaklar ve başka bir seviyede sizinle daha iyi iletişim kurabileceklerdir.

Potansiyel müşteriler genellikle, azıcık bile kişisel olmayı reddeden karaktersiz kurumların aksine arkasında "gerçek" kişilerin olduğu şirketleri seçerler.

7. İletişim Bilgisi

Sizinle nasıl iletişim kurabileceğini bulamamaktan başka hiçbir şey potansiyel müşteriyi bu kadar geri çekmez. Eğer hizmetlerinizle ilgileniyorlarsa ve sizinle iletişim kurup sizi kiralayabilecek basit bir sayfa dahi bulamıyorlarsa, kendinizi yarışmayı kaybetmiş olarak görebilirsiniz.

İdeal olarak tek bir iletişim yönteminden daha fazlasını vermek isteyeceksinizdir. En azından bir elektronik posta adresi ve iletişim formu. Sizi daha "gerçek" kılmak için ise bir telefon numarası ve eğer mümkünse bir posta adresi eklemeniz önerilir. Pek çok bireysel çalışanın (freelancer) evlerinden çalıştığını biliyorum, zira ben de öyleyim. Bu durumda ev telefonunuzu sitenizde yayımlamak istemeyebilirsiniz. Bu sebeple sadece iş görüşmeleri için kullanacağınız bir hat alarak ve bir posta kutusu kiralayarak bu sorunun önüne geçebilirsiniz.

Bu yöntemlerin vergiden düşülebildiğini ve sizi sitesinde sadece elektronik posta adresi sunanlardan çok daha profesyonel göstereceğini unutmayın. Aynı gemideki diğer evden çalışanlar için bu bir değişiklik arz etmeyecektir. Ancak eğer büyük boyutlu ya da kurumsal müşterilerle çalışırsanız, ulaşılabilir bir telefon numarası ve posta adresi, kararlılığın bir göstergesi olacak ve onların bir başkası yerine sizi tercih etmelerinde küçük bir rol oynayacaktır.

8. Arama
Eğer büyük bir web siteniz ya da blogunuz varsa, arama özelliği kullanmanız çok yardımcı olacaktır. Arama özelliği olmadan sitenizdeki yüzlerce sayfa arasında ziyaretçinizin aradığını bulmasını beklemek doğru olmaz. Eğer potansiyel müşteriniz aradıklarını bulamazsa, ancak bir başka sitede bulursa, sizin hizmetiniz daha iyi olsa bile "bulunamadığı" için potansiyel müşteriniz diğerini seçecektir.

Siteniz üzerinde Google Arama özelliğini kullanabilir ya da eğer WordPress (ya da diğer bloglama platformu veya içerik yönetim sistemi) kullanıyorsanı, bu platformlar genellikle bütünleşik arama motoru içerirler. Statik HTML sitesi üzerinde arama motoru inşa etmek her ne kadar kolay olmasa bile sizin için bunu yapabilecek servisler yok değil.

9. Kayıt / Abonelik

Eğer web siteniz düzenli olarak içerik sunuyorsa (örneğin bir blog), kullanıcılarınızın bu içeriğe kolayca abone olabilmelerini isteyeceksinizdir.

Eğer WordPress blogunuz var ise bu eklemesi gerçekten kolay olan bir başka özelliktir. Öntanımlı olarak WordPress üzerinde besleme (feed) adresi bulunur. Ancak eğer bu durumu kontrol altına almak istiyorsanız FeedBurner üzerinde ücretsiz bir hesap açabilirsiniz. Daha da iyisi FeedBurner FeedSmith eklentisini kullanarak blogunuzdaki tüm içeriğin otomatik olarak FeedBurner hesabınıza aktarılmasını sağlayabilirsiniz. Bu sayede içeriğinize abone olan kullanıcılar üzerindeki kontrolünüz artacaktır.

Eğer bir blogunuz yoksa ancak buna rağmen elektronik posta bildirileri için abonelik sunmak istiyorsanız örneğin, bunu sizin için sağlayacak pek çok şirket bulunuyor. Bu şirketler sitenize ekleyebileceğiniz ve bu sayede elektronik posta listeleri oluşturup onları yönetebileceğiniz bir kod sunarlar (bu arada FeedBurner da elektronik posta adreslerini toplamayı destekliyor). Bazı durmlarda elektronik posta adresleri RSS aboneliklerinden daha iyidir, zira potansiyel alıcılarınızın elektronik posta adreslerini depolayabilirsiniz. Abonelik sayılarının ve diğer genel istatistiklerin izini sürebilirken, RSS aboneliği olanlar güncellemelerinizi besleme okuyucuları aracılığı ile alabilir ve herhangi bir elektronik posta adresi vermek zorunda kalmazlar.

Bu Konu İle İlgili Aşağıdaki Yazıları da Okumak İsteyebilirsiniz

10 Kullanışlı Web Uygulaması Arayüzü Tekniği

10. Sitemap (Site Haritası)
İki tür site haritası bulunur - biri insanlar, diğeri arama motorları içindir. Bir HTML (ya da PHP vs.) site haritasın sitenizi ziyaret eden ziyaretçiler için paha biçilmez bir araç olabilir ziya bu sayede sitenizin içeriğinin genel bir görünümüne ulaşarak aradıklarını kolayca bulabilirler.

Bir web sitesindeki tüm sayfaların bir listesini oluşturan bir site haritası özellikle sitenize arama özelliği ekleyemediğiniz durumlarda çok kullanışlı olacaktır. Sitenizin altlık kısmına ekleyebileceğiniz bir diğer bağlantı da site haritası olabilir. İyi bir site haritası sitenizdeki her bir sayfaı hiyerarşik olarak listeleyerek sayfalar arasındaki ilişkileri ve onların alt ve alt-alt sayfalarını gösterir.

11. Tasarımı İçerikten Ayırın
Anahat ve tasarım için HTML tablosu kullandığımız günler geride kaldı. Günümüzde en iyi şekilde geliştirilmiş siteler XHTML ve CSS kullanarak tasarım elementleri ile içerik elementlerini birbirlerinden ayırıyorlar.

<div> etiketlerini kullanarak sayfanızdaki çeşitli metin ve görsel alanları için kapsayıcılar oluşturabilirsiniz. CSS dosyası kullanılmadığında tek göreceğiniz şey metindir, ki bu tam da arama motorlarının görmek istediği şeydir.

Harici bir CSS dosyasına bağlantı vererek içeriğinizi tasarımdan ayırabilirsiniz. Bu sayede HTML sayfanızın kaynak kodunda metinden başka neredeyse başka hiçbir şey yer almaz. Ayrı bir CSS dosyası yazıtiplerini, renkleri ve arkaplan görselleri gibi site tasarımınızı ilgilendiren elementleri içerirler.

İşin bir diğer güzel yanı ise sadece bir CSS dosyası üzerinde güncelleme yaparak sitenizin tamamında görsel değişkliğe gidebilecek olmanız. Bu sayede örneğin ana bağlantı renginizi maviden yeşile dönüştürmek için sitenizdeki her bir sayfayı değiştirmeniz gerekmez.

İçeriğin tasarımdan bu şekilde ayrılması ile arama motorları karmaşık kodlar arasından içeriğinizi çekip çıkarmak zorunda da kalmazlar. Harici dosya kullanımı ile sayfanızın açılma süresi de kısalacaktır ki ziyaretçilerinizin istediği şey de budur.

Bu Konu İle İlgili Aşağıdaki Yazıları da Okumak İsteyebilirsiniz

Web Tasarımcılarının Kodlama Yapmalarının 6 Gereği

12. Geçerli XHTML / CSS
Sitenizi XHTML ve CSS kullanarak kodlamak yetmez. Kodun doğru olması gerekir. Internet üzerinde kaynak kodunuzun doğruluğunu test edebilecek paha biçilmez iki adet araç bulunmaktadır.

Geçerli kod yazmak için pek çok sebep bulunmaktadır. Doğrulanabilir bir kod yazarak sitenizin farklı tarayıcılarda aynı biçimde görünmesine bir adım daha yaklaşmış olursunuz (detayları için 13. adımı okuyun) ve bu arama motorlarına da yardımcı olacaktır. Eğer siteniz geçerli web standartları kullanılarak geliştirilmişse, arama motorları içeriğinize kolay bir şekilde ulaşacaktır.

Doğrulanabilir kod kullanarak işinizin ehli olduğunuzu göstermiş olduğunuzdan bahsetmeme bile gerek yok. Evet, müşterilerinizin pek çoğu aradaki farklı bilmeyecektir, ancak bazıları bu farkı bilir, özellikle de sizden standartlarla uyumlu kod yazmanızı isteyen müşteriler bu farkı önemserler.

Bunun dışında diğer web geliştiricileri de muhtemelen görünen dağın ardında neler olup bittiğini görmek için sitenizin kaynak kodunu kontrol edeceklerdir... Hem meraktan, hem de sırf bunu yapabildikleri için!

13. Çapraz Tarayıcı Uyumluluğu
Firefoxla yatıp kalkıyor olabilirsiniz ancak bu müşterinizin de sizinle aynı şeyi yaptığı anlamına gelmez. Müşterinizin Internet Explorer kullanıyor olma ihtimali gerçekten yüksektir. Hatta ne yazık ki Internet Explorer 6 bile kullanıyor olabilirler (beni bu konuda konuşturmayın lütfen. Internet Explorer'ın defolup gitmesini isteyen tek geliştirici olmadığımı söyleyeyim gitsin).

Hem kendi sitenizin hem de müşterileriniz için geliştirdiğiniz sitelerin farklı tarayıcılar üzerinde aynı şekilde görüntülenebilmesi önemlidir. Eğer sitenizi farklı platformlar üzerinde de aynı şekilde görüntüleyebilirseniz bu size artı puan kazandırır. Her ne kadar pek çok son kullanıcı PC kullanıyor olsa da, Mac kullanan kullanıcı sayısında özellikle son iki yıldır büyük artış gözlenmiştir. Eskiden sadece tasarımcıların ve profesyonellerin kullandığı bir platform olan Mac, günümüzde her kesim taradından kullanılmaktadır. Bu sebeple sitenizin Mac üzerinde de PC'de göründüğü gibi görünmesini sağlamak önemlidir.

Ne yazık ki pek çok kişi hem PC hem de Mac sahibi olacak kadar şanslı değildir (Linux ve türevlerinden bahsetmiyorum bile) ancak Browser Shots adı verilen bir sitenin yardımı ile sitenizin adresini girip farklı platformlar altında farklı tarayıcıları seçerek sitenizin ilgili tarayıcılar üzerindeki ekran görüntüsüne ulaşabilirsiniz. Eğer PC'de Windows Vista kullanıyorsanız ve Internet Explorer 6'ya erişiminiz yoksa bu durum çok kullanışlı olabilir.

Bu Konu İle İlgili Aşağıdaki Yazıları da Okumak İsteyebilirsiniz

14. Web İçin Optimize Edilmiş Görseller
Web için tasarım yaptığınızda tüm görsellerinizi sıkıştırılmış bir biçimde kaydetmeniz önemlidir. Ancak sıkıştırmada aşırıya kaçmamalısınız zira o zaman görselin kalitesi düşecektir. Kaliteyi kabul edilebilir düzeyde tutarak sıkıştırma yapmanız yapılabilecek en doğru şeylerden biridir.

Eğer baskı işi ile haşır neşirseniz, 300dpi'nin standart olduğunu bilirsiniz. Ancak bu oran web siteleri için geçerli değildir. Ekran için tasarım yaptığınızda görsellerinizi 72dpi çözünürlükte kaydetmeniz gerekir. Bu çözünürlüğü kullanırsanız hem dosya boyutu azalacak, hem de ilgili görselin yüklenme süresinde önemli bir düşüş gözlenecektir.

Adobe Photoshop gibi programların "Web İçin Kaydet" özelliği bulunmaktadır. Bu özellik sayesinde görsellerinizi otomatik olarak 72dpi çözünürlükte kaydedebilirsiniz. Yine bu ve bunun gibi programlar, ilgili görselin kaydedilmesi sırasında size sıkıştırma ile ilgili bazı ince ayarlar yapabilmenizi sağlayacak ayar pencerelerini de sunarlar. Web için seçmeniz gereken biçimin, sitenizin içeriğine ve hedef kitlenize göre değişmekle birlikte png, jpg ya da gif olması gerektiğini hatırlatmak isterim.

Bu Konu İle İlgili Aşağıdaki Yazıları da Okumak İsteyebilirsiniz

15. İstatistikler, İzleme ve Analiz
Her ne kadar bu element sahne arkası için geçerli olsa ve bir ziyaretçi olarak bilmeniz gerekmeyen bir element olsa da, bir web sitesi sahibi olarak bağımlılık derecesinde olmasa (olmaması gerekse) bile hayati önem taşımaktadır.

Internet üzerinde aşağıdaki bilgileri size sunabilecek pek çok analiz ve istatistik servisi bulunmaktadır.

Sitem kaç kez ziyaret ediliyor?
Kaç adet tekil ziyaretçi sitemi takip ediyor?
İnsanlar sitemi nereden buluyorlar?
Beni hangi arama terimleri sayesinde buluyorlar?
Hangi web siteleri bana bağlantı vermiş?
Sitemdeki en popüler sayfalar hangileri?
Ortalama ziyaretçim kim (platform / tarayıcı / ekran çözünürlüğü)?

İyi bir analiz programı ile neleri takip edebileceğinizi gördüğünüzde şaşırabilirsiniz. Belki de bu iş için kullanabileceğiniz en etkili (ve ücretsiz) çözüm Google Analytics olacaktır.

Eğer sitenizin performansını izlemek ve sitenizi nasıl daha da geliştirebileceğinizi görmek istiyorsanız, iyi bir istatistik servisi kullanmak çok önemlidir.

Bu Konu İle İlgili Aşağıdaki Yazıları da Okumak İsteyebilirsiniz

Şimdi sizin sıranız... Sizce Hangisi En Önemli?
Tasarım, geliştirme ve içerik açısından bir web sitesinin sahibi olması gereken en önemli özellik sizce nedir? Sizi bir şirketin web sitesini zitarettiğinizde o şirket ile birlikte çalışmaktan vazgeçirecek site özelliği hangisidir?

Aslında iyi bir web sitesinin sahibi olması gereken özellikler 15'ten çok daha fazladır ancak ben bu makalemde kendimce en önemli özellikleri ve değerleri listelemeye çalıştım. Sizin de bu listeye eklemek istedikleriniz var mı? Lütfen yorumlarınızla görüşlerinizi paylaşın.

Kaynak: Freelance Folder

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

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

jQuery Sağ Tıklama ve Dosya Ağacı Çalışmaları

gemeaux — Tue, 23 Dec 2008 18:18:00 GMT

Web sitelerimizde kimi zaman sağ tıklama tuşundan gelen seçenekleri düzenlemek, bir biçim vermek isteyebiliriz. Bunun için yapılmış çok hoş bir jQuery Ajax çalışması mevcut.

Context Menu - Right Click (Sağ Tıklama Menüsü)

Bu menüde cut (kes) ve copy (kopyala) seçeneklerini kapatmak isterseniz (disable) bu da düşünülmüş.

Kopyala ve Kes Kapalı

jQuery Ajax ile çalışılmış bir diğer uygulama ise Dosya Tarayıcı Ağaçları (File Browser Tree). Yine çeşitli düzenlemeler, ayarlamalar yapmak mümkün.

Ayarlanabilir Dosya Tarayıcı Ağacı

Dosyaların açılmasında, kapanmasında ve yükleme aşamasında çok esnek bir tasarım ile dikkat çeken uygulamada dosyaların açılmasında "çift tıklama" seçeneği bile koyabiliyorsunuz.

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