Hibrid Mobil Uygulama ve Web Teknolojileri

Günümüzde mobil uygulamaları en çok HTML diliyle kodlanmaktadır. Bunun belirli başlı sebepleri vardır. HTML kodlaması platformlar arası taşınabilir özelliğe sahiptir. Ayrıca geliştirme bakımından kolay ve ucuz olma özelliklerine sahiptir. Hibrid uygulamalar ise genellikle kötü tasarlanmalarıyla tanınmaktadır. Fakat kaliteli bir şekilde hibrid uygulamalar yaratmak mümkündür. Bu nedenle sizlere iyi bir hibrid uygulama yaratmak için gerekli bazı kodlardan ve bilinmesi gereken ince ayrıntılardan söz etmek istiyoruz.

Mobil uygulamalar kendi içinde bazı kollara ayrılır. Genel olarak mobil uygulamalar web uygulamaları, yerel uygulamalar veya hibrid uygulamalar halindedir. Bilindiği gibi yerel uygulamalar cihazınızın tüm kapasitesini kullanır. Bu şekilde yerel uygulamalar belirli platformlarda çalışır ve az eforla sistemi kullanmaya devam eder. Web uygulamaları ise platformlar arası taşınabildiği için düşük bir maliyete sahiptir. Geliştirilebilme bakımından daha az uğraş gerekir. Hibrid olanlar ise her iki türün iyi yanlarını alarak ortak kodlarla çeşitli platformlarda kullanılabilirler.

Hibrid uygulamalar iki şekilde oluşturulabilirler. Bunlar “derleme uygulamalar” ve ” WebView uygulamalar” şeklindedir. WebView uygulamalar dahili bir tarayıcıda çalışırlar. Java, CSS ve HTML tabanlıdırlar.

Derleme uygulamalarda kodlama biçimi tek bir dil ile yapılır. Derleme uygulamalar desteklendiği platformlara göre oluşturulur. Doğal olarak her platforma ayrı bir yerel kodlama kullanılır.

Hibrid uygulamaların iyi ve kötü yanları vardır. Hibrid uygulamaların bu iyi ve kötü yanları hakkında kısaca bilgi verelim:

• Hibrid uygulamalar birçok platform için tek kod kullanım kolaylığı sağlar

• Tasarımcılar web ile ilgili donanımlarını kullanabilirler

• Uygulamayı geliştirme zamanı ve maliyeti düşüktür

• Kimi cihazların özelliklerine erişebilme sağlarlar

• Yerel ve mobil tarayıcılara konabileceğinden kolay görünür olurlar

• Çevrimdışı özellikleri bakımından gelişmişlerdir

• Hibrid uygulamalar belirli uygulamalarda sorun yaratabilir

• Tüm cihaz ve işletim sistemleri tarafından desteklenmezler

• Yeterince orijinal olmadığında Apple tarafından tanınmama ihtimalleri vardır

Hibrid uygulamaların avantajlı ve dezavantajlı yönlerini dikkate alarak rotamızı belirlemeliyiz. Hibrid uygulamalar her uygulamaya uygun olmayabilirler. Kitlenizi belirledikten sonra onların hangi uygulama türünü tercih ettiğini ve hangi platformları kullandıklarını dikkate almalısınız.

Öyleyse orijinal bir görünüm ve hissi nasıl meydana getirebiliriz? Cihazların ve işletim sistemlerinin tüm özelliklerini kullanabilmek, daha sonra uygulamayı bir App Store içinde yayınlamak bir tasarımcının en çok istediği şeydir. Kullanıcıları bu orijinal fikre çekmek hibrit mobil geliştiricilerin en çok zorlandığı konu haline gelmiştir.

Bir kod tabanı tüm platformlarda aynı görünmek zorunda değildir. Kullanıcılar platformlar arası geçiş teknolojisiyle ilgilenmek yerine uygulamadan keyif almayı isteyeceklerdir. Bu nedenle her platformun tasarımla ilgili olan özelliklerine bakmalısınız. Her ürünün tasarım rehberleri ( iOS Developer Library, Android Developers, Windows Dev Center) her uygulama için kusursuz olmayabilirler. Ancak bunlar farklı platformdaki kullanıcılara farklı arayüzler ve deneyimler sunabilirler.

Özel kullanım arayüz bileşenleri kullanım açısından fena değillerdir. Bir tasarımcu olarak kullanıcıların beklentilerine göre özel bir bileşen arayüzü ile platformun arayüzü arasında seçim yapabilirsiniz. Kendi tasarımlarınızı oluşturmak için UX tasarımlarıyla ilgili bilgi sahibi olmalısınız.

Mobil arayüzleri ile ilgili olarak şu kaynaklara göz atabilirsiniz:

http://de.slideshare.net/yaelsahar/tapping-into-mobile-ui-with-html5

http://sixrevisions.com/user-interface/mobile-ui-design-patterns-inspiration/

Orijinal Görünümlü Başlık Çubuğu Tasarımı:

<header> <button class=”back“>Feed</button> <h1>Details</h1> <!– more actions (e.g. a search button on the right side) –></header>

Arayüzlerde ilk dikkat edilmesi gereken şey başlık, gezinti özellikleri ve yukarı, geri gibi düğmelerin tasarımıdır. Daha detaylı kodlama için şu bağlantıyı inceleyebilirsiniz:

http://jsfiddle.net/prud/dnebx02p/

Yüksek Çözünürlüğe Çözüm

Üretilen akıllı telefon ve tabletler artık yüksek çözünürlüklü olmaya başladı. Android ve IOS tabanlı telefonların neredeyse %70 ile %80 kadarlık kısmı günümüzde yüksek çözünürlüklü modellerden meydana geliyor. Siz de resimlerinizin daha net görünmesini sağlamak için resim boyutunu iki katı vermek durumundasınız. Buradaki asıl mesele tüm çözünürlük çeşitlerine uygun olabilecek resim boyutlarını belirleyebilmektir. Bu konu tasarım dünyasının önemli meselelerinden biri haline gelmiştir. Birbirinden farklı yaklaşımların kendi içinde avantaj ve dezavantajları bulunmaktadır. Her birini inceleme imkanımız olmadığı için bazı örnekleri dikkate alarak fikir sahibi olabiliriz:

Sunucun yeniden boyutlandırması, İstemci tarafından algılanıp Java Script ile değiştirme, HTML 5 resim öğesi, HTML 5 scrset özelliği, CSS resim kümesi, CSS media sorgulama ve SVG (Çözünürlükten bağımsız görüntüler)

Daha önce de söz ettiğimiz gibi kusursuz resimler yaratmanın kesin bir formülü yoktur. Kullanacağımız uygulamalara, görüntülere ve onların boyutlarına bağlı olarak farklı durumlar meydana gelir. Örneğin logo gibi durağan görüntüler için SVG kullanabilirsiniz. SVG fazla çabaya gerek kalmadan tarayıcı olarak harika bir sonuç yaratır ve Android 3+ ile uyumlu bir şekilde çalışır. Eğer SCG kullanmayı düşünmüyorsanız HTML 5 resim öğesini veya HTML 5 srcset özelliklerini kullanabilirsiniz. Bu özellikler şimdilik sınırlı bir tarayıcı ile çalışmaktadır.

Tüm bunların yanında CSS arka plan resimleri ve media sorgulayıcıları şimdilik en akılcı yaklaşım olabilir:

/* Normal-resolution CSS */.logo { width: 120px; background: url(logo.png) no-repeat 0 0;}/* HD and Retina CSS */@mediaonly screen and (-webkit-min-device-pixel-ratio: 1.25),only screen and ( min–moz-device-pixel-ratio: 1.25),only screen and ( -o-min-device-pixel-ratio: 1.25/1),only screen and ( min-device-pixel-ratio: 1.25),only screen and ( min-resolution: 200dpi),only screen and ( min-resolution: 1.25dppx) {.logo { background: url(logo@2x.png) no-repeat 0 0; background-size: 120px; /* Equal to normal logo width */ }}

Eğer uygulamanız çok sayıda içerik verisine sahipse (haberler makaleleri gibi) ve çok sayıda görüntü etiketleriyle CSS üzerinden uğraşmanız gerekiyorsa bu durum yorucu bir iş haline gelebilir. Böyle durumlarda sunucu taraflı yaklaşım en ideal çözüm olabilir. Son dönemde Android dünyasının XXHDPI adı verilen ve çok yüksek çözünürlüğe sahip bir teknoloji getirdiğini aklınızda bulundurun. Yukarıda bahsettiğimiz hangi yöntemi kullanıyor olursanız olun artık kullanacağınız görüntülerin en az üç katı boyutunda olacak şekilde destekleneceğini unutmayın.

Yazı Karakterleri

Kullanıcılarınızı daha rahat hissettirmenin bir yolu da sistem yazı karakterlerini kullanmaktır. Orijinal Windows Phone, IOS ve Android yazı karakterleri şu şekildedir:

Örnek olması açısından; büyük platformlarda bu yazı karakter gruplarını kullanabilirsiniz:

/* iOS */font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;/* Android */font-family: ‘RobotoRegular’, ‘Droid Sans’, sans-serif;/* Windows Phone */font-family: ‘Segoe UI’, Segoe, Tahoma, Geneva, sans-serif;

IOS 7 cihazlar yazı tipi, boyutu ve satırı kullanmada bazı özel seçenekler sunmaktadır.

İkonlar

İkonlar mobil uygulamaların önemli bir parçasıdır. Bir ikon birçok şeyi anlatmanın en kolay yolu kabul edilmektedir. Kullanıcı deneyimini keyifli bir hale getirmenin paçası sayılan ikon kullanımı tıpı yazı karakterlerindeki gibi özenle seçtiğiniz ve kitlenize hitap etmeyi hedefleyen araçlardır. Bu noktada yukarıda bahsettiğimiz yüksek çözünürlük konusunu göz önünde bulundurmanız gerekir. İkonlarınız ölçeklere uygun olmalıdır. Bunları tıpkı bir yazı karakteriymiş gibi CSS’ @font-face aracılığı ile uygulamak ölçeklendirmenin en kolay yollarından biridir. Bu şekilde ikon geniş bir tarayıcı seçeneğine hitap eder. İkon görünümleri Css aracılığı ile kolay bir şekilde değiştirilebilir. (Rengi, gölgesi, şeffaflığı vs.)

Geniş bir ikon yazı karakterleri edinin. (Ionicons, IOS ve Android için ek simgeler içermektedir.) Bunları ikon karakter üreticisi ile harmanlayın. Birçok ikon ve karakter kullanmak ve onların boyutlarını düzenlemek bazen kafa karıştırıcı olabilir. Fontello ile farklı ayarları harmanlayabilir, anahtar kodlarını düzenleyebilir ve her platforma aktarabilirsiniz. Sonuç şu şekilde olacaktır:

Bu şekliyle IOS, ANDROID ve WINDOWS PHONE’daki arama ikonu gibi olur.

Bunun yanında IcoMoon ve Fontastic gibi popüler ürünlere göz atabilirsiniz.

Performansı Arttırma

Hibrid mobil uygulamaların performans bakımından avantajlı olmadığı düşünülür. Bunun doğru olduğu yerler vardır. Mesela, uygulamanız animasyon olarak çok kalabalıksa, eski cihazlarda çalıştırılıyorsa ve büyük kaydırma listelerine gerek duyuyorsa performans bakımından dezavantajlı olma durumu ortaya çıkabilir. Ancak yeni platform sürümleri tercih edildiğinde ( Android 4+, iOS 7+ ve Windows Phone 8+) alacağınız sonuçlar çok daha iyi olacaktır. Asıl mesele, DOM ve CSS ayırıcılarını düzenlemek için, JavaScript yazımı yapmak için, ve yeniden çizim yapma özelliklerini aza indirgemek için ne kadar çaba sarf ettiğinizdir. Mobil performansı ile ilgili birçok konu başlığı ve kitap bulabilirsiniz. Bunlar inceleyerek kendinizi daha da geliştirebilirsiniz.

Algılanan Hızın Arttırılışı

Performans uygulaması yapmak başka bir mesele, onun daha hızlı çalıştığını hissettirmek bir başka bir meseledir. Uygulamanızın bir görevi yerine getirmek için ne kadar süreye ihtiyaç duyduğu (ağır hesaplamalar, bir sunucuya bağlanma gibi) önemli bir geribildirim olacaktır. Bu iyi bir kullanıcı deneyimi sağlama bakımından çok önemlidir. Uygulanacak en pratik çözüm kullanıcının o an ihtiyaç duymadığı görevi geciktirmektir. Bunun benzer bir örneğini Instagram’da görebilirsiniz. Kullanıcı o an paylaşım yapıp, etiket eklerken resimler arka planda yüklenmektedir. Algılanan hızla gerçek hız arasında fark vardır. Bu durum bir avantaja dönüştürebiliriz.

• Tıklama gecikmesini dokunmatik ekranlardan çıkarın. Yakınlaştırma yapmak için hafifçe vurma özelliğine ihtiyacınız yoksa bunu kısa süreli gecikmeyi JavaScript gecikme özelliğinden çıkarabilirsiniz. Bunu yapmanın yollarından biri FastClick kitaplığıdır. Bunu Internet Explorer dışında kalan her şeyde kullanabilirsiniz.

if (‘ontouchstart’ in window) { window.addEventListener(‘load’, function() { FastClick.attach(document.body); }, false);}

Internet Explorer 10+ biraz daha kolaydır, sadece biraz CSS ihtiyacınız vardır.

html { -ms-touch-action: manipulation; /* IE 10 */ touch-action: manipulation; /* IE 11+ */}

• Eninde sonunda kullanıcı hareket edebilir bir öğenin üzerine tıklayacaktır. Bu bir bağlantı veya düğme olabilir. Uygulama kullanıcıların hareketlerini tespit ederken kullanıcıların bir geribildirime ihtiyacı olabilir. CSS pseudo-class : masaüstlerinde mükemmel çalışsa da mobil ortamda çalışması için Active veya JavaScript çözümüne ihtiyacınız vardır. Mobil cihazlarda etkin durumlarını ayarlarken varsayılan tap vurgusunu kaldırabilirsiniz. Kullanıcı yanlışlıkla düğmeyi tıklarsa bu görüntü rahatsız edici olabilir. Bu nedenle uygulanabilir öğeler üzerinde tap düğmelerini uzun süreliğine devre dışı bırakabilirsiniz.

• Android ve IOS

button { outline: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;

• Windows Phone 8+

• Uygulamalar biraz vakit alacak özelliklere sahip olacaktır. İşlem süresi bir saniye bile olsa bir yükleniyor göstergesi kullanın. Bunu yapmadığınızda kullanıcılar uygulamanızın donduğunu düşünebilir, tekrar tekrar tıklayabilir ve uygulamanızı suçlayabilirler. Mobil tarayıcılarda animasyon GIF kullanmak pek parlak bir fikir değildir. İşlemci meşgul olduğunda GIF donabilir ve tüm yapmak istediğimiz çöpe gidebilir. Bunun yerine Spin.js gibi bir çözüm kullanabilirsiniz. Bu çözümün yanında JavaScript ve CSS çözümlerini inceleyebilirsiniz.

Doğru Bir Şekilde Kaydırma Sağlamak

Doğru bir şekilde tasarlanan kaydırma kullanıcılar açısından önemli bir unsurdur. Bir uygulamanın başarısı desteklediği mobil işletim sistemlerine ve kaydırma özelliklerine bağlıdır. Sabit bir üst ve altı bilgi çubuğu ile kaydırılan içerik tüm uygulamaların ortak özelliğidir. Bu genellikle CSS ile sağlanır.

• body üzerinde kaydırmayı etkinleştirir ve header üzerindeki position fixed: kısmına uygularsınız

• body üzerindeki kaydırmayı devre dışı bırakır ve içerikteki overflow scroll kısmına uygularsınız

• Yine body üzerindeki kaydırmayı devre dışı bırakır JavaScript içeriğe göre özel kaydırmaya uygularsınız

İlk özellik faydalı olsa da ikinci özellikte yer alan overflow scroll ile yola devam etmenizi öneriyoruz. Bu seçenek görüntü oluşturma bakımından daha az sorun çıkaracaktır. Tarayıcı desteği bakımından yeni sürümlere çok daha uygundur. (Android 4+, iOS 5+ ve Windows Phone 8+)

Momentum Etkisi

Dokunmaya duyarlı olan momentum etkisi kullanıcıların büyük içerikleri hızlı bir şekilde, kolayca kaydırmasına imkan verir. IOS 5+ sürümünde ve Android sürümlerinde, Chrome’un bazı sürümlerinde basit bir CSS ile rahatça etkinleştirilebilir. IOS’ta, içeriğin üst ve alt kenarlardan sıçramayı yapmayı da mümkün kılar.

overflow-y: scroll;-webkit-overflow-scrolling: touch;

Yenilemeyi Aşağı Çekmek

Bunu yapmanın pek çok yolu vardır. IOS ve Windows Phone için çözümler benzerken Android bu konuda kendi mekanizmasını oluşturmuştur. Biz ise bunu CarchApp, Css ana kareleri ve biraz JavaScript kullanarak yapacağız.

Yukarıya Kaydırmak

Maalesef body üzerindeki kaydırma özelliğini devre dışı bırakmak kullanıcıların durum çubuğu ile yukarı çıkmasını sağlayan orijinal özelliğini bozacaktır.

Dosyalara Tıklamayı Kolay Hale getirmek

Kullanıcılar dokunmatik özellikleri kullanırken asıl hedefi birkaç piksel payı ile kaçırabilirler. Bu durum özellikle küçük düğmelerde (IOS tepe çubuğu gibi) çok sık meydana gelmektedir. Tasarımcılar hedeflenen bölgenin etrafına dokunmatik özellikleri genişletecek bir alan tasarlayabilirler. Böylece hedefi tıklamak daha kolay bir hale gelebilir.

<button> <div class=”innerButton“>Click me!</div></button>

Orijinal İşlevselliği Iskalamayın

Uygulamaları web teknolojisiyle hazırlıyor olmanız orijinal özellikleri kullanamayacağınız anlamına gelmez. Aslında tüm platformlar arası geliştirme araçları işlevselliğe orijinal olarak erişebilmenize olanak tanır. Buna cihazın API verileri, ağ bağlantısı, coğrafi konumlandırma, ivme ölçerler ve bildirimler dahildir. Bir geliştirme aracını özel eklentiler kullanarak genişletebilirsiniz.

JavaScript focus özelliğini IOS 6+ giriş alanları için genişletme:

if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 6) { [YourWebView setKeyboardDisplayRequiresUserAction:NO];}

iOS’da belirli bir dizeyi cihazın panosuna kopyalamak için kullanılan kod:

[[UIPasteboard generalPasteboard] setString:@“Your copied string”];

Sorunlara Çözüm Yolları Bulmak

Tasarımcılar genellikle hibrid uygulamalarda meydana gelebilecek sorunlarla (örneğin; zaman aşımı, kötü bir girdi, zamanlama sorunu vs.) nasıl başa çıkacakları konusunu göz ardı ederler. Hibrid uygulamalar bilindik web sitelerinden oldukça farklıdır. Başlıca farklar arasında hiçbir yenileme düğmesinin olmayışı ve bazı mobil işletim sistemlerinde uygulamanın haftalarca arka planda çalışabilmesi bulunur. Kullanıcılar bir sorunla karşılaşınca yapabilecekleri tek şey uygulamadan çıkıp, yeniden başlatmaktır. Bunu yapabilmek içinse zorla durdurma seçeneği seçilmek zorundadır. Bunun nasıl yapılacağını çoğu kimse bilmez. Örneğin; Android 2’de uygulama ayarlarının altında saklıdır; IOS 6 ve alt sürümlerde home düğmesinin iki kere tıklanması sonucu uygulama sonlandırılır.

Öyleyse yenileme düğmesini görmezden gelecek, ortaya çıkan sorunlarla uğraşacağız. Kullanıcı – sunucu bağlantısı gibi beklenmedik tüm sonuçlar için hazırlıklı olmalısınız. Böylece kullanıcılarınıza çıkış yolları üretebilirsiniz. Bunu yapmak tam ekran bir hata mesajı vermek kadar kolay olabilir. “Bir hata oluştu. Lütfen bağlantınızı kontrol edip, yeniden deneyin” Bunu alttaki büyük bir yeniden yükleme düğmesi ile başarabilirsiniz.

Bağlantı Nasıl Sağlanır

Hibrid bir uygulama oluştururken mobil web sitesi için gerekli araçlardan faydalanırız. Html, Css ve Java Script kodlarını rahatlıkla mobil web uygulaması oluşturmak için bir araya getirebilirsiniz. Orijinal özellikler için geri yüklemeler oluşturduğunuzdan veya desteklenmiyorsa geçici ve şık çözümler bulduğunuzdan emin olun. Birçok tasarımcı kullanıcıları belirli, orijinal bir uygulamada tutmayı tercih eder.

Test Etmek

Web teknolojilerini kullanarak mobil uygulama oluşturduğunuzda testlerin birçoğunu bir web tarayıcısında yapmanız gerekir. Uygulamanızı göndermeden önce mümkün olduğu kadar çok üreticide, platformda ve form faktörlerinde test etmelisiniz.

Testinize büyük önem ve öncelik verin. Eski sürümleri ortadan kaldırmak için güncelleme şartı sunan istemciye sahip olun. Kodu anında düzeltebilmek için Trigger.io yeniden yükleme gibi özellikleri kullanın.