Kategori Yok

Bölüm 16: Mobil Optimizasyon

sabangul67@gmail.com
Ağustos 25, 20268 dk okuma1 görüntülenme

ArcGIS Experience Builder ile Profesyonel Web Uygulamaları Geliştirme

🛠️ Bölüm 16: Mobil Uyumluluk ve Responsive Tasarım

Anahtar Noktalar

  • Mobil Uyumluluk Nedir? ArcGIS Experience Builder uygulamalarının mobil cihazlarda (telefon, tablet) sorunsuz çalışması ve kullanıcı dostu bir deneyim sunması.
  • Responsive Tasarım Nedir? Uygulamanın farklı ekran boyutlarına ve cihaz türlerine otomatik olarak uyum sağlaması.
  • Kapsam: Mobil cihazlar için optimizasyon, responsive widget düzenleri, dokunmatik etkileşimler ve erişilebilirlik.
  • Araçlar: ArcGIS Experience Builder arayüzü, Developer Edition, CSS medya sorguları, ArcGIS API for JavaScript, ve mobil test araçları.
  • Erişilebilirlik: WCAG 2.1 standartlarına uygun mobil deneyimler.
  • Haziran 2025 Güncellemesi: Yeni mobil şablonlar, gelişmiş dokunmatik destek ve otomatik responsive ayarlar.

Mobil Uyumluluk ve Responsive Tasarımın Önemi

Mobil uyumluluk ve responsive tasarım, ArcGIS Experience Builder uygulamalarının farklı cihazlarda erişilebilir, kullanıcı dostu ve işlevsel olmasını sağlar. Örneğin:

  • Bir afet yönetimi uygulamasının saha ekipleri tarafından mobil cihazlarda kullanılması.
  • Bir kamu bilgilendirme uygulamasının vatandaşlar tarafından telefonlarda rahatça görüntülenmesi.
    Bu bölüm, mobil uyumluluk ve responsive tasarım tekniklerini, optimizasyon stratejilerini, kod örneklerini, erişilebilirlik uygulamalarını ve pratik senaryoları Haziran 2025 sürümüne uygun olarak aşırı detaylı ve herkesin anlayacağı bir dille açıklayacak. Yeni başlayanlardan uzman geliştiricilere kadar herkes için kapsamlı bir rehber sunulacak.

16.1 Mobil Uyumluluk ve Responsive Tasarım Nedir?

Mobil Uyumluluk, bir uygulamanın mobil cihazlarda (ör. iOS/Android telefonlar, tabletler) düzgün çalışması ve kullanıcı dostu bir arayüz sunmasıdır. Bu, dokunmatik etkileşimler, küçük ekranlara uygun düzenler ve hızlı yükleme süreleri içerir.

Responsive Tasarım, uygulamanın ekran boyutuna ve cihaz türüne göre otomatik olarak uyum sağlamasıdır. Örneğin:

  • Büyük ekranlarda (masaüstü): Geniş düzen, çoklu widget’lar.
  • Küçük ekranlarda (telefon): Basitleştirilmiş düzen, tek sütunlu tasarım.

Neden Önemli?

  • Erişim: Kullanıcıların çoğu uygulamalara mobil cihazlardan erişiyor.
  • Kullanıcı Deneyimi: Sezgisel ve akıcı bir mobil deneyim, kullanıcı memnuniyetini artırır.
  • Performans: Mobil cihazlarda düşük bant genişliği ve sınırlı kaynaklar için optimizasyon sağlar.
  • Erişilebilirlik: Mobil cihazlarda WCAG 2.1 uyumluluğu, engelli kullanıcılar için kapsayıcı bir deneyim sunar.

16.2 Mobil Uyumluluk Teknikleri

16.2.1 Experience Builder’da Mobil Şablonlar

ArcGIS Experience Builder, mobil cihazlar için optimize edilmiş şablonlar sunar.

  • Popüler Şablonlar:
    • Foldable: Katlanabilir düzen, mobil cihazlar için ideal.
    • Pocket: Kompakt, tek sütunlu mobil tasarım.
    • Billboard: Büyük görseller ve dokunmatik dostu navigasyon.
  • Adımlar:
    1. Experience Builder’da Create New > Templates sekmesinden bir mobil şablon seçin (ör. Foldable).
    2. Widget’ları ekleyin ve mobil görünümde test edin:
      • Preview > Mobile modunu kullanın.
    3. Düzeni özelleştirin (ör. widget boyutları, kenar boşlukları).
  • Haziran 2025 Yeniliği: Yeni mobil şablonlar (ör. “Mobile Dashboard”) ve otomatik ekran boyutu algılama.

16.2.2 Responsive Widget Düzenleri

Widget’ların farklı ekran boyutlarına uyum sağlaması için responsive düzenler kullanılır.

  • Adımlar:
    1. Layout sekmesinde widget’ları düzenleyin.
    2. Responsive Settings ile mobil görünümü özelleştirin:
      • Desktop: Geniş düzen, çoklu sütun.
      • Tablet: Orta boyutlu düzen, iki sütun.
      • Mobile: Tek sütun, basitleştirilmiş navigasyon.
    3. CSS medya sorguları ile ince ayar yapın:/* client/your-extensions/themes/MyTheme/styles/style.css */ .jimu-widget { width: 100%; padding: 10px; } @media (max-width: 768px) { .jimu-widget { padding: 5px; font-size: 14px; } } @media (max-width: 480px) { .jimu-widget { font-size: 12px; } }
  • İpucu: Widget’ların mobil görünümde gereksiz detayları gizlemesini sağlayın.

16.2.3 Dokunmatik Etkileşimler

Mobil cihazlarda dokunmatik dostu arayüzler oluşturmak için:

  • Dokunmatik Hedef Boyutları:
    • Butonlar ve tıklanabilir alanlar en az 48×48 piksel olmalı.
    • Örnek:<button style={{ width: \'48px\', height: \'48px\' }} aria-label=\"Haritayı Yakınlaştır\">Zoom</button>
  • Kaydırma ve Yakınlaştırma:
    • Harita widget’ında dokunmatik yakınlaştırma ve kaydırma varsayılan olarak desteklenir.
    • Özelleştirme:// client/your-extensions/widgets/CustomMapWidget/Widget.tsx import { React, WidgetProps } from \'jimu-core\'; import { JimuMapViewComponent, JimuMapView } from \'jimu-arcgis\'; export default function CustomMapWidget(props: WidgetProps) { const handleTouch = (view: JimuMapView) => { view.view.on(\'drag\', (event) => { console.log(\'Map dragged:\', event); }); }; return ( <JimuMapViewComponent useMapWidgetId={props.useMapWidgetIds?.[0]} onActiveViewChange={handleTouch} /> ); }
  • İpucu: Dokunmatik etkileşimlerin ekran okuyucularla uyumlu olduğundan emin olun.

16.2.4 Mobil Performans Optimizasyonu

Mobil cihazlarda sınırlı kaynaklar (CPU, bellek) nedeniyle performans optimizasyonu kritiktir.

  • Önbellekleme:<!-- index.html --> <meta http-equiv=\"Cache-Control\" content=\"public, max-age=31536000\">
  • Lazy-Loading:const LazyWidget = React.lazy(() => import(\'./HeavyWidget\'));
  • Veri Sıkıştırma:
    • Veri kaynaklarında yalnızca gerekli alanları çekin:import { request } from \'esri/request\'; request(\'https://services.arcgis.com/data\', { query: { fields: \'id,geometry\' } });
  • Resim Optimizasyonu:
    • Resimleri WebP formatında kullanın:<img src=\"image.webp\" alt=\"Mobil Harita Görseli\" style={{ maxWidth: \'100%\' }} />

16.3 Erişilebilirlik

Mobil cihazlarda WCAG 2.1 uyumluluğu, kapsayıcı bir deneyim sağlar.

  • Adımlar:
    1. ARIA Etiketleri:<button aria-label=\"Filtreyi Aç\" className=\"jimu-btn\">Filtre</button>
    2. Klavye Navigasyonu:
      • Mobil cihazlarda sanal klavye desteği:import { useKeyboardNavigation } from \'jimu-core\'; useKeyboardNavigation({ onEnter: () => openFilter() });
    3. Renk Kontrastı:
    4. Ekran Okuyucu Desteği:
      • VoiceOver (iOS) ve TalkBack (Android) ile test edin.
  • Haziran 2025 Yeniliği: Otomatik erişilebilirlik raporlama ve mobil ekran okuyucu iyileştirmeleri.

16.4 Test ve Hata Ayıklama

Mobil uyumluluğu test etmek için:

  • Araçlar:
    • Chrome DevTools: Mobil cihaz simülasyonu.
    • BrowserStack: Gerçek cihazlarda test.
    • axe DevTools: Erişilebilirlik testi.
  • Adımlar:
    1. Preview > Mobile modunda uygulamayı test edin.
    2. Chrome DevTools’ta farklı ekran boyutlarını simüle edin:
      • iPhone, iPad, Android cihazlar.
    3. Dokunmatik etkileşimleri kontrol edin (ör. yakınlaştırma, kaydırma).
    4. Erişilebilirlik testleri yapın:npm install -g axe-cli axe https://your-app-url --include-mobile

16.5 Haziran 2025 Güncellemesindeki Yenilikler

  • Mobil Şablonlar:
    • Yeni “Mobile Dashboard” ve “Mobile Storytelling” şablonları.
    • Otomatik ekran boyutu algılama.
  • Dokunmatik Destek:
    • Geliştirilmiş çoklu dokunmatik etkileşimler.
    • Yeni dokunmatik olay API’leri.
  • Erişilebilirlik:
    • Mobil ekran okuyucular için optimize edilmiş widget’lar.
    • Yeni useMobileAccessibility hook’u.
  • Performans:
    • Daha hızlı mobil yükleme süreleri.
    • Optimize edilmiş önbellekleme seçenekleri.

16.6 Pratik Örnekler

Aşağıda, basitten zora dört pratik örnekle mobil uyumluluk ve responsive tasarımı açıklayacağız.

Örnek 1: Mobil Kamu Bilgilendirme Uygulaması (Başlangıç Seviyesi)

  • Amaç: Şehir parklarını mobil cihazlarda gösteren bir uygulama.
  • Şablon: Pocket.
  • Widget’lar: Harita, Arama, Lejant.
  • Adımlar:
    1. Pocket şablonunu seçin.
    2. Harita Widget’ı ekleyin, park verileri içeren bir web haritası bağlayın.
    3. Arama Widget’ı ve Lejant Widget’ı ekleyin.
    4. Mobil düzen ayarları:
      • Layout > Mobile: Tek sütunlu düzen.
      • Widget boyutlarını küçültün.
    5. Responsive CSS:/* client/your-extensions/themes/MyTheme/styles/style.css */ .jimu-widget { width: 100%; padding: 10px; } @media (max-width: 480px) { .jimu-widget { padding: 5px; font-size: 12px; } }
    6. Erişilebilirlik:
      • ARIA etiketleri:<div role=\"region\" aria-label=\"Park Haritası\">...</div>
      • Ekran okuyucu testi (VoiceOver/TalkBack).
    7. Preview > Mobile ile test edin.
  • Sonuç: Mobil cihazlarda kullanıcı dostu bir kamu bilgilendirme uygulaması.
  • İpucu: Arama çubuğunu dokunmatik dostu yapın (büyük hedef alanı).

Örnek 2: Mobil Analitik Pano (Orta Seviye)

  • Amaç: Satış verilerini mobil cihazlarda görselleştiren bir pano.
  • Şablon: Mobile Dashboard.
  • Widget’lar: Grafik, Tablo, Filtre.
  • Adımlar:
    1. Mobile Dashboard şablonunu seçin.
    2. Grafik Widget’ı ekleyin, satış verileri için çubuk grafiği oluşturun.
    3. Tablo Widget’ı ekleyin, detaylı verileri listeleyin.
    4. Filtre Widget’ı ekleyin, bölge ve tarih filtreleri tanımlayın.
    5. Eylem: Filtre değişimi Grafik ve Tablo’yu güncelleyin.
    6. Responsive Düzen:
      • Layout > Mobile: Widget’ları tek sütuna hizalayın.
      • CSS medya sorguları:.jimu-widget-chart { width: 100%; height: 300px; } @media (max-width: 768px) { .jimu-widget-chart { height: 200px; } }
    7. Performans:
      • Önbellekleme ekleyin:request(\'https://services.arcgis.com/data\', { cache: \'force-cache\' });
    8. Erişilebilirlik:
      • ARIA etiketleri ve klavye navigasyonu ekleyin.
      • Ekran okuyucu testi yapın.
    9. Preview > Mobile ile test edin.
  • Sonuç: Mobil cihazlarda optimize edilmiş bir analitik pano.
  • İpucu: Grafik widget’ında dokunmatik yakınlaştırma desteği ekleyin.

Örnek 3: Mobil Hikaye Anlatımı Uygulaması (İleri Seviye)

  • Amaç: Şehir gelişim projesini mobil cihazlarda anlatan bir hikaye anlatımı uygulaması.
  • Şablon: Mobile Storytelling.
  • Widget’lar: Bölüm, Harita, Metin, Menü.
  • Adımlar:
    1. Mobile Storytelling şablonunu seçin.
    2. Bölüm Widget’ı ekleyin, “Geçmiş”, “Şimdi” ve “Gelecek” bölümleri oluşturun.
    3. Harita Widget’ı ekleyin, ilgili veri katmanlarını bağlayın.
    4. Metin Widget’ı ile açıklayıcı içerikler ekleyin.
    5. Menü Widget’ı ile dokunmatik dostu gezinme sağlayın.
    6. Responsive CSS:.jimu-section { padding: 20px; } @media (max-width: 480px) { .jimu-section { padding: 10px; font-size: 14px; } .jimu-nav { display: flex; flex-direction: column; } }
    7. Dokunmatik Destek:view.view.on(\'drag\', (event) => { console.log(\'Mobile drag:\', event); });
    8. Erişilebilirlik:
      • ARIA etiketleri:<nav aria-label=\"Bölüm Gezinme\">...</nav>
      • Ekran okuyucu testi.
    9. Preview > Mobile ile test edin.
  • Sonuç: Mobil cihazlarda akıcı bir hikaye anlatımı uygulaması.
  • İpucu: Bölüm geçişlerini dokunmatik kaydırma ile optimize edin.

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

  • Amaç: Gerçek zamanlı IoT verileriyle mobil cihazlarda afet yönetimi yapan bir uygulama.
  • Şablon: Özel Mobil Şablon.
  • Widget’lar: Harita (3D), Analiz, Tablo, Survey, Özel Widget.
  • Adımlar:
    1. Özel Mobil Şablon oluşturun:
      • Harita Widget’ı (3D sahne), Analiz Widget’ı, Tablo Widget’ı, Survey Widget’ı ekleyin.
    2. Özel IoT Widget’ı:// client/your-extensions/widgets/MobileIoTWidget/Widget.tsx import { React, WidgetProps, useState, useEffect } from \'jimu-core\'; import { JimuMapViewComponent, JimuMapView } from \'jimu-arcgis\'; import Graphic from \'esri/Graphic\'; export default function MobileIoTWidget(props: WidgetProps) { const [data, setData] = useState([]); useEffect(() => { const ws = new WebSocket(\'wss://api.disaster-sensors.com/stream\'); ws.onmessage = (event) => { const newData = JSON.parse(event.data); setData(newData.slice(0, 100)); // Maksimum 100 veri noktası }; ws.onerror = () => { setTimeout(() => ws.connect(), 5000); }; return () => ws.close(); }, []); const updateMap = (view: JimuMapView) => { view.view.graphics.removeAll(); data.forEach(item => { const graphic = new Graphic({ geometry: { type: \'point\', x: item.lon, y: item.lat }, symbol: { type: \'simple-marker\', color: \'red\', size: 8 } }); view.view.graphics.add(graphic); }); }; return ( <div style={{ padding: \'10px\' }}> <h3>Afet Verileri</h3> <JimuMapViewComponent useMapWidgetId={props.useMapWidgetIds?.[0]} onActiveViewChange={updateMap} /> </div> ); }
    3. Responsive Düzen:
      • Mobil için tek sütunlu düzen.
      • CSS:.jimu-widget { width: 100%; max-height: 400px; } @media (max-width: 480px) { .jimu-widget { max-height: 300px; font-size: 12px; } }
    4. Eylemler:
      • Harita seçimi Tablo’yu güncelleyin.
      • Survey yanıtları Harita’yı güncelleyin.
    5. Performans:
      • Önbellekleme ve veri sınırlama kullanın.
      • 3D modelleri düşük poligonlu seçin.
    6. Erişilebilirlik:
      • ARIA etiketleri ve klavye navigasyonu ekleyin.
      • Ekran okuyucu testi (VoiceOver/TalkBack).
    7. Preview > Mobile ile test edin.
  • Sonuç: Mobil cihazlarda optimize edilmiş bir afet yönetimi uygulaması.
  • İpucu: Mobil cihazlarda pil tüketimini azaltmak için veri güncellemelerini optimize edin.

16.7 En İyi Uygulamalar ve İpuçları

  • Mobil Uyumluluk:
    • Dokunmatik hedefleri büyük tutun (min. 48×48 piksel).
    • Mobil şablonları kullanın (ör. Pocket, Foldable).
  • Responsive Tasarım:
    • Medya sorguları ile ekran boyutlarına uyum sağlayın.
    • Widget düzenlerini basitleştirin.
  • Performans:
    • Önbellekleme ve lazy-loading kullanın.
    • Resimleri ve veri setlerini optimize edin.
  • Erişilebilirlik:
    • WCAG 2.1 standartlarına uyun.
    • Mobil ekran okuyucularla test edin.

16.8 Sorun Giderme

  • Mobil Görünüm Hataları: Düzen ayarlarını ve medya sorgularını kontrol edin.
  • Dokunmatik Sorunları: Tıklama hedef boyutlarını ve olay dinleyicilerini doğrulayın.
  • Performans Sorunları: Önbellekleme ve veri sıkıştırma kullanın.
  • Erişilebilirlik Sorunları: axe DevTools ile tarama yapın.

16.9 Kaynaklar

Yazar

sabangul67@gmail.com

Bu yazarın yayınladığı diğer içerikleri inceleyebilirsiniz.

Tüm yazıları
Devamını Keşfet

Benzer Yazılar