bildirgec.org - libabom - beğendikleri

En popüler çapraz tarayıcı testleri

libabom — Thu, 28 Jan 2010 07:42:00 GMT

Web tasarımındaki en büyük sorunlardan biri de çapraz tarayıcı sorunlarıdır. Herhangi bir tarayıcıda tasarladığınız sayfa diğer tarayıcılarda farklı yorumlanarak tasarım hatalarına yol açabilir. Bunun önüne geçmek için birçok çapraz tarayıcı testi bulunmakta. Bu testlerde sayfalarınızı test ederek tüm tarayıcılara göre hazırlayabilirsiniz. İşte popüler tarayıcı testleri;

Adobe Browser Lab

Çapraz tarayıcı testlerinde hızlı ve kolay çözümler sunan çok kullanışlı bir adobe air uygulaması.firefox, chrome, internet explorer, safari gibi tarayıcılar ile sayfanızın çift taraflı karşılaştırmasını yapabilirsiniz. Ayrıca Dreamweaver CS4 ekletisi sayesinde browser lab'a bağlanarak çalışmalarınızı anında test etme imkanınız bulunuyor.

Browser Shots

Farklı işletim sistemlerinden (Windows, Linux, Mac OS) farklı tarayıcılar seçerek web sitenizi çapraz tarayıcı testine sokabilirsiniz. Sayfanızı 79 adet tarayıcı ile test etmenize imkan veriyor. Sayfa görüntülerini anında size sunuyor.

SuperPreview

SuperPreview, Microsoft'un yapmış olduğu bir çapraz tarayıcı testi.İçerisinde internet explorer, firefox ve safari sürümlerini bulunduran bir masaüstü uygulaması. Elementlerin css özelliklerini görmenize olanak veriyor.

Litmus

Birçok büyük şirketin kullandığı bir çevrimiçi uygulama. Ücretsiz sürümü bulunduğu gibi ücretli sürümleride bulunmakta. Ücretsiz sürümünde yanlızca internet explorer ve firefox karşılaştırması yapabiliyorsunuz. Aylık 39 $ kullanmak mümkün.

Cross Browser Testing

Tarayıcınızın diğer internet tarayıcılarındaki işlevselliğini ölçen kullanışlı bir çevrimiçi çapraz tarayıcı testi. internet explorer, firefox, opera, safari gibi birçok tarayıcı seçeneği bulunmakta. Web sitenize genel olarak bakmak için harika bir uygulama.

Ayrıca Bakınız;

angelsdemos: Blog | Twitter | Email | RSS

Kaynak ; wdl

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

Tasarımcılar İçin 22 Harika Adobe AIR Uygulaması

libabom — Mon, 14 Sep 2009 16:37:00 GMT

Adobe AIR, masaüstü uygulamaları için popüler bir platform olmuştur. Eğer bir tasarımcı iseniz, adobe air sizin işlerinizi kolaylaştıracak birçok uygulama sunar. Bu yazıda tasarım ve resim düzenleme ağırlıklı size yardımcı olacak harika uygulamalar yer almaktadır.

Eğer Adobe AIR yüklü değilse get.adobe.com/air adresinden ücretsiz indirebilirsiniz.

1. ImageSizer

Resimleri kolayca toplu bir şekilde yeniden boyutlandırabileceğiniz, en uygun hale getirebileceğiniz ve yeniden adlandırabileceğiniz faydalı bir uygulama.

2. Contrast-A

Tasarımcılar için kolay renk şemaları oluşturmak kullanabileceğiniz Adobe AIR uygulamasıdır.

3. Color Browser

Tasarımlarınız için daha sonra kullanmak için renk paletlerini saklayabileceğiniz harika bir uygulama.

4. Font Picker

Projeniz için en uygun yazı tipini seçmenize yardımcı olur.

5. XeIMG Image Editor

Basit ve ücretsiz bir resim editörüdür.

6. WebKut

Bir web sayfasını veya belirlediğiniz bir bölümün ekran görüntüsünü alan Adobe AIR uygulamasıdır. 3 şekilde ekran görüntüsü alabilirsiniz. Sayfanın tamamı, ekranda görünen kısım ve seçili bir alan.

7. SWFShot

Sabit sürücünüz üzerinde bulunan flash içeriği yüksek çözünürlüklü resimler oluşturmanızı sağlar.

8. Caliper Project

Harika bir ölçüm aracıdır. Ekranda istediğiniz bir bölümü kolayca ölçebilirsiniz.

9. iPlotz

Tasarımcıların takım halinde çalışması için kullanabileceği harika bir araç. Proje yönetim araçları da bulunuyor.

10. Fractal4D

Vektör veya png formatında çizimler oluşturabilirsiniz.

11. Designview

Tasarımcıların kolayca grafik arayüzü oluşturmasını sağlar.

yazının devamı için buraya tıklayın.

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

Acemiler İçin 10+ Adobe Air Video Dersi

kaynak: sixrevisions.com

yazılarımı takip edebilirsiniz.

blog | twitter | friendfeed | delicious | rss

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

Photoshop ile web tasarım dersleri

libabom — Thu, 21 Jan 2010 16:01:00 GMT

Web tasarımında photoshop önemlidir.html ve css kodlarından farklı olarak görselliği bize sunar.Aşağıdaki farklı sayfa tasarımlarını ile ilham kaynağınızı geliştirebilir veya photoshop ile web sayfası hazırlarken nelere dikkat etmeniz gerektiğini daha iyi kavrayabilirsiniz. Web sitenizin türüne göre birçok sayfa tasarım örneği bulunmakta.İşte pohotoshop ile web tasarım dersleri;

Graphic Design Studio
(Grafik Tasarım Stüdyosu oluşturma)

Create an awesome software layout
(Yazılım düzeni oluşturun)

Sleek portfolio layout
(Şık Portföy düzeni)

Create a dark horror portfolio layout
(Karanlık, korku portföy düzeni oluşturma )

Create a business wordpress template
(Wordpress business tema oluşturma)

Create an awesome dark hosting layout
(Sunucu sayfası oluşturma)

Create an e-commerce web layout
(e-ticaret sayfası oluşturma)

Create a clean web 2.0 business layout with photoshop
(Temiz web 2.0 business sayfası oluşturma)

Create a photoshop template for drupal or wordpress
(Photoshop ile Drupal veya Wordpress Teması oluşturma)

Create a grunge web design
(Grunge web tasarımı oluşturma)

Create a grunge website layout in photoshop
(Photoshop ile Grunge website düzeni oluşturun)

Create a vibrant modern blog design
(Canlı blog tasarımı oluşturun)

Ayrıca Bakınız ;

angelsdemos: Blog | Twitter | Email | RSS

Kaynak ; gfxtoolkit

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

20 Mükemmel Javascript Navigasyon Teknik ve Örneği

libabom — Sun, 03 May 2009 11:55:00 GMT

Javascript etkileşim ve geri bildirim eklemeniz için kolaylık sağlar. Bu yazıda javascript hakkında farklı ve çok güzel bilgiler edinebilirsiniz.

1 - MenuMatic

Dikey ve yatay şekilde bir menü örneğidir.

2 - Animated Menu using jQuery

Menünün üzerine gelindiğinde bir hareket verilmesini sağlayan örnekte bilgisayarınıza indirebilmeniz için psd dosyası da bulunmaktadır.

3 - Garagedoor Effect using jQuery

Jquery kullanarak efekt oluşturuluyor.

4 - JGlide Menu

Eşsiz bir menü sistemidir. Menüye tıklayarak sürüklenmesini sağlayabilirsiniz.

5 - Vertical Sliding jQuery Menu

Açılabilir bir menü örneğidir.

6 - Perspective Tabs

Sekmeleri animasyon ile kaydırabilmek için bu teknikten yararlanabilirsiniz.

7 - Vertical Digg-like Menu

Basit javascript kullanılarak oluşturulan dikey menü örneğidir.

8 - LavaLamp

Jquery kullanılarak css sliding door tekniğini görebilirsiniz.

9 - Fisheye Menu

Çok güzel bir menü örneği.

10 - Simple JavaScript Accordions

Bu harika menü örneğini sitenize entegre edebilirsiniz.

yazının devamı için buraya tıklayın.

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

İlham Kaynağı 50 Şık Navigasyon Menü Tasarımı

Harika Web Tasarımı Yaratıcılığı: 50+ Örnek ve İlham Kaynağı

Web Tasarımcılar İçin 20 Mükemmel Eğitim Sitesi

30 Olağanüstü Css Menü Tekniği

kaynak: sixrevisions.com
diğer yazılarım

Bu yazı libabom 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 10 jquery slider eklentisi

libabom — Sat, 18 Apr 2009 07:01:00 GMT

jquery için hazırlanmış bu eklentiler ile web sayfanıza oldukça kolay ve kullanışlı slider'lar (kaydırma) ekleyebilirsiniz.

Accessible News Slider

jQuery.spinTheWheel.js

News Ticker Pro

Stinky Slider

CrossSlide

kaynak: ajaxline

takip edin: bildirgeç friendfeed rss

Bu yazı libabom 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 CSS Framework'ler

libabom — Sat, 12 Dec 2009 15:49:00 GMT

Css Framework türkçeye "css iskeleti" olarak çevrilen, css ve html tabanlı web sitelerinin anahtar ve diğer yardımcı elemanların kısmen ve değişken olarak bizim için hazırlanmış halidir. Bu sayede karmaşık web sitelerini çok daha kolay biçimde hazırlayabiliriz. Ayrıca büyük ölçüde zaman kolaylığı sağlar. Ön önemli artılarından biri tüm tarayıcalarda büyük ölçüde çalışabilmeleridir. Normalden daha hızlı web sayfamızı geliştirebiliriz. Ayrıca gereksiz kod israfından da kurtulmuş oluruz. İşte en iyi css framework'leri;

Blueprint

Blueprint css başında harcanan zamanın azalmasını sağlıyor. Birçok eklenti sunmakla beraber aynı zamanda oldukça kullanışlı. Tarayıcılar arasındaki css farklılıklarını tamamen ortadan kaldırıyor. Birçok eklenti, editör, buton vb. kullanılabilir. Şu ana kadar hazırlanmış css iskeletlerden en popüleri. İskeleti css ve html içeren tüm projelenizde kullabilirsiniz.
Dokümantasyon : Wiki formatında
Topluluk : Twitter ve Facebook Fan
Lisans: MIT ve GPL
Boyut: 3.84mb.
Örnek Proje: WebAvanta

YUI 2: Grids CSS

4 tane ön tanımlı sayfa genişliğini, 6 tane ön tanımlı şablonu ve 2, 3 ya da 4 sütunlu alt bölümleri birbirinin içerisine yerleştirmeyi destekler. 4KB’lık dosya 1000′in üzerinde sayfa anahat kombinasyonunu içerir
Dokümantasyon: Örnekleme
Topluluk : Forumu bulunmakta
Lisans: BSD Lisans
Boyut: 13mb.
Örnek Proje: Symfony-Framework.nl

YAML

Html ve css çatısı sayesinde özelleştirilen anahatlar oluşturabilirsiniz. Çatı son derece değişken hazırlanmış ve kullanımı son derece basit.
Dokümantasyon: Çerveler içine yerleştirilen ek bilgiler
Topluluk : Forumu bulunmakta
Lisans: Creative Commons Attribution 2.0 License and Commercial License.
Boyut: 606 kb.
Örnek Proje: ShlagerBand

Elastic

Web tabanlı arayüzlerin anahatlarını rahatlıkla oluşturabileceğiniz bir css çatısı. Anahat teknikleri gözönüne alınarak 4 sütunu bulunmakta. Fakat dilerseniz sınırsız sayıda sütun ekleyebilirsiniz. Ayrıca sabit ve yüzen anahatları kolayca eklemenize olanak verir.
Dokümantasyon: Örnekleme ve Klavuz
Topluluk : Facebook Fan,Google Grubu, IRC kanalı
Lisans: BSD Lisans
Boyut: 2.02mb
Örnek Proje: Freshout

960 Grid System

Büyük ölçüde zaman kolaylığı sağlayan bir araç. Farklı tarayıcılarda çıkan hata oranı çok düşük fakat sıfır değil. Tüm web uygulamalarında kullanabileceğiniz bir sistem ve karmaşık anahatları kolayca oluşturabilmenizi sağlıyor.
Dokümantasyon: Öğretici Klavuzlar
Topluluk : Galeri ve Twitter
Lisans: GPL ve MIT
Boyut: 363kb.
Örnek Proje: Four Kitchens

SenCSs

Anahatları düzenleyemeceğiniz fakat anahat dışındaki her şeyi değiştiribeliceğiniz bir css çatısı. Anahatları kendileri oluşturmak isteyen web tasarımcıları için hazırlanmış.
Dokümantasyon: Çok zayıf pek bilgi verilmemekte
Topluluk : Blog ve Twitter
Lisans: MIT
Boyut: 6.5mb.

Kaynak ; ajaxline

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

Zen Coding: Html / CSS yazmanın en hızlı yolu

libabom — Thu, 26 Nov 2009 10:24:00 GMT

Zen Coding

Bir website tasarımında html kod yazarken ne kadar zaman harcarsınız? Etiketler, özellikler, tırnak işaretleri, parantezler vs. Özellikle de benim gibi bütün karakterleri sıfırdan tek tek yazan biriyseniz sizi bu zaman kaybından kurtaracak ve çok kolayca html/css kodu oluşturabileceğiniz bir uygulamadan bahsetmek istiyorum: Zen Coding.

Zen Coding

html/css kodu yazmanın en hızlı yolu olan Zen Coding Sergey Chikuyonok tarafından geliştirildi. Hem Mac hem de Windows ortamında çalışabilen versiyonları olan Zen Coding'i kullandığınız editöre (dreamweaver, GEdit vs) entegre ederek iç içe geçmiş en karmaşık div yapılarını oluşturma zahmetinden kısa zamanda kurtulabileceksiniz.

Basit bir örnek verecek olursam,

Örneği biraz daha geliştirelim.

Gördüğünüz gibi sadece küçük bir formül yapısı ile en basitten en zor div yapısına kadar bütün html kodunu zaman kaybetmeden ve uğraşmadan oluşturabiliyorsunuz. Örnekler sizi yanıltmasın. Sadece "div" tag'lerini değil, "img", "a", "dt", "ul", "li" gibi html yapısında bulunan bütün tag'leri destekleyen bir uygulama bu.

Zen Coding

Daha karmaşık bir yapıyı nasıl basitçe oluşturabileceğinizi anlatan videoyu buradan izleyebilirsiniz.

Html ile uğraşan bir çok kişinin işine yarayacağına eminim. Kesinlikle denemeye değer bir uygulama.

İndirmek isteyenler için Download Linki

Ayrıca ingilizcesi olanlar daha ayrıntılı açıklamayı kaynaktan okuyabilirler.

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

Kendi reset.css'inizi oluşturun

libabom — Thu, 25 Jun 2009 08:35:00 GMT

CSS'e yeni başlayanlar reset.css dosyasının önemini tam olarak kavrayamamış olabilirler. Herbir tarayıcı (browser)'nın kendi "default" (varsayılan) netrenderer'ı olduğunu öğrenmeden önce kendisini "buradaki boşlukta neyin nesi ?" gibi sorularla boğuşurken bulacaktır. Bunu gibi baş ağrılarından kurtulmak için kendi reset.css dosyanızı yazmanız gerekir. Reset.css dosyasını kendiniz yazmasanız da
buradan(YUI), buradan(Eric Meyer) ve buradan(David Walsh) bulabilirsiniz.

Kendi reset.css dosyasını yazmak isteyenlerle devam edelim.

1.Adım: Margin ve Padding'leri Sıfırlayalım

Varsayılan ayar olarak tarayıcılar sayfalarınıza margin'ler ve padding'ler ekleyecektir. Örneğin tarayıcıların çoğu body elementine 6px'lik bir margin değeri verir, bunu farkettiğinizde

body {margin-top:0;}

özelliğini eklemek isteyeceksiniz. Fakat bunları eklemek yerine browser'ların kendi kendine verdiği marginleri ve paddingleri sıfırlamak daha doğru olacaktır.

İlk olarak yapmanız gereken yeni bir css dosyası oluşturmak ve adını reset.css yaptıktan sonra sayfamızın kök dizinine kaydetmek. Css dosyamızı oluşturduktan sonra geçerli HTML sayfamızın

<head> </head>

tag'leri arasına reset.css dosyasını şu şekilde iliştiriyoruz:

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

CSS dosyamızı html'e ekledikten sonra tekrar reset.css dosyamıza gelerek genel kullanımı olan elementlerin margin ve padding değerlerini sıfırlayan kodumuzu yazıyoruz.

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,
ol, li, dl, dt, dd, form, a, fieldset, input, th, td
{
margin: 0; padding: 0; border: 0; outline: none;
}

2.Adım: Elementlerinizi Kontrol Altına Alın

Heading elementlerinin font boyutları eşitleyen bir css kodu olmadan kullanıldığında tarayıcıdan tarayıcıya değişiklik gösterecektir. Varsayılan font boyutunu %100'e getirdiğinizde bu değişimlerin önüne geçebilirsiniz.

h1, h2, h3, h4, h5, h6
{
font-size: 100%;
}

Ve sonra elementlerimizin margin, padding ve satır arası boşluklarını yineleyelim. Aynı zamanda listeleme elementlerinin listeleme tipinide "none" yapmak işinize yarayacaktır.

body
{
line-height: 1;
font-size: 88%;
}
h1, h2, h3, h4, h5, h6
{
font-size: 100%;
padding: .6em 0;
margin: 0 15px;
}

ul, ol
{
list-style: none;
}

img
{
border: 0;
}

3.Adım: Genişlemeler

Aslında reset.css inizde olmazsa olmazlardan birisi değil ama olmasında yarar görüyorum. Float veriğiniz elementlerinizde örneğin bir resim dosyası için kullandığınızda yazılar resmin hemen bitişiğinde değilde 0.5em uzağında durması görsellik açısından iyi olacaktır. İstemeyen kullanmayabilir.

.floatLeft
{
float: left;
padding: .5em .5em .5em 0;
}
.floatRight
{
float: right;
padding: .5em 0 .5em .5em;
}

İşte reset.css Dosyamızın Son Hali:

body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{
margin: 0; padding: 0; border: 0; outline: none;
}
body
{
line-height: 1;
font-size: 88% /* Decide for yourself if you want to include this. */;
}

h1, h2, h3, h4, h5, h6
{
font-size: 100%;
padding: .6em 0;
margin: 0 15px;
}

ul, ol
{
list-style: none;
}

a
{
color: black;
text-decoration: none;
}

a:hover
{
text-decoration: underline;
}

.floatLeft
{
float: left;
padding: .5em .5em .5em 0;
}

.floatRight
{
float: right;
padding: .5em 0 .5em .5em;
}

Son olarak, reset.css dosyasını tüm web sitelerinizde kullanmanın birçok faydası olacaktır. Bundan sonra size kalan reset.css dosyanızını satırlarını artırmak ne kadar çok element için belirli bir varsayılan değer kullanırsanız sitenizin tasarımı üzerinde o kadar çok hakimiyetiniz olur.

Mesela sayfanızda verilen tüm linkler için genel bir değer kullanmak isteyebilirsiniz veya

(paragraf) taginizin sitedeki yazılardan farkı görüntülenmesini istiyorsanız

için farklı değer kullanabilirsiniz.

100 % tamamlanmış bir reset.css dosyası istiyorsanız Eric Meyer'in "Reset CSS Dosyasını" kesinlikle öneririm.

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

10 Mükemmel Çoklu Seviye Menü Tekniği

libabom — Sun, 15 Mar 2009 13:26:00 GMT

Web geliştiricileri kullanıcı dostu dikey ve yatay gezinti (navigasyon) menülerini CSS kullanarak oluşturabiliyorlar. JavaScript sayesinde de bu menüler daha etkileşimli, yanıt veren ve değişken hale geliyorlar.

Bugünkü yazıda jQuery, mooTools gibi JavaScript kütüphanelerinin yanısıra CSS ile oluşturulmuş 10 mükemmel çoklu seviye gezinti menüsü tekniğine yer vereceğiz.

1. Vimeo Benzeri Navigasyon Oluşturmak

Vimeo.com üzerindeki menünün neredeyse aynısı Janko tarafından geliştirilmiş durumda. Bu menünün en güzel tarafı menü öğesi üzerine fare imleci getirildiğinde menünün beliriyor olması. Ayrıca menünün sunduğu farklı arama seçenekleri sayesinde menü elementlerini eleyebiliyorsunuz.

Bu rehberin temelinde sırasız listeye dayalı CSS tabanlı bir açılır menü yatmaktadır. Menünün yapısı aşağıdaki görsel üzerinde açıklanmış.

Sizin de göreceğiniz üzere UL elementinin dört öğesi bulunuyor. Bunlardan ilki kısa bir alt menü içeren logo. Ardından giriş bağlantısı, alt menü içeren yardım bağlantısı ve yine alt menü çeren arama öğesi yer alıyor. Her bir alt menü, dahili olduğu menü elementinin üzerine fare imleci götürüldüğünde beliriyor.

Demo | İndir | Detay

2. CSS Açılır Menü Çatısı

Bu menü HTML'yi CSS'den ayırmakla kalmıyor, bunun yanısıra CSS tanımlamaları da yapısal ve tematik biçimlere ayrılmış durumda. Bu sayede yeni bir CSS açılır menü oluşturmak sadece yeni bir tema oluşturarak mümkün zire menünün altyapısı korunmaya devam ediyor. Farklı stiller sadece sınıf isimlerini değiştirerek kullanılabilir. Çatının desteklediği yönelmeler arasında, yatay, soldan sağa dikey, sağdan sola dikey, doğrusal yatay, yukarı yönlü yatay.

Menünün Özellikleri:

Kod ve dosyalar iyi düzenlenmiş. Kullandığınız içerik yönetim sistemine ya da diğer araçlara entegre edebileceğiniz gibi, (X)HTML biçimindeki web siteleri üzerinde de kullanabileceğiniz kanallar mevcut.
Menü stili sadece sınıf isimlerini değiştirerek özelleştirilebilir. Desteklenen yönelmeler arasında yatay, soldan sağa dikey, sağdan sola dikey, doğrusal yatay ve yukarı yönlü yatay yer alıyor.
Windows Internet Explorer 5+, Mozilla Firefox 1.5+, Opera 7+, Apple Safari 2+, Google Chrome 1 vb. tarayıcılar destekleniyor.
IE6 ve öncesi için küçük bir JavaScript kullanılıyor. Menü, jQuery ya da Scriptaculous gibi JavaScript kütüphaneleri ile rahatlıkla kullanılabilir. Geriye kalan her şey sadece CSS'den ibaret.

3. Çoklu Seviye JavaScript Açılır Menü

Bu çoklu seviye desteği olan açılır menünün kullandığı JavaScript'in dosya boyutu sadece 1.2 KB. Animasyon, aktif başlık belirleme, kolay aktarım ve birden fazla menü kullanabilme desteği gibi özellikleri bulunuyor. Betik Firefox 2+, IE6+, Opera, Safari ve Chrome üzerinde çalışıyor.

Demo | İndir

4. MenuMatic

MenuMatic bir mooTools 1.2 sınıfı olup sıralı ya da sırasız semantik listeleri alıp onları dinamik açılır menü sistemine dönüştürüyor. JavaScript'in etkin olmadığı tarayıcılarda ise menü, Patrick Griffiths ve Dan Webb tarafından geliştirilen Suckerfish Açılır Menüsü'ne klavye desteği kazandıran Matthew Carrol'un CSS tabanlı sürümünü kullanıyor.

Menünün Özellikleri

Arama Motoru Dostu
Erişilebilir: Menü bağlantıları üzerinde tab tuşu ile gezinin. Açılır menüler üzerinde ok tuşları ile gezinin.
JavaScript'in etkin olmadığı tarayıcılarda otomatik olarak CSS menüsü haline gelme.

Yatay | Dikey | İndir

5. Alt Menüler İçeren Dairesel Menü

Bu güzel menü küçük simgeler içeren alt menü öğelerini, ana menü elementlerinin bulunduğu dairenin içine yerleştiriyor. Menü ayrıca her bir simgeye açıklama eklemenize de izin veriyor. IE6, IE7, Firefox, Opera, Safari ve Google Chrome üzerinde sorunsuz çalışıyor.

6. mooTools İçin Kayan Menü

mooTools JavaScript kütüphanesini kullanan bu menü fare imleci hareket etmediğinde ya da sizin belirleyeceğiniz belirli bir zamandan sonra tüm menü elementlerini orjinal boyutuna getiriyor.

Demo | İndir | Detay

7. Yumuşak Gezinti Menüsü

Yumuşak Gezinti Menüsü çoklu seviye desteğine sahip ve CSS tabanlı bir menü olup, web site gezinti elementlerinin yumuşakça belirmesi için jQuery kullanıyor. Özellikle gezinti elementleri web sitelerinin genelinde önemli bir rol oynadığı için bu elementin güzel görünmesi ve işlemesi, sitenin geneli için de önemli hale geliyor.

Menü öğeleri dilerseniz doğrudan sayfa üzerindeki kod üzerinden, ya da AJAX aracılığı ile harici bir dosya üzerinde çağırılabilir. jQuery sayesinde de alt menüler hem kayarak (slide) hem de yavaşça belirerek (fade in) görüntülenebiliyor.

8. Katlanır Menü

Bu menü aslında Antonio Lupetti'nin web projelerinizdeki kodları yeniden daha verimli bir şekilde kullanabilmenize yönelik hazırladığı rehberin bir parçası. Bu örnete Antonio, fare imlecinin menü öğeleri üzerine getirilmesinin ardından bir efekt içeriyor (farenizi "About Me" ve "Click Here" öğelerinin üzerine getirin).

Demo | İndir | Detay

9. Digg Başlığını Tasarlamak

Bu menü Digg web sitesi üzerinde yer alan menünün bir kopyası. Abonelik, arama ve hesap bilgileri gibi önemli öğeler, tam olmalarını beklediğiniz yerde, sayfanın üst kısmında yer alıyorlar. Belirli bir genişliğe kadar genişleyebilen genişlik, açılır menüler, çekici arama ve renklerin kolay değiştirilebilmesi, menünün sunduğu özellikler arasında yer alıyor.

Demo | İndir | Detay

10. jQuery Dosya Ağacı

jQuery Dosya Ağacı, jQuery için geliştirilmiş özelleştirilebilir bir AJAX dosya tarayıcı eklentisidir. Sadece bir satır JavaScript kodu ile tümüyle etkileşimli dosya ağaçlarını oluşturabilmeniz mümkün. Ayrıca bu betiğin sunucu taraflı dosya sistemlerine entegre edilebilmesi için PHP, ASP.NET, JSP ve Lasso eklentileri de bulunuyor.

Bu menünün sevdiğim yanı, AJAX aracılığı ile dosya uzantılarına bakıp onlara uygun simgeleri eş zamanlı olarak gösterebiliyor olması. Dahası da alt menü öğelerinin açılma ve kapanma efeklerini ve hızlarını belirleyebiliyorsunuz.

Demo | İndir | Detay

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

Çapraz Tarayıcı Uyumluluğu İçin Altın Değerinde İpuçları

libabom — Mon, 16 Feb 2009 19:13:00 GMT

Internet Explorer'la çalışmak her seviyeden web tasarımcısı için bazen sorun olabilir. Ancak bu sorun olmak zorunda olacağı anlamına gelmiyor. Hepsi olmasa da pek çok Internet Explorer hatası, hatanın nasıl oluştuğunu anladıktan sonra kolayca düzeltilebilir. Bu yazımda özellikle giriş seviyesindeki kullanıcılar için çapraz tarayıcı uyumluluğunu sağlayabilmeleri için önemli problemleri ve çözümlerini listeledim.

Yazımda en çok kullanılan tarayıcı sürümleri olan Firefox 2+, Safari 3+ ve Internet Explorer 6+'ya odaklandım. Her ne kadar IE6'nın kullanım oranı gün geçtikçe düşüş gösteriyor olsa da, bu onu desteklememeniz gerektiği anlamına gelmez, zira halen pek çok kullanıcı hangi tarayıcı sürümünü kullandığını bilmemektedir. Eğer bu IE6 hatalarını biliyorsanız, tarayıcı üzerinde test yapmadan bile sitenizin doğru görünüp görünmediğini anlayabilirsiniz. Bu makale süper deneyimli web tasarımcılarına yönelik olmamakla birlikte IE6'nın çapraz tarayıcı uyumluluğuna yönelik gizlerini anlamanıza yardımcı olacaktır.

Özet
Makalenin tamamını okumak istemeyenleriniz için aşağıda makalenin bir özetini bulabilirsiniz.

Daima STRICT DOCTYPE ve standartlarla uyumlu HTML/CSS kullanın
CSS'nizin en başında daima sıfırlama (CSS RESET) kullanın.
Firefox'ta metin işleme sorunlarını gidermek için -moz-opacity:0.99, Safari'de ise text-shadow: #000 0 0 0 kullanın.
Görselleri asla CSS ya da HTML ile yeniden boyutlandırmayın.
Her tarayıcıda metinlerin nasıl işlendiğini test edin. Lucida kullanmayın.
BODY üzerinde metni % ile boyutlandırıp sitenin geri kalanında em kullanarak metin boyutlandırması yapın.
Üzerine float uygulanmış tüm anahat divleri display: inline ve overwlow: hidden içermeli.
CSS3 seçicilerini kullanmayın.
Alpha'yı yüklemediyseniz saydam PNG kullanmayın.

Element Uyumsuzlukları
Her tarayıcı farklı elementleri farklı şekillerde yorumlar - farklı miktarlarda boşluklar, marjlar, sınırlar vs. Bunun anlamı eğr siz öntanımlı stilleri kullanırsanız, kodunuz doğru olsa bile siteniz farklı tarayıcılarda farklı şekillerde görüntülenebilir.

Çözüm
Yapmanız gereken ilk şey, ki pek çoğunuzun bunu bildiğini düşünüyorum, stillerinizi sıfırlamaktır. Sıfırlamak, stillerinizin en üst kısmına yerleştireceğiniz ve elementler üzerindeki boşlukları, marjları, sınırları ve diğer uyuşmazlıkları sıfırlayıp onları standart olarak yeniden inşa eden bir kod parçasıdır.

Eric Meyer'in reset.css dosyasını indirin ve stillerinizin en başına yerleştirin. İşte bu kadar. Temiz, çapraz tarayıcı uyumlu stillere kavuştunuz.

Görsel İşleme
IE6 ve IE7'nin her ikisi de yeniden boyutlandırılmış görselleri inanılmaz derecede kötü bir şekilde işler. Bir görselin boyutunu CSS ya da HTML kullanarak değiştirdiğinizde görsel inanılmaz derecede kötü görünür.

Çözüm
Yapmayın. Görsellerinizi sitenize yerleştirmeden önce istediğiniz boyuta göre yeniden boyutlandırın.

Metin İşleme
Tüm hataların IE'den kaynaklanmadığını söylemiştim. Safari 3+ açık renkli metinlerin koyu renkli arkaplan üzerinde işlenmesi sırasında bir soruna sahip. Kimileri bunun iyi ya da kötü olup olmadığı konusunda farklı görüşlere sahip olabilir, ancak ilgili metni daha aydınlık görüntülemenin bir yolu var. Safari 3.1'de standart metin aşağıdaki şekilde işlenmektedir.

Çözüm
Oldukça kolay. Tek yapmanız gereken aşağıdaki stillemeyi CSS kodunuza dahil etmek.

p {text-shadow: #000 0 0 0;}

#000 kullandığınız arkaplan rengi olmalı. Seçtiğiniz elementlerde muhtemelen siz daha özgün olmak isteyeceksinizdir. Bunu BODY etiketi üzerinde kullanmanızı önermem. Düzeltmek isteyeceğiniz diğer elementler li, dt, dd, blockquote vs olabilir. Daha 'ince' görüntülemek istediğiniz tüm elementlerde bu düzeltmeyi kullanın.

Bazıları Safari'de tipografi için bunun iyi olmadığını söylüyorlar ve metnin standart işleme ile daha güzel göründüğünü söylüyorlar ki ben de onlara katılıyorum. Ancak bazılarının buna katılmadığını da biliyorum. Ayrıca arkaplan rengine, metin rengine ve metin seçimine karar verirken hangisinin daha iyi olduğuna da karar veremeyiz. Bu durumda seçim tamamen kişisel tercihinize ve sitenizin içeriğinin nasıl olduğuna kalmış.

Bu düzeltmeyi Firefox üzerinde kullanmak için opacity düzeltmesini kullanacağız.

p {-moz-opacity: 0.99;}

Bu düzeltmeyi kullanırken dikkatli olmalısınız zira düzeltmenin uygulandığı element içerisinde bir Flash dosyası bulunuyorsa ilgili dosya doğru görüntülenmemektedir.

İlgili düzeltmeler uygulandıktan sonra metnimiz aşağıdaki şekilde görünecektir.

Yazıtipi Seçimi
Hepimizin kullandığı bazı ortak web yazı tipleri vardır - Arial, Georgia, Verdana vb. Hem PC hem de Mac kullanıcılarının bilgisayarlarında bulunan yazı tipleri de mevcuttur - Century Gothic, Arial Narrow vs. Buna rağmen farklı tarayıcıların ve işletim sistemlerinin yazı tipi işleme yöntemleri farklıdır ve sizin bu farklılıkların farkında olmanız gerekir, zira yanlış bir yazı tipi kullanırsanız siteniz çok çirkin görünebilir.

Çözüm
Kullanacağınız yazı tipinin seçimi tamamen sizin tercihinize bağlıdır. Yazı tipini kullanmak güvenli olduğu sürece sorun yoktur ancak bu işleme sorunlarının farkında olmanız gerekir. Kullanmamanız gereken bir yazı tipi muhtemelen Lucida Grande/Sans zira IE üzerinde bu yazı tipi korkunç görünüyor. Yazı tipinin Safari'de (Mac) nasıl işlendiğine bir bakın.

Güzel değil mi? Internet Explorer (PC)'de yazı tipinin bu şekilde görüntüleniyor olması ise çok kötü.

Kimileri Lucida Sans yazı tipinin de işletim sisteminin ClearType özelliği açıldığında düzgün göründüğünü belirtirken, kimileri de halen yanlış göründüğünü belirtiyor. Bu durumda yapılması gereken en doğru şey muhtemelen Lucida Sans kullanmamak olacaktır. Bunun yerine Arial ya da başka bir san-serif yazı tipi kullanmayı tercih etmelisiniz.

Yazıtipi Boyutlama
Metni yeniden boyutlandırma işlemi farklı tarayıcılarda ve işletim sistemlerinde farklı şekillerde işlenir. Örneğin IE pixel kullanılarak boyutlandırılmış bir metni yeniden boyutlandırmayacaktır. Eğer metinleri em kullanarak boyutlandırırsak, o zaman da IE metni yeniden boyutlandırdığımızda boyutunu abartacaktır.

Çözüm
Yazı tipi boyutlandırmaya yönelik kendinize referans alabileceğiniz en iyi kaynak, Richard Rutter'ın yazdığı CSS'de Metin Nasıl Boyutlandırılmalıdır makalesidir. Sonuç ise, metninizi BODY elementi üzerinde yüzde kullanarak boyutlandırıp, stilin geri kalanında em kullanarak boyutu belirlemek. Satır yüksekliği için de yine pixel yerine em kullanırsanız farklı tarayıcılarda doğru işleme sonuçlarını alırsanız.

Burada hatırlamanız gereken şey öntanımlı yazı tipi boyutunun 16px olduğudur. Bu durumda örneğin yazı tipini 12px'e dönüştürmek için kullanmamız gereken kod şudur:

body {font-size: 75%; line-height: 1.5 em;}

Şimdi boyutlandırmanızı em kullanarak yapabilirsiniz:

h1 {font-size: 3em;}

Önerilen bir diğer teknik ise yazı tipinizi önce 10px'e indirgemektir. Bu durmda metninizi em kullanarak yeniden boyutlandırmak daha kolay olacaktır. Örneğin:

body {font-size: 62.5%; line-height: 1.5em;}
h1 {font-size: 1.8em; /* 18px */}
p {font-size: 1.2em; /* 12px */}

Bu tekniği kullanırsanız dikkat etmeniz gereken bir konu var ki o da insanların Internet Explorer üzerinde küçük yazı tipi seçeneğini kullanmaları durumunda metniniz okunamayacak derecede küçük olabilir. Her ne kadar bu seçeneği bilinçli olarak seçen kullanıcı sayısının yok denecek kadar az olduğunu düşünsem de bu ayrıntıyı bilmenizde yarar var.

Yüzen Elementlerde Çifte Marj
CSS Anahatlarımızı birbiri ardına yüzen (float) divler kullanar oluştururuz, tıpkı bir tür yatay tetris gibi. Satırın sonuna gelindiğinde ise satıra sığmayan div bir sonraki satıra kayar. Bir ızgara oluşturmak için sık kullanılan yöntem aşağıdaki gibidir:

#content {float: right; width: 300px; margin-right: 10px;}
#sidebar {float: right; width: 100px;}

Bu kod "normal" bir tarayıcıda aşağıdaki gibi görünmelidir.

Ancak IE'de bu aşağıdaki gibi görüntülenecektir.

Gördüğünüz üzere marj iki defa işlendi. Yüzen element ile aynı yönde bulunan her marj iki defa işlenecektir. Neden diye sormayın, IE bu. Bunun anlamı sol tarafaki elemente uygulanan marj, kodda belirtilenin aksine 20px olarak işlenecektir ki bu da muhtemelen anahattı bozacaktır.

Çözüm
Bu sorunu gidermek için anahat divlerinize display: inline yerleştirmelisiniz.

#content {float: right; width: 300px; margin-right: 10px; display: inline;}
#sidebar {float: right; width: 100px; display: inline;}

Bu sayede marj hatasını da gidermiş olduk. Her ne kadar bu yüzen element ile aynı yöndeki tüm marj elementlerini etkilese de bu düzeltmeyi yüzen tüm div elementlerine eklemek kullanışlı olabilir. Ne zaman yüzen tarafta marj kullanmak isteyeceğinizi önceden kestiremezsiniz. Bu kod diğer hiçbir tarayıcıyı etkilemeyeceğinden kullanışlı olabilir.

Genişleyen Kutu
Genişleyen kutu problemi pek çok CSS anahattında sorun oluşturur. birbiri ardına yüzen elementler içeren ve öntanımlı genişlikleri bulunan divleri içeren bir anahat kullanmanız durumunda eğer ilgili divin genişliğinden daha geniş bir genişliğe sahip bir görsel ya da boşluk içermeyen bir metin kullanmanız durumunda ilgili anahat IE6'de yanlış görüntülenecektir. Örneğimize bir bakalım:

#content {float: right; width: 300px; margin-right: 10px; display: inline;}
#sidebar {float: right; width: 100px; display: inline;}

Pek çok tarayıcıda bu aşağıdaki şekilde işlenecektir:

Buna rağmen IE6'da anahattımız bozulacaktır:

Çözüm
Burada kullanacağımız çözüm overflow özelliğini kullanmaktır. Eğer overflow: hidden değerini anahat divlerine dahil ederseniz, anahat IE6'de bozulmayacaktır.

#content {float: right; width: 300px; margin-right: 10px; display: inline; overflow: hidden;}
#sidebar {float: right; width: 100px; display: inline; overflow: hidden;}

Her ne kadar ekleyeceğiniz bu kod sorunu giderse de bazı karmaşık anahatlarda başka sorunlara yol açabilir. Bunun yanı sıra IE6 dışındaki tarayıcılarda metnin otomatik olarak iki satıra bölümlenmesinin aksine alana sığmayan metnin görünmemesine neden olacaktır.

Yüzen Elementleri Kapsamak
Burada anlatmak istediğimiz şey kapsayıcı bir divin içerisindeki divleri doğru bir şekilde kapsamamasıdır. Aşağıdaki örneğe bir bakın.

Kapsayıcının içerisindeki divleri nasıl doğru bir şekilde kapsadığını gördünüz mü? Olması gereken de bu zaten. Buna rağmen bazen bu şekilde sonuçlanmayıp aşağıdaki gibi bir hal alabiliyor.

Kapsayıcı doğru bir şekilde içerisindeki divleri kapsamıyor. Muhtemelen kapsayıcınıza bir arkaplan resmi atamadığınız sürece bunu fark etmeyeceksinizdir.

Çözüm
Bu sorunu gidermeye yönelik birkaç çözüm bulunmakla birlikte kullanılabilecek en iyi yöntem kapsayıcınıza overflow: auto; ya da overflow: hidden değerlerinden birisini atamaktır.

#container {width: 966px; margin: 0 auto; overflow: auto;}

overflow: auto değerinin Firefox üzerinde bazen sorunlara yol açabileceğini unutmayın. Eğer bunu kullandıktan sonra bir sorunla karşılaşırsanız, onun yerine overflow: hidden kullanmayı deneyin. Eğer bu da sorun oluşturuyorsa o zaman şuradaki makaleye bir göz atın. Bunu eklemenin dışında IE6 üzerinde anahattınızın tetiklenmesi gerektiğini de unutmayın. Bunu elementinize yükseklik ve genişlik atayarak yapabilrsiniz. Eğer kapsayıcınıza bir genişlik değeri vermek istemiyorsanız o zaman height: 1%; ya da zoom: 1; değerlerinden birini verebilirsiniz.

CSS Seçicileri
Her ne kadar hepimiz CSS3 seçicilerini kullanmaya can atsak da, IE6 bu seçicilerin büyük bir kısmını desteklememektedir. Bırakın CSS3'ü, IE6'nın desteklemediği CSS2 seçicileri bile vardır. İşte kullanmamanız gereken seçicilerin bir listesi:

E > F
E + F
E ~ F
:root
:last-child
:only-child
:nth-child()
:nth-last-child()
:first-of-type
:last-of-type
:only-of-type
:nth-of-type()
:nth-last-of-type()
:empty
:not()
:target
:enable
:disabled
:checked
E[değer] seçicilerinden herhangi biri
:first-child
:lang()
:before
::before
:after
::after

Elbette bu seçicilerin pek çoğu daha Firefox 3 üzerinde de desteklenmiyor. Desteklenen seçicilerin tam bir listesi için evotech.net üzerinde yer alan tarayıcılarda css seçiciler için destek yazısına bir göz atın.

Çözüm
Standart seçicileri kullanmaya devam edin. Sadece IE üzerinde çok önemli bir değişiklik yapmayacağı sürece E + F, F, E > F, E ~ F seçicilerini kullanın. Eğer gerçekten bu seçicileri kullanmak istiyorsanız, o zaman IE8.js'yi deneyebilirsiniz. Bu JavaScript kütüphanesi IE6'ya seçiciler için daha iyi destek sunmasına rağmen sitenizi yavaşlatacaktır. Ancak biz IE6 kullanıcılarını dikkate almıyoruz, öyle değil mi?

PNG Saydamlığı
IE6 PNGler üzerinde alfa saydamlığı desteklemiyor. Bu muhtemelen IE üzerinde gördüğümüz en rahatsız edici sorun.

Çözüm
Bu problem için bir dizi çözüm bulunuyor. Ya IE'ye özgü bir stil şablonunda AlphaImageLoader'ı kullanacaksınız ya da bu sorunu gidermek için oluşturulan çeşitli JavaScriptlerden birine başvuracaksınız. Hangisini tercih ederseniz edin, tekrar eden saydam arkaplan görsellerini IE6 üzerinde kullanabilmenin bir yolu yok.

AlphaImageLoader'ı kullanmak biraz zahmetli. Saydam olan tüm PNG görsellerine aşağıdaki özellikleri ekleyin (CSS'nizin doğrulanabilmesini istiyorsanız o zaman bu kodu IE'ye özgü bir stil şablonu içerisine yerleştirin).

.saydam {background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.bildirgec.org/images/transparent.png', sizingMethod='image/scale/crop');}

Tüm PNG görsellerinizi "saydam" sınıfına dahil ettiğinizi varsayarsak yukarıdaki kodu kullanabilirsiniz. Ayrıca 1x1 saydam bir png oluşturup src değerinde onun konumunu belirtmeniz de gerekiyor. Geçtiğimiz yıl 24ways üzerinde bu konuda muhteşem bir makale yayımlandı.

Bu sorunu giderebileceğiniz daha da iyi bir yöntem, Blueprint CSS Çatısı'nın geliştiricisi Olav Bjorkoy'un şuradaki makalesinde anlattığı yöntemi uygulamak. AlphaImageLoader'e benzer bir yöntem ancak onun yerine saydamlığı tetikleyen bir betiğe bağlantı veriyorsunuz.

Kullanabileceğiniz üçüncü yöntem ise IE8.js'yi kullanmak. Bu yöntem öncekinden de güvenli ve bir sorunla karşılaşmanız neredeyse mümkün değil. HTML'niz üzerinde bu betiğe bağlantı verin ve betik dosya adı -trans ile biten tüm png dosyalarının saydamlık sorununu giderecektir (örneğin resim-trans.png).

Tüm bu yöntemleri kullanmanıza rağmen saydam pngler ile sorun yaşamanız halen olasıdır. Bu yöntemlerden herhangi birini kullandıktan sonra IE6 üzerinde sağlam bir test uygulamayı unutmayın.

Kaynak: Anthony Short

CSS İle İlgili Yazdığım Diğer Yazılar

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