---

ArcGIS Experience Builder ile Profesyonel Web Uygulamaları Geliştirme

🏗️ Bölüm 5: Düzen ve Tasarım

Bu bölümde, ArcGIS Experience Builder’da düzen ve tasarım süreçlerini en ince ayrıntısına kadar ele alacağız. Düzen, uygulamanızın widget’larının nasıl organize edildiğini ve kullanıcıların içeriğe nasıl eriştiğini belirlerken, tasarım, uygulamanızın görsel estetiğini ve markanıza uygunluğunu şekillendirir. Haziran 2025 sürümüne uygun olarak, tüm düzen türlerini, boyutlandırma seçeneklerini, tema özelleştirmelerini, responsive tasarım tekniklerini ve pratik örnekleri detaylıca açıklayacağız. Her adımı, sıfırdan başlayan birinin bile kolayca anlayabileceği şekilde, bolca örnek ve ipucuyla sunacağız.

5.1 Düzen ve Tasarım Nedir?

Düzen, ArcGIS Experience Builder’da uygulamanızın yapısını ve widget’ların yerleşimini tanımlar. Widget’ların nerede görüneceği, nasıl hizalanacağı ve farklı ekran boyutlarında nasıl davranacağı düzenle belirlenir. İyi bir düzen, kullanıcıların uygulamanızı kolayca gezinmesini, bilgiye hızlı erişmesini ve hedeflerine ulaşmasını sağlar. Örneğin:

• Bir afet yönetimi uygulamasında, harita ve veri tablolarının düzeni, acil durum ekiplerinin hızlı karar almasını sağlar.
• Bir emlak uygulamasında, arama çubuğu ve haritanın yerleşimi, kullanıcıların mülk bulmasını kolaylaştırır.

Tasarım, uygulamanızın görsel estetiğini kapsar. Renk şemaları, yazı tipleri, arka planlar ve diğer görsel öğelerle uygulamanızı markanıza uygun hale getirirsiniz. Tasarım, kullanıcıların uygulamanıza olan ilgisini artırır ve profesyonel bir görünüm sağlar.

Neden Önemli?

• Kullanıcı Deneyimi: İyi bir düzen, kullanıcıların bilgiye kolayca ulaşmasını sağlar.
• Estetik: Görsel olarak çekici bir tasarım, kullanıcıların uygulamanıza güvenmesini ve daha uzun süre etkileşimde bulunmasını teşvik eder.
• Responsive Uyumluluk: Farklı cihazlarda (masaüstü, tablet, mobil) tutarlı bir deneyim sunar.

5.2 Düzen Türleri

ArcGIS Experience Builder, farklı ihtiyaçlara uygun üç temel düzen türü sunar. Her biri belirli kullanım senaryolarına hitap eder ve widget’ların yerleşimini optimize eder.

5.2.1 Sabit Düzen (Fixed Layout)

• Tanım: Widget’ların sabit konumlarda kaldığı bir düzen türüdür. Kullanıcı kaydırma yapsa bile widget’lar yer değiştirmez.
• Kullanım Alanları:
  • Panolar (dashboards) oluşturma, örneğin bir şehir bilgi panosu.
  • Modal dialoglar veya sabit bilgi ekranları.
• Özellikler:
  • Widget’lar belirli bir konumda kilitlenir.
  • Genellikle masaüstü cihazlar için optimize edilmiştir.
  • Küçük ekranlarda dikkatli kullanılmalıdır, çünkü taşma (overflow) sorunlarına yol açabilir.
• Örnek: Bir şehir bilgi panosu, harita, istatistikler ve metin widget’larını sabit konumlarda içerir. Kullanıcı kaydırmaz, tüm içerik tek bir ekranda görünür.
• Avantajlar:
  • Kesin kontrol sağlar.
  • Panolar için idealdir.
• Dezavantajlar:
  • Mobil cihazlarda sınırlı esneklik.
  • Çok fazla widget eklenirse taşma sorunları yaşanabilir.

5.2.2 Akış Düzeni (Flow Layout)

• Tanım: İçeriğin kaydırılabilir ve yanıt veren bir şekilde düzenlendiği bir düzen türüdür. Uzun metinler, resimler ve haritalar için uygundur.
• Kullanım Alanları:
  • Hikaye anlatımı uygulamaları (ör. bir doğal afet hikayesi).
  • Veri keşif uygulamaları, örneğin çevresel verilerin uzun bir listesi.
• Özellikler:
  • Kullanıcılar içeriği kaydırarak keşfedebilir.
  • Mobil cihazlar için özellikle uygundur.
  • Widget’lar otomatik olarak içeriğe göre hizalanır.
• Örnek: Bir doğal afet hikayesi, haritalar, metinler ve görsellerle anlatılır. Kullanıcılar sayfayı kaydırarak içeriği keşfeder.
• Avantajlar:
  • Mobil uyumluluk için idealdir.
  • Uzun içerik için esneklik sağlar.
• Dezavantajlar:
  • Sabit düzen kadar kesin kontrol sunmaz.
  • Çok fazla içerik eklenirse performans sorunları yaşanabilir.

5.2.3 Düzen Widget’ları

• Tanım: Satır (Row), Sütun (Column), Izgara (Grid), Akordeon (Accordion) gibi widget’lar, daha karmaşık ve yapılandırılmış düzenler oluşturmak için kullanılır.
• Kullanım Alanları:
  • Birden fazla widget’ı organize etmek.
  • Özel düzenler oluşturmak, örneğin bir harita ve veri tablosunu yan yana yerleştirmek.
• Özellikler:
  • Widget’ları yatay (satır), dikey (sütun) veya ızgara şeklinde düzenler.
  • Responsive tasarım için esneklik sağlar.
  • İç içe düzen widget’ları kullanılabilir (ör. bir satır içinde sütunlar).
• Örnek: Bir emlak uygulamasında, bir satır widget’ı harita ve arama widget’larını yan yana yerleştirir. Bir sütun widget’ı, veri tablolarını ve grafikleri alt alta düzenler.
• Avantajlar:
  • Karmaşık düzenler için güçlü bir araç.
  • Responsive tasarım için esnek.
• Dezavantajlar:
  • İç içe widget’lar karmaşık hale gelebilir.
  • Yeni başlayanlar için öğrenme eğrisi gerektirebilir.

Tablo: Düzen Türleri Özeti

Düzen Türü	Açıklama	Kullanım Örneği	Avantajlar	Dezavantajlar
Sabit Düzen	Widget’lar sabit konumlarda kalır	Şehir bilgi panosu	Kesin kontrol, panolar için ideal	Mobil cihazlarda sınırlı esneklik
Akış Düzeni	Kaydırılabilir, yanıt veren içerik	Hikaye anlatımı uygulaması	Mobil uyumluluk, uzun içerik için uygun	Kesin kontrol eksikliği
Düzen Widget’ları	Satır, sütun, ızgara ile karmaşık düzenler	Emlak uygulaması	Esnek, responsive tasarım	Karmaşıklık, öğrenme eğrisi

5.3 Düzen Widget’ları Kullanımı

Düzen widget’ları, içeriği organize etmek ve düzenli bir görünüm sağlamak için kullanılır. Aşağıda, her düzen widget’ının detaylı açıklaması ve kullanım adımları yer alıyor:

5.3.1 Sabit Panel (Fixed Panel)

• Tanım: Widget’ları sabit bir konumda tutar, genellikle kenar çubukları veya üst/alt paneller için kullanılır.
• Ekleme Adımları:
  1. Insert widget panelinden Fixed Panel widget’ını seçin.
  2. Tuval üzerine sürükleyip bırakın.
  3. İçine diğer widget’ları (ör. Harita, Arama) ekleyin.
• Yapılandırma:
  • Konum: Üst, alt, sol veya sağ.
  • Boyut: Piksel veya yüzde cinsinden.
  • Stil: Arka plan rengi, kenarlık, gölge.
• Örnek: Bir sabit panel, uygulamanın üst kısmında bir başlık ve arama çubuğu içerir.

5.3.2 Kenar Çubuğu (Sidebar)

• Tanım: Yan panel düzenleme için kullanılır, genellikle navigasyon veya ek bilgiler için.
• Ekleme Adımları:
  1. Insert widget panelinden Sidebar widget’ını seçin.
  2. Tuvalin sol veya sağ tarafına yerleştirin.
  3. İçine widget’lar ekleyin (ör. Lejant, Filtre).
• Yapılandırma:
  • Yön: Sol veya sağ kenar çubuğu.
  • Genişlik: Piksel veya yüzde.
  • Davranış: Açılır/kapanır veya sabit.
• Örnek: Bir kenar çubuğu, harita katmanlarını ve filtreleri içerir.

5.3.3 Satır (Row)

• Tanım: Widget’ları yatay olarak düzenler.
• Ekleme Adımları:
  1. Insert widget panelinden Row widget’ını seçin.
  2. Tuval üzerine yerleştirin.
  3. İçine birden fazla widget ekleyin (ör. Harita ve Arama).
• Yapılandırma:
  • Hizalama: Sol, orta, sağ.
  • Boşluk: Widget’lar arasındaki mesafe.
• Örnek: Bir satır widget’ı, harita ve arama çubuğunu yan yana yerleştirir.

5.3.4 Sütun (Column)

• Tanım: Widget’ları dikey olarak düzenler.
• Ekleme Adımları:
  1. Insert widget panelinden Column widget’ını seçin.
  2. Tuval üzerine yerleştirin.
  3. İçine widget’lar ekleyin (ör. Tablo, Grafik).
• Yapılandırma:
  • Hizalama: Üst, orta, alt.
  • Boşluk: Widget’lar arasındaki mesafe.
• Örnek: Bir sütun widget’ı, veri tablosu ve grafiği alt alta düzenler.

5.3.5 Izgara (Grid)

• Tanım: Widget’ları ızgara tabanlı bir düzende organize eder.
• Ekleme Adımları:
  1. Insert widget panelinden Grid widget’ını seçin.
  2. Tuval üzerine yerleştirin.
  3. Izgara hücrelerine widget’lar ekleyin.
• Yapılandırma:
  • Satır/Sütun Sayısı: Izgara boyutunu belirleyin.
  • Hizalama: Hücrelerin hizasını ayarlayın.
• Örnek: Bir ızgara, harita, tablo ve grafik widget’larını düzenli bir şekilde yerleştirir.

5.3.6 Akordeon (Accordion)

• Tanım: Katlanabilir içerik panelleri oluşturur, kullanıcıların içeriği açıp kapatmasını sağlar.
• Ekleme Adımları:
  1. Insert widget panelinden Accordion widget’ını seçin.
  2. Tuval üzerine yerleştirin.
  3. Her panele widget’lar ekleyin.
• Yapılandırma:
  • Başlık: Her panel için başlık belirleyin.
  • Davranış: Varsayılan olarak açık veya kapalı.
• Örnek: Bir akordeon, farklı veri setlerini (ör. nüfus, ekonomi) ayrı panellerde sunar.

5.3.7 Akış Satırı (Flow Row)

• Tanım: Esnek satır düzenleme sağlar, widget’lar otomatik olarak hizalanır.
• Ekleme Adımları:
  1. Insert widget panelinden Flow Row widget’ını seçin.
  2. Tuval üzerine yerleştirin.
  3. İçine widget’lar ekleyin.
• Yapılandırma:
  • Hizalama: Space around, space between gibi yeni seçenekler (Haziran 2025).
  • Boşluk: Widget’lar arasındaki mesafe.
• Örnek: Bir akış satırı, farklı boyutlardaki widget’ları esnek bir şekilde düzenler.

5.3.8 Yer Tutucu (Placeholder)

• Tanım: Geçici olarak widget yerleştirmek için kullanılır, daha sonra başka bir widget ile değiştirilebilir.
• Ekleme Adımları:
  1. Insert widget panelinden Placeholder widget’ını seçin.
  2. Tuval üzerine yerleştirin.
  3. Daha sonra başka bir widget ile değiştirin.
• Yapılandırma:
  • Boyut: Piksel veya yüzde.
  • Etiket: Yer tutucunun amacı için bir isim.
• Örnek: Bir yer tutucu, tasarım sürecinde geçici olarak bir harita widget’ının yerini tutar.

Tablo: Düzen Widget’ları Özeti

Widget Adı	Açıklama	Kullanım Örneği	Yapılandırma Seçenekleri
Sabit Panel	Sabit konumda widget’ları tutar	Başlık ve arama çubuğu	Konum, boyut, stil
Kenar Çubuğu	Yan panel düzenleme	Lejant ve filtreler	Yön, genişlik, davranış
Satır	Yatay düzenleme	Harita ve arama yan yana	Hizalama, boşluk
Sütun	Dikey düzenleme	Tablo ve grafik alt alta	Hizalama, boşluk
Izgara	Izgara tabanlı düzenleme	Harita, tablo, grafik	Satır/sütun sayısı, hizalama
Akordeon	Katlanabilir paneller	Farklı veri setleri	Başlık, davranış
Akış Satırı	Esnek satır düzenleme	Esnek widget yerleşimi	Hizalama, boşluk
Yer Tutucu	Geçici widget yer tutucusu	Tasarım sürecinde yer tutma	Boyut, etiket

5.4 Boyut ve Konum Seçenekleri

Widget’ların boyutunu ve konumunu belirlemek, düzenin işlevselliğini ve estetiğini doğrudan etkiler. ArcGIS Experience Builder, dört ana boyutlandırma seçeneği sunar:

5.4.1 Pikseller (px)

• Tanım: Kesin boyut belirtir, örneğin 200px genişlik.
• Kullanım Alanları:
  • Başlıklar, altlıklar veya masaüstü cihazlar için sabit elementler.
• Avantaj: Kesin kontrol sağlar.
• Dezavantaj: Yanıt vermez, farklı ekran boyutları için uygun olmayabilir.
• Örnek: Bir başlık widget’ının genişliğini 200px olarak ayarlamak.

5.4.2 Yüzde (%)

• Tanım: Ana kapsayıcıya göre boyutlandırır, örneğin %100 genişlik.
• Kullanım Alanları:
  • Tabletler ve telefonlar gibi farklı ekran boyutları için yanıt veren tasarımlar.
• Avantaj: Otomatik olarak ölçeklendirir.
• Dezavantaj: Çok küçük ekranlarda istenmeyen sonuçlar verebilir.
• Örnek: Bir harita widget’ının genişliğini %100 olarak ayarlamak, böylece tam ekrana uymasını sağlar.

5.4.3 Otomatik (Auto)

• Tanım: İçeriğe göre boyut belirler.
• Kullanım Alanları:
  • Metin veya resim gibi dinamik içerikler.
• Avantaj: Kolay ve hızlı.
• Dezavantaj: Beklenmedik boyutlandırma sorunlarına yol açabilir.
• Örnek: Bir metin widget’ının yüksekliğini otomatik olarak ayarlamak, içerik miktarına göre uzar.

5.4.4 Esnet (Stretch)

• Tanım: Kapsayıcının tüm alanını doldurur.
• Kullanım Alanları:
  • Arka plan resimleri veya haritalar.
• Avantaj: Tam alanı kullanır.
• Dezavantaj: Küçük ekranlarda kullanılırsa kullanılabilirlik sorunlarına yol açabilir.
• Örnek: Bir harita widget’ını tam ekrana esnetmek.

Tablo: Boyutlandırma Seçenekleri Özeti

Seçenek	Açıklama	Kullanım Örneği	Avantajlar	Dezavantajlar
Pikseller (px)	Kesin boyut	Başlık widget’ı	Kesin kontrol	Yanıt vermez
Yüzde (%)	Kapsayıcıya göre ölçeklenir	Harita widget’ı	Responsive	Küçük ekranlarda sorun
Otomatik (Auto)	İçeriğe göre boyutlanır	Metin widget’ı	Kolay kullanım	Beklenmedik sonuçlar
Esnet (Stretch)	Kapsayıcıyı doldurur	Arka plan resmi	Tam alan kullanımı	Küçük ekranlarda sorun

5.5 Temalarla Özelleştirme

Temalar, uygulamanızın görsel kimliğini oluşturur. ArcGIS Experience Builder, temalarla renk şemalarını, yazı tiplerini ve diğer görsel öğeleri özelleştirmenize olanak tanır.

5.5.1 Tema Seçimi

• Adımlar:
  1. Araç çubuğunda Settings (Ayarlar) sekmesine gidin.
  2. Theme (Tema) seçeneğini tıklayın.
  3. Mevcut temalar arasından birini seçin (ör. Varsayılan, Koyu, Açık).
• Örnek: Bir emlak şirketi için markanın renklerine uygun bir tema seçin.

5.5.2 Özel Tema Oluşturma

• Adımlar:
  1. Theme sekmesinde Create new seçeneğine tıklayın.
  2. Renk şeması, yazı tipi, arka plan ve kenarlık ayarlarını özelleştirin.
  3. Temayı kaydedin ve uygulamanıza uygulayın.
• Örnek: Şirket logosunun renklerine uygun bir tema oluşturun (ör. mavi ve beyaz tonları).

5.5.3 Stil Ayarları

• Widget Stilleri:
  • Arka Plan: Renk, gradyan veya resim.
  • Kenarlık: Kalınlık, renk, stil (ör. düz, kesikli).
  • Gölge: Widget’lara 3D efekti ekler.
• Yazı Tipi:
  • Font ailesi, boyut, kalınlık, renk.
• Animasyon:
  • Fade-in, slide-in gibi efektler ekleyin.
• Örnek: Bir harita widget’ına mavi bir arka plan ve gölge ekleyerek öne çıkmasını sağlayın.

5.6 Responsive Tasarım

Responsive tasarım, uygulamanızın farklı ekran boyutlarında (büyük, orta, küçük) iyi görünmesini ve çalışmasını sağlar. ArcGIS Experience Builder, bu süreci kolaylaştırmak için otomatik ve özel düzen seçenekleri sunar.

56.1 Otomatik Düzen (Auto Layout)

• Tanım: Widget’ların büyük ekran düzenine senkronize olarak otomatik hizalandığı bir özelliktir.
• Kullanım:
  • Blank full-screen veya blank scrolling page şablonları, otomatik düzenle gelir.
  • Widget’lar, büyük ekran düzenine göre otomatik olarak ölçeklenir.
• Örnek: Büyük ekranda yan yana olan harita ve arama widget’ları, küçük ekranda alt alta otomatik hizalanır.

5.6.2 Özel Düzen (Custom Layout)

• Tanım: Orta ve küçük ekranlar için widget’ları manuel olarak düzenleme imkanı.
• Adımlar:
  1. Düzen panelinde Custom düğmesine tıklayın.
  2. Orta veya küçük ekran moduna geçin.
  3. Widget’ları yeniden konumlandırın veya gizleyin.
• Örnek: Küçük ekranda, harita widget’ını tam ekran yapın, diğer widget’ları bir akordeon içine yerleştirin.

5.6.3 Bekleyen Liste (Pending List)

• Tanım: Belirli ekran boyutlarında kullanılmayan widget’ları saklar.
• Kullanım:
  • Widget’ları Pending sekmesine taşıyarak belirli ekranlarda gizleyin.
  • Bekleyen listedeki widget’lar, içerik ve stil ayarlarını korur, ancak düzen ayarları sıfırlanır.
• Örnek: Küçük ekranlarda, lejant widget’ını bekleyen listeye taşıyarak gizleyin.

5.6.4 Test Etme

• Live View: Düzen panelinde Live view ile gerçek zamanlı test yapın.
• Önizleme: Araç çubuğunda Preview ile tarayıcıyı yeniden boyutlandırarak farklı ekranları simüle edin.
• İpucu: Küçük ekranlarda taşma, örtüşme veya gezinme sorunları olmadığından emin olun.

5.7 Tasarım Öğeleri

5.7.1 Başlık (Header)

• Tanım: Uygulamanın üst kısmında yer alan sabit bir alan, genellikle logo, başlık ve navigasyon içerir.
• Yapılandırma:
  • Settings > Header sekmesinden başlık widget’ını ekleyin.
  • Logo, metin veya menü widget’ları ekleyin.
• Örnek: Bir emlak uygulamasında, başlıkta şirket logosu ve arama çubuğu yer alır.

5.7.2 Altbilgi (Footer)

• Tanım: Uygulamanın alt kısmında yer alan sabit bir alan, genellikle iletişim bilgileri veya telif hakkı içerir.
• Yapılandırma:
  • Settings > Footer sekmesinden altbilgi widget’ını ekleyin.
  • Metin veya bağlantı widget’ları ekleyin.
• Örnek: Altbilgide, “© 2025 Emlak Şirketi” metni ve iletişim bağlantıları yer alır.

5.7.3 Diğer Görsel Öğeler

• Arka Plan Resimleri: Widget’lara veya tüm uygulamaya arka plan resimleri ekleyin.
• Simge ve İkonlar: Widget’lara özel simgeler yükleyin (PNG, JPG, 10MB sınırı).
• Animasyonlar: Widget’ların giriş efektlerini (fade-in, slide-in) ayarlayın.

5.8 Haziran 2025 Güncellemesindeki Yenilikler

• Flow Row Widget’ı: Yeni hizalamalar (space around, space between) eklendi.
• Erişilebilirlik İyileştirmeleri: Düzen widget’ları (Flow Row, Sidebar) klavye navigasyonu için optimize edildi.
• Yapılandırma Panelleri: Küçük ekranlarda, büyük paneller (Quick style, Dynamic content) kenarlara taşınarak daha iyi kullanılabilirlik sağlandı.
• Pending List İyileştirmeleri: Widget’ların hangi ekranlarda kullanıldığını gösteren ikonlar eklendi.

ArcGIS Experience Builder ile Profesyonel Web Uygulamaları Geliştirme

🏗️ Bölüm 5: Düzen ve Tasarım – Pratik Örnekler

Bu bölümde, ArcGIS Experience Builder’da düzen ve tasarım süreçlerini pekiştirmek için basitten zora sıralanmış dört detaylı örnek sunacağız. Her örnek, farklı bir kullanım senaryosunu kapsayacak ve düzen türleri (sabit, akış, düzen widget’ları), boyutlandırma seçenekleri (piksel, yüzde, otomatik, esnet), responsive tasarım teknikleri ve tema özelleştirmelerini içerecek. Örnekler, Haziran 2025 sürümüne uygun olarak hazırlanmıştır ve her adım, sıfırdan başlayan birinin bile kolayca takip edebileceği şekilde açıklanmıştır. Renkli ikonlar, görseller ve pratik ipuçlarıyla zenginleştirilmiş bu örnekler, hem yeni başlayanlar hem de ileri düzey kullanıcılar için faydalı olacak.

---

Örnek 1: Basit Emlak Bilgi Panosu (Başlangıç Seviyesi)

Amaç: Kullanıcıların bir şehirdeki mülkleri harita üzerinde görmesini ve adres araması yapmasını sağlayan basit bir pano oluşturmak.
Kullanılan Özellikler: Sabit düzen, Harita, Arama ve Lejant widget’ları, temel tema özelleştirmesi.
Hedef Kitle: Yeni başlayanlar, basit bir düzen isteyenler.

Adım 1: Yeni Deneyim Oluşturma

1. ArcGIS Experience Builder’ı açın ve Create new düğmesine tıklayın.
2. Blank Fullscreen şablonunu seçin (sabit düzen için ideal).
3. Deneyime \”Basit Emlak Panosu\” adını verin.

Adım 2: Harita Widget’ını Ekleme

1. Insert widget panelinden Map widget’ını seçin ve tuvale sürükleyin.
2. Sağdaki yapılandırma panelinde:
   • Select map seçeneğine tıklayın ve ArcGIS Online’dan bir şehir haritası seçin (ör. bir emlak veri katmanı içeren web haritası).
   • Boyutlandırma: Genişlik ve yükseklik için %100 (esnet) seçin, böylece harita tam ekran olur.
   • Başlangıç Görünümü: Şehrin merkezine odaklanacak şekilde koordinatları ayarlayın.
   • Araçlar: Yakınlaştırma, kaydırma ve pop-up’ları etkinleştirin.

Adım 3: Arama Widget’ını Ekleme

1. Insert widget panelinden Search widget’ını seçin ve tuvalin üst kısmına sürükleyin.
2. Yapılandırma panelinde:
   • Data source: Harita widget’ını seçin.
   • Search type: Adres araması için Geocode seçeneğini etkinleştirin.
   • Boyutlandırma: Genişlik için 400px, yükseklik için auto.
   • Stil: Arka planı beyaz, kenarlık için ince gri bir çerçeve ekleyin.
   • Eylem: Pan to seçeneğini etkinleştirin, böylece arama sonuçları haritada yakınlaşır.

Adım 4: Lejant Widget’ını Ekleme

1. Insert widget panelinden Legend widget’ını seçin ve tuvalin sağ alt köşesine yerleştirin.
2. Yapılandırma panelinde:
   • Data source: Harita widget’ını seçin.
   • Boyutlandırma: Genişlik ve yükseklik için auto.
   • Stil: Arka planı yarı saydam beyaz, gölge efekti ekleyin.

Adım 5: Tema Özelleştirme

1. Araç çubuğunda Settings > Theme sekmesine gidin.
2. Light Theme seçin ve özelleştirin:
   • Primary Color: Mavi (#007bff).
   • Font: Arial, 16px, normal kalınlık.
   • Background: Beyaz (#ffffff).
3. Temayı kaydedin ve uygulayın.

Adım 6: Responsive Tasarım

1. Düzen panelinde Custom seçeneğine tıklayın.
2. Small screen moduna geçin (mobil cihazlar için).
3. Arama widget’ını haritanın üstüne, lejant widget’ını altına yerleştirin.
4. Pending List: Küçük ekranlarda lejant widget’ını gizlemek için Pending sekmesine taşıyın.

Adım 7: Test ve Önizleme

1. Araç çubuğunda Preview düğmesine tıklayın.
2. Haritada gezinmeyi, adres aramayı ve lejantın doğru çalıştığını test edin.
3. Farklı ekran boyutlarında (masaüstü, tablet, mobil) kontrol edin.

Adım 8: Kaydetme ve Paylaşma

1. Save ile deneyimi kaydedin.
2. Share ile paylaşım seviyesini Everyone (public) olarak ayarlayın ve bağlantıyı kopyalayın.

Tablo: Örnek 1 Widget’ları

Widget	Konum	Boyutlandırma	Yapılandırma	Amaç
Harita	Tam ekran	%100 (esnet)	Şehir haritası, yakınlaştırma	Mülkleri görselleştirme
Arama	Üst	400px genişlik, auto yükseklik	Adres araması, pan to	Adres bulma
Lejant	Sağ alt	Auto	Harita katmanları	Katmanları açıklama

İpuçları:

• Basitlik: Yeni başlayanlar için sabit düzen idealdir, çünkü kontrolü kolaydır.
• Erişilebilirlik: Arama widget’ında klavye navigasyonu için Shift+Spacebar desteği (Haziran 2025) kullanıldığından emin olun.
• Performans: Tek bir veri kaynağı kullanarak performansı optimize edin.

---

Örnek 2: Çevresel Veri Hikaye Anlatımı (Orta Seviye)

Amaç: Bir bölgedeki çevresel verileri (ör. hava kalitesi) hikaye anlatımı formatında sunan, kaydırılabilir bir uygulama oluşturmak.
Kullanılan Özellikler: Akış düzeni, Harita, Metin, Resim ve Grafik widget’ları, düzen widget’ları (Satır, Sütun), responsive tasarım.
Hedef Kitle: Orta düzey kullanıcılar, hikaye anlatımı isteyenler.

Adım 1: Yeni Deneyim Oluşturma

1. Create new ile Blank Scrolling Page şablonunu seçin (akış düzeni için ideal).
2. Deneyime \”Çevresel Veri Hikayesi\” adını verin.

Adım 2: Harita ve Metin Widget’larını Ekleme

1. Insert widget panelinden Map widget’ını ekleyin.
2. Yapılandırma:
   • Data source: Hava kalitesi veri katmanı içeren bir web haritası.
   • Boyutlandırma: Genişlik %100, yükseklik 600px.
   • Stil: Gri arka plan, ince kenarlık.
3. Metin widget’ını ekleyin ve haritanın altına yerleştirin.
   • İçerik: “Bu harita, bölgedeki hava kalitesi verilerini gösterir.”
   • Boyutlandırma: Genişlik %100, yükseklik auto.
   • Stil: Yazı tipi Arial, 18px, siyah renk.

Adım 3: Grafik Widget’ını Ekleme

1. Insert widget panelinden Chart widget’ını ekleyin.
2. Yapılandırma:
   • Data source: Hava kalitesi veri katmanı.
   • Chart type: Çizgi grafiği (zaman bazlı trendler için).
   • Boyutlandırma: Genişlik %50, yükseklik 400px.
   • Stil: Mavi renk şeması, gölge efekti.

Adım 4: Düzen Widget’ları ile Organizasyon

1. Satır widget’ını ekleyin ve içine Harita ile Grafik widget’larını yerleştirin.
   • Hizalama: Space between.
   • Boşluk: 10px.
2. Sütun widget’ını ekleyin ve içine Metin widget’ını yerleştirin.
   • Hizalama: Üst.
   • Boşluk: 5px.

Adım 5: Tema Özelleştirme

1. Settings > Theme sekmesinde Dark Theme seçin.
2. Özelleştirme:
   • Primary Color: Yeşil (#28a745).
   • Font: Roboto, 16px.
   • Background: Koyu gri (#343a40).
3. Temayı kaydedin.

Adım 6: Responsive Tasarım

1. Düzen panelinde Custom seçeneğine geçin.
2. Small screen modunda:
   • Harita ve Grafik widget’larını alt alta yerleştirin.
   • Metin widget’ını üstte tutun.
   • Pending List: Küçük ekranlarda Grafik widget’ını gizleyin.

Adım 7: Test ve Önizleme

1. Preview ile kaydırılabilir içeriği test edin.
2. Harita, grafik ve metinlerin düzgün göründüğünü kontrol edin.
3. Mobil cihazlarda kaydırma ve gezinme deneyimini test edin.

Adım 8: Kaydetme ve Paylaşma

1. Save ile kaydedin.
2. Share ile Organization paylaşım seviyesini seçin.

Tablo: Örnek 2 Widget’ları

Widget	Konum	Boyutlandırma	Yapılandırma	Amaç
Harita	Satır içi	%100 genişlik, 600px yükseklik	Hava kalitesi haritası	Verileri görselleştirme
Metin	Sütun içi	%100 genişlik, auto yükseklik	Tanıtım metni	Hikaye anlatımı
Grafik	Satır içi	%50 genişlik, 400px yükseklik	Çizgi grafiği	Trendleri gösterme
Satır	Ana düzen	%100 genişlik	Space between	Harita ve grafik hizası
Sütun	Ana düzen	%100 genişlik	Üst hizalama	Metin organizasyonu

İpuçları:

• Akış Düzeni: Uzun içerik için idealdir, ancak çok fazla widget eklememeye dikkat edin.
• Grafik Widget’ı: Haziran 2025 güncellemesiyle pasta grafiği etiketleri iyileştirildi, kategori adına göre sıralama kullanın.
• Mobil Test: Küçük ekranlarda kaydırma akıcılığını kontrol edin.

---

Örnek 3: Şehir Planlama Panosu (İleri Seviye)

Amaç: Şehir planlamacılarının binaları, yolları ve nüfus verilerini analiz edebileceği karmaşık bir pano oluşturmak.
Kullanılan Özellikler: Izgara düzeni, Harita, Tablo, Grafik, Filtre ve Menü widget’ları, iç içe düzen widget’ları, özel tema.
Hedef Kitle: İleri düzey kullanıcılar, karmaşık düzenler isteyenler.

Adım 1: Yeni Deneyim Oluşturma

1. Create new ile Frame şablonunu seçin (karmaşık düzenler için uygun).
2. Deneyime \”Şehir Planlama Panosu\” adını verin.

Adım 2: Izgara Widget’ı ile Düzen

1. Insert widget panelinden Grid widget’ını ekleyin.
2. Yapılandırma:
   • Satır/Sütun: 2 satır, 3 sütun.
   • Boyutlandırma: %100 genişlik, %100 yükseklik.
   • Boşluk: 10px.

Adım 3: Widget’ları Ekleme

1. Harita Widget’ı:
   • Izgara hücresine (1. satır, 1-2. sütun) ekleyin.
   • Data source: Şehir planlama verileri (binalar, yollar).
   • Boyutlandırma: %100 genişlik, 600px yükseklik.
2. Tablo Widget’ı:
   • Izgara hücresine (2. satır, 1. sütun) ekleyin.
   • Data source: Bina verileri.
   • Boyutlandırma: %100 genişlik, auto yükseklik.
   • Eylem: Haritada seçilen binayı vurgulama.
3. Grafik Widget’ı:
   • Izgara hücresine (2. satır, 2. sütun) ekleyin.
   • Chart type: Çubuk grafiği (nüfus verileri).
   • Boyutlandırma: %100 genişlik, 400px yükseklik.
4. Filtre Widget’ı:
   • Izgara hücresine (1. satır, 3. sütun) ekleyin.
   • Data source: Bina verileri.
   • Filtre: Bina türüne göre filtreleme.
   • Boyutlandırma: 200px genişlik, auto yükseklik.
5. Menü Widget’ı:
   • Tuvalin üstüne ekleyin.
   • İçerik: Farklı veri görünümleri için bağlantılar (ör. Binalar, Yollar).
   • Boyutlandırma: %100 genişlik, 50px yükseklik.

Adım 4: Tema Özelleştirme

1. Settings > Theme > Create new ile özel tema oluşturun.
2. Özelleştirme:
   • Primary Color: Lacivert (#003087).
   • Secondary Color: Beyaz (#ffffff).
   • Font: Open Sans, 14px.
   • Background: Açık gri (#f8f9fa).
3. Widget’lara gölge ve yuvarlak kenarlık ekleyin.

Adım 5: Responsive Tasarım

1. Custom modunda:
   • Medium screen: Izgarayı 2 satır, 2 sütun olarak yeniden düzenleyin.
   • Small screen: Widget’ları alt alta yerleştirin, Menü widget’ını sabit tutun.
2. Pending List: Küçük ekranlarda Grafik widget’ını gizleyin.

Adım 6: Test ve Önizleme

1. Preview ile harita, tablo, grafik ve filtrelerin etkileşimini test edin.
2. Menü bağlantılarının çalıştığını kontrol edin.
3. Farklı ekran boyutlarında düzeni test edin.

Adım 7: Kaydetme ve Paylaşma

1. Save ile kaydedin.
2. Share ile Group paylaşım seviyesini seçin.

Tablo: Örnek 3 Widget’ları

Widget	Konum	Boyutlandırma	Yapılandırma	Amaç
Harita	Izgara (1. satır, 1-2. sütun)	%100 genişlik, 600px yükseklik	Şehir verileri	Görselleştirme
Tablo	Izgara (2. satır, 1. sütun)	%100 genişlik, auto yükseklik	Bina verileri	Veri listeleme
Grafik	Izgara (2. satır, 2. sütun)	%100 genişlik, 400px yükseklik	Çubuk grafiği	Nüfus analizi
Filtre	Izgara (1. satır, 3. sütun)	200px genişlik, auto yükseklik	Bina türü	Veri filtreleme
Menü	Üst	%100 genişlik, 50px yükseklik	Görünüm bağlantıları	Navigasyon
Izgara	Ana düzen	%100 genişlik/yükseklik	2×3 ızgara	Widget organizasyonu

İpuçları:

• Izgara Düzeni: Karmaşık düzenler için güçlü bir araçtır, ancak hücre sayısını optimize edin.
• Etkileşim: Tablo ve harita arasında Select record eylemi tanımlayın.
• Erişilebilirlik: Tablo widget’ında Shift+Spacebar ile satır seçimi (Haziran 2025) test edin.

---

Örnek 4: Afet Yönetimi Uygulaması (Uzman Seviyesi)

Amaç: Afet yönetimi ekiplerinin gerçek zamanlı veri analizi yapabileceği, 3D haritalar, analiz araçları ve etkileşimli paneller içeren bir uygulama oluşturmak.
Kullanılan Özellikler: İç içe düzen widget’ları, 3D Harita, Analiz, Akordeon, Widget Kontrolcüsü, özel tema, Arcade desteği.
Hedef Kitle: Uzman kullanıcılar, karmaşık analizler isteyenler.

Adım 1: Yeni Deneyim Oluşturma

1. Create new ile Multiverse şablonunu seçin (çoklu sayfa ve karmaşık düzenler için).
2. Deneyime \”Afet Yönetimi Uygulaması\” adını verin.

Adım 2: İç İçe Düzen Widget’ları

1. Akordeon widget’ını ekleyin.
   • Panel 1: Harita ve analiz araçları.
   • Panel 2: Veri görselleştirme.
2. Panel 1 içine Izgara widget’ı ekleyin (2 satır, 2 sütun).
3. Panel 2 içine Sütun widget’ı ekleyin.

Adım 3: Widget’ları Ekleme

1. Harita Widget’ı (Izgara, 1. satır, 1-2. Obi-Wan Kenobi):
   • Data source: 3D sahne katmanı (afet alanı verileri).
   • Boyutlandırma: %100 genişlik, 800px yükseklik.
   • Stil: Şeffaf arka plan, gölge efekti.
2. Analiz Widget’ı (Izgara, 2. satır, 1. sütun):
   • Tool: Yükseklik Profili.
   • Boyutlandırma: %50 genişlik, 400px yükseklik.
   • Eylem: Harita ile senkronize analiz.
3. Tablo Widget’ı (Sütun, Panel 2):
   • Data source: Afet verileri.
   • Boyutlandırma: %100 genişlik, auto yükseklik.
   • Eylem: Haritada seçilen veriyi vurgulama.
4. Widget Kontrolcüsü:
   • Tuvalin sağ üst köşesine ekleyin.
   • İçine Filtre ve Özellik Bilgisi widget’larını ekleyin.
   • Boyutlandırma: 200px genişlik, auto yükseklik.
5. Akordeon Widget’ı:
   • İki panel: Harita/analiz ve veri görselleştirme.
   • Davranış: Varsayılan olarak kapalı.

Adım 4: Arcade ile Dinamik Veri

1. Veri Paneli’nde Arcade-Generated Feature Layer oluşturun.
2. Örnek Arcade ifadesi: Afet risk seviyesine göre renk kodlaması.var riskLevel = $feature.risk_score; if (riskLevel > 75) { return \"red\"; } else if (riskLevel > 50) { return \"orange\"; } else { return \"green\"; }
3. Harita widget’ına bu katmanı bağlayın.

Adım 5: Tema Özelleştirme

1. Settings > Theme > Create new ile tema oluşturun.
2. Özelleştirme:
   • Primary Color: Kırmızı (#dc3545, acil durum teması).
   • Font: Helvetica, 16px, kalın.
   • Background: Beyaz (#ffffff).
3. Widget’lara animasyon (slide-in) ekleyin.

Adım 6: Responsive Tasarım

1. Custom modunda:
   • Medium screen: Izgarayı 2 satır, 1 sütun yapın.
   • Small screen: Akordeon panellerini alt alta düzenleyin.
2. Pending List: Küçük ekranlarda Widget Kontrolcüsü’nü gizleyin.

Adım 7: Test ve Önizleme

1. Preview ile 3D harita, analiz ve tablo etkileşimlerini test edin.
2. Akordeon panellerinin açılıp kapandığını kontrol edin.
3. Mobil cihazlarda düzeni test edin.

Adım 8: Kaydetme ve Paylaşma

1. Save ile kaydedin.
2. Share ile Organization paylaşım seviyesini seçin.

Tablo: Örnek 4 Widget’ları

Widget	Konum	Boyutlandırma	Yapılandırma	Amaç
Harita	Akordeon Panel 1, Izgara	%100 genişlik, 800px yükseklik	3D sahne katmanı	Afet alanı görselleştirme
Analiz	Akordeon Panel 1, Izgara	%50 genişlik, 400px yükseklik	Yükseklik Profili	Arazi analizi
Tablo	Akordeon Panel 2, Sütun	%100 genişlik, auto yükseklik	Afet verileri	Veri listeleme
Widget Kontrolcüsü	Sağ üst	200px genişlik, auto yükseklik	Filtre, Özellik Bilgisi	Widget kontrolü
Akordeon	Ana düzen	%100 genişlik/yükseklik	İki panel	İçerik organizasyonu

İpuçları:

• Arcade: Dinamik veri görselleştirme için Arcade ifadeleri kullanın, ancak 50.000 özellik sınırına dikkat edin.
• Erişilebilirlik: Widget Kontrolcüsü’nün klavye navigasyonu (Haziran 2025) test edin.
• Performans: 3D haritalar için veri setlerini optimize edin.

---

Genel İpuçları ve En İyi Uygulamalar

• Düzen Planlama: Önce kağıt üzerinde düzeni çizin, ardından Experience Builder’da uygulayın.
• Minimalizm: Gereksiz widget’larla düzeni karmaşıklaştırmayın.
• Test: Farklı cihazlarda (masaüstü, tablet, mobil) önizleme yaparak düzeni kontrol edin.
• Erişilebilirlik: Haziran 2025 güncellemesiyle gelen klavye navigasyonu özelliklerini kullanın.
• Tema Tutarlılığı: Marka renklerini ve yazı tiplerini tutarlı kullanın.

Sorun Giderme

• Taşma Sorunları: Sabit düzenlerde taşma varsa, yüzde veya otomatik boyutlandırma kullanın.
• Responsive Hataları: Küçük ekranlarda widget’ların örtüşmediğinden emin olun.
• Performans: Çok fazla widget veya iç içe düzen, performansı yavaşlatabilir; optimize edin.

Kaynaklar

• ArcGIS Experience Builder Düzen Kılavuzu
• Responsive Tasarım