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

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