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

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