Geride bıraktığımız 2011 yılının internet teknolojileri ve dijital medya adına bereketli bir yıl olduğunu söyleyebiliriz. Dijitale yapılan yatırımların artması, tabletlerin yükselişi, Apple ve Android arasındaki rekabetin süreçleri hızlandırması, mobil uygulamaların yaygınlaşması ve daha birçok gelişme bizleri yıl boyunca heyecanlı tutmayı başardı. Bunlardan biri de yeni nesil internet kodlaması HTML5 oldu aslında. Flash gibi ekstra yazılımlara ihtiyaç durmadan interaktif ve görsel yönden kuvvetli web siteleri yaratmamıza imkan tanıyan bu kodlama dili sayesinde 2012 yılında web programlamacılarından beklentilerimiz bir hayli yükseldi. Tabii aramızda bu siteler için 2012'yi beklemeyenler de oldu. Yazının devamında teknik detaya girmeden kısaca yeniliklerden ve HTML5 ile yapabileceklerimizden bahsedip 41? 29! tarafından hazırlanan iki büyük HTML5 prodüksiyonunu incelemeye çalışacağız.
HTML5'i klasik html dilinin, css ve javascript ile bütünleştirilerek oluşturulmuş versiyonu olarak özetleyebiliriz. Hayatımıza giren yeni html etiketleri ve bu etiketlere iliştitirilmiş geniş özellik seçenekleri sayesinde kullanıcıyla etkileşime girmemiz eskisinden çok daha kolay hale geliyor. Bunun en güzel örneğini yeni nesil formlarda görebiliyoruz aslında. Zorunlu alanları tanımlamak ve eposta telefon gibi girişlerde bilgilerin formatını doğrulamak için artık eskisi gibi uzun JS kodları yazmak yerine tek bir değişkeni düzenlenememiz yetiyor. Bunun dışında HTML5 sayesinde yine kolayca video ve ses dosyalarını sitemize entegre edebiliyor, sitedeki fotoğrafların sürükleyerek yerini değiştirebiliyor, büyütüp, küçültebiliyor, belli bir bölümünü yaklaştırabiliyoruz. Bunların hepsini zaten yapabiliyorduk diyebilirsiniz ama zaten vaad edilen özellikler yaptıklarımızı daha kolay ve tabiri caizse teknik olarak daha "hafif" bir şekilde gerçekleştirebildiğimiz için önem kazanıyor.
HTML5'in tam olarak bize ne getirdiğini anlamak için aslında tüm yeni özelliklerin bir araya geldiğinde nasıl sonuçlar yaratabileceğine bakmak lazım. Şu sıralar en aktif kullanım kayan sayfalar üzerine yoğunlaşmış durumda. "Tron Legacy Digital Book" örneğindeki gibi görseller önlü arkalı yerleştirilip sayfanın hareketiyle birkite gerek yer değiştirip, gerekse yakınlışaıp uzaklaşarak 3 boyutlu bir hava yaratılırken, aynı zamanda ses efektleriyle sayfa desteklenerek aktif bir çizgiroman deneyimi yaratılıyor. Bir ayakkabı firması olan Dijean ise HTML5'i ekran sığma sıkıntısına çözüm olarak kullanmayı tercih etmiş. Tüm sayfayı farklı yönlere sürükleyerek tüm ürünlerini gezip, inceleme şansı sunuyor. Bir de işin eğlence ve oyun tarafı var tabii. Çöp adamın macerasında aktif rol oynayabildiğimiz "Draw A Stickman" ve tek başımıza veya bir arkadaşımızla karşılıklı olarak oynayabildiğimiz Pong bu türde yapılmış çalışmalardan iki başarılı örnek.
Yazının başında da bahsettiğmiz 41? 29!'un HTML5 ile hazırladığı işler ise dünya standartlarını zorluyor desek yanlış olmaz heralde. Bu doğrultuda ajansın Kasım ayı ortalarında duyurduğu ilk büyük iş olan Zafer Yolunda, Kanuni'nin Mohaç zaferini konu alan bir çizgi roman çalışması aslında. Yukarıda bahsetmiş olduğumuz HTML5'in ses ve görüntü özelliklerini etkili bir biçimde kullanan çalışma Muhteşem Yüzyıl'ın yapımcı şirketi Tims Productions ve Microsoft Internet Explorer 9 ortaklığında hayata geçirilen bir proje. Yıl sonuna doğru ise Internet Explorer 9 lansmanı için kolları sıvayan ajans, Türkiye'nin ilk HTML5 video klibini Bedük'ün Disco Breaker'ı için hazırladılar. Müzikle birlikte sayfanın değişik yerlerinden açılan onlarca pencerenin içerisinde devam eden görüntülerin uyumu, Bedük ve Bishop'un kareografileriyle birleşince ortaya çıkan işi izlemek gerçekten keyif veriyor.
Şu anda HTML5 deneyimi üzerine en çok çalışan tarayıcı IE9 ancak başta Chrome olmak üzere diğer tarayıcılar da tam olarak HTML5 uyumlu olmak için çalışmalarını devam ettiriyor. Henüz tam olarak her cihaz ve tarayıcı da desteklenmemesine rağmen bu kadar hızla yayıldığını ve bu kadar güzel projeler üretildiğini düşünürsek 2012'de HTML5 üzerine daha çok konuşup daha çok yazmamız kaçınılmaz olacak gibi.
Son olarak teknik olarak HTML5 ile ilgilenenler için birkaç faydalı kaynak:
- Serdar Kuzuloğlu'nun twitter hesabından paylaştığı eski ve yeni HTML5 etiketlerini görsel olarak özetleyen infografik
- HTML5 ile hazırlanmış ve yenilikleri detaylı olarak anlatan bir HTML5 sunumu
- W3 tarafından hazırlanan adım adımHTML5 eğitimi
- Ben zaten HTML5'in ustası oldum kendimi nerede gösterebilirim diyenler için ödüllü HTML5 oyun geliştirme yarışması