mfyz.com artık mobil uyumlu

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.

Sayfa görsellerini sayfa yüklendiğinde değil ekranda görüntülendiğinde yüklemek

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 1×1 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.

Sonra jquery ve lazyload’ı sayfanıza ekledikten sonra bu imajları bir seçiciyle seçip lazyload’ı çalıştırıyoruz.

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

Sosyal Medya’nın dibine vurmak


“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.

Facebook paylaşım detaylarını kişiselleştirme

Biliyorsunuz Dünya’da Facebook kullanımında üçüncüyüz (2010 2. Çeyreğinde). Facebook kullanımı ve Türk milletinin facebook’da geçirdikleri vakit çok ve paylaşmayı seven bir millet olduğumuzdan her şeyi, sayfaları, etkinlikleri vs sürekli paylaşıyoruz. Link veriyor, video paylaşıyor, yorumlar yazıyoruz.

Şu an birçok kampanya şekillendirilirken sosyal medya entegrasyonu, sosyal medya yayılımı/dağıtımı düşünülerek tasarlanıyor. Hatta birçok kampanya sadece sosyal medya ile işler halde kurgulanıyor.

Neyse, bir web geliştiricisi olarak bir çok sayfa üretiyorsunuz, bunların paylaşılırken nasıl göründükleri, arama motoru, paylaşım botlarının sayfanızı otomatik olarak tanıdığını fakat nasıl tanıdığına belki dikkat etmiyorsunuz.

Facebook dışında metalardan görsel, video alan sosyal medya araçları var. Bu servisler aslında basit meta etiketlerindeki title, description, keywords bilgilerini kullanıyor fakat biliyorsunuz ki görsel ile desteklemek her zaman içeriğinizi daha zengin ve doğru gösterecektir. Aşağıda geniş bir örnek ile birkaç ek meta etiketi ile içeriğinizi botlara nasıl anlatacağınızı göstereceğim.

 

Yukarıda gördüğünüz önizleme, sayfanız paylaşıldığı zaman çıkan görsel ve metinlerdir. Facebook paylaşımları 3 parçadan oluşmaktadır. Sayfa görseli, başlığı ve açıklaması.

Görsel belirleme

Facebook sayfasında çıkan görsel eğer siz meta tagler ile belirlemediyseniz, sayfa içinde bulunan imajlardan otomatik olarak seçilir. Ama genellikle anlamsız imajlar ortaya çıkmaktadır. Bunu belirlemek için az sonra bir meta etiketi ile bir imaj göstereceğiz. Her sayfanız için özel bir görsel belirleyebileceğiniz gibi tüm siteyi anlatan tek bir görsel kullanarak da bu imajı belirleyebilirsiniz. Burada dikkat edeceğiniz nokta, kullanacağınız görselin boyutları arasındaki orandır. Facebook zaten sizin görselinizi resize edecektir fakat eğer belirttiğiniz görsel genişliği ile yüksekliği arasında katlarca fark varsa, yani fazla geniş veya fazla uzun görseller ise facebook bu görselleri görmezden gelecek ve resimsiz çıkacaktır. Genel bir görünüm oranı olan 4:3 veya 16:9 gibi resim formatlarını kullanabilirsiniz. Yani eni boyundan biraz daha uzun olan imajlardan bahsediyorum. Ayrıca bu imajın boyutunu kocaman bir wallpaper olarak koymayın. Zaten maksimum 100px genişlikte görüntülenecektir. Yani siz burada 200px genişlik 150px yükseklikte bir imaj hazırlayarak iyi bir oran yakalayabilirsiniz.

İkinci konu da görselinizin içeriği. Bu görselde çok fazla metin de kullanmayın, çok fazla resimsel format da. Yani burada kullanacağınız şeyin basit bir banner olduğunu düşünerek bir slogan ve bir ikon veya bir artalan fotografı üzerine bir logo da olabilir. Aşağıda örnek olarak hazırladığım bir imajı görebilirsiniz.

Eklenmesi gereken Meta etiketler

Aşağıda örnek bir kullanım göreceksiniz :

title ve description’da sayfa başlığı ve sayfa özeti yer alacak, image_src’de de yaptığınız görselin adresi yer alacaktır. Bu meta etiketlere sahip bir sayfayı facebook’da paylaşmak isterseniz yukarıda verdiğim önizlemedeki gibi bir sonuç elde edersiniz.

Sadece imaj değil, sayfa içerisindeki video ve ses dosyalarını da paylaşırken belirterek friendfeed gibi servislerde taranabilmesini sağlayabilirsiniz fakat yukarıdaki kullanım genel olarak tüm sayfalarda kullanılan çözümdür.

Eğer bu konuda bilgi edinmek isterseniz veya bu konuyu daha detaylı incelemek isterseniz Facebook Dökümantasyonundan bilgi alabilirsiniz.

Paylaşım

Sayfanızın paylaşılması için facebook share butonları ekleyebilir (http://www.facebook.com/facebook-widgets/share.php) veya doğrudan kendiniz link ile http://www.facebook.com/sharer.php?u=YOUR_URL şeklinde get methodu ile sayfa adresinizi bu adresin sonuna urlencode eidp eklerseniz facebook botu sayfanızı anlık tarayabilecektir.

Ya da normal şekilde insanlar sayfa adresinizi kopyala yapıştır yaparak facebook mesajlarına, news feedlerine ekleyeceklerdir.

Twistory ile twitter geçmişinizi takviminize yedekleyin

Twitter geçmişinizi yedeklemeyi belki hiç düşünmediniz ama bu araç twitter geçmişinizi post tarihlerine göre ical takvim dosyası şeklinde almanızı sağlıyor. Basit bir şekilde twitter kullanıcı adınıza göre ical dosyası şeklinde export alıyor ve icalendar, google takvim veya outlook’unuza import edebiliyorsunuz.

Şuradan devam edin twistory.net

Benim dalgam senin dalganı döver!


Google Wave çıktı, büyük bir ses ile çıktı, insanlar facebook’un tahtını kapacak fln dediler, insanlar günlerce invite aradı (biz de), e invite aldık içeri girdik, ne anlaşılır bir yapı ne de user friendly bir kafa. Sosyal medyanın kendi kendine virütik özelliğini kapamamış bir araç çıktı.

Teoride plug-in, extension, oyunlar, araçlar ile iletişimi zenginleştirme gibi amaçları var belki şu an closed-beta olmasından dolayı mıdır bilmiyorum ama kimse girip wave içinde zaman geçirmeye çalışmıyor. Friendfeed gibi akıcı bir yapısı yok.

Sonuç olarak ileride neler olur bilmiyorum ama bana göre google wave başlangıcı fail olmuş bir proje. Gmail veya google reader/calendar gibi eski örnekleri değerlendirdiğimde onların başlangıcı her ne kadar kapalı-beta başlasa da bu kadar “insanların hayal kırıklığı” ile sonuçlanmamıştı.

Not: Başlığı her türlü yorabilirsiniz, ne kadar fesat olduğunuza bakar 🙂