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.

Eğer bir iOS mobil uygulamanız var ise web sayfanıza ekleyeceğiniz basit bir meta etiketi ile uygulamanızı sayfanıza bağlayabilir ve kullanıcılarınız mobil sayfari ile sayfanızı görüntülüyorsa AppStore banner'ı ile uygulamanıza daha kolay erişim sağlayabilirsiniz.

AppStore Bar

Görsel şekilde müdahale edemeyeceğiniz bu bannerı basit bir meta etiketi ile oluşturmak mümkün.
<meta name="apple-itunes-app" content="app-id=your_app_id" />
iTunesConnect'den edineceğiniz nümerik uygulama kimliğini your_app_id ile değiştirerek sitenizin anasayfasına ekleyebilirsiniz. Gerisini safari hallediyor.

Ayrıca iPad gibi geniş ekranda görüntülendiğinde ayrıca uygulamanızın ekran görüntülerinin bir setini bu bar içinde görebiliyor kullanıcılarınız.
23 Ekim Salı ´12   —   3 Yorum
HTML5 git gide daha popülerleşiyor ve eski html kodlarının yerini, daha sade html5 kodlarına bıraktığını, daha önce javascript eklentileriyle yaptığımız bazı şeyleri yeni html5 tanımlamasında yeni özellikler olarak görmeye başladık.

Özellikle mobile web uyumlu sayfalar yaygınlaştıktan sonra html5 tanımlamaları sadece masaüstü bilgisayar tarayıcıları değil mobil tarayıcılar için de özel yetenekler içermeye başladı.

Eğer birkaç yıldır güncellenmeyen bir tarayıcınız varsa HTML5 formların tüm özelliklerini desteklemeyebilir fakat güncel ve modern tüm tarayıcılar birçok html5 form özelliğini destekliyor.

İşte yeni html5 form özelliklerinden bazıları...

Devamını Oku →
Geçen sayıda, günlük hayatımıza giren dijital alışkanlıkların yeni bir türü olarak hayatımızı dijital ortamda kaydetmek üzerine, ağırlıkla sağlıklı yaşam için üretilmiş bazı donanımlardan bahsetmiştim. Bu sayıda daha genel bir konudan, konum bazlı servisler ve uygulamarın hayatımızdaki yerinden bahsedeceğim.

Bilgisayarların cebimize girmesinin yanı sıra mobil internetin de yaygınlaşması sayesinde kesintisiz bağlı yaşamaya başladık. Artık mobil cihazımızdan her an istediğimiz bilgiye ulaşabiliyoruz.

Cihazların küçülmesinin yanı sıra, donanımsal olarak yapabildikleri sayesinde her gün bir çok yaratıcı ürünle karşılaşıyoruz. Özellikle iPhone ve Android ile çalışan akıllı telefonlar sayesinde uydu konumumuzu hesaplatabiliyoruz. Bunun anlamı, birkaç metre sapmayla konum bilgisi elde edebiliyoruz cebimizde taşıdığımız cihazlarda.

Teknik bir bilgi olmasından dolayı bu açıklama hala çok anlam ifade etmese de pratikte çok faydalı bir bilgi olarak kullanılıyor. En basit örneği ile, konum bazlı bilgi ilk olarak ve halen en çok kullanılan bir araç olarak, yön bulmak için kullanılıyor. Yön bulmak için artık uydu konumlandırma cihazlarına ihtiyacımız yok çünkü artık bu teknoloji cep telefonlarımıza sığabilecek boyuta indirildi. Çünkü eskiden uydu konumlandırma cihazlarıö daha çok askeri amaçlarla biraz daha büyük cihazlar olarak kullanılıyordu.

Devamını Oku →

Popüler Etiketler

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