FARKLI EKRAN ÇÖZÜNÜRLÜKLERİ İÇİN ESNEK WEB ARAYÜZ YAPILARI TASARLANMASI

Web’in hızlı gelişimi ve sahip olduğu esnek yapısı, bu platform üzerinde çeşitli uygulamaların ortaya çıkmasına sebep olmaktadır. Bilgiye hızlı erişmek için en çok tercih edilen seçeneklerden biri olan web siteleri bu uygulamalardan sadece biridir. Web siteleri üzerindeki resim, video, yazı, vb. her türlü içerik, görsel açıdan, uygulama içinde bulunan sayfaların arayüz yapıları sayesinde organize edilmektedir. Web’e erişimi bulunan cihazların boyutları düşünüldüğünde, web sayfalarında farklı çözünürlüklere yönelik ayrı tasarımlar geliştirmenin zaman ve emek açısından büyük bir iş yükü oluşturduğu açıktır. Bu sorun, farklı cihaz çözünürlüklerine özel arayüz yapılarının aynı anda pratik bir şekilde tasarlanmasıyla aşılabilir. Bu amaç doğrultusunda bu çalışmada, farklı cihazlar için arayüz yapılarını aynı anda tek ekran üzerinden oluşturabilen ve organize edebilen bir prototip geliştirilmiştir. Bu sayede, kodlama bilgisine ihtiyaç duymadan kolay kontrol edilebilir bir arayüz yapısı tasarlama olanağı sunulmuştur. Diğer taraftan prototipin web uygulama geliştiricilerin kendi sistemlerinde kullanabilecekleri bir araç olabileceğine de inanılmaktadır.

Anahtar Kelimeler:

Esnek web tasarımı, Çözünürlük, Bootstrap, PHP, MySQL

DESIGNING RESPONSIVE WEB INTERFACE STRUCTURES FOR DIFFERENT SCREEN RESOLUTIONS

Rapid growth of Web and it’s flexible structure cause that the various applications come out on this platform. Websites which is one of the most preferred options to reach information rapidly is just one of these applications. Every sort of content such as picture, video and article etc. on websites are organized through the interface structures of the pages in these applications visually. When considering of the size of devices which have Web access, it is obvious that developing different designs for different resolutions creates a huge workload in terms of time and effort. This problem can be overcome practically by creating interface structures at the same time for different device resolutions. In accordance with this purpose in this study, a prototype has been developed which can create and organize the interface structures at the same time for different devices on a single screen. Thus, a posibility of designing interface structure is provided which can be controlled easily without any requirement coding knowledge. On the other hand, it is believed that the prototype will be a tool which web application developers will be able to use in their systems.

Keywords:

Responsive Web Design, Resolution, Bootstrap, PHP, MySQL,

PDF

___

Ahmadi, H., ve Kong, J. (2012). User-centric adaptation of Web information for small screens. Journal of Visual Languages & Computing, 23(1), 13–28.
Bootstrap. (2015). The world's most popular mobile-first and responsive front-end framework. http://getbootstrap.com/ adresinden 3 Eylül 2015 tarihinde alınmıştır.
Fisch, M. (2012). Mobile-friendly sites turn visitors into customers. http://googlemobileads.blogspot.com.tr/2012/09/mobile-friendly-sites-turn-visitors.html adresinden 20 Kasım 2015 tarihinde alınmıştır.
Google. (2016). Kırklareli Üniversitesi Google Analitik Raporları. Kırklareli: Kırklareli Üniversitesi.
Imperavi. (2016). Kube CSS Framework. https://imperavi.com/kube/ adresinden 29 Nisan 2016 tarihinde alınmıştır.
Internet World Stats. (2015). Internet Usage and World Population Statistics. http://www.internetworldstats.com/stats.htm adresinden 15 Aralık 2015 tarihinde alınmıştır.
Layoutit. (2016). Bootstrap Interface Builder. http://www.layoutit.com/ adresinden 29 Nisan 2016 tarihinde alınmıştır
Marcotte, E. (2010). Responsive Web Design. http://alistapart.com/article/responsive-web-design adresinden 17 Aralık 2015 tarihinde alınmıştır.
O'Reilly, T. (2005). Web 2.0: Compact Definition?. http://radar.oreilly.com/2005/10/web-20-compact-definition.html adresinden 12 Aralık 2015 tarihinde alınmıştır.
Sharkie, C., ve Fisher, A. (2013). Jump Start Responsive Web Design. Australia: SitePoint Ltd.
Shoelace. (2016). Visual Bootstrap 3 Grid Builder. http://shoelace.io/ adresinden 29 Nisan 2016 tarihinde alınmıştır.
Skeleton. (2016). Skeleton: Responsive CSS Boilerplate: http://getskeleton.com/ adresinden 29 Nisan 2016 tarihinde alınmıştır.
Smart Insights. (2015). 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 6 Kasım 2015 tarihinde alınmıştır.
Switzer Creative. (2015). Solve your mobile woes with responsive web design. http://switzercreative.com/responsive-web-design-solve-mobile-woes/ adresinden 14 Ocak 2016 tarihinde alınmıştır.
TUİK. (2015). Hanelerde Bilişim Teknolojileri Bulunma Oranı. Türkiye İstatistik Kurumu.
TUİK. (2015). Hanelerde Bilişim Teknolojileri Kullanımı. Türkiye İstatistik Kurumu.
Twitter. (2016). Twitter Q4 and Fiscal Year 2015 Shareholder Letter. San Francisco: Twitter .
Veen, J. (2000). The Art & Science of Web Design. San Francisco: New Riders.
W3Schools. (2015). Screen Resolution Statistics. http://www.w3schools.com/browsers/browsers_display.asp adresinden 2 Ocak 2016 tarinide alınmıştır.
Yaml. (2016). YAML CSS Framework. http://www.yaml.de/ adresinden 29 Nisan 2016 tarihinde alınmıştır.