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

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