Esnek Web Ara Yüzü Tasarlanması Üzerine Bootstrap İle Bir Uygulama Veli Özcan Budak – Dr. Murat Gezer

İçindekiler Problem Tanımı Amaç Esnek Web Tasarımı (EWT) Bootstrap ve EWT İlişkisi Prototip Örnek Uygulama Sonuç Kaynakça

Problem Tanımı 2005 yılında ilk olarak Tim O’Reilly tarafından dile getirilen Web 2.0 [2] teknolojisinin gelişimiyle beraber dünya üzerinde internet ile birbirine bağlı olan kullanıcıların günlük yaşamlarında sıkça kullandıkları uygulamalar gittikçe sayısını arttırmaktadır. İlk çıktığı zamanlardan bu yana çoğunlukla masaüstü bilgisayarlar sayesinde yararlandığımız internet, zamanla ihtiyaçtan dolayı ortamdan bağımsız olmaya mecbur kalmıştır. Bu sebeple masaüstü bilgisayarlar gitgide küçülerek yanımızda taşıyabileceğimiz boyutlara ulaşmıştır. Bu gelişim sayesinde ortamdan bağımsız olarak hayatımızı pratik hale getirmek için kullandığımız internet tabanlı uygulamalara da gittiğimiz her mekânda ulaşabilir hale gelmiş bulunmaktayız.

Problem Tanımı Günlük yaşamımızda interneti oldukça yoğun bir şekilde kullanmaktayız. 2000-2015 yılları arası internet kullanım oranının %806’lık bir büyümeyle yaklaşık 7 milyar kullanıcıya ulaştığı tahmin edilmektedir [1]. Türkiye’ye bakıldığında ise 16-74 yaş arası bireyler temel alınarak yapılan araştırmalarda 2011 yılında %45 olan internet kullanımının 2015 yılında yaklaşık olarak %56 seviyelerine yükseldiği belirlenmiştir [1]. Internettin bu denli yoğun olarak kullanılması elbette ki akla hangi tür cihazların erişimde kullanıldığı sorusunu da beraberinde getirmektedir.

Problem Tanımı Türkiye İstatistik Kurumu tarafından akıllı telefonların ve cep telefonlarının bir arada tutularak bilişim teknolojileri sahiplenme oranlarının araştırıldığı bir çalışmada 2010 yılında %90,5 olan cihaz sahiplenme oranının 2015 yılında %96,8 seviyesine çıktığı belirlenmiştir [5]. Yine bu araştırmada masaüstü bilgisayar kullanım oranı 2013-2015 yılları arası temel alındığında %33,8’den %25,2’ye düşerken akıllı telefonların da dâhil edildiği araştırmadaki artışa paralel olarak dizüstü bilgisayar kullanım oranının da %31,4’den %43,2’ye yükseldiği dikkat çekmektedir. Smart Insights tarafından Amerika’da yetişkinlerin internete erişmede hangi cihazları kullandığı ile ilgili yapılan bir araştırmada günlük internet üzerinde geçirilen zamandan elde edilen verilerden yararlanılarak 2015 yılı itibariyle toplam internet kullanıcılarının %51’inin mobil cihazları, %42’sinin masaüstü ve dizüstü bilgisayarları geriye kalan %7’lik kısmının ise oyun konsolları vb. cihazları kullandıkları tespit edilmiştir [4].

Problem Tanımı Internete erişimde kullanılan cihazlardaki temel farklılık ise bu cihazların boyutlarının birbirinden farklı olmasıdır ve bu boyut farklılıklarının varlığı ise web uygulama geliştiricilerinin üzerinde düşünmeleri gereken bir soru işareti olarak belirginleşmektedir. Aşağıda bazı mobil cihazların ekran boyutları verilmiştir: Cihaz Tipi Genişlik (px) Yükseklik (px) Akıllı Telefonlar Apple iPhone 5, 5c, 5s 320 568 Apple iPhone 6 Plus, 6S Plus 360 640 Sony Xperia Z1, Z2, Z3, Z4 Compact, Z5 Tabletler Apple iPad mini, 1, 2, 3, 4, Air, Retina 768 1024 Samsung Galaxy Tab 2, 3 (10") 800 1280

Problem Tanımı En ünlü web uygulama geliştirme sitelerinden biri olan w3school kendi log kayıt dosyalarından ziyaretçilerinin kullandıkları cihazların ekran genişliklerini tespit ettiği analizler ise aşağıdaki gibidir [6]: Tarih Daha Yüksek 1920x1080 1366x768 1024x768 Ocak 2015 32.7% 16% 33% 4% Ocak 2014 34% 13% 31% 6% Ocak 2013 36% 11% 25% 9% Ocak 2012 35% 8% 19% Ocak 2011 50% 14%

Problem Tanımı Bu boyut çeşitliliklerinden dolayı her cihaz türüne özel farklı uygulama tasarımı geliştirmek ziyaretçilerin memnuniyeti açısından büyük önem taşımaktadır. Aksi durumda her cihaza uyumlu olamayan uygulamalar zamanla popülerliğini yitirme tehlikesiyle karşı karşıya kalabilir.

Amaç Dünya genelindeki internete erişimde kullanılan cihazların farklı boyutlarda tasarlanması, uygulama geliştiricilerin yapacakları uygulamalarda bu boyut farklılıkları için ekstra tasarlama yapmalarını bir zorunluluk haline gerektirmektedir. Yine de bu kadar farklı ekran boyutunun hepsine birden hâkim olabilecek bir uygulamanın varlığından şuan için söz etmek mümkün olmasa da en yoğun kullanılan ekran boyutlarının hepsini kapsayacak şekilde tasarlamalar yapmak bu dezavantajı biraz olsun giderecektir. Bu nedenle çalışmamızın amacı, farklı cihaz boyutları için kapsayıcı bir şekilde tasarım yapmaya olanak sağlayacak ve web uygulamalardaki resim, yazı, video vb. içerik elemanlarını organize etmeye yarayacak bir prototip geliştirmek olmuştur.

Esnek Web Tasarımı (EWT) Farklı ekran boyutlarına uygun web uygulama geliştirme düşüncesi günümüzde Esnek Web Tasarımı (EWT) şeklinde bir olgunun hayatımıza girmesine sebep olmuştur. EWT, Sharkie ve Fisher [3] tarafından “en pratik olacak şekilde tek bir uygulamanın farklı cihazlara dağıtımına olanak sağlayan bir takım teknik ve teknolojilerin birleşimidir” şeklinde tanımlanmıştır. Bu düşüncenin temelinde yatan mantık, ziyaretçilerin sayfalara farklı cihazlardan ulaştıkları zamanlarda web uygulamasının kullanılan cihazın boyutuna göre kendisini düzenleyebilmesidir.

Esnek Web Tasarımı (EWT) EWT, HTML ve CSS3 medya sorgularının kullanımıyla bir web sayfası üzerindeki içerik elemanlarının sunum yapılan cihazın boyutuna göre gizlenmesi, yeniden boyutlanması veya farklı bir noktaya taşınması ile gerçekleştirilmektedir. Bu sayede bir cihazda görünen içerik elemanı farklı bir cihazda yapılan ayarlamalara göre değişkenlik gösterecektir. Bu değişkenlik web sayfası üzerinde kullanılan tüm elemanlara etki edebilmektedir ve buradaki limit web geliştiricisinin isteği doğrultusunda değişebilir.

Esnek Web Tasarımı (EWT)

Esnek Web Tasarımı (EWT) Web uygulamalarının cihazlara göre kendilerini şekillendirebilmeleri genel olarak arayüz yapısının esnekliği olarak da tanımlanabilir. Arayüz yapıları, web sayfalarındaki yazı, resim, video vb. içerik elemanlarını düzenli sunmamıza yarayan en önemli unsurlardan biridir. Sayfanın düzenini sağlayan bu yapılar aşağıdaki gibi olabilir:

Bootstrap ve EWT İlişkisi Web uygulama geliştiricilerin her cihaz boyutuna özgü uygulama geliştirmeleri hem verilecek emek açısından hem de harcanacak zaman açısından bir sorun teşkil etmektedir. EWT sayesinde bu sorun rahatlıkla aşılabilmektedir ama yine de web sayfasında sunulması düşünülen içerik elemanlarının farklı boyutlarda gösterecekleri davranışları planlamak ve bunu tasarlamak belli bir iş yükü getirecektir. Bootstrap, web uygulama geliştirme sürecinde EWT’nı gerçekleştirme noktasında web uygulama geliştiricilere çok kullanışlı araçlar sunan bir yapı olarak karşımıza çıkmaktadır.

Bootstrap ve EWT İlişkisi Twitter tasarımcılarının ve geliştiricilerinin ürettiği bu yapı ilk olarak 2011 yılında kullanıma sunulmuştur. 30’u aşkın sürümü yayınlanmakta olup halen geliştirilmeye de devam etmektedir. Bootstrap içerik olarak, web uygulamalarındaki renk, yazı boyutu, yazı biçimi, büyüklük vb. görselliğe hitap eden tasarım işlemlerinde kullanılan CSS3 stil dilinin ve statik web uygulamalarını daha dinamik, haraketli ve animasyonlu bir biçimde sunmamıza olanak sağlayan Javascript dilinin birleşimiyle oluşturulmuştur. Bu iki dilin kompozisyonu olarak nitelendirebileceğimiz Bootstrap, özellikle mobil cihazları hedef alarak daha verimli bir web uygulama geliştirme sürecinin oluşmasına katkıda bulunmaktadır.

Bootstrap ve EWT İlişkisi Bootstrap, içinde barındırdığı araçlar sayesinde aynı anda telefon, tablet, masaüstü bilgisayarlar ve daha büyük ekran genişliğindeki cihazlar olmak üzere 4 farklı ekran genişliğine sahip cihazlar için tasarım gerçekleştirme olanağı sunmaktadır.

Prototip Web uygulama geliştiricilerin kendi yönetim sistemlerinde kullanabilecekleri bir araç olarak geliştirilen prototip, açık kaynak kodlu yazılım dili olan PHP’yi ve veri tabanı olarak MySQL’i kullanmaktadır. Geliştirilen bu prototipin amacı aynı anda farklı cihaz boyutları için uygulama arayüz yapıları tasarlamaktır. Prototip geliştirilirken Bootstrap’ın bazı araçları PHP ile programlanıp oluşturulan arayüz yapıları sürekli kullanılabilecek şekilde durması için MySQL veri tabanına kaydedilmiştir.

Prototip Bu sayede ihtiyaç duyulduğunda hiçbir kodlamaya ihtiyaç duyulmadan hem farklı arayüz yapılarının tasarlanabilmesi hem de var olan arayüz yapılarının değiştirilebilmesi amaçlanmıştır. Prototipe ait giriş ekranı aşağıdaki gibidir:

Prototip Kural ekleme ekranı oluşturacağımız ara yüz yapılarında sayfayı satır ve sütun olarak bölmek için kullanılacak kuralların eklendiği formdur. Kural Ekleme Ekranı Kural Listesi Ekranı

Prototip Oluşturulan kuralların kullanılarak arayüz yapılarının tasarlandığı ekran ise aşağıdaki şekildedir:

Örnek Uygulama Geliştirilen prototip ile 4 farklı cihaz türü için örnek bir uygulama geliştirilmiş olup her bir cihaz için aynı anda yapılan tasarımlar aşağıdaki gibidir:

Örnek Uygulama

Örnek Uygulama

Örnek Uygulama

Örnek Uygulama Tüm tasarımlar yapıldıktan sonra arayüz yapısı kaydedilip ön izlemesi test edildiğinde aşağıdaki resimde görülen sonuca ulaşılmıştır:

Sonuç Bir web uygulamasında kullanıcıların karşılarına çıkan arayüz yapılarının nasıl pratik bir şekilde oluşturulabileceği üzerinde çalışılan bu prototip sayesinde Bootstrap’ın çeşitli araçlarının PHP ile rahatlıkla programlanabildiği sonucuna ulaşılmıştır. Farklı amaçlara hitap eden başka sistemlerde bu prototipe benzer bir yapının kullanılması web içerik elemanlarını organize ederken bize hem zaman sağlayacaktır hem de verilecek emekten tasarruf etmemize yardımcı olacaktır. Bununla birlikte web sitelerini tasarlamak için kullanılan yönetim sistemlerinde ya da daha farklı sistemlerde yetkilendirilecek kişilerin kodlama bilgisine ihtiyaç duymadan içerikleri organize bir şekilde sunmalarına yardım edecek bir yapı olacağı düşünülmektedir.

Sonuç Çalışma kapsamında bu prototipin oluşturulmasında PHP dili kullanılmasına rağmen farklı web uygulama geliştirme dilleri de kullanılarak benzer amaçlara hitap eden araçlar geliştirilebilir. Bu sebeple web uygulama geliştiricilerinin bu çalışmada geliştirilmiş olan prototipe benzer bir yapıyı tasarlamaları için PHP dilini bilmelerine gerek yoktur. Dikkat edilmesi gereken diğer nokta ise, ara yüz tasarlama ekranında sayfayı satır ve sütunlara böldükten sonra yapı üzerindeki her bir hücreye isim verilerek tasarlanan ara yüz yapılarının ön izlemesinde hücrelerin verilen isimlerle göründüğü yapılan örnekte görülmektedir.

Sonuç Bu çalışma için isim verme tercih edilmesine rağmen daha farklı çalışmalarda ihtiyaca göre arayüz yapılarındaki hücrelere medya, yazı vb. daha farklı içerik elemanları da bağlanabilir.

Kaynakça [1] Internet World Stats, “Internet Usage and World Population Statistics”, http://www.internetworldstats.com/stats.htm adresinden alındı, [Erişim tarihi: 16.08.2015]. [2] O'Reilly, T., “Web 2.0: Compact Definition?”, http://radar.oreilly.com/2005/10/web-20- compactdefinition.html adresinden alındı, [Eklenme tarihi: 01.10.2005]. [3] Sharkie, C., Fisher, A., “Jump Start Responsive Web Design”, Australia: SitePoint Ltd., (2013). [4] Smart Insights, “Mobile Internet Trends”, http://www.smartinsights.com/internet- marketingstatistics/insights-from-kpcb-us-and-global-internet-trends-2015-report/attachment/mobile- internet-trends-mary-meeker-2015-1/ adresinden alındı, [Erişim tarihi: 06.11.2015]. [5] TUİK, “Hanelerde Bilişim Teknolojileri Kullanımı”, Ankara: Türkiye İstatistik Kurumu, (2015). [6] W3Schools, “Screen Resolution Statistics”, http://www.w3schools.com/browsers/browsers_display.asp adresinden alındı, [Erişim tarihi: 15.10.2015].

Teşekkürler.