Örnek Olay - deviantART muro'da HTML5

Mike Dewey
Mike Dewey

Giriş

7 Ağustos 2010'da deviantART 10. yaşını kutladı. Doğum günümüzü deviantART muro adlı bir HTML5 çizim aracını kullanıma sunarak kutladık. Bu araç, bağımsız bir web uygulaması olarak ve 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 coşkuyla karşıladı ve araç artık bazı iyi boyutlu web mülkleriyle aynı miktarda trafik alıyor. Lansmanından bu yana, deviantART muro'da yaklaşık 5 saniyede bir yeni çizim gönderiliyor. Bunlar yalnızca tamamlanan çizimlerin sayısıdır. Başlatılmış ve kaydedilmemiş çok daha fazla çizim vardır.

Aşağıdaki makalede, HTML5'i nasıl kullandığımız, kullandığımız teknolojileri neden tercih ettiğimiz ve büyük bir web sitesi için ilk tam kapsamlı HTML5 uygulamalarından birini yazarken keşfettiğim konular hakkında bilgi verilmektedir.

Geçmişim

2005'in sonlarında, Draw Here tarafından kullanılan çizim aracından sorumlu geliştiricilerden biriydim. Bu araç, yer işareti eklentisi tarafından başlatılan bir "web grafiti" aracıydı. Bu araç, herhangi bir web sayfasında resim çizmek için kullanılıyordu. Burada Çiz, başlangıçta SVG kullanılarak oluşturuldu (Firefox 1.5 beta sürümü, SVG'yi destekleyen ilk tarayıcılardan biri olarak kullanıma sunulmuştu).

Internet Explorer'da arka planda SVG oluşturuyor ancak çizimi VML kullanarak oluşturuyorduk. WebKit o zamanlar SVG'yi desteklemediğinden kodumuzu, SVG'yi canvas'ı kullanarak oluşturacak şekilde taşıdım (canvas o zamanlar yalnızca WebKit'te bulunan yeni bir teknolojiydi). Bir noktada, SVG kodumuzun birbirine yapıştırılmış bir grup div öğesi kullanılarak eski tarayıcılarda oluşturulabilmesi için bir bağlantı bile oluşturdum. (Bu, elbette bunun yapılabileceğini göstermek için yapılan bir şakaydı ve kullanımı oldukça yavaştı).

En popüler olduğu dönemde, Draw Here ile günde yaklaşık 100 çizim yapılıyordu. Büyük bir web uygulamasının son halini almamış olsa da, deneme aşamasından daha fazlası olarak adlandırılabilecek kadar tamamlanmıştı. Proje 2006'nın ortalarında terk edilmiş olsa da site hâlâ yayında.

deviantART muro tarafından kullanılan teknolojiler

Çeşitli HTML5 teknolojilerini ilk günlerinde kullanma geçmişim nedeniyle, deviantART muro'da baş geliştirici olmam istendi. Bu makaleyi okuyan herkes, Silverlight veya Flash gibi eklenti tabanlı bir teknoloji yerine neden HTML5'i kullanmaya karar verdiğimizi anlayabilir. Sağlam ve açık standartları kullanan bir çözüm istedik.

Tuval ve SVG Arasında Karar Verme

Çizim katmanını kanvas kullanarak yapmaya karar verdik. Bazı kullanıcılar, ne zaman kanvas ne zaman SVG kullanmaları gerektiğini merak edebilir. Bu iki teknolojiyle yapılabilecek işlemler arasında çok fazla örtüşme vardır. Draw Here'in kanıtladığı gibi, her iki teknoloji de çizim uygulaması oluşturmak için kullanılabilir.

Çizdiğiniz nesnelerin tutamaklarını korumak istiyorsanız SVG'nin mükemmel olduğunu fark ettim. Örneğin, kullanıcının bir çizgi çizebilmesini ve ardından çizginin parçalarını sürükleyerek şeklini değiştirebilmesini istiyorsanız bunu SVG kullanarak oldukça kolay bir şekilde yapabilirsiniz. Ancak aynı şey kanvas kullanırken çok garip olur.

Tuvali kullandığınızda tuvale bir şeyler ekleyip sonra onu unutursunuz. Boş bir kanvas ile bir saat boyunca çizilmiş bir kanvas kodda aynı şekilde davranır ve yaklaşık olarak aynı bellek ayak izine sahiptir. Nokta vuruşlu çizim programları genellikle ateşle ve teknolojiyi unutan kişiler için çok iyi çalışır ancak bazı şeyleri zorlaştırır. Örneğin, hızlı geri alma işlevi oluşturmak kanvasta SVG'ye kıyasla çok daha zordur. SVG'de, yerleştirdiğiniz son birkaç çizginin tutamacını tutabilirsiniz ve geri alma işlemi, bu nesneleri kaldırmaktan ibarettir. Kanvas'ta ise bir çizgi boyandıktan sonra altında ne olduğunu bilemezsiniz. Bu nedenle, çizgiyi kaldırmak için bulunduğu alanı yeniden çizmeniz gerekir.

Riski göze alıp kanvas için HTML5'i kullanmaya karar verdikten sonra, diğer HTML5 özelliklerinden de yararlanmaya karar verdik. Buna örnek olarak, kullanıcının fırça ayarlarını takip etmek için localStorage'ı nasıl kullandığımızı gösterebiliriz. Bu sayede, çeşitli fırçalarını istedikleri gibi ayarladıktan sonra aracımızı bir sonraki sefer kullanırken bu ayarlara geri dönebilirler. localStorage, bu tercihleri almak için çerezimizi kullanmamız veya sunucuya gitmemiz gerekmediği anlamına gelir.

Canvas'ı kullanma

Canvas, son beş yılda çok yol kat etti. Draw Here'de performans iyi olmadığı için kanvas bağlantımı yayınlamadık. Muhtemelen hayal ettiğinizden daha iyi performans gösterdiğini söyleyebilirim. Tuvalin büyük bir bölümünü temizlemek ve karmaşık şekilleri yeniden çizmek genellikle insan algısından daha hızlı gerçekleşebilir. Bazen çok yavaş olduğunu tespit ettiğim tek şey, pikselleri örneklemek için getImageData() işlevinin kullanılmasıdır. İşlemin hızı, tuval boyutuna bağlıdır ancak büyük bir tuvalde getImageData() işlevinin yanlış zamanda yapılması, kullanıcının uygulamanın yanıt vermesinin yavaş olduğunu hissetmesine neden olacak kadar uzun sürebilir.

Çeşitli kanvas eğitimlerini okuduktan sonra, başlangıçta kanvasın sayfa başına bir veya iki kez olmak üzere, dikkatli bir şekilde kullanılması gereken ağır bir öğe olduğu izlenimi edinmiştim. Herkesin bu hissi anlayıp anlamadığını bilmiyorum ancak ben anlamıştım. Bu nedenle, deviantART muro'yu ilk kodlamaya başladığımızda bu özelliği az kullanıyordum. Ancak bir süre sonra, kanvasın size çok fazla çabadan kurtarabileceği birçok küçük yer olduğunu fark ettim. Örneğin, uygulamamızın taslakları, birincil ve ikincil renkleri gösteren iki örtüşen üçgenden oluşan bir renk seçicinin olması gerektiğini belirtiyordu:

Renk seçici
Renk seçici

İlk aklıma gelen, bu küçük kullanıcı arayüzü aracını geleneksel HTML ve CSS ile oluşturmanın bir yolunu düşünmekti. CSS'de hile yapma konusunda uzman olan kişiler, tüm bunların CSS üzerinden nasıl yapılabileceğini belirtebilir ancak renk değiştiren iki parçanın üçgen şekli bunu çok açık bir şekilde göstermez.

Yalnızca bir kanvas kullanma fikri aklıma geldiğinde widget'ı tek bir DOM öğesi ve birkaç satır JavaScript ile oluşturdum. deviantART muro'da her yerde kanvas düğümleri kullanılır. Her katman bir kanvastır ve katman sıralamasını değiştirmek için z-dizinini değiştirmeniz yeterlidir. Çizim alanının küçültülmüş görünümünü gösteren yakınlaştırma "gezinme menüsü" paleti, kaynak resim olarak katman kanvaslarını kullanarak zaman zaman drawImage() işlevini çağıran başka bir kanvastır. Çizim alanı imleci (fırça boyutuna ve yakınlaştırmaya bağlı olarak boyutu ayarlayan iki tonlu bir daire) bile farenin altında yüzen bir kanvastır.

Tuval için diğer HTML5 teknolojilerine kıyasla daha esnek davranmamızın nedeni, Google'ın ExplorerCanvas kitaplığının Internet Explorer'da tuvali simüle etmeyi mümkün kılmasıdır. Bu da beni bir sonraki bölüme getiriyor.

Internet Explorer (IE)

Büyük web sitelerinin henüz HTML5 kullanmamasının başlıca nedeni, Internet Explorer kullanıcılarını kaybetmek istememeleridir. deviantART'ın HTML5 çizim uygulaması yaptığını duyan çoğu geliştiricinin aklına ilk gelen sorunun "IE için ne yapıldı?" olduğunu tahmin ediyorum.

Başlangıçta, Internet Explorer'da her şeyin çalışmasını sağlamak için elimizden geleni yapacağımıza ancak en yaygın web geliştirme stilini kullanmaya son vereceğimize karar verdik. Web topluluğu, bir sitenin bilinen her tarayıcıda aynı görünene kadar başlatılamayacağına karar verdiğinden, kullanıcılar tarayıcılarının eksik olduğunu anlayamaz. Ortalama bir kullanıcı, hız sorunlarını internet bağlantısından kaynaklanıyor zanneder ve her sayfanın aşağı yukarı aynı şekilde oluşturulduğunu düşünür. Bu nedenle, en sevdikleri tarayıcıya geri düğmesinin rengi gibi küçük kullanıcı arayüzü özelliklerine göre karar verirler.

HTML5 spesifikasyonunu kullanarak aklımıza gelen tüm harika özellikleri oluşturmaya, Internet Explorer'da çalışmasını sağlamaya karar verdik. Çalışmazsa tarayıcısında henüz bir web standardı uygulanmadığı için özelliğin kullanılamadığını açıklayan bir modal pencere göstermeyi planladık.

İlk olarak Google'ın ExplorerCanvas (exCanvas) ile işleri yürütmeye çalıştık. Çoğu konuda kanvası taklit etme konusunda şaşırtıcı derecede başarılıdır. Ancak bunun bir dezavantajı da vardır. Kanvas üzerinde yapılan her vuruş, temel VML çevirisinde bir DOM nesnesi olur. Tuvalde denemeye çalıştığınız çoğu şey için bu sorun oluşturmaz ancak deviantART muro'nun bazı fırçaları, çok sayıda darbeyi bir araya getirerek şekiller oluşturur. Internet Explorer, binlerce düğüm içeren VML ile karşılaştığı zaman (hızlı bir makinede bile) çöker ve çalışmaz. Bu nedenle, çizim çağrılarının çoğu için gerçek VML'de kod yazmamız ve düğümleri birbirine bağladığımız ve boşluk olması gereken yerleri belirtmek için taşıma komutunu kullandığımız hileler uygulamamız gerekiyordu. Arayüzdeki küçük kontrollerin ve diğer öğelerin çoğunda kanvas etiketi kullanılır. Bunun nedeni, bu küçük kullanımların genellikle exCanvas ile iyi çalışmasıdır.

Bazı özelliklerin exCanvas ile çalışmasını sağlamanın yanı sıra, kullanıcılara Google Chrome Frame eklentisini yüklerlerse Internet Explorer sürümlerini kullanmaya devam edebileceklerini önerdik. Google Chrome Frame, Google Chrome'un oluşturma motorunu Internet Explorer'a yerleştiren bir eklentidir. Kullanıcı açısından bakıldığında, kullanıcılar aşina oldukları tarayıcıyı kullanmaya devam eder. Ancak sayfamız, arka planda Chrome'un HTML5 özellikleri ve daha hızlı JavaScript ile oluşturulur.

Uygulamaları Chrome Frame ile çalışacak şekilde taşımanın kolay olacağını biliyordum ancak bunun ne kadar basit olduğunun farkında değildim. Ekstra bir meta etiket eklemeniz yeterlidir. Bu işlemden sonra IE'de her şey çalışmaya başlar.

Özet

HTML5 spesifikasyonundaki yeni teknolojilerle çalışmak çok keyifli. Kullandığım her şeyin kesinlikle kullanıma hazır olduğunu söyleyebilirim. İşlemlerin IE'de sorunsuz çalışması gerekiyorsa bile canvas ve exCanvas'ı birleştirerek şaşırtıcı miktarda işlem yapabilirsiniz. SVG ile VML arasında bir çeviri katmanı yazmak da şaşırtıcı bir şekilde mümkün. Bu teknolojiyi kullanmaya başladığınızda yepyeni bir dünyaya adım atmış olursunuz.

Referanslar