H O K K A
Haber Yazılımında Kampanya İncele
25 Ocak 2015

Google Maps API İçin Responsive Tasarım ve Hata Ayıklama

Mobile First Design
Mobil tasarım sürecinde ekran çözünürlüğü düzenlemeleri büyük bir önem teşkil etmektedir. google-map-api-icin-responsive-tasarim-ve-hata-ayiklamaTasarım sürecinde düzgün bir şekilde yapılmayan çözünürlük ayarlamaları sitede çirkin bir görünüm oluşturacaktır. Buda kullanıcılar tarafından sevilemeyen ve istenilmeyen bir durum olmaktadır. Her cihazın özelliklerine uyumlu bir şekilde tasarımlar yapılmalıdır. Mobil cihazlar ekran boyutları farklı olmakla beraber ekran teknolojileri de değişkenlik göstermektedirler. Örneğin Iphone’lerde retina ekranlar varken Samsung’larda Amoled ekranlar bulunmaktadır. Iphoneler de retina ekranlar ile daha canlı ve dinamik görüntü olduğu için cihazdan girilen web sitelerinde ona uyumlu olması gerekmektedir. Aksi takdirde retina ekran olan ile olmayan arasında herhangi bir fark kalmamaktadır. Yani ekran retina fakat web sitesi retina ekrana duyarlu değil ise görüntü canlı olmayacaktır. Bunun için retina.js eklentisi siteye eklenmelidir. Javascript kütüphanesinin bir scripti olan retina.js retina ekranlara duyarlılık kazandırmak için kullanılan bir scripttir. Responsive tasarım web sitelerin her cihazda kaliteli bir şekilde görüntülenmesi esasına dayanmaktadır. Laptop ekranında , telefon ekranında ve tablet ekranında da gerekli düzenlemeler yapılarak belirli bir standartın üstünde görünüm kazandırılmak için responsive tasarım yapılmaktadır. Bu süreçte her adım çok önemli olacaktır. Gerekli testler yapılarak her cihazda kaliteli bir görünüm için gereken her işlem itina ile uygulanmalıdır.
Responsive tasarımlarda svg öğeler kullanılabilir ve bu sayede daha performanslı bir yapıya sahip olunabilir. Svg öğeler grafiksel öğelerin sıkıştırılmış halidir. Grafiksel öğeler boyut olarak büyük oldukları için aşırı kullanımları performansı olumsuz etkileyebilir. Svg de işte tam bu noktada çözüm sunmaktadır. Grafiksel öğeler sıkıştırılarak daha performanslı bir yapıyı svg sayesinde kazanmaktadırlar. Responsive tasarımlarda da svg kullanımı yapılabilir. Mobil dünyasında da performans başta gelen faktörlerden biri olarak karşımıza çıkmaktadır. Durum böyle olunca da sadece svg değil performansı olumsuz etkileyen diğer etkenleri de dikkatli bir şekilde irdelemek gerekmektedir.
Hata ayıklama sürecinde ise BrowserStack etkili bir seçim  olacaktır. HTML, CSS ve Javascript doğrulananmaktadır.Bir onaylayıcı mevcut standartlara karşı kodunuzu kontrol ederek bunun ücretsiz bir şekilde yapmaktadır . Standartlar farklı tarayıcılar ve cihazlar arasında bir tahmin şekilde web sitenizin fonksiyonlarını sağlamak için önemlidir.
HTML W3C biçimlendirme validator hizmeti ve CSS için W3C biçimlendirme validator hizmeti JavaScript  sözdizimi kontrol konusunda büyük bir fayda sağlayacaktır.  Yardımcı etrafında bir dizi araç da vardır. Kapanış Derleyici aslında (ayrıca dosya boyutu büyük ise yapmak isteyebilirsiniz)  sizin JavaScript sıkıştırmak için bir araçtır, ama aynı zamanda sözdizimi hataları kontrol etmek için yararlıdır. Eğer kopyalayıp yapıştırın kodu ve derlemek vurursanız, herhangi bir hata Hatalar sekmesi altında vurgulanır. Kod kontrol için bir başka yararlı bir site tavsiyesi isterceniz JSHint önerilebilir.