2 1 Kırklareli Üniversitesi, Bilgi İşlem Daire Başkanlığı, Kırklareli 2 İstanbul Üniversitesi, Enformatik Bölümü, İstanbul, Özet



kilavuzu.com > kullanım kılavuzu > Evraklar
Esnek Web Arayüzü Tasarlanması Üzerine Bootstrap İle Bir Uygulama

Veli Özcan Budak 1, Murat Gezer 2

1 Kırklareli Üniversitesi, Bilgi İşlem Daire Başkanlığı, Kırklareli

2 İstanbul Üniversitesi, Enformatik Bölümü, İstanbul

veliozcanbudak@gmail.com, murat.gezer@gmail.com

Özet: Teknolojinin en önemli ürünlerinden biri olan World Wide Web (www)’in hızlı büyümesinden dolayı bu platform üzerindeki web sayfaları günlük yaşamımızda sürekli kullandığımız bir teknoloji ürünü olarak hayatımızda yer etmektedir. Web sayfalarını geliştiren yazılımcıların da bu büyümeye paralel olarak kendilerini geliştirmeleri bir zorunluluk haline gelmiştir. Bu araştırmada web sayfası geliştiricilerin yönetim sistemlerinde kullanabilmeleri amacıyla arayüz yapısı tasarlamaya yönelik olarak bir prototip geliştirilmiştir. Tasarlanan bu prototipin, web içerik geliştiricilerinin arayüz yapısı tasarlama noktasında kendi yönetim sistemlerinde kullanabilecekleri bir araç olacağı düşünülmektedir. Aynı zamanda bu prototip sayesinde herhangi bir kodlama bilgisine ihtiyaç duymadan da sistemi kullanacak kişilere kolay kontrol edilebilir bir arayüz yapısı tasarlama olanağı sunulabilir.

Anahtar Sözcükler: Esnek Web Tasarımı, Mobil Cihaz, PHP, MySQL, Bootstrap, CSS

An Application By Bootstrap Over Designing Responsive Web Interface Structure

Abstract: Because of the rapid growth of World Wide Web (www) which is one of the most important product of technology, the web pages on this platform leaves a mark in our lives as a technology product which we use in our daily lives continuously. Programmers which improve web pages have to improve themselves correspondingly, as well. In this research, a prototype has been improved intended for designing interface structure, for the purpose of being able to be used in the management systems by developers. It is believed that the prototype designed within this research will be a tool which web developers will be able to use in their management system on the point of designing interface structures of web contents. At the same time, thanks to this prototype, it is possible to provide the service of designing an interface structure for the individuals who will use this system without any requirement coding knowledge.

Keywords: Responsive Web Design, Mobile Device, PHP, MySQL, Bootstrap, CSS

1.Giriş

2005 yılında ilk olarak Tim O’Reilly tarafından dile getirilen Web 2.0 [7] 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. Bu uygulamaların ortaya çıkarılmalarındaki temel amaç hitap ettiği kullanıcıların ihtiyacına yönelik olarak günlük hayatı daha pratik hale getirmektir. Bu uygulamalar sayesinde dünyanın neresinde olursak olalım mesafe tanımaksızın istediğimiz yere bağlanıp iletişim kurabilme, her konuda sınırsız bilgi havuzuna ulaşabilme, hayranı olduğumuz bir sanatçının albümlerine ulaşıp dinleyebilme, video izleyebilme, banka hesaplarımızı oturduğumuz yerden organize edebilme, vb. bir sürü işlemleri gerçekleştirebilmemiz mümkündür. 1960’lı ve 1970’li yıllar itibariyle hayatımıza giren Internet [4], 21. yüzyılın en çok kullanılan teknolojisi olarak hayatımızda yer etmektedir. İlk çıktığı zamanlardan bu yana çoğunlukla masaüstü bilgisayarlar sayesinde kullanabildiğimiz bu teknoloji, 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 uygulamalara da gittiğimiz her mekânda ulaşabilir hale gelmiş bulunmaktayız.

Günlük yaşamımızda Internet’i 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 3 milyarı aşkın kullanıcıya ulaştığı tahmin edilmektedir [6]. 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 [11]. Internet’in bu denli yoğun kullanımı, hangi tür cihazların erişimde kullanıldığı sorusunu akla getirmektedir. Bu soruya yönelik olarak Smart Insights tarafından Amerika’da yetişkinlerin Internet’e erişmede hangi cihazları kullandığı ile ilgili bir araştırma yapılmıştır. 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. Aynı araştırmanın 2010 yılındaki verileri incelendiği zaman masaüstü ve dizüstü kullanımlarının %75, mobil cihaz kullanımının %12,5 olduğu görülmektedir. 5 yıllık süreç içerisinde mobil cihaz kullanımına olan eğilimin oldukça belirgin şekilde arttığı görülmektedir [9]. Türkiye’ye bakıldığında ise 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 [12]. Yine bu araştırmada ortaya çıkmış olan bir sonuç da oldukça dikkat çekicidir. 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 [12]. Genel olarak bu cihazların tamamının Internet erişimine sahip olduğu rahatlıkla söylenebilir. Yukarıdaki araştırmalara bakıldığında, Internet’e erişimde çeşitli cihazların kullanıldığı ve bu cihazlar içinde özellikle de mobil cihazların gittikçe artan kullanım oranlarına sahip olduğu göze çarpmaktadır.

Mobil cihaz kategorisindeki tablet ve akıllı telefonlarla masaüstü ve dizüstü bilgisayarları birbirinden ayıran temel özellik fiziki olarak ekran boyutlarının ve dolayısıyla çözünürlüklerinin farklı olmasıdır. Mobil cihazlar yanımızda taşıyabilmemiz amacıyla tasarlanmış olmalarından dolayı masaüstü ve dizüstü bilgisayarlara oranla daha küçük ekran boyutlarına sahiptirler. Tablo 1’de bazı mobil cihazların uygulama tasarlarken kullanılan çözünürlük değerleri piksel olarak verilmiştir:

Tablo : Uygulama Tasarlarken Kullanılan Mobil Cihaz Çözünürlükleri.

Cihaz Tipi

G(px)

Y(px)

Akıllı Telefonlar

Apple iPhone 5, 5c, 5s

320

568

Apple iPhone 6, 6S

375

667

Apple iPhone 6 Plus, 6S Plus

360

640

LG G3, G4

360

640

Samsung Galaxy S3, S4, S5, S6

360

640

Samsung Galaxy Note 2, 3, 4, 5

360

640

Sony Xperia Z1, Z2, Z3, Z4 Compact, Z5

360

640

Tabletler

Apple iPad mini, 1, 2, 3, 4, Air, Retina

768

1024

Apple iPad Pro

1024

1366

Samsung Galaxy Tab 2 (7")

600

1024

Samsung Galaxy Tab 2, 3 (10")

800

1280

G: Genişlik, Y: Yükseklik

Tablo 1’de belirtilen piksel değerleri dışında aynı zamanda bu cihazların satışı yapılırken karşımıza çıkan çözünürlük değerleri de bulunmaktadır. Bu tür küçük boyutlardaki cihazlara yönelik uygulama geliştirirken genellikle bu cihazların satışında karşımıza çıkan çözünürlük değerleri yerine Tablo 1’deki piksel değerleri kullanılmaktadır.


Şekil : Esnek Web Tasarımı [10]
En ünlü web uygulama geliştirme sitelerinden biri olan W3school, kendi log dosyalarından ziyaretçilerinin kullandıkları cihazların ekran genişliklerini tespit ettiği analizlerde 2015 yılı için 1024x768’lik ekran boyutu merkeze alındığında ziyaretçilerinin yaklaşık %97’lik bölümünün bu boyutta ya da bu boyuttan büyük ekran kullandıklarını belirlemiştir. Aynı zamanda bu sonuçlarda yine aynı yıl için %97’lik bölümün %33’lük kısmının ekran boyutu olarak 1366x768’lik cihazlar kullandıkları belirlenmiştir [13]. Mobil cihazların ekran boyutlarının daha küçük şekilde tasarlandığı düşünüldüğünde bu araştırma, anlaşılacağı üzere çoğunlukla bilgisayar ortamından yapılan ziyaretlerde kullanılan ekran boyutlarının istatistiklerini göstermektedir. Mobil uyumlu olarak geliştirilmiş olan Kırklareli Üniversitesinin Google Analitik raporlarına bakıldığında ise, sadece 2015 Eylül ayı temel alındığında siteye farklı cihazlardan toplam erişimin 265.000’i aşkın olduğu görülmektedir. Bu erişimlerin 148.000’i aşkın miktarının bilgisayarlardan, 112.000’i aşkın miktarın mobil cihazlardan (tablet hariç) ve 4.000 küsur miktarındaki erişimin de tabletlerden olduğu görülmektedir [5]. Bu rapor sonuçlarında mobil cihazların ve bilgisayarların kullanım oranlarının birbirine oldukça yakın olduğu net bir şekilde söylenebilir.

Mobil cihazların ve diğer boyutlardaki cihazların kullanımları dikkate alındığında bu farklılığın web uygulama geliştiriciler açısından dezavantaj oluşturduğunu söylemek oldukça kolaydır. Dünya genelinde Internet’e 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 getirmektedir. Bu durum, ziyaretçi memnuniyeti açısından da büyük önem taşımaktadır. Çünkü her cihazla uyumlu olamayan uygulamalar zamanla popülerliğini yitirme tehlikesiyle karşı karşıya kalabilir. Bu açıklamayı destekler nitelikte Google market ekibinden Fisch [3], mobil uygulama deneyiminin gittikçe önemli hale geldiğini ve mobil dostu web uygulama sahibi olmamanın rakiplerin işine geldiğini belirtmiştir. 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. Tabi ki bu tarz bir düşüncenin dile getirilmesi kolay olsa bile uygulama geliştirme aşamasında yapılacak işlemler de bir o kadar zor ve zaman ve emek harcayan aşamalara sahiptir.

Farklı ekran boyutlarına uygun web uygulama geliştirme düşüncesi günümüzde Esnek Web Tasarımı (EWT) şeklinde bir kavramın hayatımıza girmesine sebep olmuştur. Esnek web tasarımı Sharkie ve Fisher [8] 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ı, 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. EWT sayesinde örnek bir web sayfası farklı cihazlarda Şekil 1’deki gibi görünebilir:

Uygulamaların cihazlara göre kendilerini şekillendirebilmeleri genel olarak arayüz yapılarının esnekliği sayesinde gerçekleşmektedir. EWT için esneklik, web uygulama arayüz yapılarının kendilerini cihaza uydurmaları anlamına gelmektedir. Böylece web sayfaları üzerindeki her bir eleman arayüz yapısının esnekliğine göre kendini şekillendirebilmektedir.


Şekil 2: Sayfa Arayüz Yapıları
Web sayfalarında arayüz, kullanıcılar sayfayı ziyaret ettiklerinde karşılarına ilk çıkan görünümdür. Bu görünümün içinde resim, yazı, video vb. içerik elemanları ile birlikte bu içeriklerin düzenli ve organize şekilde sunulmasına yardımcı olan belirli bir yapı da söz konusudur. Arayüzlerde bulunan bu yapıların düzenli olması aynı zamanda web sayfasının kullanılabilirliğine de etki etmektedir. Sayfanın düzenini sağlayan bu yapılar Şekil 2’deki gibi olabilir:

2. Esnek Web Tasarımı ve Bootstrap

Genellikle tasarlanan her bağımsız web uygulaması belirli cihazların ekran boyutlarına göre düzenlenmektedir. Web uygulama geliştiricileri hangi boyutta uygulama geliştireceklerine hedef kitlelerinin yoğun olarak kullandığı cihaza ya da dünya genelinde en yoğun olarak kullanılan cihaz boyutuna göre karar verebilirler. Cihaz boyutuna göre uygulama geliştirme noktasında 1’den fazla ekran boyutundan bahsettiğimiz zaman ise işler biraz daha karmaşıklaşmaktadır. EWT tanımı ortaya çıkmadan önce yapılan web uygulamalarının ziyaretçilere sunumu çoğunlukla masaüstü bilgisayar ortamlarında yapıldığından o zamanın popüler ekran boyutuna göre uygulama belirli platforma uygun şekilde düzenlenmekteydi. Ancak mobil cihazlar hayatımızda daha fazla yer etmeye başladığından beri masaüstü bilgisayarlar için tasarlanan çoğu web sayfası mobil cihazlarla uyumlu olmadıkları için ziyaretçilerin ilgilendikleri içeriği bulmaya çalıştıklarında sinir bozucu bir şekilde ekranı sürekli kaydırmalarına sebep olmaya başlamıştır [1]. Bu sebepledir ki son yıllarda mobil cihazların oldukça yoğun şekilde kullanımı EWT’nin gitgide daha fazla önem kazanmaya başlamasına sebep olmuştur.

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. Bu iş yükü, her bir içerik elemanı için HTML ve CSS3 medya araçlarının ayrı ayrı ayarlanması gerektiğinden gelmektedir.

Kendisini ‘farklı niteliklerdeki insanlar, farklı şekillerdeki cihazlar ve farklı boyutlardaki projeler için tasarlanmıştır. Bootstrap web uygulama geliştirme sürecini daha hızlı ve kolay yapar.’ şeklinde tanımlayan Bootstrap [2], web uygulama geliştirme sürecinin en önemli aşamalarından biri olan farklı cihazlarda görünüm uyumluluğu yani EWT konusunda günümüz web uygulama geliştiricilerine çok kullanışlı araçlar sunan bir sistem olarak karşımıza çıkmaktadır. Twitter tasarımcılarının ve geliştiricilerinin ürettiği bu sistem ilk olarak 2011 yılında kullanıma sunulmuştur. 30’u aşkın sürümü yayınlanmakta olup halen geliştirilmeye devam etmektedir [2]. EWT yaparken ortaya çıkan iş yükünü hafifletmek amacıyla bu çalışmada da son zamanlarda popüler olmaya başlayan Bootstrap kullanılmıştır.

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. İç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ştirmek mümkündür.

3. Prototip

Web uygulama geliştiricilerin kendi yönetim sistemlerinde kullanabilecekleri bir araç olarak geliştirilen bu 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. Arayüzler yapıları, uygulamaların her sayfasında karşımıza çıkan, içinde resim, yazı, video, vb. içerik elemanları bulunduran ve bu elemanları organize bir şekilde göstermemize yardım eden yapılardır.

Prototip geliştirilirken Bootstrap’in 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. 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. Bootstrap, aynı anda 4 farklı cihaz türüne özel arayüz yapısı tasarlamak için kendi içinde çeşitli araçlara sahiptir. http://getbootstrap.com/ adresinden incelenebilecek olan bu araçların PHP ile programlanması sayesinde 4 cihaz türü için ayrı ayrı arayüz yapıları oluşturulabilir. Bu noktada sadece bu araçların ne işe yaradığı ve nasıl kullanıldığının bilinmesi önemlidir.

Bootstrap’in bize sağladığı araçlarla birlikte tasarlanan prototipte ait ilk giriş ekranı ve kullanılacak 2 menü Şekil 3’deki gibi oluşturulmuştur:



Şekil 3: Prototip Giriş Ekranı

Şekil 3’de görüldüğü üzere sistem üzerinde arayüz yapısı oluşturmak için 2 tane menü bulunmaktadır. Bu menüler ve sahip oldukları alt menüler şu şekildedir:

  1. Arayüz Yapı Kuralları

    1. Kural Listesi

    2. Kural Oluştur

  2. Arayüz Yapıları

    1. Arayüz Yapı Listesi

    2. Arayüz Yapısı Ekle

Bu menülerden ilki olan “Arayüz Yapı Kuralları” arayüz yapısı oluştururken kullanacağımız, sayfayı satır ve sütunlara bölmemize yarayacak olan kuralı oluşturduğumuz bölümdür. Diğer menü olan “Arayüz Yapıları” sayesinde ise, oluşturduğumuz kuralları kullanarak 4 farklı cihaz türü için arayüz yapılarını oluşturabilmekteyiz.



Şekil 4: Kural Oluşturma Ekranı

Şekil 4’de görünen kural ekleme ekranı oluşturacağımız arayüz yapılarında sayfayı satır ve sütun olarak bölmek için kullanılacak kuralların eklendiği formdur. Formda “İsim” ve “Temsili Resim” alanları kuralı temsil edecek isim ve resim olmakla beraber diğer alan olan “Yapı Kodu (YK)” en önemli bölümü oluşturmaktadır. YK alanı doldurulurken dikkat edilecek nokta Bootstrap’in bize sunduğu izne göre ayarlanmasının gerektiğidir. Bu kısımda YK yazılırken toplamda 12 olacak şekilde rakamlar aralarında “;” işareti konularak girilmektedir. Örnek olarak; “4;4;4”, “3;6;3”, “4;8”, “6;6” vb. değerler verilebilir. YK’nun toplamda 12 olmasının sebebi Bootstrap sayesinde bir sayfanın en fazla 12 sütuna ayrılabilmesinden gelmektedir. Toplamda 12 olacak şekilde yazılmış olan bir kod eğer “4;4;4” şeklinde ise tek satırlık ve 3 eşit sütunluk bir kuralı, “6;6” şeklindeyse tek satırdan oluşan 2 eşit sütunluk bir kuralı ya da “6;3;3” şeklindeyse sol taraftaki sütun, sağda eşit olarak bulunan 2 sütunun genişliğinde olacak şekilde tek satır ve 3 sütunluk bir kuralı oluşturacaktır. Kurallar oluşturulduktan sonra kuralların bulunduğu liste sayfası ise Şekil 5’deki gibi görünmektedir:



Şekil 5: Kural Listesi Ekranı

Şekil 5’de görünen kurallar, arayüz yapılarının tasarlanacağı 2. menü olan “Arayüz Yapıları” altında kullanılmaktadır. Arayüz yapısının tasarlandığı ekran ise Şekil 6’daki gibidir:



Şekil 6: Arayüz Yapısı Ekleme Ekranı

Arayüz yapılarının tasarlandığı Şekil 6’da görünen ekranda “İsim” kısmı oluşturacağımız yapıyı temsil edecek ismin girildiği bölümdür. Bu bölüm dışında 1 numaralı alan daha önce oluşturduğumuz kuralların bulunduğu alan, 2 numaralı alan 4 farklı cihaz türü için tasarım yapacağımız geçiş sekmelerinin bulunduğu alan ve son olaraksa 3 numaralı alan tasarımın gerçekleştirildiği alandır. 1, 2 ve 3 alanları aynı anda kullanılarak tasarım gerçekleştirilmektedir. Örnek senaryo olarak genişliği 1200px’den büyük olan cihazlar için tasarımın yapıldığı ilk sekme tıklandığında 3 numaralı tasarım alanı boş olarak gelmektedir. Daha sonra 1 numaralı alanda bulunan kurallardan istediğimize tıklayarak 3 numaralı tasarım alana kuralın koduna göre satır ve sütunlar eklenmektedir. İstenildiği kadar satır ve sütun eklendikten sonra diğer cihaz türleri için tasarım yapmak amacıyla 2 numaralı alanda farklı bir sekmeye tıklandığında 3 numaralı alan ilk olarak boş gelecek ve yine 1 numaralı alanda bulunan kurallarla 3 numaralı tasarlama alanına satır ve sütunlar eklenecektir. Bir cihaz türü için 3 numaralı alanda tasarım yapıp daha sonra farklı cihaz için tasarlama yaptıktan sonra tekrar tasarımı yapılmış cihazın olduğu sekmeye dönüldüğünde de son tasarım düzeni korunmaktadır. 4 farklı türdeki cihazlar için tasarımlar tamamlandıktan sonra sağ alt köşedeki butonla da kayıt işlemi tamamlanmaktadır.

4. Uygulamalar

Arayüz yapısı oluşturmak amacıyla prototipte oluşturulan kurallar arayüze satır ve sütunlar eklerken kullanılmaktadırlar. Bu kurallar sayesinde içeriklerimizi organize bir şekilde sunabilmekteyiz. 4 farklı cihaz türünde arayüz yapısı oluşturabildiğimiz prototip farklı sistemlere entegre edilerek farklı amaçlar için kullanılabilir. Elbette ki bu prototipin nasıl çalıştığının da örneklenmesi yapılacak olan bu gibi araçların etkililiğini kanıtlaması açısından önemlidir. Buna yönelik olarak prototip üzerinde 4 farklı cihaz türü için 1 tane arayüz yapısı oluşturulmuştur. Bu örneğe ait arayüz yapısı oluşturma ekranı üzerinde 4 farklı tasarım sırasıyla “Büyük Boyutlu Cihazlar”, “Orta Boyutlu Cihazlar”, “Tablet Benzeri Cihazlar” ve “Telefon Benzeri Cihazlar” sekmelerinde düzenlenmiş olup aşağıdaki grafiklerde gösterilmiştir:



Şekil 7: Büyük Boyutlu Cihazlar Sekmesi



Şekil 8: Orta Boyutlu Cihazlar Sekmesi



Şekil 9: Tablet Benzeri Cihazlar Sekmesi



Şekil 10: Telefon Benzeri Cihazlar Sekmesi

Yukarıda her bir cihaz türü için ayrı ayrı sekmelerde tasarımlar kurallara tıklanarak oluşturulmuştur. Her cihaz için eklenen satırların içinde bulunan hücrelere textboxlar (hücreyle beraber Javascript sayesinde eklenmektedir) eklenerek farklı isimler girilmiştir. Burada her bir hücreye farklı isim girilerek farklı içeriklerin hücrelere bağlanabileceğini göstermek amaçlanmıştır. Prototipte yapılan örneklerde sadece isim yazılabilmesine rağmen farklı sistemlerde ihtiyaca göre bu hücrelere resim, video, yazı, vb. içerik elemanlarını da bağlayabiliriz. Bununla birlikte her hücrenin solunda yer alan ok işaretleri aynı hizada alta ya da üste hücre satırı eklemek için kullanılırken sağında bulunan çarpı işareti iste hücreyi silmek için kullanılmaktadır. Her bir satırın en sağında bulunan kırmızı arka plana sahip olan çöp kutulu butonlar ise kurala göre eklenen satırı içinde barındırdığı bütün sütunlarla beraber silmek için kullanılmaktadır.

4 cihaz türü için yukarıdaki tasarım yapıldıktan sonra oluşturulan arayüz yapısı kaydedilmiştir. Oluşturulan bu arayüz yapısının farklı cihazlarda test edilmesiyle elde edilen sonuç Şekil 11’de görülmektedir:



Şekil 11: Oluşturulan Arayüz Yapısının Ön İzlemesi

5. Sonuç

Bu çalışmada, farklı cihaz boyutlarına yönelik olarak arayüz yapıları tasarlayabilen ve web uygulama geliştiricilerin kendi yönetim sistemlerinde kullanabilecekleri bir prototip geliştirilmiştir. Prototip, PHP dili kullanılarak geliştirilmesine rağmen farklı web uygulama geliştirme dilleri kullanılarak da geliştirilebilir. Bu sebeple web uygulama geliştiricilerinin PHP dilini bilmelerine gerek yoktur.

Yapılan örneklerde arayüz tasarlama ekranında farklı cihaz türleri için sayfanın satır ve sütunlara bölündüğü, daha sonra her bir hücreye isim verildiği ve tasarlanan arayüz yapılarının kaydedildikten sonraki ön izlemesinde hücrelerin verilen isimlerle göründüğü görülmektedir. 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. Aynı zamanda her bir hücre bu çalışmada sabit olarak tutulmasına rağmen istenildiği takdirde Javascript yardımıyla sürükle-bırak özelliği verilerek daha esnek hâle de getirilebilir.

Sonuç olarak, 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ışılmıştır. Oluşturulan prototip, Bootstrap’in çeşitli araçlarının PHP ile rahatlıkla programlanabildiğini göstermiştir. Bu prototip sayesinde web arayüz yapıları oluşturma işlemi daha pratik hale getirilmiştir. Farklı amaçlara hitap eden başka sistemlerde bu prototipe benzer bir yapının kullanılması web içerik elemanlarını organize ederken hem zamandan hem de verilecek emekten tasarruf etmemize yardımcı olabilir. Bununla birlikte prototip, 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ı olabilir.

6. Kaynaklar

[1] Ahmadi, H., Kong, J., “User-centric adaptation of Web information for small screens”, Journal of Visual Languages & Computing, 13–28 (2012).

[2] Bootstrap, “Bootstrap · The world's most popular mobile-first and responsive front-end framework”, http://getbootstrap.com/ adresinden alındı, [Erişim tarihi: 09.09.2015].

[3] Fisch, M., “Mobile-friendly sites turn visitors into customers”, http://googlemobileads.blogspot.com.tr/2012/09/mobile-friendly-sites-turn-visitors.html adresinden alındı, [Eklenme tarihi: 25.09. 2012].

[4] Glowniak, J., “History, Structure, and Function of the Internet.”, Seminars in Nuclear Medicine, 135-144 (1998).

[5] Google, “Kırklareli Üniversitesi Google Analitik Raporları”, Kırklareli: Kırklareli Üniversitesi, (2015).

[6] Internet World Stats, “Internet Usage and World Population Statistics”, http://www.internetworldstats.com/stats.htm adresinden alındı, [Erişim tarihi: 16.08.2015].

[7] O'Reilly, T., “Web 2.0: Compact Definition?”, http://radar.oreilly.com/2005/10/web-20-compact-definition.html adresinden alındı, [Eklenme tarihi: 01.10. 2005].

[8] Sharkie, C., Fisher, A., “Jump Start Responsive Web Design”, Australia: SitePoint Ltd., (2013).

[9] Smart Insights, “Mobile Internet Trends”, http://www.smartinsights.com/internet-marketing-statistics/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].

[10] Switzer Creative, “Solve your mobile woes with responsive web design”, http://switzercreative.com/responsive-web-design-solve-mobile-woes/ adresinden alındı, [Eklenme tarihi: 29.06. 2015].

[11] TUİK, “Hanelerde Bilişim Teknolojileri Bulunma Oranı”, Ankara: Türkiye İstatistik Kurumu, (2015).

[12] TUİK, “Hanelerde Bilişim Teknolojileri Kullanımı”, Ankara: Türkiye İstatistik Kurumu, (2015).

[13] W3Schools, “Screen Resolution Statistics”, http://www.w3schools.com/browsers/browsers_display.asp adresinden alındı, [Erişim tarihi: 15.10.2015].



sosyal ağlarda paylaşma



Benzer:

2 1 Kırklareli Üniversitesi, Bilgi İşlem Daire Başkanlığı, Kırklareli 2 İstanbul Üniversitesi, Enformatik Bölümü, İstanbul, Özet icon2 1 Boğaziçi Üniversitesi, Bilgisayar Mühendisliği Bölümü, İstanbul...

2 1 Kırklareli Üniversitesi, Bilgi İşlem Daire Başkanlığı, Kırklareli 2 İstanbul Üniversitesi, Enformatik Bölümü, İstanbul, Özet iconİstanbul Bilgi Üniversitesi

2 1 Kırklareli Üniversitesi, Bilgi İşlem Daire Başkanlığı, Kırklareli 2 İstanbul Üniversitesi, Enformatik Bölümü, İstanbul, Özet iconİstanbul Üniversitesi Rektörlüğü 34452 Beyazıt / İstanbul 90 212...

2 1 Kırklareli Üniversitesi, Bilgi İşlem Daire Başkanlığı, Kırklareli 2 İstanbul Üniversitesi, Enformatik Bölümü, İstanbul, Özet icon2016 T. C. İStanbul üNİversitesi İstanbul Tıp Fakültesi

2 1 Kırklareli Üniversitesi, Bilgi İşlem Daire Başkanlığı, Kırklareli 2 İstanbul Üniversitesi, Enformatik Bölümü, İstanbul, Özet iconİstanbul Üniversitesi Rektörlüğü 34452 Beyazıt / İstanbul 90 212...

2 1 Kırklareli Üniversitesi, Bilgi İşlem Daire Başkanlığı, Kırklareli 2 İstanbul Üniversitesi, Enformatik Bölümü, İstanbul, Özet iconİstanbul Üniversitesi Rektörlüğü 34452 Beyazıt / İstanbul 90 212...

2 1 Kırklareli Üniversitesi, Bilgi İşlem Daire Başkanlığı, Kırklareli 2 İstanbul Üniversitesi, Enformatik Bölümü, İstanbul, Özet iconİstanbul Üniversitesi Rektörlüğü 34452 Beyazıt / İstanbul 90 212...

2 1 Kırklareli Üniversitesi, Bilgi İşlem Daire Başkanlığı, Kırklareli 2 İstanbul Üniversitesi, Enformatik Bölümü, İstanbul, Özet iconİstanbul Üniversitesi Rektörlüğü 34452 Beyazıt / İstanbul 90 212...

2 1 Kırklareli Üniversitesi, Bilgi İşlem Daire Başkanlığı, Kırklareli 2 İstanbul Üniversitesi, Enformatik Bölümü, İstanbul, Özet iconErste Securities İstanbul, İstanbul Menkul Kıymetler Borsası’nda...

2 1 Kırklareli Üniversitesi, Bilgi İşlem Daire Başkanlığı, Kırklareli 2 İstanbul Üniversitesi, Enformatik Bölümü, İstanbul, Özet iconKullanıcı Erzincan Üniversitesi Bilgi İşlem Dairesi Başkanlığı


kullanım kılavuzu





© 2000-2018
kişileri
kilavuzu.com
.. Ev