{"id":5474,"date":"2016-03-14T14:23:46","date_gmt":"2016-03-14T12:23:46","guid":{"rendered":"http:\/\/www.karadere.com\/blog\/?p=5474"},"modified":"2016-03-14T16:45:15","modified_gmt":"2016-03-14T14:45:15","slug":"responsive-ve-adaptive-tasarim-arasindaki-farklar-nelerdir","status":"publish","type":"post","link":"https:\/\/www.karadere.com\/blog\/responsive-ve-adaptive-tasarim-arasindaki-farklar-nelerdir.html","title":{"rendered":"Responsive ve Adaptive Tasar\u0131m Aras\u0131ndaki farklar nelerdir?"},"content":{"rendered":"

Bu makale Burhan KARADERE ‘<\/strong>nin yorumu ile web teknolojisindeki responsive<\/strong> ve adaptive<\/strong> aras\u0131ndaki farklar\u0131 anlatmaya y\u00f6neliktir. Fakrl\u0131 ihtiya\u00e7lara da ne zaman hangi do\u011fru se\u00e7imi yapman\u0131za umar\u0131z k\u0131lavuz olabilir.<\/p>\n

Merhabalar geli\u015fen internet teknolojilerinden son 3 y\u0131ld\u0131r konu\u015fulan konu web 3.0 ve en\u00e7ok ta HTML 5 \u00a0<\/strong>web programlama dilindeki b\u00fcy\u00fck geli\u015fmeler ve akabindeki CSS3<\/strong> ve javascript<\/strong> framework (jquery<\/strong>, angulerjs<\/strong>, nodejs<\/strong> vs) k\u00fct\u00fcphanelerinin geni\u015flemesi .<\/p>\n

\"\"<\/p>\n

Web teknolojilerindeki bu geli\u015fmelerden dolay\u0131, art\u0131k elimizde bir\u00e7ok amaca \u00e7\u00f6z\u00fcm \u00fcreten frameworkler (yaz\u0131l\u0131m paketleri, componentler bile\u015fenler) mevcut. Tasar\u0131m i\u00e7in bootstrap gibi , jquery programlama dinami\u011fi i\u00e7in en pop\u00fcler kullan\u0131lan yaz\u0131l\u0131m IDE (framework, component,library) lerinde kendini kan\u0131tlam\u0131\u015ft\u0131r. Responsive \u00a0<\/strong>tasar\u0131m\u0131 asl\u0131nda t\u00fcm html<\/strong> objelerin ekran boyutuna g\u00f6re otomatik s\u0131\u011fd\u0131rmas\u0131 diyebiliriz. ve bir ad\u0131mda \u00f6tesi \u00e7oklu menulerin mobile sitede ak\u0131ll\u0131 mobile menu tasar\u0131m\u0131na d\u00f6n\u00fc\u015fmesidir. \u00a0Yani site tasar\u0131m\u0131 ak\u0131ll\u0131ca t\u00fcm ekranlar i\u00e7in taray\u0131c\u0131 taraf\u0131nda an\u0131nda\u00a0yani nesnelerin ekran boyutuna g\u00f6re ak\u0131ll\u0131 bir de\u011fi\u015fimi s\u00f6z konusudur.<\/p>\n

 <\/p>\n

 <\/p>\n

\"\"<\/p>\n

Adaptive<\/strong> de ise verdi\u011finiz \u00f6l\u00e7\u00fcler korunur ve d\u0131\u015f\u0131na \u00e7\u0131k\u0131lmaz \u00a0ama a\u015fa\u011f\u0131daki similasyonun oldu\u011fu siteyi inceledi\u011finizde sanki sadece sa\u011f ve soldaki bo\u015fluklar\u0131n adaptive<\/strong> oldu\u011funu anlat\u0131yor.<\/p>\n

 <\/p>\n

Tam anlaman\u0131z i\u00e7in konuyu biraz a\u00e7\u0131yorum . her \u015fey ihitya\u00e7lara g\u00f6re \u00e7\u0131kar ?neden \u00e7\u0131kt\u0131 bu tasar\u0131m mimarileri ?<\/p>\n

web 3.0 en ba\u015fl\u0131 tahmin edilemeyen geli\u015fimi mobil d\u00fcnya kullan\u0131m\u0131n\u0131n h\u0131zla artmas\u0131 oldu. art\u0131k sadece pc desktop – masa\u00fcst\u00fc veya notebook – diz\u00fcst\u00fc bilgisayarlar yok hayat\u0131m\u0131zda mobil – mobile cep telefonlar\u0131 tabletler dende ciddi internet sitelerine giri\u015f aramalar i\u015flemler yap\u0131l\u0131yor .<\/p>\n

i\u015fte webin ihtiyac\u0131 \u00fc\u00e7 platform (desktop, mobile, tablet) \u00fc\u00e7 farkl\u0131 \u00f6l\u00e7\u00fcye sahip tasar\u0131m\u0131 site demek i\u015fte bunu ilk \u00e7\u00f6zd\u00fc\u011f\u00fcm\u00fcz y\u00f6ntemin ad\u0131 asl\u0131nda adaptive design<\/strong>\u00a0ad\u0131ndanda anla\u015f\u0131laca\u011f\u0131 gibi adapte olmak \u00a0sitenizin cihaza adepte olmas\u0131 gibi d\u00fc\u015f\u00fcn\u00fcne bilir siniz.<\/p>\n

Peki nas\u0131l \u00a0oluyor bu adaptasyon \u00a0?<\/strong><\/p>\n

\u00dc\u00e7 platform i\u00e7in ayr\u0131 ayr\u0131 web siteleri yap\u0131l\u0131yor mesela desktop.domain.com \u00a0mobile.domain.com \u00a0tablet.domain.com<\/p>\n

domain.com \u00a0hangi cihazdan girerseniz serverdaki otomatik agent kontrol kodu siteyi desktop lam\u0131 mobile mi yoksa tabletlemi gezdi\u011finizi agent tan alg\u0131l\u0131yor. \u00a0ona gore ilgili siteye y\u00f6nlendiriyor (mobile.domain.com gibi) o sitedeki tasar\u0131mda o cihaz i\u00e7in uyumlu adaptive<\/strong> tasar\u0131m oldu\u011fundan kullan\u0131c\u0131ya cihaz ile uyumlu bir sitede gezinerek daha h\u0131zl\u0131 ve kolay kullan\u0131m imkan\u0131 buluyor i\u015fte adaptive \u00a0mant\u0131\u011f\u0131 i\u00e7in en az i\u00e7 farkl\u0131 site tasar\u0131m\u0131 laz\u0131m asl\u0131nda ayn\u0131 siteyi \u00fc\u00e7 kere design tasarlamak ve programlamak gerekli dememiz daha do\u011fru olur.<\/p>\n

Responsive bu i\u015fin neresinde ?<\/strong><\/p>\n

Adaptive<\/strong> anlad\u0131\u011f\u0131m\u0131za g\u00f6re responsive<\/strong> ise adaptive<\/strong> i\u00e7in har\u00e7anan t\u00fcm eforu daha aza indirme fikrinden do\u011fan tek site tek tasar\u0131m tek programlama kodu ile t\u00fcm \u00fc\u00e7 platform i\u00e7in uyumlu \u00e7al\u0131\u015fabilen tasar\u0131m\u0131 nas\u0131l yapar\u0131z sorusunun cevab\u0131n\u0131 veren felsefe ile ba\u015flayan web tasar\u0131m programlama mimarisidir.<\/p>\n

Tek site ile t\u00fcm platformlarda web sitenizdeki t\u00fcm html<\/strong> element objelerin t\u00fcm g\u00f6rsellerin t\u00fcm men\u00fclerin tablet ile girildi\u011finde tablet ekran\u0131na g\u00f6re uyumlu mobile cep telefonu ile girildi\u011finde ise daha uyumlu hale getirmesidir. \u00a0Responsive<\/strong> ile zaman performans ve parasal harcamalarda da adaptive<\/strong> g\u00f6re kazan\u00e7 vard\u0131r. \u00a0Ve sitenin g\u00fcncelli\u011fi i\u00e7erik y\u00f6netiminde de birden fazla (\u00fc\u00e7 platform i\u00e7in) g\u00fcncelleme yerine tek g\u00fcncelleme ile t\u00fcm platformlarda g\u00fcncelleme efor ve maliyet kolayl\u0131\u011f\u0131 da sitenizin s\u00fcrd\u00fcr\u00fclebilirli\u011findeki maliyet karl\u0131l\u0131\u011f\u0131 sa\u011flamaktad\u0131r.<\/p>\n

Benim favorim Response<\/strong> tasar\u0131md\u0131r . hatta ben daha ileri gidip native mobile uygulamayada gerek olmad\u0131\u011f\u0131n\u0131 responsive<\/strong> bu i\u015fide \u00e7\u00f6zd\u00fc\u011f\u00fcn\u00fc d\u00fc\u015f\u00fcn\u00fcyorum burada tabiki uygulaman\u0131n amac\u0131 hardware – donan\u0131msal fonksiyonlar ile \u00e7ok fazla ha\u015f\u0131r ne\u015fir olmayacak ise. web olmal\u0131 uygulamalarda responsive<\/strong> ile sorunsuz \u00e7al\u0131\u015f\u0131r.<\/p>\n

\u015eimdi hep \u015fu soru var responsive mi yok sa responsive i yi se\u00e7meliyiz ? \u00a0Hangi tasar\u0131m daha ba\u015far\u0131l\u0131 ?<\/strong><\/p>\n

 <\/p>\n

Asl\u0131nda her \u015feyi bu resim anlat\u0131yor \ud83d\ude42<\/strong><\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Responsive tasar\u0131m \u00f6rne\u011fi<\/strong><\/p>\n

\"\"<\/p>\n

Responsive ekran \u00f6rnek g\u00f6r\u00fcn\u00fcm similasyonu<\/p>\n

Adaptive\u00a0tasar\u0131m \u00f6rne\u011fi<\/strong><\/p>\n

\"\"
Adaptive ekran \u00f6rnek g\u00f6r\u00fcn\u00fcm similasyonu<\/figcaption><\/figure>\n

 <\/p>\n

 <\/p>\n

Kaynaklar :\u00a0<\/strong><\/p>\n

http:\/\/www.liquidapsive.com\/<\/a> \u00a0adresinde konuyu canl\u0131 g\u00f6steren bir \u00e7ok tasar\u0131m similasyonu mevcut.<\/p>\n

di\u011fer kaynaklar :\u00a0http:\/\/www.techrepublic.com\/blog\/web-designer\/what-is-the-difference-between-responsive-vs-adaptive-web-design\/<\/a><\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Bu makale Burhan KARADERE ‘nin yorumu ile web teknolojisindeki responsive ve adaptive aras\u0131ndaki farklar\u0131 anlatmaya y\u00f6neliktir. Fakrl\u0131 ihtiya\u00e7lara da ne zaman hangi do\u011fru se\u00e7imi yapman\u0131za umar\u0131z k\u0131lavuz olabilir. Merhabalar geli\u015fen internet teknolojilerinden son 3 y\u0131ld\u0131r konu\u015fulan konu web 3.0 ve en\u00e7ok ta HTML 5 \u00a0web programlama dilindeki b\u00fcy\u00fck geli\u015fmeler ve akabindeki CSS3 ve javascript framework […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[2],"tags":[2482],"class_list":["post-5474","post","type-post","status-publish","format-standard","hentry","category-2015-2016","tag-responsive","has-post-title","has-post-date","has-post-category","has-post-tag","has-post-comment","has-post-author",""],"aioseo_notices":[],"views":2392,"_links":{"self":[{"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/posts\/5474","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/comments?post=5474"}],"version-history":[{"count":7,"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/posts\/5474\/revisions"}],"predecessor-version":[{"id":5481,"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/posts\/5474\/revisions\/5481"}],"wp:attachment":[{"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/media?parent=5474"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/categories?post=5474"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/tags?post=5474"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}