Örnek Olay - deviantART muro'da HTML5

Mike Dewey
Mike Dewey

Giriş

deviantART, 7 Ağustos 2010'da 10. doğum gününü kutladı. DeviantART muro adlı HTML5 çizim aracını kullanıma sunarak doğum günümüzü kutladık. Bu araç, hem bağımsız bir web uygulaması olarak hem de forum yorumlarına resim eklemek için hafif bir çizim aracı olarak kullanılabilir.

DeviantART topluluğu, bu yeni çizim aracını büyük bir hevesle karşıladı ve aracın kendisi şu anda bazı makul boyutlu web mülkleri kadar trafik görüyor. Özelliğin kullanıma sunulmasından bu yana yaklaşık 5 saniyede bir deviantART muro kullanılarak yeni bir çizim gönderiliyor. Bunlar tamamlanmış çizimlerin sayısıdır; daha birçoğu başlatılmış ve kaydedilmemiştir.

Aşağıdaki makalede HTML5'i nasıl kullandığımız, neden yaptığımız teknolojileri kullanmayı seçtiğimiz ve büyük bir web sitesinin tam gelişmiş HTML5 uygulamalarından birini yazarken keşfettiğimiz şeylerle ilgili bazı arka plan bilgileri sunulmaktadır.

Geçmişim

2005'in sonlarında, Draw Here tarafından kullanılan çizim aracından sorumlu geliştiricilerden biriydim. Araç, yer işareti uygulaması tarafından kullanıma sunulan bir 'web grafiti' aracıydı. Web sayfalarında resim çizmek için kullanılıyordu. Draw Here başlangıçta SVG kullanılarak oluşturuldu (Firefox 1.5 beta yeni çıktı ve SVG'yi destekleyen ilk tarayıcılardan biriydi).

Internet Explorer'da arka planda SVG oluşturuyorduk ancak çizimi VML kullanarak oluşturuyorduk. O sırada WebKit, SVG'yi desteklemiyordu, bu yüzden SVG'yi tuval kullanarak (o zamanlar yalnızca WebKit'te görülen yeni bir teknolojiydi) oluşturmak için kodumuzu aktardım. Hatta bir noktada, SVG kodumuzun bir grup div öğesi birbirine yapıştırılarak eski tarayıcılarda oluşturulabilmesi için bir bağlantı noktası bile yaptım. (Bu, elbette, bunun yapılabileceğini ve kullanımı çok yavaş olduğunu göstermek için daha çok şaka niteliğindeydi).

En parlak döneminde, Draw Here günde yaklaşık 100 çizim yapmak için kullanılıyordu. Büyük bir web uygulamasına son derece güzel bir görünüm vermese de, bir denemeden daha fazlasını çağrıştıracak kadar kapsamlıydı. 2006'nın ortalarında proje terk edildi, ancak site bugün hâlâ yalnızca gülümsemek için ilerliyor.

deviantART muro tarafından kullanılan teknolojiler

İlk yıllarında çeşitli HTML5 teknolojileri kullandığım için deviantART muro'nun baş geliştiricisi olmam istendi. Bu makaleyi okuyan herkes muhtemelen Silverlight veya Flash gibi eklenti tabanlı bir teknoloji yerine neden HTML5 kullanmaya karar verdiğimizi anlayabiliyor. Hem sağlam hem de açık standartları kullanan bir şey istedik.

Tuval ve SVG Arasında Karar Verme

Çizim katmanını tuval kullanarak yapmaya karar verdik. Bazı kişiler ne zaman kanvas ve ne zaman SVG kullanmaları gerektiğini merak edebilir. Bu iki teknolojiyle yapılabilecekler arasında çok fazla örtüşme vardır. Draw Here'ın da gösterdiği gibi, her iki teknoloji de bir çizim uygulaması oluşturmak için kullanılabilir.

Çizdiğiniz nesnelerin tutma yerlerini tutmak istiyorsanız SVG'nin harika olduğunu keşfettim. Örneğin, kullanıcının bir çizgi çizebilmesini ve daha sonra, şekli değiştirmek için çizginin parçalarını sürükleyebilmesini istiyorsanız, bu, SVG kullanarak oldukça önemsiz bir işlemdir. Ancak aynı şey tuval kullanımının işe yaraması da çok zordur.

Tuval kullandığınızda bir şeyleri tuvale ateşler ve sonra onu unutursunuz. Boş bir tuval ile bir saattir üzerinde çalışılan bir tuval tam olarak kodda aynı işlevi görür ve hafıza alanı hemen hemen aynıdır. Kafes çizim programı genellikle ateşle çok iyi bir şekilde çalışıp teknolojiyi unutsa da bazı şeyleri zorlaştırır. Örneğin, hızlı bir geri alma işlevi oluşturmak tuvalde SVG'de olduğundan çok daha zordur. SVG'de, yerleştirdiğiniz son birkaç satırı takip edebilirsiniz. Geri alma işlemi ise bu nesneleri koparmaktan ibarettir. Tuvalle, bir çizgi çizildikten sonra çizginin altında ne olduğunu bilemezsiniz. Bu nedenle çizgiyi kaldırmak için çizginin yer aldığı alanın yeniden çizilmesi gerekir.

Maddeye bastıktan ve tuval için HTML5'in kullanılacağına karar verdikten sonra, HTML5'in diğer küçük özelliklerinden de yararlanmaya karar verdik. Kullanıcıların fırça ayarlarını izlemek için localStorage'ı nasıl kullandığımıza örnek olarak verilebilir. Böylece, çeşitli fırçaları istedikleri gibi ayarladıktan sonra, aracımızı bir sonraki kullanışlarında bu ayarlara geri dönebilirler. localStorage, bu tercihleri almak için çerezimizi kullanmamız veya sunucuyu ziyaret etmemiz zorunda kalmamamız anlamına gelir.

Tuval'i kullanma

Tuval son beş yılda çok yol kat etti. Draw Here ile, performans iyi olmadığından tuval bağlantı noktamı yayınlamadık. Şimdi, düşündüğünüzden daha iyi performans gösterdiğini söylemekte sakınca yoktur. Tuvalin büyük bir bölümünün temizlenmesi ve karmaşık şekillerin yeniden çizilmesi genellikle insan algısından daha yüksek bir hızda gerçekleşebilir. Zaman zaman çok yavaş olduğunu fark ettiğim tek şey pikselleri örneklemek için getImageData() işlevini kullanmaktır. İşlemin hızı açıkça tuval boyutuna bağlıdır, ancak büyük bir tuvalde getImageData() öğesinin yanlış zamanda yapılması, kullanıcının uygulamanın yavaş yanıt verdiğini hissetmesine kadar uzun sürebilir.

Çeşitli tuval eğitimlerini okuduktan sonra, başta bir sayfada bir veya iki kez, ölçülü bir şekilde kullanılması gereken ağır bir şey olduğu izlenimini uyandırdı. Herkesin aklını çeliyor mu bilmiyorum. Ancak bir süre sonra, kanvasın size fazlaca zahmetten kurtulmanızı sağlayabileceği birçok küçük yer olduğunu fark ettim. Örneğin, uygulamamızın modelleri, birincil ve ikincil renkleri gösteren, örtüşen iki üçgenden oluşan bir renk seçicinin olması gerektiğini belirtti:

Renk seçici
Renk seçici

İlk içgüdü, geleneksel HTML ve CSS ile bu küçük kullanıcı arayüzü öğelerini oluşturmanın bir yolunu bulmak oldu. CSS'yi hack'leyenler, tüm bunların CSS üzerinden nasıl yapılabileceğine dikkat edebilirler, ancak rengi değişen iki parçanın üçgen şeklinde olması bunu çok da bariz yapmaz.

Tek bir tuval kullandığımda, widget'ı tek bir DOM öğesi ve birkaç JavaScript satırı ile yaptım. deviantART muro her yerde tuval düğümleri kullanıyor. Her katman bir tuvaldir ve katman sıralamasını değiştirmek, z-endeksini değiştirmekten ibarettir. Çizim alanının azaltılmış bir görünümünü gösteren yakınlaştırma "gezgin" paleti, kaynak resimler olarak katman tuvallerini kullanan bazendrawImage() çağrısı yapan başka bir tuvaldir. Çizim alanı imleci bile (boyutu fırça boyutuna ve yakınlaştırmaya göre ayarlayan iki renkli daire) farenin altında kayan bir tuvaldir.

Tuval konusunda diğer HTML5 teknolojilerine göre daha serbest olmamızın nedeni, Google'ın ExplorerCanvas kitaplığının, Internet Explorer'da tuval simülasyonunu mümkün kılmasıydı. Bu, beni bir sonraki bölümüme yönlendiriyor.

Internet Explorer (IE)

Önde gelen web sitelerinin çoğunun henüz HTML5 kullanmamalarının başlıca nedeni, Internet Explorer kullanıcılarını kaybetmek istememeleridir. deviantART'ın bir HTML5 çizim uygulaması yaptığını duyduklarında çoğu geliştiricinin aklındaki ilk soru şudur: 'IE hakkında ne yapıldı?'

Başlangıçta, Internet Explorer'da bir şeylerin çalışması söz konusu olduğunda elimizden gelenin en iyisini yapmaya karar vermiştik. Ancak, web geliştirmede en az yaygın payda stiline uygun şekilde çalıştık. Web topluluğu, bir sitenin bilinen her tarayıcıda aynı görünene kadar başlatılamayacağı yaklaşımını benimsediğinden, kullanıcılar tarayıcılarının ne zaman eksik olduğunu söyleyemez. Ortalama bir kullanıcı için hız sorunları internet bağlantısından kaynaklanır ve her sayfa aşağı yukarı aynı şekilde görüntülenir. Bu nedenle, geri düğmesinin rengi gibi rastgele küçük kullanıcı arayüzüne göre karar veriyorlar.

HTML5 spesifikasyonunu kullanarak aklımıza gelen tüm havalı özellikleri oluşturmaya, bu özelliğin Internet Explorer'da çalışmasını sağlamaya karar verdik. Tarayıcılar henüz bir web standardını uygulamadığı için bu özelliğin kullanılamadığını açıklayan bir iletişim kutusu da görüntüleyecektik.

Başlangıçta, Google'ın ExplorerCanvas (exCanvas) ile her şeyin çalışmasını sağlamaya çalıştık. Şaşırtıcı bir şekilde, çoğu şeyde tuvali taklit etme konusunda başarılıdır. Fakat bir dezavantajı var. Tuval üzerinde yapılan her çizgi, alttaki VML çevirisindeki bir DOM nesnesidir. Tuval üzerinde deneyebileceğiniz çoğu şey için bu sorun yaratmaz, ancak deviantART muro'nun fırçalarından bazıları çok sayıda fırçayı üst üste koyarak şekiller oluşturur. Internet Explorer, hızlı bir makinede bile binlerce düğüm içeren bir VML ile karşılaştığında devrilir ve ölür. Bu nedenle, birçok çizim çağrısı için sanal VML'ye gidip kod yazmamız, düğümleri birleştirdiğimiz ve taşıma komutunu kullanarak nerede boşluklar olması gerektiğini belirlememiz gerekti. exCanvas ile bu küçük kullanımlar genellikle iyi sonuç verdiğinden, arayüzdeki birçok küçük kontrol ve öğede tuval etiketi kullanılmaktadır.

exCanvas ile bazı özelliklerin çalışmasını sağlamanın yanı sıra, kullanıcılara Google Chrome Frame eklentisini yüklemiş olmaları halinde Internet Explorer'ın sürümlerini kullanmaya devam edebileceklerini de önerdik. Google Chrome Frame, Google Chrome'un oluşturma motorunu Internet Explorer'a yerleştiren bir eklentidir. Kullanıcılar, aşina oldukları tarayıcıyı kullanmaya devam etmektedir ancak kapakların altında sayfamız Chrome'un HTML5 özellikleri ve daha hızlı JavaScript ile görüntülenir.

Chrome Frame'le çalışmak için bir şeyleri taşımanın kolay olması gerektiğini biliyordum, ama bu kadar basit olduğunun farkında değildim. Fazladan bir meta etiket eklersiniz. Hepsi bu kadar, işler IE'de çalışmaya başlar.

Özet

HTML5 spesifikasyonundaki yeni teknolojilerle çalışmak büyük bir zevkti ve kullandığım her şeyin prime time için kesinlikle hazır olduğunu söyleyebilirim. IE'de kusursuz bir şekilde çalışmak için bazı şeylere ihtiyaç duysanız bile, tuval ve exCanvas'ı birleştirerek yapabileceğiniz şaşırtıcı miktarda sonuç vardır. SVG ile VML arasına bir çeviri katmanı yazmak da şaşırtıcı bir şekilde mümkün oluyor. Teknolojiyi kullanmaya başladığınız andan itibaren yepyeni bir dünyaya adım atmış olursunuz.

Referanslar