G\u00fcn\u00fcm\u00fcz mobil ve web d\u00fcnyas\u0131nda, kullan\u0131c\u0131lar\u0131n farkl\u0131 cihaz boyutlar\u0131 ve ekran \u00e7\u00f6z\u00fcn\u00fcrl\u00fckleriyle etkile\u015fim kurmas\u0131 ka\u00e7\u0131n\u0131lmazd\u0131r. Power Apps Canvas uygulamalar\u0131 geli\u015ftirirken, uygulaman\u0131z\u0131n her ekranda estetik ve i\u015flevsel bir \u015fekilde g\u00f6r\u00fcnmesini sa\u011flamak, kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. Geleneksel yakla\u015f\u0131mlar\u0131n getirdi\u011fi zorluklar\u0131 a\u015fmak ve bak\u0131m maliyetlerini d\u00fc\u015f\u00fcrmek i\u00e7in “kapsay\u0131c\u0131 odakl\u0131” (container-first) yakla\u015f\u0131m, duyarl\u0131 Power Apps uygulamalar\u0131 geli\u015ftirmenin en etkili yoludur. Bu makale, kapsay\u0131c\u0131lar\u0131n g\u00fcc\u00fcn\u00fc kullanarak nas\u0131l dinamik ve duyarl\u0131 uygulamalar olu\u015fturabilece\u011finizi ad\u0131m ad\u0131m a\u00e7\u0131klayacakt\u0131r.<\/p>\n
Duyarl\u0131 uygulamalar geli\u015ftirmek, sadece estetik bir tercih de\u011fil, ayn\u0131 zamanda i\u015flevsellik ve kullan\u0131c\u0131 memnuniyeti i\u00e7in temel bir gerekliliktir.<\/p>\n
Kullan\u0131c\u0131lar, uygulamalar\u0131n kulland\u0131klar\u0131 cihaz\u0131n ekran boyutuna otomatik olarak uyum sa\u011flamas\u0131n\u0131 beklerler. K\u00fc\u00e7\u00fck bir telefonda kayd\u0131rma \u00e7ubuklar\u0131yla u\u011fra\u015fmak veya b\u00fcy\u00fck bir monit\u00f6rde bo\u015f alanlarla dolu bir aray\u00fcz g\u00f6rmek, k\u00f6t\u00fc bir deneyim sunar. Duyarl\u0131 bir tasar\u0131m, kontrol ve metinlerin her ekranda okunabilir ve eri\u015filebilir olmas\u0131n\u0131 sa\u011flayarak kullan\u0131c\u0131 memnuniyetini art\u0131r\u0131r.<\/p>\n
Ak\u0131ll\u0131 telefonlar, tabletler, diz\u00fcst\u00fc bilgisayarlar ve masa\u00fcst\u00fc monit\u00f6rler gibi geni\u015f bir cihaz yelpazesi bulunmaktad\u0131r. Her bir cihaz i\u00e7in ayr\u0131 bir uygulama s\u00fcr\u00fcm\u00fc geli\u015ftirmek pratik de\u011fildir. Duyarl\u0131 tasar\u0131m, tek bir uygulaman\u0131n t\u00fcm bu cihazlarda sorunsuz \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flayarak eri\u015filebilirli\u011fi art\u0131r\u0131r ve geli\u015ftirme y\u00fck\u00fcn\u00fc azalt\u0131r.<\/p>\n
\u00c7al\u0131\u015fanlar farkl\u0131 cihazlarda ayn\u0131 uygulamay\u0131 kullanarak i\u015f s\u00fcre\u00e7lerini aksatmadan s\u00fcrd\u00fcrebilmelidir. Duyarl\u0131 uygulamalar, \u00e7al\u0131\u015fanlar\u0131n nerede olurlarsa olsunlar, hangi cihaz\u0131 kullan\u0131rlarsa kullans\u0131nlar verilere ve i\u015flevlere kolayca eri\u015fmelerini sa\u011flayarak i\u015f s\u00fcreklili\u011fini ve genel verimlili\u011fi art\u0131r\u0131r.<\/p>\n
Power Apps’te duyarl\u0131 tasar\u0131m, kapsay\u0131c\u0131lar tan\u0131t\u0131lmadan \u00f6nce olduk\u00e7a zahmetli ve s\u0131n\u0131rl\u0131yd\u0131. Geleneksel y\u00f6ntemler genellikle manuel ayarlamalar ve karma\u015f\u0131k form\u00fcller gerektiriyordu.<\/p>\n
Varsay\u0131lan olarak, Power Apps kontrolleri genellikle sabit piksel boyutlar\u0131na sahiptir. Bu, uygulaman\u0131n farkl\u0131 ekran boyutlar\u0131nda bozulmas\u0131na veya bo\u015fluklar olu\u015fmas\u0131na neden olur. Geli\u015ftiricilerin her kontrol\u00fcn X, Y, Geni\u015flik (Width) ve Y\u00fckseklik (Height) \u00f6zelliklerini manuel olarak hesaplamas\u0131 veya karma\u015f\u0131k form\u00fcllerle dinamik hale getirmesi gerekiyordu.<\/p>\n
\n\/\/ Geleneksel Geni\u015flik Form\u00fcl\u00fc \u00d6rne\u011fi\nButton1.Width = Parent.Width * 0.4;\nButton1.X = (Parent.Width - Self.Width) \/ 2;\n<\/pre>\n<\/code><\/p>\n
Bu t\u00fcr form\u00fcller, uygulaman\u0131n hiyerar\u015fisi derinle\u015ftik\u00e7e veya yeni kontroller eklendik\u00e7e y\u00f6netilmesi zor bir hal al\u0131yordu.<\/p>\n
Manuel Ayarlamalar\u0131n Y\u00fck\u00fc<\/h4>\n
Geleneksel yakla\u015f\u0131mla, her yeni ekran boyutu veya cihaz t\u00fcr\u00fc i\u00e7in kontrollerin konumlar\u0131n\u0131 ve boyutlar\u0131n\u0131 manuel olarak ayarlamak b\u00fcy\u00fck bir zaman ve emek kayb\u0131na yol a\u00e7\u0131yordu. Tasar\u0131m de\u011fi\u015fiklikleri veya yeni \u00f6zellik eklemeleri, t\u00fcm duyarl\u0131 form\u00fcllerin yeniden g\u00f6zden ge\u00e7irilmesini gerektirebiliyordu.<\/p>\n
Bak\u0131m ve \u00d6l\u00e7eklenebilirlik Sorunlar\u0131<\/h4>\n
Karma\u015f\u0131k form\u00fcllerle olu\u015fturulmu\u015f duyarl\u0131 uygulamalar\u0131n bak\u0131m\u0131 zordur. Bir kontrol\u00fcn boyutunu de\u011fi\u015ftirmek, ba\u011f\u0131ml\u0131 di\u011fer kontrollerin de boyutlar\u0131n\u0131n g\u00fcncellenmesini gerektirebilir. Bu durum, uygulaman\u0131n \u00f6l\u00e7eklenebilirli\u011fini s\u0131n\u0131rlar ve yeni geli\u015ftiricilerin projeye adaptasyonunu zorla\u015ft\u0131r\u0131r.<\/p>\n
Kapsay\u0131c\u0131 Odakl\u0131 Yakla\u015f\u0131m\u0131n Temelleri<\/h3>\n
Kapsay\u0131c\u0131lar (Containers), Power Apps'e duyarl\u0131 tasar\u0131m yeteneklerini getiren g\u00fc\u00e7l\u00fc kontrollerdir. Otomatik d\u00fczen (auto-layout) mant\u0131\u011f\u0131yla \u00e7al\u0131\u015farak kontrollerin kendili\u011finden hizalanmas\u0131n\u0131 ve boyutlanmas\u0131n\u0131 sa\u011flarlar.<\/p>\n
Otomatik D\u00fczen (Auto-Layout) Kavram\u0131<\/h4>\n
Otomatik d\u00fczen, kapsay\u0131c\u0131lar\u0131n i\u00e7inde bulunan kontrollerin belirli kurallara g\u00f6re otomatik olarak konumland\u0131r\u0131lmas\u0131 ve boyutland\u0131r\u0131lmas\u0131 anlam\u0131na gelir. Geli\u015ftiricinin her kontrol\u00fcn X, Y, Geni\u015flik ve Y\u00fckseklik \u00f6zelliklerini manuel olarak ayarlamas\u0131na gerek kalmaz. Kapsay\u0131c\u0131, i\u00e7indeki \u00f6\u011feleri yatay veya dikey olarak d\u00fczenler, bo\u015fluklar\u0131 y\u00f6netir ve ekran boyutuna g\u00f6re esneklik sa\u011flar.<\/p>\n
Kapsay\u0131c\u0131 Kontrollerinin Rol\u00fc<\/h4>\n
Power Apps'te iki ana kapsay\u0131c\u0131 t\u00fcr\u00fc bulunur: Yatay Kapsay\u0131c\u0131 (Horizontal Container) ve Dikey Kapsay\u0131c\u0131 (Vertical Container). Bu kapsay\u0131c\u0131lar, i\u00e7lerindeki kontrolleri belirli bir y\u00f6nde s\u0131ralar. Bir kapsay\u0131c\u0131, kendi i\u00e7indeki kontrollerin nas\u0131l d\u00fczenlenece\u011fini y\u00f6netirken, ayn\u0131 zamanda kendisi de \u00fcst kapsay\u0131c\u0131s\u0131na veya ekrana g\u00f6re duyarl\u0131 bir \u015fekilde boyutlanabilir.<\/p>\n
Yeni Bir Tasar\u0131m Paradigmas\u0131<\/h4>\n
Kapsay\u0131c\u0131 odakl\u0131 yakla\u015f\u0131m, Power Apps geli\u015ftiricileri i\u00e7in bir paradigma de\u011fi\u015fimi sunar. Art\u0131k tek tek kontrolleri de\u011fil, bu kontrolleri bar\u0131nd\u0131ran kapsay\u0131c\u0131 hiyerar\u015filerini d\u00fc\u015f\u00fcnmek gerekir. Bu yakla\u015f\u0131m, daha mod\u00fcler, bak\u0131m\u0131 kolay ve do\u011fal olarak duyarl\u0131 uygulamalar olu\u015fturmay\u0131 te\u015fvik eder.<\/p>\n
Yatay ve Dikey Kapsay\u0131c\u0131lar\u0131 Anlamak<\/h3>\n
Kapsay\u0131c\u0131lar, i\u00e7indeki \u00f6\u011felerin d\u00fczenini kontrol eden \u00e7e\u015fitli \u00f6zelliklere sahiptir. Bu \u00f6zellikleri anlamak, etkili duyarl\u0131 tasar\u0131mlar olu\u015fturmak i\u00e7in temeldir.<\/p>\n
Yatay Kapsay\u0131c\u0131lar (Horizontal Containers)<\/h4>\n
Yatay kapsay\u0131c\u0131lar, i\u00e7indeki kontrolleri soldan sa\u011fa do\u011fru s\u0131ralar. E\u011fer yeterli geni\u015flik yoksa, kontroller bir sonraki sat\u0131ra ge\u00e7ebilir (Wrap \u00f6zelli\u011fi aktifse). Genellikle ba\u015fl\u0131k \u00e7ubuklar\u0131, men\u00fcler veya yan yana durmas\u0131 gereken buton gruplar\u0131 i\u00e7in kullan\u0131l\u0131r.<\/p>\n
\u00d6nemli \u00d6zellikler:<\/p>\n
\nAlign (Horizontal alignment)<\/code>: \u00d6\u011felerin yatayda nas\u0131l hizalanaca\u011f\u0131n\u0131 belirler (Ba\u015flang\u0131\u00e7, Merkez, Son, Bo\u015fluk Aras\u0131).<\/li>\nVerticalAlign<\/code>: \u00d6\u011felerin dikeyde nas\u0131l hizalanaca\u011f\u0131n\u0131 belirler (\u00dcst, Orta, Alt).<\/li>\nGap<\/code>: \u00d6\u011feler aras\u0131ndaki bo\u015flu\u011fu belirler.<\/li>\nPadding<\/code>: Kapsay\u0131c\u0131n\u0131n kenarlar\u0131 ile i\u00e7indeki \u00f6\u011feler aras\u0131ndaki bo\u015flu\u011fu belirler.<\/li>\nWrap<\/code>: \u00d6\u011felerin kapsay\u0131c\u0131ya s\u0131\u011fmad\u0131\u011f\u0131nda alt sat\u0131ra ge\u00e7ip ge\u00e7meyece\u011fini belirler.<\/li>\n<\/ul>\nDikey Kapsay\u0131c\u0131lar (Vertical Containers)<\/h4>\n
Dikey kapsay\u0131c\u0131lar, i\u00e7indeki kontrolleri yukar\u0131dan a\u015fa\u011f\u0131ya do\u011fru s\u0131ralar. Genellikle form alanlar\u0131, liste \u00f6\u011feleri veya dikey bir men\u00fc i\u00e7in kullan\u0131l\u0131r.<\/p>\n
\u00d6nemli \u00d6zellikler:<\/p>\n
\nAlign (Vertical alignment)<\/code>: \u00d6\u011felerin dikeyde nas\u0131l hizalanaca\u011f\u0131n\u0131 belirler (Ba\u015flang\u0131\u00e7, Merkez, Son, Bo\u015fluk Aras\u0131).<\/li>\nHorizontalAlign<\/code>: \u00d6\u011felerin yatayda nas\u0131l hizalanaca\u011f\u0131n\u0131 belirler (Sol, Orta, Sa\u011f).<\/li>\nGap<\/code>: \u00d6\u011feler aras\u0131ndaki bo\u015flu\u011fu belirler.<\/li>\nPadding<\/code>: Kapsay\u0131c\u0131n\u0131n kenarlar\u0131 ile i\u00e7indeki \u00f6\u011feler aras\u0131ndaki bo\u015flu\u011fu belirler.<\/li>\n<\/ul>\nTemel \u00d6zellikler: Align, Gap, Padding<\/h4>\n
Bu \u00f6zellikler, kapsay\u0131c\u0131lar\u0131n i\u00e7indeki kontrollerin birbirleriyle ve kapsay\u0131c\u0131n\u0131n kenarlar\u0131yla olan ili\u015fkisini tan\u0131mlar:<\/p>\n
\n- Align\/VerticalAlign:<\/strong> Kontrollerin kapsay\u0131c\u0131 i\u00e7inde nas\u0131l hizalanaca\u011f\u0131n\u0131 belirler. \u00d6rne\u011fin, bir yatay kapsay\u0131c\u0131da butonlar\u0131 ortaya hizalamak i\u00e7in
Align<\/code> \u00f6zelli\u011fini \"Center\" olarak ayarlayabilirsiniz.<\/li>\n- Gap:<\/strong> Kapsay\u0131c\u0131 i\u00e7indeki ard\u0131\u015f\u0131k kontroller aras\u0131nda sabit bir bo\u015fluk b\u0131rak\u0131r. Bu, kontrollerin birbirine yap\u0131\u015fmas\u0131n\u0131 engeller ve daha d\u00fczenli bir g\u00f6r\u00fcn\u00fcm sa\u011flar.<\/li>\n
- Padding:<\/strong> Kapsay\u0131c\u0131n\u0131n i\u00e7 kenarlar\u0131 ile ilk\/son kontrol aras\u0131ndaki bo\u015flu\u011fu tan\u0131mlar. Bu, i\u00e7eri\u011fin kapsay\u0131c\u0131n\u0131n kenarlar\u0131na \u00e7ok yak\u0131n olmas\u0131n\u0131 engeller.<\/li>\n<\/ul>\n
Boyutland\u0131rma Davran\u0131\u015flar\u0131: Fill, Fit, Absolute<\/h4>\n
Kapsay\u0131c\u0131 i\u00e7indeki bir kontrol\u00fcn geni\u015fli\u011fini veya y\u00fcksekli\u011fini ayarlarken, \"Flexible height\/width\" veya \"Fill portions\" gibi se\u00e7enekler kullan\u0131l\u0131r. Bu, kontrol\u00fcn kapsay\u0131c\u0131 i\u00e7indeki mevcut alan\u0131 nas\u0131l dolduraca\u011f\u0131n\u0131 belirler:<\/p>\n
\n- Fill portions:<\/strong> Kontrol\u00fcn kapsay\u0131c\u0131 i\u00e7inde ne kadar alan kaplayaca\u011f\u0131n\u0131 oran olarak belirtir. \u00d6rne\u011fin, iki kontrol\u00fcn \"Fill portions\" de\u011feri 1 ve 2 ise, ilki toplam alan\u0131n 1\/3'\u00fcn\u00fc, ikincisi 2\/3'\u00fcn\u00fc kaplar.<\/li>\n
- Flexible height\/width:<\/strong> Kontrol\u00fcn kalan alan\u0131 doldurmas\u0131n\u0131 sa\u011flar. Bu genellikle bir ana i\u00e7erik alan\u0131n\u0131n, ba\u015fl\u0131k ve altbilgi gibi sabit boyutlu di\u011fer \u00f6\u011felerden sonra kalan alan\u0131 kaplamas\u0131 i\u00e7in kullan\u0131l\u0131r.<\/li>\n
- Absolute (Fixed):<\/strong> Kontrol\u00fcn sabit piksel boyutunda kalmas\u0131n\u0131 sa\u011flar.<\/li>\n<\/ul>\n
Duyarl\u0131 Tasar\u0131m \u0130\u00e7in Temel Ad\u0131mlar<\/h3>\n
Kapsay\u0131c\u0131 odakl\u0131 bir yakla\u015f\u0131mla duyarl\u0131 bir uygulama olu\u015fturmak, belirli bir yap\u0131land\u0131rma ve tasar\u0131m s\u00fcreci gerektirir.<\/p>\n
Uygulama Ayarlar\u0131n\u0131 Yap\u0131land\u0131rma<\/h4>\n
Duyarl\u0131 bir uygulama geli\u015ftirmeye ba\u015flamadan \u00f6nce, Power Apps Studio'daki uygulama ayarlar\u0131n\u0131 do\u011fru \u015fekilde yap\u0131land\u0131rmak \u00f6nemlidir:<\/p>\n
\nDosya > Ayarlar > Ekran boyutu + y\u00f6nlendirme<\/code> b\u00f6l\u00fcm\u00fcne gidin.<\/li>\nBoyuta ayarla<\/code> (Scale to fit) \u00f6zelli\u011fini kapal\u0131<\/strong> konuma getirin.<\/li>\nEn boy oran\u0131n\u0131 kilitle<\/code> (Lock aspect ratio) \u00f6zelli\u011fini kapal\u0131<\/strong> konuma getirin.<\/li>\nY\u00f6nlendirmeyi kilitle<\/code> (Lock orientation) \u00f6zelli\u011fini iste\u011fe ba\u011fl\u0131 olarak ayarlay\u0131n (genellikle kapal\u0131 b\u0131rakmak daha esneklik sa\u011flar).<\/li>\n<\/ol>\nBu ayarlar, uygulaman\u0131z\u0131n farkl\u0131 ekran boyutlar\u0131na otomatik olarak uyum sa\u011flamas\u0131na olanak tan\u0131r.<\/p>\n
K\u00f6k Kapsay\u0131c\u0131 Olu\u015fturma<\/h4>\n
Her ekran i\u00e7in, t\u00fcm di\u011fer kontrolleri ve kapsay\u0131c\u0131lar\u0131 i\u00e7erecek bir \"k\u00f6k kapsay\u0131c\u0131\" ile ba\u015flamak en iyi uygulamad\u0131r. Bu, genellikle ekran\u0131n tamam\u0131n\u0131 kaplayan bir Dikey Kapsay\u0131c\u0131 veya Yatay Kapsay\u0131c\u0131d\u0131r.<\/p>\n
\n\/\/ Ekran\u0131n Geni\u015fli\u011fi ve Y\u00fcksekli\u011fini kapsay\u0131c\u0131ya atama\nRootContainer.Width = App.Width;\nRootContainer.Height = App.Height;\n<\/pre>\n<\/code><\/p>\n
Bu k\u00f6k kapsay\u0131c\u0131, uygulaman\u0131n ana d\u00fczenini olu\u015fturur ve i\u00e7indeki t\u00fcm \u00f6\u011felerin duyarl\u0131 bir \u015fekilde konumlanmas\u0131n\u0131 sa\u011flar.<\/p>\n
\u0130\u00e7erik Hiyerar\u015fisini Planlama<\/h4>\n
Uygulaman\u0131z\u0131n d\u00fczenini tasarlarken, i\u00e7erik hiyerar\u015fisini planlamak \u00e7ok \u00f6nemlidir. Uygulaman\u0131z\u0131 mant\u0131ksal b\u00f6l\u00fcmlere ay\u0131r\u0131n (\u00f6rn. ba\u015fl\u0131k, ana i\u00e7erik, altbilgi, yan men\u00fc). Her b\u00f6l\u00fcm i\u00e7in uygun bir kapsay\u0131c\u0131 t\u00fcr\u00fc (yatay veya dikey) se\u00e7in ve bu kapsay\u0131c\u0131lar\u0131 i\u00e7 i\u00e7e yerle\u015ftirerek karma\u015f\u0131k d\u00fczenler olu\u015fturun. \u00d6rne\u011fin, bir ba\u015fl\u0131k yatay bir kapsay\u0131c\u0131 olabilir, ana i\u00e7erik dikey bir kapsay\u0131c\u0131 olabilir ve bu dikey kapsay\u0131c\u0131 i\u00e7inde de yatay kapsay\u0131c\u0131lar kullan\u0131labilir.<\/p>\n
Kontrolleri Kapsay\u0131c\u0131lara Yerle\u015ftirme<\/h4>\n
Kontrolleri do\u011frudan ekrana eklemek yerine, her zaman uygun bir kapsay\u0131c\u0131n\u0131n i\u00e7ine ekleyin. Bir kontrol\u00fc kapsay\u0131c\u0131ya s\u00fcr\u00fckleyip b\u0131rakarak veya kapsay\u0131c\u0131 se\u00e7iliyken \"Ekle\" men\u00fcs\u00fcnden ekleyerek yapabilirsiniz. Kontrol\u00fc kapsay\u0131c\u0131ya ekledikten sonra, onun AlignInContainer<\/code>, Fill portions<\/code> ve Flexible height\/width<\/code> gibi \u00f6zelliklerini ayarlayarak kapsay\u0131c\u0131 i\u00e7indeki davran\u0131\u015f\u0131n\u0131 belirleyin.<\/p>\nGeli\u015fmi\u015f Kapsay\u0131c\u0131 Kullan\u0131m\u0131 ve \u0130pu\u00e7lar\u0131<\/h3>\n
Kapsay\u0131c\u0131lar\u0131n temel kullan\u0131m\u0131n\u0131n \u00f6tesine ge\u00e7erek daha karma\u015f\u0131k ve esnek d\u00fczenler olu\u015fturmak m\u00fcmk\u00fcnd\u00fcr.<\/p>\n
Kapsay\u0131c\u0131lar\u0131 \u0130\u00e7 \u0130\u00e7e Kullanma (Nesting)<\/h4>\n
Daha karma\u015f\u0131k d\u00fczenler olu\u015fturmak i\u00e7in kapsay\u0131c\u0131lar\u0131 i\u00e7 i\u00e7e yerle\u015ftirebilirsiniz. \u00d6rne\u011fin, bir dikey kapsay\u0131c\u0131 i\u00e7inde iki yatay kapsay\u0131c\u0131 kullanarak bir formun iki s\u00fctunlu d\u00fczenini olu\u015fturabilirsiniz. Her bir i\u00e7 kapsay\u0131c\u0131, kendi i\u00e7indeki kontrolleri ba\u011f\u0131ms\u0131z olarak y\u00f6netir ve d\u0131\u015f kapsay\u0131c\u0131ya g\u00f6re duyarl\u0131 bir \u015fekilde boyutlan\u0131r.<\/p>\n
\u00d6rnek Senaryo:<\/strong> \u00dcstte bir ba\u015fl\u0131k, alt\u0131nda iki s\u00fctunlu bir form ve en altta bir buton grubu olan bir ekran.<\/p>\n\n- Ekran\u0131n tamam\u0131n\u0131 kaplayan bir Dikey Kapsay\u0131c\u0131 (RootContainer) ekleyin.<\/li>\n
- RootContainer i\u00e7ine bir Yatay Kapsay\u0131c\u0131 (HeaderContainer) ekleyin (Ba\u015fl\u0131k i\u00e7in).<\/li>\n
- RootContainer i\u00e7ine ba\u015fka bir Yatay Kapsay\u0131c\u0131 (FormColumnsContainer) ekleyin (Form s\u00fctunlar\u0131 i\u00e7in).<\/li>\n
- FormColumnsContainer i\u00e7ine iki Dikey Kapsay\u0131c\u0131 (Column1, Column2) ekleyin.<\/li>\n
- RootContainer i\u00e7ine son bir Yatay Kapsay\u0131c\u0131 (FooterContainer) ekleyin (Butonlar i\u00e7in).<\/li>\n<\/ol>\n
Esnek Y\u00fckseklik ve Geni\u015flik Y\u00f6netimi<\/h4>\n
Kontrollerin veya i\u00e7 i\u00e7e kapsay\u0131c\u0131lar\u0131n esnek bir \u015fekilde boyutlanmas\u0131n\u0131 sa\u011flamak i\u00e7in Flexible height\/width<\/code> ve Fill portions<\/code> \u00f6zelliklerini kullan\u0131n. \u00d6rne\u011fin, bir ana i\u00e7erik kapsay\u0131c\u0131s\u0131n\u0131n y\u00fcksekli\u011fini Flexible height<\/code> olarak ayarlayarak, ba\u015fl\u0131k ve altbilgi kapsay\u0131c\u0131lar\u0131 sabit y\u00fckseklikteyken kalan t\u00fcm dikey alan\u0131 doldurmas\u0131n\u0131 sa\u011flayabilirsiniz.<\/p>\n\n\/\/ Ana i\u00e7erik kapsay\u0131c\u0131s\u0131n\u0131n y\u00fcksekli\u011fini esnek hale getirme\nMainContentContainer.FlexibleHeight = true;\n<\/pre>\n<\/code><\/p>\n
Bu, ekran boyutlar\u0131 de\u011fi\u015ftik\u00e7e ana i\u00e7erik alan\u0131n\u0131n otomatik olarak geni\u015fleyip daralmas\u0131n\u0131 sa\u011flar.<\/p>\n
Geli\u015fmi\u015f Hizalama ve Bo\u015fluk Ayarlar\u0131<\/h4>\n
Kapsay\u0131c\u0131lar\u0131n Align<\/code>, VerticalAlign<\/code>, Gap<\/code> ve Padding<\/code> \u00f6zelliklerini dikkatlice kullanarak profesyonel g\u00f6r\u00fcn\u00fcml\u00fc d\u00fczenler olu\u015fturabilirsiniz. \u00d6rne\u011fin, bir yatay kapsay\u0131c\u0131daki butonlar\u0131 e\u015fit bo\u015fluklarla da\u011f\u0131tmak i\u00e7in Align<\/code> \u00f6zelli\u011fini \"Space between\" veya \"Space around\" olarak ayarlayabilirsiniz. Bu \u00f6zellikler, kontroller aras\u0131nda tutarl\u0131 bir g\u00f6rsel denge sa\u011flar.<\/p>\nBile\u015fenlerle Birlikte Kullan\u0131m<\/h4>\n
Kapsay\u0131c\u0131lar\u0131 Power Apps bile\u015fenleri (Components) ile birlikte kullanarak yeniden kullan\u0131labilir ve duyarl\u0131 aray\u00fcz \u00f6\u011feleri olu\u015fturabilirsiniz. Bir bile\u015feni duyarl\u0131 bir kapsay\u0131c\u0131 i\u00e7inde tasarlayarak, bu bile\u015feni uygulaman\u0131z\u0131n farkl\u0131 ekranlar\u0131nda veya farkl\u0131 uygulamalarda kolayca kullanabilir ve her yerde duyarl\u0131 davran\u0131\u015f\u0131n\u0131 koruyabilirsiniz.<\/p>\n
S\u0131k\u00e7a Yap\u0131lan Hatalar ve \u00c7\u00f6z\u00fcmleri<\/h3>\n
Kapsay\u0131c\u0131 odakl\u0131 tasar\u0131ma ge\u00e7erken baz\u0131 yayg\u0131n hatalarla kar\u015f\u0131la\u015fmak m\u00fcmk\u00fcnd\u00fcr. \u0130\u015fte bunlardan baz\u0131lar\u0131 ve \u00e7\u00f6z\u00fcmleri:<\/p>\n
Kapsay\u0131c\u0131lar\u0131 Gereksiz Kullanma<\/h4>\n
Her kontrol\u00fc ayr\u0131 bir kapsay\u0131c\u0131ya koymak, uygulama hiyerar\u015fisini gereksiz yere karma\u015f\u0131kla\u015ft\u0131rabilir ve performans\u0131 d\u00fc\u015f\u00fcrebilir. Kapsay\u0131c\u0131lar\u0131 yaln\u0131zca mant\u0131ksal gruplamalar veya belirli bir d\u00fczenleme ihtiyac\u0131 oldu\u011funda kullan\u0131n.<\/p>\n
\u00c7\u00f6z\u00fcm:<\/strong> Tasar\u0131m\u0131n\u0131z\u0131 basitle\u015ftirin. Bir grup kontrol\u00fcn ayn\u0131 hizalama ve bo\u015fluk kurallar\u0131na sahip olmas\u0131 gerekiyorsa, onlar\u0131 tek bir kapsay\u0131c\u0131ya yerle\u015ftirin. Aksi takdirde, do\u011frudan \u00fcst kapsay\u0131c\u0131ya yerle\u015ftirmeyi d\u00fc\u015f\u00fcn\u00fcn.<\/p>\nYanl\u0131\u015f Boyutland\u0131rma Modlar\u0131<\/h4>\n
Kontrollerin Fill portions<\/code> veya Flexible height\/width<\/code> yerine sabit piksel boyutlar\u0131nda kalmas\u0131, duyarl\u0131l\u0131\u011f\u0131 bozar. \u00d6zellikle kapsay\u0131c\u0131 i\u00e7inde yer alan kontrollerin Width<\/code> veya Height<\/code> de\u011ferlerini manuel olarak ayarlamak, kapsay\u0131c\u0131n\u0131n otomatik d\u00fczen mant\u0131\u011f\u0131n\u0131 ge\u00e7ersiz k\u0131lar.<\/p>\n\u00c7\u00f6z\u00fcm:<\/strong> Kontrollerin Width<\/code> ve Height<\/code> \u00f6zelliklerini Parent.Width<\/code>, Parent.Height<\/code> veya Self.Width<\/code> gibi form\u00fcllerle dinamik hale getirin ya da kapsay\u0131c\u0131 \u00f6zelliklerini (Fill portions<\/code>, Flexible height\/width<\/code>) kullan\u0131n. Sabit boyutlara ihtiyac\u0131n\u0131z varsa, bunu bilin\u00e7li olarak yap\u0131n ve duyarl\u0131l\u0131k \u00fczerindeki etkilerini g\u00f6z \u00f6n\u00fcnde bulundurun.<\/p>\nZ-Index ve Katmanlama Sorunlar\u0131<\/h4>\n
Kapsay\u0131c\u0131lar, i\u00e7indeki kontrollerin Z-Index'ini (katmanlama s\u0131ras\u0131n\u0131) otomatik olarak y\u00f6netir. Bazen bu, bir kontrol\u00fcn di\u011ferinin arkas\u0131nda kalmas\u0131 gibi g\u00f6rsel sorunlara yol a\u00e7abilir.<\/p>\n
\u00c7\u00f6z\u00fcm:<\/strong> Kontrollerin ZIndex<\/code> \u00f6zelli\u011fini manuel olarak ayarlamak yerine, kapsay\u0131c\u0131 i\u00e7indeki s\u0131ralamalar\u0131n\u0131 (sol paneldeki kontrol listesinde yukar\u0131\/a\u015fa\u011f\u0131 ta\u015f\u0131yarak) veya farkl\u0131 kapsay\u0131c\u0131 hiyerar\u015filerini kullanarak katmanlama sorunlar\u0131n\u0131 \u00e7\u00f6zmeye \u00e7al\u0131\u015f\u0131n. Genellikle, en son eklenen kontrol en \u00fcstte g\u00f6r\u00fcn\u00fcr.<\/p>\nPerformans Etkileri<\/h4>\n
\u00c7ok fazla i\u00e7 i\u00e7e ge\u00e7mi\u015f kapsay\u0131c\u0131 veya \u00e7ok karma\u015f\u0131k d\u00fczenler, uygulaman\u0131n y\u00fcklenme s\u00fcresini ve performans\u0131n\u0131 etkileyebilir.<\/p>\n
\u00c7\u00f6z\u00fcm:<\/strong> Uygulama performans\u0131n\u0131 d\u00fczenli olarak test edin. Gereksiz kapsay\u0131c\u0131lardan ka\u00e7\u0131n\u0131n ve m\u00fcmk\u00fcn oldu\u011funca basit bir hiyerar\u015fi kullanmaya \u00e7al\u0131\u015f\u0131n. Bile\u015fenleri kullanarak karma\u015f\u0131kl\u0131\u011f\u0131 azaltabilir ve performans\u0131 optimize edebilirsiniz.<\/p>\nSonu\u00e7<\/h3>\n
Power Apps Canvas uygulamalar\u0131nda duyarl\u0131 tasar\u0131m, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek ve uygulaman\u0131z\u0131n farkl\u0131 cihazlarda sorunsuz \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamak i\u00e7in vazge\u00e7ilmezdir. Kapsay\u0131c\u0131 odakl\u0131 yakla\u015f\u0131m, geleneksel y\u00f6ntemlerin s\u0131n\u0131rl\u0131l\u0131klar\u0131n\u0131 a\u015farak daha mod\u00fcler, bak\u0131m\u0131 kolay ve do\u011fal olarak duyarl\u0131 uygulamalar geli\u015ftirmenize olanak tan\u0131r. Uygulama ayarlar\u0131n\u0131 do\u011fru yap\u0131land\u0131rmak, k\u00f6k kapsay\u0131c\u0131larla ba\u015flamak ve kapsay\u0131c\u0131lar\u0131n sundu\u011fu otomatik d\u00fczen \u00f6zelliklerini etkin bir \u015fekilde kullanmak, ba\u015far\u0131l\u0131 bir duyarl\u0131 tasar\u0131m\u0131n anahtar\u0131d\u0131r. Bu yakla\u015f\u0131m\u0131 benimseyerek, geli\u015ftirme s\u00fcrecinizi h\u0131zland\u0131rabilir ve kullan\u0131c\u0131lar\u0131n\u0131z i\u00e7in daha etkileyici deneyimler sunabilirsiniz.<\/p>\n
SSS (S\u0131k Sorulan Sorular)<\/h3>\nKapsay\u0131c\u0131 odakl\u0131 yakla\u015f\u0131m nedir?<\/h4>\n
Kapsay\u0131c\u0131 odakl\u0131 yakla\u015f\u0131m, Power Apps Canvas uygulamalar\u0131nda kontrolleri do\u011frudan ekrana yerle\u015ftirmek yerine, Yatay ve Dikey Kapsay\u0131c\u0131lar i\u00e7ine yerle\u015ftirerek duyarl\u0131 d\u00fczenler olu\u015fturma y\u00f6ntemidir. Kapsay\u0131c\u0131lar, i\u00e7lerindeki \u00f6\u011felerin otomatik olarak hizalanmas\u0131n\u0131 ve boyutlanmas\u0131n\u0131 sa\u011flar.<\/p>\n
Neden kapsay\u0131c\u0131lar\u0131 kullanmal\u0131y\u0131m?<\/h4>\n
Kapsay\u0131c\u0131lar, uygulaman\u0131z\u0131n farkl\u0131 ekran boyutlar\u0131na ve cihazlara otomatik olarak uyum sa\u011flamas\u0131n\u0131 kolayla\u015ft\u0131r\u0131r, manuel boyutland\u0131rma ve konumland\u0131rma ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r, geli\u015ftirme s\u00fcresini k\u0131salt\u0131r ve uygulaman\u0131n bak\u0131m\u0131n\u0131 basitle\u015ftirir.<\/p>\n
Mevcut uygulamalar\u0131m\u0131 duyarl\u0131 hale getirebilir miyim?<\/h4>\n
Evet, mevcut uygulamalar\u0131n\u0131z\u0131 duyarl\u0131 hale getirebilirsiniz. Ancak bu, genellikle ekran ayarlar\u0131n\u0131 de\u011fi\u015ftirmeyi, mevcut kontrolleri kapsay\u0131c\u0131lar i\u00e7ine ta\u015f\u0131may\u0131 ve onlar\u0131n \u00f6zelliklerini kapsay\u0131c\u0131 mant\u0131\u011f\u0131na g\u00f6re ayarlamay\u0131 gerektiren kapsaml\u0131 bir yeniden yap\u0131land\u0131rma anlam\u0131na gelebilir.<\/p>\n
Kapsay\u0131c\u0131lar performans\u0131 etkiler mi?<\/h4>\n
A\u015f\u0131r\u0131 i\u00e7 i\u00e7e ge\u00e7mi\u015f veya gereksiz kapsay\u0131c\u0131 kullan\u0131m\u0131 performans\u0131 bir miktar etkileyebilir. Ancak, iyi tasarlanm\u0131\u015f ve optimize edilmi\u015f bir kapsay\u0131c\u0131 hiyerar\u015fisi, genellikle performansta fark edilir bir d\u00fc\u015f\u00fc\u015fe neden olmaz ve duyarl\u0131l\u0131k avantajlar\u0131 bu k\u00fc\u00e7\u00fck etkiyi fazlas\u0131yla telafi eder.<\/p>\n
Hangi durumlarda kapsay\u0131c\u0131 kullanmaktan ka\u00e7\u0131nmal\u0131y\u0131m?<\/h4>\n
\u00c7ok basit, tek bir kontrol i\u00e7eren veya tamamen sabit boyutlu olmas\u0131 gereken k\u00fc\u00e7\u00fck uygulamalar i\u00e7in kapsay\u0131c\u0131 kullanmak gereksiz olabilir. Ancak \u00e7o\u011fu modern i\u015f uygulamas\u0131 i\u00e7in duyarl\u0131l\u0131k bir gereklilik oldu\u011fundan, kapsay\u0131c\u0131 kullan\u0131m\u0131 genellikle \u00f6nerilir.<\/p>\n","protected":false},"excerpt":{"rendered":"Duyarl\u0131 uygulamalar geli\u015ftirmek, sadece estetik bir tercih de\u011fil, ayn\u0131 zamanda i\u015flevsellik ve kullan\u0131c\u0131 memnuniyeti i\u00e7in temel bir gerekliliktir.","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-39075","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n
Kapsay\u0131c\u0131 Odakl\u0131 Yakla\u015f\u0131mla Duyarl\u0131 Canvas Uygulamalar\u0131 Olu\u015fturma - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/kapsayici-odakli-yaklasimla-duyarli-canvas-uygulamalari-olusturma\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Kapsay\u0131c\u0131 Odakl\u0131 Yakla\u015f\u0131mla Duyarl\u0131 Canvas Uygulamalar\u0131 Olu\u015fturma\" \/>\n<meta property=\"og:description\" content=\"Duyarl\u0131 uygulamalar geli\u015ftirmek, sadece estetik bir tercih de\u011fil, ayn\u0131 zamanda i\u015flevsellik ve kullan\u0131c\u0131 memnuniyeti i\u00e7in temel bir gerekliliktir.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/kapsayici-odakli-yaklasimla-duyarli-canvas-uygulamalari-olusturma\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-13T16:30:41+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/kapsayici-odakli-yaklasimla-duyarli-canvas-uygulamalari-olusturma\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/kapsayici-odakli-yaklasimla-duyarli-canvas-uygulamalari-olusturma\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Kapsay\u0131c\u0131 Odakl\u0131 Yakla\u015f\u0131mla Duyarl\u0131 Canvas Uygulamalar\u0131 Olu\u015fturma\",\"datePublished\":\"2026-02-13T16:30:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/kapsayici-odakli-yaklasimla-duyarli-canvas-uygulamalari-olusturma\/\"},\"wordCount\":2870,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/kapsayici-odakli-yaklasimla-duyarli-canvas-uygulamalari-olusturma\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/kapsayici-odakli-yaklasimla-duyarli-canvas-uygulamalari-olusturma\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/kapsayici-odakli-yaklasimla-duyarli-canvas-uygulamalari-olusturma\/\",\"name\":\"Kapsay\u0131c\u0131 Odakl\u0131 Yakla\u015f\u0131mla Duyarl\u0131 Canvas Uygulamalar\u0131 Olu\u015fturma - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-02-13T16:30:41+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/kapsayici-odakli-yaklasimla-duyarli-canvas-uygulamalari-olusturma\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/kapsayici-odakli-yaklasimla-duyarli-canvas-uygulamalari-olusturma\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/kapsayici-odakli-yaklasimla-duyarli-canvas-uygulamalari-olusturma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Kapsay\u0131c\u0131 Odakl\u0131 Yakla\u015f\u0131mla Duyarl\u0131 Canvas Uygulamalar\u0131 Olu\u015fturma\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Kapsay\u0131c\u0131 Odakl\u0131 Yakla\u015f\u0131mla Duyarl\u0131 Canvas Uygulamalar\u0131 Olu\u015fturma - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/kapsayici-odakli-yaklasimla-duyarli-canvas-uygulamalari-olusturma\/","og_locale":"tr_TR","og_type":"article","og_title":"Kapsay\u0131c\u0131 Odakl\u0131 Yakla\u015f\u0131mla Duyarl\u0131 Canvas Uygulamalar\u0131 Olu\u015fturma","og_description":"Duyarl\u0131 uygulamalar geli\u015ftirmek, sadece estetik bir tercih de\u011fil, ayn\u0131 zamanda i\u015flevsellik ve kullan\u0131c\u0131 memnuniyeti i\u00e7in temel bir gerekliliktir.","og_url":"https:\/\/fatihsoysal.com\/blog\/kapsayici-odakli-yaklasimla-duyarli-canvas-uygulamalari-olusturma\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-02-13T16:30:41+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"15 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/kapsayici-odakli-yaklasimla-duyarli-canvas-uygulamalari-olusturma\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/kapsayici-odakli-yaklasimla-duyarli-canvas-uygulamalari-olusturma\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Kapsay\u0131c\u0131 Odakl\u0131 Yakla\u015f\u0131mla Duyarl\u0131 Canvas Uygulamalar\u0131 Olu\u015fturma","datePublished":"2026-02-13T16:30:41+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/kapsayici-odakli-yaklasimla-duyarli-canvas-uygulamalari-olusturma\/"},"wordCount":2870,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/kapsayici-odakli-yaklasimla-duyarli-canvas-uygulamalari-olusturma\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/kapsayici-odakli-yaklasimla-duyarli-canvas-uygulamalari-olusturma\/","url":"https:\/\/fatihsoysal.com\/blog\/kapsayici-odakli-yaklasimla-duyarli-canvas-uygulamalari-olusturma\/","name":"Kapsay\u0131c\u0131 Odakl\u0131 Yakla\u015f\u0131mla Duyarl\u0131 Canvas Uygulamalar\u0131 Olu\u015fturma - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-02-13T16:30:41+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/kapsayici-odakli-yaklasimla-duyarli-canvas-uygulamalari-olusturma\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/kapsayici-odakli-yaklasimla-duyarli-canvas-uygulamalari-olusturma\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/kapsayici-odakli-yaklasimla-duyarli-canvas-uygulamalari-olusturma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Kapsay\u0131c\u0131 Odakl\u0131 Yakla\u015f\u0131mla Duyarl\u0131 Canvas Uygulamalar\u0131 Olu\u015fturma"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/39075","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=39075"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/39075\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=39075"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=39075"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=39075"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}