28 Ocak Pazartesi ´13   —   6 Yorum


Geçtiğimiz hafta, iOS geliştiricilerimizden biri, varolan iPhone uygulamamızı iPad'e sadece birkaç ayarla oynadıktna sonra derleyerek çalışır hale getirdi, sonuç tabi ki götü başı dağılmış bir uygulama, ama fonksiyonel. Tabi ki iPhone ve iPad arasında deneyim tasarımı farklılıkları var fakat teknik olarak çok küçük problemler var. Uygulamanın uyumsuzluğunun 95%'i sadece görsel problemler ve bu problemler tasarımın özellikle iPhone ekran çözünürlüğüne göre yapılmış olmasında.

Mobil uygulamalar çok iyi örnekler değiller bu yazı için çünkü uygulamanın çalışacağı cihazlar belirli ve çözünürlükleri belirli, yazılan uygulamalar da çalışacakları cihazlara oldukça bağlılar.

Web'de ise durum biraz daha farklı, cihazları veya ekran çözünürlüklerini kontrol edemezsiniz, ayrıca web uyuglamalardan daha universal bir içerik türü, çok farklı cihazlar tarafından okunabilen çok daha geniş bir kitleye hitap edebildiginiz bir içerik dağıtım türü. Bu yazıda size bu farklılıkların bazı çıkış noktaları anlatacağım ve farklı bir arayüz geliştirme yaklaşımdan bahsedeceğim.

Az önce mobil uygulamalar bu problemin açık şekilde görüleceği ortamlar olmayabilir demiştim fakat Android işletim sistemi üsütnde çalışan uygulamalar bu yazıya daha yakın örnekler olabilirler çünkü piyasadaki farklı ekran çözünürlüğüne sahip cihaz sayısı oldukça yüksek, dolayısıyla web örneğine daha yakınlar.

Farklı çözünürlüklere sahip kullanıcı kitlesine üretilen klasik bir tasarım senaryosunda, kullanıcı analitikleri analizi yapılıp en çok kullanılan ekran çözünürlüğü belirlenir. Vazgeçilebilecek ekran çüzünürlüklerinden kurtulduktan sonra kabul edilebilecek minimum ve maksimum ekran çözünürlüğü tanımlandıktan sonra buna göre bir tasarım çalışması yapmak genel yaklaşımdır. Kullanıcı deneyimi tasarlandıktan sonra arayüz tasarımı yapılır ve arayüz tasarımı bittikten sonra tasarlanan asset'ler (resimler, ikonlar, butonlar, arka plan grafikleri vs) çoğu zaman arayüz geliştiricisinin ekran çözünürlüğünde test edilir ve az sonra belirteceğim deneyler yapılmaz.

Devamını Oku →
Bildiğiniz gibi bazı form elementlerine (radio butonlar, check butonlar ve birkaç diğer element) kozmetik olarak müdahale edemiyoruz veya kısıtlı şekilde müdahale edebiliyoruz. Sonuç olarak bu elementlerin görüntüsü ve çizilmesi tamamen tarayıcı kontrolünde, çoğu işletim sisteminin arabirim elementleriyle uyumlu şekilde görünecek şekilde ayarlanmış. Web arayüzünde standart elementlere dokunmamak genellikle farklı tarayıcı, farklı cihaz ve farklı işletim sistemlerinde sorunsuz çalışmasını sağlaycaktır.

Fakat bazen bir sayfayı sadece bir cihaz için veya belirli bir tarayıcıda görünecek şekilde tasarlarsınız ve bu noktada kullandığınız tüm elementlere istediğiniz tasarımı giydirmek isteyebilirsiniz. Örnegin mobil bir tarayıcıda görüntülenecek bir oyun arayüzü tasarlıyor olabilirsiniz.

Bunun için javascript çözümleri mevcut fakat birkaç css3 özelliği kullanarak sadece css ile çözebilirsiniz. Bu yazıda size radio butonları istediğiniz şekilde şekillendirmeyi anlatacağım. Radio butonları standart kullanımda, yani çoklu secenekten yapılan seçimler için bir örnek üzerinde göstereceğim.



Şimdi bikaç radio butona sahip, standart bir form oluşturalım:
<h3>Which one do you prefer?</h3>
<ul>
    <li>
		<label for="radio1">
			<input type="radio" id="radio1" name="my_options" class="tick_or_x" checked="checked" />
			<span>Strawberry Mojito</span>
		</label>
	</li>
    <li>
		<label for="radio2">
			<input type="radio" id="radio2" name="my_options" class="tick_or_x" />
			<span>Pina Colada</span>
		</label>
	</li>
    <li>
		<label for="radio3">
			<input type="radio" id="radio3" name="my_options" class="tick_or_x" />
			<span>Mint Liquor</span>
		</label>
	</li>
</ul>
Kod oldukça açık, basit bir liste içinde label elementlerinin içinde radio inputlar ve span ile çevrelenmiş açıklama metinleri içeriyor. Gayet standard bir css ile bu görüntüyü yukarıdaki görselde solda olan temiz bir şekle sokalim:
body {
	padding: 10px 30px;
	font: 18px Helvetica;
}

ul, li {
	list-style: none;
	margin: 0;
	padding: 0;
}
HTML kodunda farkettiğiniz gibi tüm radio elementleri tick_or_x sınıfıyla tanımlanmışlar, şimdi bu sınıfı hazırlayacağız.

Aslında yaptığımız işlem radio elementini gizleyip onun yerine x veya tık işareti koymak. Yerine yerleştirdiğimiz elementi css ile oluşturacağız. Bunun için bir css özelliği olan ":before" pesudo elementi ile html kodunda gördüğünüz span elementlerini kullanacağız. Onun için input elementlerini hemen gizleyebiliriz (veya görünür bir şekilde bırakıp gerçekten görsel değişiklikleri form elementleri üstünde uygulanıp uygulanmadığını görebilirsiniz).

Şimdi list elementlerin içinde sadece span'ler var, bunu da input elementini belirlediğimiz sınıf adını "+" operatörüyle kullanarak seçtirebiliriz, yani ".tick_or_x + span" css seçicisi tick_or_x sınıflı elementin hemen ardından gelen span'leri seçmemizi sağlayacaktır.

Aşağıda tick_or_x sınıfına ait kodu veriyorum, hemen ardından açıklamaya çalışacağım:
.tick_or_x {
	display: none;
}

.tick_or_x + span {
	display: inline-block;
	position: relative;
	padding-left: 40px;
	height: 30px;
	line-height: 30px;
	cursor: pointer;
	margin-bottom: 15px;
}

.tick_or_x + span:before {
	content: '✗';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	background: silver;
	width: 30px;
	margin-right: 10px;
	text-align: center;
	border-radius: 15px;
}

.tick_or_x:checked + span:before {
	content: '✔';
	background: green;
	color: white;
}
".tick_or_x + span" seçicisiyle seçtiğimiz elementleri block level elementlere çevirelim, sonrasında ".tick_or_x + span:before" seçicisiyle span elementimizin önüne bir element oluşturacağız. Bu kısım biraz kafa karıştırıcı gelebilir, css before ve after pesudo elementleri hakkında daha önce yazdığım "CSS before ve after sözde elementleri" yazısını inceleyebilirsiniz.

".tick_or_x + span:before" ile seçtiğimiz sözde elementi bir block level elemente çeviriyoruz ve position absolute ile havada asılı hale getirelim (floating element). Bu elementin ailesi (parent) olan ".tick_or_x + span" elementi daha önce block level ve relative duruma getirilip bulunduğu noktada asılı hale getirilmişti. Şimdi before sözde elementini istediğimiz noktaya pozisyonlayabiliriz. Bu sözde element ile görsel olarak, tick veya x işaretini oluşturacağız. Bir radio butonun doğal durumunun seçili olmadığı (unchecked) durumu olduğunu düşünürsek bu sözde elementin doğal görünümü "X" işaretçisi olacaktır. Bunu bir imajla da tasarlayıp tamamen özelleştirebilirsiniz. Ben basit bir örnekleme ile ascii karakterlerini doğrudan css içine yazdım, aslında bunu yapmamak gerek, çünkü IE gibi tarayıcılarda bu karakterler çalışmayacaktır.

Elementimizi radio butonlarımızın bulunduğu konuma gelecek şekilde (örnekte solda etiketin yanında) pozisyonladıktan sonra seçim durumunu yakalamaya çalışacağız. Burada bir css3 seçicisi olan ":checked" seçicisini kullanacağız. Bu seçici sadece seçilmiş checkbox, radio gibi elementleri işaret eder. Seçili olan radio butonumuzu bu şekilde yakalayabiliriz. Görsel olarak ilgili elementleri yakalamak için bu seçici ile "+" operatörünü beraber kullanıyoruz ve ".tick_or_x:checked + span" seçicisi bize seçili olan radio butona ait etiket span'ini yakalamamızı sağlıyor. Bu elemente ait before sözde elementi de seçili olan elementin görsel olarak yerleştirdiğimiz işaretçisini adresleyecektir.

Doğal olarak seçimi ifade eden check ascii işareti ve bir artalan rengi farklılığı ile görsel olarak seçimi gösterebiliyorum. Bunun yerine bir imaj tasarlayarak istediğiniz şekilde özelleştirebilirsiniz.

Ben başta gizlediğimiz radio input elementini bu noktaya kadar görünür halde tutup, hazırladığım kodun, yaptığım tıklamaları doğru yakalayıp yakalamadığını form elementi üstünde görecek şekilde geliştiriyorum. Bu noktada input'lari css'den gizliyoruz ve kodumuz hazır duruma geliyor. Şimdi aşağıdaki butonla çalışan örneğin inceleyin.


Çalışan Örnek Kod


Nihai kodu da çalışan demo'dan inceleyebilirsiniz.
31 Aralık Pazartesi ´12   —   5 Yorum
CSS2 ile gelen en faydalı özelliklerden biri de yeni sözde seçiciler, bunlardan ikisi "before" ve "after" seçicileri birçok minimal yaklaşıma olanak sağladı.

Özelliğin çıkış noktası bir elementin öncesi veya sonrasına noktalama gibi işaretçiler yerleşitrebilmekti. Yani en sade kullanımıyla:
.my_quote:before {
	content: '"';
}

.my_quote:after {
	content: '"';
}
Bu kod ile bir alıntı yazısının başına ve sonuna çift tırnak ekleyebiliyorsunuz:



Kırmızı ile işaretlediğim karakterler css ile eklendi. Ya da devamı olan bir yazı basarken ekrana:
.read_more_link:after {
	content: '...';
}
kodu ile "..." ekleyebiliyorsunuz:



Fakat bu yeni sözde seçicileri akıllıca kullanarak bir element üretebilirsiniz. Yani bu seçici "content" özniteliği aldığı zaman dom üstünde yerleşmese de görsel olarak bir element oluşturuyor. Doğal olarak bu elementi block level yapabilir, genişlik yükseklik tanımlayabilir, posizyonlamasını istediğiniz gibi ayarlayabilirsiniz.

Çok yaygınlaşan bir kullanımla, bir elementin başına veya sonuna eklemek istediğiniz ufak simgeleri, resimleri veya işaretçileri bu sözde seçicilerle yaratabilirsiniz.

Basit örnekle size linklerinize simgeler koyabilmeyi anlatacağım. Biliyorsunuz HTML öznitelik seçicileri var css'de ve "target" özniteliği "_blank" olan bir linki diğerlerinden ayrı bir şekilde seçebilirsiniz. a[target="_blank"] seçicisi dış bağlantıları seçecektir.
a[target="_blank"]:after {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	background: url(/images/external_link_icon.png) no-repeat left top;
}
Bu kod dış baglantıyı gösteren bir a elementinin sonuna inline-block türünde bir element ekleyecek ve içeriğini boş bir şekilde ayarlayacaktır. Genişlik ve yüksekliğini 16px olarak ayarlayıp art alanını da bir simgeyi olarak ayarladığımızda linkin sonunda bu simgeyi görebileceğiz:



Bu sözde elementlerini şu tarayıcılar destekliyor:
  • Chrome 2+
  • Firefox 3.5+
  • Safari 1.3+
  • Opera 9.2+
  • IE8+ (Ufak problemlerle beraber)

Bu sözde elementlerle yarattığınız içeriğin sadece görsel amaçlarla kullanılmasi gerektiğini unutmayın, birçok erişilebilirlik okuyucusu veya tarayıcısı bu elementleri okuyamadığı için fonksiyonalitenizi bozacak içerikleri bu elementlerle kullanmamaya dikkat edin.

Bu yazıda çok yaratıcı örneklerini görmediniz fakat ne işe yaradıklarını bilmeniz ileride deney yapmanızı kolaylaştıracaktır veya karşılaştığınızda daha kolay anlamanızı sağlayacaktır.
11 Temmuz Çarşamba ´12   —   2 Yorum
Uzun bir süre bütün arayüzlerimi hiç bir framework veya arayüz kütüphanesi kullanmadan kendim yazdım. Özellikle mobil cihazların kullanımının yaygınlaşmasından dolayı, aynı html içeriğini farklı ekran çözünürlüklerine uygun arayüzlerde gösterme ihtiyacı çoğaldı. Hala mfyz.com'daki arayüzü tamamen sıfırdan yazılmış bir css ile çizdiriyorum. Evet herşeyi sıfırdan yapmanın avantajları var fakat avantajları kadar belki daha fazla dezavantajları ve daha derin bilgi birikimi gerektirmesi gibi yanları da var.

Her kodu tamamen elde hazırlamanın en büyük dezavantajı, kararlılıgını korumak ve çok popüler olan, bilinen hataları gidermek için zaman harcamak zorunda olmanızdır. Yani çok basit bir IE hatasını düzeltmek için gereksiz zaman kaybeder daha da tehlikelisi bu küçük şeyler için ayırdığınız zaman sizin genel motivasyonunuzu kırması gibi tehlikeleri göze almış olursunuz. Özellikle tek geliştiricinin bulunduğu projelerde (ki bir freelancer'in elinin altında her zaman tek başına yürürttüğü proje olur) büyük bir motivasyon bozukluğuna neden olabilir. Dolayısıyla hazır yapılar, kütüphaneler sadece zaman kazanmak şeklinde görülmekten çok, birçok geliştiricinin katkıda bulunduğu ve aslında birçok hammallık işini yapmak zorunda kalmamanız olarak algılanmalıdır. CSS veya başka bir dil farketmeksizin bu geçerli diyebiliriz.

Şimdi gelelim arayüz dillerindeki çatılara. Birkaç yıl öncesine kadar CSS için çok yaygın kullanılan veya birçok geliştiricinin ürettiği bir arayüz çatısı yoktu. Nedeni ise hem css3'den önceki versiyonlarda bir çatı gerektirecek genel ihtiyaçlar yoktu bir diğer nedeni de farklı çözünürlüklerdeki ekranlar bu kadar farklı varyasyonlara sahip değildi.

Bir CSS çatısına ihtiyaç duymanızı gerektirecek en büyük bir başka neden ise özellikle standartlara kabul edilmemiş css3 özelliklerinin (animasyonlar vs) hala tarayıcı spesifik on ekler istemesi olabilir. Örneğin, standartlara kabul edilmesi çok eskilere dayanmayan border-radius özelliğini kullanmak ve bütün tarayıcılarda çalışmasını sağlamak için aynı satırı -moz -webkit -o ve -ms gibi on eklerde kullanmak zorunda kalıyorduk. border-radius çok basit bir özellik ve tek parametre gerektirdiği için bunu örneklemem, bu problemin gözünüzde çok canlanmasını sağlamayabilir ama başka bir örnek olarak, bir elemanınızın arka plan rengini doğrusal geçiş (linear gradient) ile şekillendirmek isterseniz uzun bir satır yazmanız ve bunu 4-5 tekrarda css dosyanızın içine koymanız gerekecektir.
background-image: linear-gradient(top, rgba(0, 0, 0, 1.00), rgba(0, 0, 0, 0.00));
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 1.00)), to(rgba(0, 0, 0, 0.00)));
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 1.00), rgba(0, 0, 0, 0.00));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 1.00), rgba(0, 0, 0, 0.00));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 1.00), rgba(0, 0, 0, 0.00));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 1.00), rgba(0, 0, 0, 0.00));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#000000', EndColorStr='#000000');
Malesef, bu özellik, standartlara geçene kadar bu şekilde kullanılmak zorunda. Yukarıdaki kodda aslında standartlara başvurulan model ilk satırdaki linear-gradient ile başlayan modelidir. Ancak daha standartlara kabul edilmediği için tarayıcılar kendi on eklerini diretmektedir. Çok basit bir geçiş için bu kodları ezberlemek veya tekrar tekrar kodlamak çok anlamsız. Aynı durum birkaç css3 özelliği için de söz konusu.

Peki bir css çatısı kullanmak bunu önleyecek mi? Eğer bir yorumlanan özel bir dil değilse hayır önlemeyecek ama muhtemelen buna benzer hazır geçişleri veya on tanımlı bazı kolay yollar sunacaktır. Eğer yorumlanan bir yapı kullanıyorsanız evet kesinlikle bu kodu çok kısaltmanın yolu var. Bunun için LESS veya SASS'i inceleyebilirsiniz.

Bir çatı kullanmadaki bir diğer fayda da on tanımlı bir çok uygulama eklentisi sunmasıdır. Yani bir web uygulamasında muhtemel olarak kullanacağınız her element için düzgün bir kozmetik hazırlık bulabilirsiniz. Size bunu bir css çatısı önererek anlatmaya çalışacağım.

Twitter bootstrap

Twitter deyince hemen bunun arayüzle ne ilgisi var diyebilirsiniz. Twitter ekibi, twitter'da kullandıkları arayüz kozmetiği ve bazı jquery eklentilerini paketleyerek açık kaynak kodlu bir çatıya dönüştürmüşler. Su an 2+ sürümüne sahip twitter bootstrap aslında bir web uygulaması için başlangıç arayüzleri oluşturmak için tasarlanmış. Yani ufak bir web uygulamanız var ise bunu twitter bootstrap kullanarak çok kolay şekilde şekillendirebilir, eklentilerini kullanarak zenginleştirebilir ve html yapınızı biraz oynayarak arayüzünüzü farklı cihazlarda ve ekran çözünürlüklerinde düzgün görüntülenebilir bir şekle getirebiliyorsunuz.

Örnegin bir RSS kaynağından aldığınız müzik dosyalarını işleyerek bir web arayüzü hazırlamak istiyorsunuz. Sunucu tarafını php ile yazdığınızı düşünürsek, php ile yazacağınız şeyleri yazdıktan sonra, sunucu tarafına ayırdığınızdan belki katlarca daha fazla zamanı arayüzü kodlamakla harcama ihtimaliniz var. Twitter bootstrap kullanarak formlarınızı, butonlarınızı, gridlerinizi, tab veya fare imlecine göre görünüp kaybolan ipuclari ile uygulamanızı zenginleştirebilirsiniz. Farklı tarayıcı uyumlulukları, farklı çözünürlükler gibi şeylere kafa yormanıza genel konular dahilinde gerek kalmıyor.

İstediğiniz özel stilleri, varolan stillere eklemeler yapacağınız gibi varolan stilleri de değiştirebiliyorsunuz. Hatta kaynak koda girip tüm yapıyı da oynama seçemediğiniz var. Ancak twitter bootstrap size sadece önceden kodlanmış bir arayüz sunuyor, yaptığınız eklentilerde veya değişikliklerde yine css3'un hammal yanını göreceksiniz.


CSS Çatıları (framework) tek seçenek mi?


Hayır, çatılar birçok işinizi kolaylaştırsa da temeldeki css dilinin getirdiği yapıyı değiştiremeyeceği için tekrar eden kodlardan kurtulamayacaksınız ayrıca matematiksel çarpanlı yani mimari arayüzler hazırlamanızda size daha önce tanımlı olduklari değerler kadar esneklik sağlayacaktır.

CSS'i dil olarak daha öteye taşıyan ve birbirine benzeyen birkaç yapıdan bir tanesini kısaca anlatarak bahsedeceğim.

Ben, kişisel olarak projelerimde LESS kullanıyorum. Less, css dökümanlarınızda iç içe tanımlamalar yapabilmenizi, fonksiyonlar tanımlayıp fonksiyonları kullanarak renk değişimleri, matematiksel işlemler yapabilmeyi ve benzer programatik şeyler yapabilmenizi sağlıyor, yabnı kısaca css'e bazı programsal özellikler ekliyor. Birkaç farklı method ile kullanılabiliyor. En yaygın kullanımı bir javascript dosyası ile css'inizi tarayıcıda derleyebiliyorsunuz. En pratik kullanımı bu. Fakat tarayıcıdaki ön bellek, geliştirme esnasında baş ağrısı yapabildiği için kodunuzu yazdığınız gibi css dosyalarına derleyerek kullanmanızı tavsiye ediyorum. LESS hakkında biraz daha detaylı yazdığım su yazıyı inceleyebilirsiniz:http://mfyz.com/less-ile-hiyerarsik-ve-fonksiyonel-css-yazmak

Benzer şeyleri yapan ve çok derinlerine inmediğim SASS'i da deneyebilirisiniz.http://sass-lang.com/

Neden sadece twitter bootstrap ve less'den bahsettim?

Çünkü twitter bootstrap kaynak kodlarında less ile yazılmış. Yani kaynak kodunu indirip less kodlarındaki kuralları değiştirerek esnek bir grid'i isteğinize göre üretebilirsiniz, renk kurallarını veya kenar boşlukları, gibi bir çok şeyi less ile çok daha kolay şekilde değiştirebilirsiniz.

İster bir çatı kullanın ister sadece LESS, SASS gibi diller kullanın, yazdığınız css'lerinizi daha hızlı üretmenizi sağlayacak çok güzel araçlar var.


Hazırlayan: Mehmet Fatih YILDIZ

Popüler Etiketler

kontrol yapıları if switch assets javascript css framework örnek kod iOS jquery plugin optimization html media screen sitemap seo google pharma hack php wordpress social sosyal mail newsletter subscription api gimp ie browser wanda proje kampanya xhtml job digital iphone search kurulum nasıl language chart grafik mfyz generator css3 support spam osx applications free rss xml nedir macosx htaccess url medya pear mdb2 prepare execute mysql mssql pgsql istatistik statistics graph while konsol terminal apple mobile startups linux login twitter portfolio less compile compiler windows app on-the-fly apache route router mod_rewrite ubuntu workspace js tebrik internet optimizasyon coding fstab ntfs export link doritos tytz ios development box widget object player license lisans mootools html5 form input design integration service network blog cookie subdomain bootstrap subversion svn lifestream parse ide editor phpstorm jetbrains deployment version control git meta share facebook connect session sql analyse procedure open source firefox ipad app store store in-app purchase purchase verification storekit itunes connect itunes server internet explorer signature imza kitap ui db database oyun download wireless regex table web app www redirect crossdomain opengraph fql dokuman ux webkit browsers query select music calendar tool ruffles developer injection radio button date diff zaman tarih cms insanlar laptop notebook textarea code cache banner ajax icons auth style xmlhttprequest icon ikon logo ipucu http howto