9 Aralık Pazar ´12   —   5 Yorum
Geçen hafta mfyz.com'un mobil uyumlu arayüzü üstüne çalıştım. 4 günlük bir çalışma sonucunda artık siteye mobil cihazlarınızdan uyumlu bir şekilde ulaşabileceksiniz.

Önümüzdeki haftalarda bu konuyla iligili bir yazı serisi yayınlamayı planlıyorum. Bir çok CSS çatısı zaten böyle arayüzleri hazırlamanızı sağlıyor şu anda. Ancak mfyz.com'da arayüzde herhangi bir çatı kullanmamıştım. Belki twitter bootstrap'a geçirebilirdim fakat gerek de görmedim, zaten çok basit bir arayüz yapısına sahip şu an gördüğünüz arayüz.



Masaüstü versiyonu (yukarıda görebileceğiniz şekilde), 800px genişlik ve üstündeki çözünürlüklerde görüntüleniyor. 800px'den küçük çözünürlüklerde site, mobil uyumlu yani akışkan (fluid) arayüze dönüşüyor. Bildiğiniz gibi akışkan arayüzlü sayfalar, çöznürlük bağımsız ekrana yayıldığı için farklı çözünürlüklerde sorunsuz görüntülenebiliyor. Bu açıdan çoğu mobil uyumlu sayfalar akışkan arayüzle tasarlanır.

Tablet cihazlar yan tutulduğunda, genellikle 800px üzeri çözünürlüklere sahip oldukları için mfyz.com'u masaüstünüzdegördüğünüz tasarımıyla görüntüleyebileceksiniz. Dolayısıyla eğer mobil arayüzde eksik olan bir fonksiyonalite var ise tablet cihazınızda yatay konumda tüm fonksiyonlara sahip olacak. Çünkü mobil uyumlu sayfalar fonksiyonalite bakımından sadeleştirilmiş olabilir.

Çoğu tablet dikeyde 800'den daha düşük çözünürlüğe sahip olduğu için, tablet cihazınızı dikey konuma getirdiğinizde mfyz.com'un mobil arayüzünü görmeye başlayacaksınız. Mobil uyumlu sürüm, okunabilirlik açısından font boyutu optimize edilmiş, arayüzü kaydırılan sayfalar şeklinde mobil uyumlu şekilde optimize edilmiştir.



Daha da ufak çözünürlükler için (500px'den küçük çözünürlükler için) font boyutu ve nagivasyon değşiklikleri olacak şekilde küçük ekranlı mobil sürümü görebileceksiniz.

Ayrıca aşağıdaki görselde küçük ekranlı mobil cihazlarda yatayda navigasyon dışındaki değişiklik dışında siteyi mobil uyumlu bir şekilde görebilirsiniz.

Uzun bir dönem flash'ın webdeki baskınlığının sonucu olarak ekrana sığan sayfalar tercih edilmeye başlanmıştı ama hem mobil cihazların popülerleşmesi, hem blogların şu an internette çoğunluk içeriği sağlıyor olması hem de flash'ın hayatımızdan biraz daha çıkmasıyla, uzun sayfalar tekrar günlük web gezintimizde en sık karşılaştığımız sayfalar oldu. Uzun bir sayfanız var ise ve eğer metin ağırlıklı bir içeriğe sahip değilseniz muhtemelen içeriğiniz, resimler/fotograflar barındırıyor olacaktır. Bunun yanı sıra sayfanızda üst, alt veya yan alanlarda da görüntülediğiniz yardımcı içerikler olabilir.

Örnek ile basit bir wordpress blogunu gözünüzde canlandırırsanız sayfa başlığı, alt metni ve yan navigasyonda ilgili yazılar (ve bunlara ait küçük görseller) sayfanızın altında bulunan görseller, mesela sponsor logoları, statik reklamlar, birkaç ufak ikon (sosyal medya ikonlari) vs küçük büyük bir çok görseliniz olacaktır (footer, header, sidebar).

Uzun bir sayfanın en büyük tehlikesi içinde barındırdığı medya içeriği sayısı olacaktır. Eğer medya içeriği sayınız, dosya boyutları ufak medya içerikleri dahi olsa yüklenmesi uzun zaman alacaktır. Bu konuya birçok web opimizasyonu yazısında karşılaşabilirsiniz.

Şimdi çok daha anlaşılır bir örnekle bu konuyu hızlıca kod üstünde anlatacağım.

Kısa süre önce bir facebook uygulaması hazırlarken, hazırladığım bir sayfada o kullanıcının arkadaş listesini her satırda 4 avatar görünecek şekilde bir tablo şeklinde gösteren bir sayfa hazırladım. Kendi hesabımla sayfayı açtığımda 500+ arkadaş listeleniyordu ve bu da 500 avatar'ın bir sayfada olması anlamına geliyor. Sorun tabi ki internet hızı değil. Asıl problem tarayıcılar. Tarayıcılar, Her domain için, paralel iki yüklemeye izin verir ve her imajın 100 milisaniyede yükleniyor olduğunu varsayarsak, saniyede 20 fotoğraf yükleniyor diyebiliriz. 500 fotografın yüklenmesi de 25 saniye sürecektir.

Sayfa ilk açıldığında çok garip görünmüyor ama daha sayfa yüklenmeden sayfayı aşağı kaydırdığımda ekranda daha yüklenmemiş görseller görüyor oluyorum.

Bundan daha tehlikelisi bu görseller sayfanızdaki diğer kaynakların yüklenmesini geciktiriyor ve javascript akışınızı etkiliyor. Dolayısıyla iyi bir kullanıcı deneyimi değil. Zaten teorik olarak düşündüğünüzde de ekranda görüntülenmemiş belki de hiç aşşağı kaydırılarak görüntülenmeyecek medya içeriği yüklenmeye çalışıyor ve ideal olarak bunların ekranda görüntülenmeden yüklenmemesi gerekir.

Wordpress blogu örneğindeki problem şöyle olabilir. Her girdinizin bir görseli olduğunu düşünürsek ve arşiv sayfanızda her sayfada 10 girdi gösterdiğinizi düşünürsek sayfanızdaki diğer medyaların dışında uzun bir sayfada 10 görsel (yüksek çözünürlükte olabilir) görüntülenmeye çalışması performans kaybına neden olabilir.

Bu problemi bir javascript çözümü olan lazyload ile çözebilirsiniz. jQuery eklentisi olarak bulabileceğiniz eklentinin yaptığı şey her görseli jenerik bir yer tutucusu olarak yükledikten sonra o görselin ekranda görünür alanda olup olmadığını tespit ederek gerçek kaynaktan yüklemek.

Yani sayfanız yüklendiğinde bütün görseller aynı imajı yüklüyor. Genelde bu imaj 1 piksellik tek renk (gri örneğin) ufak bir görsel oluyor. Anında yüklenip tüm imajlarda yer tutucu olarak yerleşiyor. Sayfanız yüklendikten sonra lazyload, o sayfanın pozisyonunu ve görüntülenebilir alanını hesaplıyor ve görselin o alanın içinde veya yakınında olup olmadığını hesapladıktan sonra görünen imajlari yükleyip daha kaydırma pozisyonuna göre ekranda omayan veya uzak olan imajlari yüklemiyor.

Bir javascript eventi ile sayfa kaydırma hareketinizi izleyerek imajlari gösterdiğiniz anda yüklüyor.

Lazyload'i sayfanıza nasıl entegre edersiniz?

Önce bir yer tutucu görseli hazırlamalısınız, bunun için transparan veya sabır bir renk 1x1 boyutunda bir gif imaj hazırlayın.

Sayfanızdaki tüm görsel adreslerini bu imajı yükleyecek şekilde ayarlayın. İmajlarin gerçek adreslerini de "data-original" özelliğine alıyorsunuz.
<img data-original=“img/example.jpg” src=“img/grey.gif”>

Sonra jquery ve lazyload'ı sayfanıza ekledikten sonra bu imajları bir seçiciyle seçip lazyload'ı çalıştırıyoruz.
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

$("img.lazy").lazyload();
Yukarıdaki kod "lazy" sınıfındaki resimleri yükleyecektir. Daha genel bir kullanım istiyorsanız sadece img etiketlerini belirterek sayfanızdaki tüm görsellerin lazyload ile yüklenmesini sağlayabilirsiniz.

Bundan sonra sayfanızdaki görseller ekranda görüntülendikleri anda yüklenecekler. Lazyload dökümantasyonunu inceleyerek tolerans ataması yapmayı (yani görselin, sayfa kaydırılırken ekranda görüntülenmeden önce yüklenmesini saglayabilir) veya görüntülenirken bir geçiş animasyonu belirleyebilirsiniz.

Proje adresi:http://www.appelsiini.net/projects/lazyload
13 Ağustos Cuma ´10

TheSocialNetwork


Facebook film oluyormuş; e 500 milyon sınırını aştıktan sonra devliğini daha çok hissettiğimiz bir şirket haline geldi. filmde Mark Zuckerberg'in facebook'u kurması ve büyümesi sırasında yaşadıklarıyla ilgili imiş.

Zaten David Fincher etkisini hissedeceğiz gibi. Çünkü konu olarak beni çeken bir film değil açıkcası. Ama yönetmenlik, senaryoyu ele alma tarzı için görülmesi gerekir bir film olacağını tahmin ediyorum.

Detaylı bilgi isteyener filmin IMDb sayfasındanhttp://www.imdb.com/title/tt1285016/ veya official sayfasındanhttp://www.thesocialnetwork-movie.com/ bilgi alabilir, fragmanını izleyebilir.
20 Nisan Salı ´10   —   8 Yorum
SosyalMedya

"Sosyal medya", "Sosyal medya" diyip duruyorlar. Her yer sosyal medya, her yer sosyal medya uzmanı! Bu günlerde, özellikle bu yıl bunu o kadar çok duyuyoruz ki, yazılımın içinde, dışında, kampanyaların içinde dışında, her yerde.

Evet duymak güzel birşey ama sanki salgın gibi gelmeye başladı bana. Hani 2000lerde fln MMOPRG'dan dolayı fln insanlar ölürdü ya, onun gibi. Enfekte içinde ben de varım. Büyük bir vaktimi friendfeed'de geçiriyorum. Tamam belki bazı şeylere, bilgilere, etkinliklere daha yakınım saniyesinde haberdar oluyorum fakat bir yandan gizlilik (privacy) paranoyasını depreştiriyor.

Yani herşeyimizi paylaşmaya başladık.
  • Facebook ve Flickr'da fotograflarımızı,
  • Friendfeed ve twitter'da o an ne yaptığımızı,
  • Google reader'da neleri takip edip neleri okuduğumuzu,
  • Last.fm ve grooveshark'da ne tür müzik dinlediğimizi,
  • Tumblr, soupio, postreous gibi microblogging servislerinde anlık bloglama ile deneyimlerimizi

Paylaştıkça herşeyimizi ortaya seriyoruz. Bazı insanların çok hoşuna gidiyor, ben de rahatsız değilim.

Sanki birşeyler yanlış gidiyor, bir gün biryerlerden patlayacak bunlar, ama ne zaman ve nasıl?

Belki bir gün psikologların literatürüne bir tür bağımlılık, bir rahatsızlık olarak geçecek.

Popüler Etiketler

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