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 →

Less


Less dosyalarıyla çalışıyorsanız ve eğer arayüz geliştiriyorsanız yazdığınız kodu tarayıcıda anlık olarak görmek isteyeceksiniz. Less dosyalarını kaydettiğiniz gibi derleyen aşağıdaki araçlarla hangi platformda çalışıyor olursanız olun otomatik olarak derletebilirsiniz.

Less derleyicilerini toparladığım ufak bir yazı hazırladım:http://mfyz.com/dokuman/127/less-dosyalarinizi-anlik-csse-cevirin
Css yazmayı bırakıp Less ile çalışmaya başlamadınız mı? O zaman şu bökümandan devam edin ve less'in avantajlarına göz atıp size ne fayda sağlayabileceğiniz basitçe anlayabilirsiniz.

Less dosyalarıyla çalışıyorsanız ve eğer arayüz geliştiriyorsanız yazdığınız kodu tarayıcıda anlık olarak görmek isteyeceksiniz. Less dosyalarını kaydettiğiniz gibi derleyen aşağıdaki araçlarla hangi platformda çalışıyor olursanız olun otomatik olarak derletebilirsiniz. Hatta bazıları, açık olan tarayıcılarda, lokal geliştirme ortamınıza ait bir URL açıksa onu da otomatik yeniliyorlar. Dolayısıyla sadece tarayıcınızı kontrol etmeniz yetebiliyor değişiklikleri görmek için.

Bu derleyiciler aynı zamanda less kodunuzu denetleyerek hataları bildiriyorlar. Sonuç olarak yazdığınız less dosyalarınız da css dosyalarınız da geçerli css çıktısı olarak sitenizde yayınlanıyor.

Less.app

Sadece MacOSX'de çalışan bu uygulamaya çalıştığınız projeleri, klasörleri sürükleyip bırakarak otomatik tarattırıp proje olarak ekliyorsunuz. Size o projede bulduğu bütün less uzantılı dosyaları listeliyor. Dosyalar güncellendiği anda da dosyaları css dosyalarına derleyip growl uyarısı ile bildiriyor.
http://incident57.com/less/

Simple Less

Bu uygulama biraz daha basit bir arayüze sahip ve tüm platformlarda çalışıyor. Çok platformda çalışan geliştiriciler için oldukça ideal.
http://wearekiss.com/simpless

Winless

Sadece Windowsta çalışan, klasik Windows arayüzüne sahip ufak bir araç.
http://winless.org/


Hazırlayan: Mehmet Fatih YILDIZ
28 Kasım Pazartesi ´11   —   4 Yorum
Bir suredir yavas da olsa yeniden duzenledigim mfyz.com kodlarini sonunda arayuz kismiyla daha cok zaman harcayip oynayabilecegim bur sekle soktum. Ozellikle tum arayuz parcalarini phptal, less ustune oturtmaya baslamistim. Simdi herhalde su ana kadarki en buyuk degisikligi yaptim ve giris sayfasini yeniledim.



Su an giris ve sifre hatirlatma sayfalari basit bir arayuzle goruntuleniyor, birkac adim sonrasinda bunu lightbox ile normal sayfalarin uzerinde cikacak sekile getirebilirim veya bu sayfalar javascripti olmayan insanlar icin failsafe sayfalar olarak da kalabilir.

Bol bol css3 ve webkit ozellikleri kullanarak hazirladim, sadece kapat tusundaki ikon imaj olarak bir sprite'dan geliyor, gerisi tamamen css3. Tabi less ile cok daha hizli yazip derliyorum css'leri.

Simdi tum bolumleri tek tek sadelestirip eski arayuze ait kodlari temizlemeye calisiyorum. Bitirdigimde artik UX, fonksiyonaliteye odaklanabilirim. Tabi icerigi de ihmal etmemeye calisacagim.

Popüler Etiketler

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