ActionScript yazilim gelistiricisi olarak önceden de javascript üzerinde calışmış olmamın getirdiği tecrübe ile bu projede yer almak istedim. Bunun sonunda bir js geliştirici oldum sanirim Proje öncesinde, üretiminde ve sonunda edindiğimiz tecrübeleri paylaşmaya çalışayım, html5 ile ilgili sormak istediğiniz problem yaşadığınız durumlarda bizimle iletişime geçebilirsiniz, yardımcı olmak isteriz.

Proje Başlangıcı:

Projenin nasıl geliştirilebileceği ve ileriki projelerde kullanılabilecek bir yapı yapma hazırlığı yaptım. Bu framework üzerinde genel olarak kullanılacak çizim, ses, efekt, sayfa düzenlemeleri ve yerleşimleri yapan, yardımcı olarak kullanılan hesaplama ve raporlama araçları ve genel yapıyı ayağa kaldıran class’lar bulunmakta.

Framework’un kullanımına ilişkin bir yapıyı bunları tasarlarken düşündüm ve bunun üzerine tasarımları sayfalandırmakta karar kıldım. Bu sayfalar framework üzerinden kopyalanarak ve coğaltılarak, kendi ayarları ile yerleşip işlem yapar duruma geldiler. Framework üzerinde loading kontrolleri de bulunmakta. Çağrılan ve yüklenmek istenen objelerin yüklenmeleri kontrol edilip işlenebilir hale getiriliyor ve bunları dispatch ederek çağrılan class’larına bildirim yapıyorlar. Browser üstünde bir yoğunluk oluşmaması için de objeler tek tek oluşturulup yüklendikten sonra browser’ın cache’inden çalışabilecek duruma geliyorlar. Özellikle media objelerinde yüklenmenin bittiğini anlamamızı sağlayan eventlerin alınmasında sorun olduğu için bu yolu izledim. Bu yapılar bittikten sonra geriye tasarımların parçalanıp düzenlendikten sonra yerleştirilmesi ve anime edilmesi sağlaniyor.
framework’un hesaplamalarından bir tanesi de sayfanın görünüm üzerindeki yüzdeliğini alıp, sabit bir animasyon yapabiliyor olması. Ayrıca çizim yapılacak objelerin de belirlenmesinde yardımcı olup, genel çizim performansını da arttırmış oluyor.

Proje isleyisi ve proje uretiminde karsilasilan sorunlar:

Genel olarak çizim, efekt ve animasyon konularında ufak sorunlar yaşadım ama media objelerinin kullanımında event’lerin dispatch edilmeleri ve bunları yakalamada sorunlar oluştu. Özellikle cache’e yüklenmiş olanları kullanmada çözümler ürettik.

Media objelerinin event geri dönüşlerinde tam olarak her ithiyacı gideren bir yapı yok, bu konuda kendi çözümlerimizi ürettik, HTML5 geliştirmeleri önümüzdeki dönemlerde bu ihtiyaçlara göre şekillenecektir diye düşünüyoruz. HTML5 cephesindeki gelişmelere uygun olarak browserlar da bu ihtiyaçları giderecek şekilde evrileceklerdir. Çizim yapılan objelerde değilde özellikle media eventlerinde böyle bir sorun var. Event geri dönüşlerini en iyi ve düzgün yapabilen browserları sıralamak gerekirse ie>firefox>chrome diye sıralayabiliriz. Chrome üzerinde, cache üzerinden okunan media eventlerinin geri dönüşleri çok sorun yaratıyor. Chrome için bir kontrol yazip yüklenmekte olan media objelerinin sürelerini kontrol edecek bir fonksiyon yazmak zorunda kaldım, süre kontrolünden sonra, eventi geliştirdiğim dispatcher fonksiyonu aracılığı ile dispatch ettim ve bu sorun çözülmüş oldu. Yaşadığım sorunlar karşısında şimdilik media event listener’ları bu tip çözümler üretmek zorunda bırakıyor bizleri, sonrasında platformdaki gelişmelerle bu tip çözümlere gitmeden direkt kullanılır hala geleceklerdir.

Önceden düşünüp yaptığım hesaplama hatalari ve farklı ilerleme metodlari yüzünden projede bir kaç kez baştan tekrar yazdığım yerler oldu ama onları düzeltip rahatça ilerleyebildim. Özellikle rotate yapılmış ve transform olmus objelerin kapladığı alanların yanlış hesaplamalarından kaynaklanan çizim performansını etkileyen sorunlarla karşılaştık ve bunun üzerine transform matrislerinin üzerinden hesaplama yaparak gerçek alanlarını buldum. Bu hesaplamalar için Simon Sarris’in geliştirdiği javascript transform kütüphanesini kullandım ve projenin ihtiyaçlarına göre biraz daha geliştirdim. Sonrasında hangi objenin görünür olup olmadığını anlayıp çizim yapabilir duruma geldim ve gerçekten performans üzerinde gözle görülür bir artış sağlanmış oldu.

Varsayılan ayarlarda gözlemlediğim en iyi performans su an IE9 ile elde edilebiliyor. Bu performans üstünlüğü gpu rendering’in IE9 da varsayılan olarak açık gelmesi. Diğer browserlarda böyle bir durum yok. Chrome(v15)’da manuel açtığınızda IE9 performansına yakınsayan bir performans elde edebiliyorsunuz. Firefox(v7) için bunu söylemek çok zor. Firefox(v7) yüklü objelerin çiziminde biraz sıkıntılı.

Uzun ve yorucu geçen bir geliştirme sürecinden sonra doğru ve performanslı çalışan bir yapının oluştuğunu görmek ve bunu yaratabilmek beni gerçekten mutlu etti. Her ne kadar bu hali ile gayet güzel çalişabildiklerini görebilsek de, HTML5 cephesinde geliştirilmesi gereken bir çok özellik var.

Teşekkürler

Ajansta aslında ne yaptığımıza dair Hürriyet IK’ya konuştuk. Özellikle ajanstaki yemek tutkusunun işlendiği röportajda ajans içi rutinlerimiz, tüm basına ifşa edilmiş oldu. Bu açıklamalara sessiz kalamayan art direktörlerimizden Ercan Akkaya, gerçeklerin ardında yatanları tüm insanlığa haykırdı:

http://instagr.am/p/KH5PW/

Biz beceremedik belki Askeriye becerir, 6 ay sonra çakı gibi dönerler İyi yolculuklar arkadaşlar.

Emeğe saygı kuşağında bu hafta:

Sade bir seramoni ile ödülünü alan Üstün Üzüm, “Biraz kıllanmadım desem yalan olur ancak yine de arkadaşlarımın çalışkanlığımı ve özverimi fark etmiş olmaları gurur verici” dedi.

Metin yazarlarımızdan Ozan, yeni bir projemizin çekimleri için gönüllü olurken başına gelecekleri tam olarak hesaplayabilmiş miydi bilmiyorum. Bu görüntüler, Ozan’ın çekeceği acıların henüz ufak bir kısmını oluşturuyor.

Çoğu fotoğrafımız sayısız dosya aktarımlarının kurbanı olmuşsa da kalan sağlarla 2 yıllık şirket maceramız artık flickr‘da. Sadece proje yapım aşamalarını veya ofis hayatımızdan kareleri paylaşmak için değil, aynı zamanda “fotoğraflar kimbilir server’ın hangi tozlu köşesinde kaldı” gibi dertlerin de son bulması açısından iyi oldu:)