Adobe Edge ile HTML5'e erken bir bakış

0 dakikada yazıldı

24579 defa okundu

Düzenle

Son zamanların ciddi popüler konularından biri HTML5 :) Aslında bu konuda konuşacak çok şey var. Danışmanlıklarımın %90'ında HTML5 soruları aldığımı itiraf etmem gerek. HTML5'in geleceği, gerçekten ne kadar cross-platform olduğu, Microsoft'un HTML5 yaklaşımı, HTML5 ile "phonegap" vs ile cross-platform mobile app development hikayesi vs... Bunlar karışık konular ve itiraf etmek gerekirse bu konularda sizlere net cevaplar vermek yerine aslında mevcut manzarayı görmenizi ve kendi değerlendirmenizi yapabilmenizi tercih ederim.

İşte tam da bu çerçevede son zamanlarda giderek daha da sesi çıkan Adobe'nin HTML5 designer editörü Adobe Edge'den bahsetmek istiyorum. Eski bir ACP (Adobe Certified Professional) olarak uzun süredir Photoshop ve Premier hariç pek Adobe araçlarını kullanmadığımı itiraf etmem gerek. Silverlight'ın kuvvetlenmesi ile beraber makineme Flash yüklememeye başlayalı sanırım üç yıl oluyor. Peki nedir bu Edge? Aslında bu soruya gelmeden önce birkaç bilgi daha veriyim :)

Bu iki maddeden yola çıkarak siz ne yorumlar yaparsınız bilemiyorum :) Ama benim gördüğüm manzara Adobe'nin Flash'ı öncelikler listesinde arkaya attığı. Bugüne kadar Open Source yapmayı düşünmediğin birşeyi open source yapmak şirket içi kaynakları azaltmak için bir yöntem midir? Yani acaba Adobe Flash tarafındaki çalışan sayısını ve yatırımını azaltıp onun yerine open source community'sinden destek mi bekliyor bilemiyorum :) Ama bu haberi özellikle aynı dönemde ortaya çıkan mobil'de Flash'tan vazgeçme hikayesi ile birleştirirseniz garip bir kimya oluştuğu bir gerçek. Eh bir de bunun üzerine "Odağımızı HTML5'e yönlendiriyoruz" gibi duyurular çıkarsa :) Adobe Edge'e göz atmanın tam zamanı demektir.

Adobe Edge

Şu an inceleyebileceğimiz Adobe Edge sürümü "Preview 3" yani aynı Windows 8 tarafında ve Expression Blend 5 tarafında da olduğu gibi Alpha / Beta vs değil. Özetle uygulamanın çok daha erken ve ön sürümlerinden birine göz atıyor olacağız. O nedenle pek eleştirel yaklaşmak şu an için mantıklı değil. Onun yerine daha fazla "Neler var?" ve "Adobe nasıl ilerlemeyi planlıyor?" gibi soruların cevabını arayacağız.

Adobe Edge'in Preview 3 sürümünü indirmek için buraya tıklayabilirsiniz.

Aadobe Edge'i ilk açtığımızda yeni bir proje yarattığımız gibi aslında Flash arayüzüne çok benzeyen bir arayüz ile karşılaşıyoruz. Tabi arayüz çok daha basit ve bu eminim ki daha "Preview 3"de olmamızdan kaynaklanıyor.

Adobe Edge Toolbar Preview 3'ün ne kadar "Preview" olduğunun
kanıtı.Adobe Edge Toolbar Preview 3'ün ne kadar "Preview" olduğunun kanıtı.

Yukarıda gördüğünüz basit ekran görüntüsünde Adobe Edge arayüzünden tek araç çubuğunu görüyorsunuz :) Şaka değil "Button" yok. Tabi tekrar etmekten sıkılmadan :) bunun bir "Preview" olduğunu yine hatırlatacağım. Şimdilik özelliklerden çok benim merak ettiğim HTML5 animasyonlarının nasıl yapıldığı ve arka planda nasıl bir kod yaratıldığı.

Edge'de ilk
animasyonumuz.Edge'de ilk animasyonumuz.

Deneme amaçlı olarak yola çıkarak ilk animasyonumu yukarıdaki şekilde hazırladım. Flash veya Blend'den alışık olduğumuz Keyframe mantığı bire bir korunmuş durumda. Animasyon yine KeyFrame'ler yaratılarak Frame'lerde Property'ler değiştirilerek oluşturuluyor. Aslında itiraf etmek gerekirse IDE'de anime edilen Property isimlerinin gösterilmesi, sadece anime edilen değişikliklerin kaydedilmesi ve koda yansıması bana daha fazla Blend'i hatırlattı. Malum Flash arayüzündeki yaklaşım Property bazlı değil. Ama aslına bakarsanız Adobe'yi yapıyı bu şekilde kurmaya iten şey arka planda yaratmak zorunda kaldığı kodun yapısı. Flash seçeneğinde kendi SWF formatını compile ettiği için Adobe'nin (veya daha doğrusu Macromedia'nın) o noktada daha özgür olmuş olduğunu söyleyebiliriz. HTML5 konusunda maalesef Adobe aynı özgürlüğe sahip değil.

Animasyon hazırlarken ister ekrande değişiklikler yapıp bu değişikliklerden otomatik animasyon yaratılmasını ve otomatik keyframe eklenmesini sağlayabiliyor ister bu otomatik mekanizmayı devre dışı bırakıp elle tek tek toolbox'dan propertyleri bulup anime edebiliyorsunuz.

Ben örneğimde basit bir Image koyup onu ekranda sağa sola taşıdım :) Animasyonu yaratırken herhangi bir sorun yaşamadım. Herşey süper yolunda gitti. Sonrasında tabi ki arka planda neler oluyor diye proje dosyalarını karıştırmaya başladım.

Basit Edge projesinin
dosyaları.Yeni bir Edge projesinin içeriği.

Ekran görüntüsünde de paylaştığım gibi Edge'in kendi uzantısı ile tanımladığı dosya dışında herşey normal HTML, JavaScript ve CSS. JS dosyalarına baktığımızda hemen jQuery dikkati çekiyor :) Sonrasında Edge'in kendi JS kütüphaneleri var (jQuery Plug-In). Son olarak projenin kodlarını taşıdığını düşünebileceğimiz iki tane de Untitled diye başlayan JS dosyası root klasöre yerleştirilmiş durumda.

Edge dosyasının içinde proje ile ilgili bazı parametreleri tanımlayan bir JSON nesnesi var. Tahmin edeceğiniz üzere projenin çalışması için kritik değil. Daha fazla IDE için bazı bilgiler yer alıyor proje ile ilgili.

Edge projesinin ana HTML
dosyası.Edge projesinin ana HTML dosyası.

Ana HTML dosyamıza göz attığımızda doğal olarak projedeki bütün JS dosyalarının dahil edildiğini görüyoruz. Ek olarak bir de DIV id'si ve Class'ı set edilmiş şekilde ortada duruyor. Herşey bu DIV içerisinde gerçekleşiyor.

Projede aslında bizim IDE'de yaptığımız olayları yansıtan esas JavaScript dosyası ise "Untitled-1_edge.js" dosyasının ta kendisi. Benim örneğimde bu dosyanın içeriğini aşağıda bulabilirsiniz.

[Javascript]

(function ($, Edge, compId) {\     var symbols = {\         "stage": {\             version: "0.1.3",\             baseState: "Base State",\             initialState: "Base State",\             content: {\                 dom: [\         {\             id: 'vesikalik',\             type: 'image',\             tag: 'div',\             rect: [0, 0, 162, 161],\             fill: ['rgba(0,0,0,0)''images/vesikalik.png'],\             transform: [[10, 239]]\         }],\                 symbolInstances: [\       ]\             },\             states: {\                 "Base State": {\                     "${_stage}": [\             ["color""background-color"'rgba(255,255,255,1)'],\             ["style""height"'400px'],\             ["style""width"'550px']\          ],\                     "${_vesikalik}": [\             ["transform""translateX"'0px'],\             ["transform""translateY"'99px'],\             ["transform""rotateZ"'0deg']\          ]\                 }\             },\             timelines: {\                 "Default Timeline": {\                     fromState: "Base State",\                     toState: "",\                     duration: 7500,\                     labels: {\ \                     },\                     timeline: [\             { id: "eid15", tween: ["transform""${_vesikalik}"\                 "rotateZ"'360deg', { fromValue: '0deg'}], \                 position: 4500, duration: 1250 },\             { id: "eid8", tween: ["transform""${_vesikalik}"\                 "translateX"'214px', { fromValue: '0px'}]\                 , position: 0, duration: 2000, easing: "easeOutElastic" },\             { id: "eid17", tween: ["transform""${_vesikalik}"\                 "translateX"'235px', { fromValue: '214px'}]\                 , position: 5750, duration: 1750, easing: "easeOutElastic" },\             { id: "eid12", tween: ["transform""${_vesikalik}"\                 "translateY"'239px', { fromValue: '99px'}]\                 , position: 2000, duration: 2500, easing: "easeInOutQuad"}]\                 }\             }\         }\     };\ \     var comp;\     Edge.registerCompositionDefn(compId, symbols);\ \     /**\     * Adobe Edge DOM Ready Event Handler\     */\     $(window).ready(function () {\         comp = new Edge.Composition(compId, { stage: "." + compId }, {});\         /**\         * Adobe Edge Timeline Launch\         */\         comp.ready(function () {\             comp.play();\         });\     });\ })(jQuery, jQuery.Edge, "EDGE-294043132");

Kodu yukarıdan aşağıya incelerseniz, önce bir Stage yaratılıp resmin yerleştirildiğini, sonrasında State ve son olarak timeline'ın yaratıldığını görebilirsiniz. Timeline içerisinde transformasyonların hepsinin From ve To gibi property değerleri üzerinden gittiğine dikkat etmekte fayda var. Bu senaryo zaten SL veya WPF ile uğraşanlar için epey tanıdık gelecektir.

Kodun sonuna doğru yaratılan tüm sembollerin bir CompID ile eşleştirildiğini ve Stage'e konduktan sonra da "play" metodu ile senaryonun başlatıldığını görebilirsiniz.

Durumu özetleyecek olursak :) Edge IDE'sinde yapılan herşey arka planda JavaScript yaratıyor. Yaratılan JavaScript'e hakim olabilmek adına Adobe kendi jQuery plug-inlerini geliştirmiş durumda. İlginç olan şeylerden biri Edge IDE'sindeki toolbardaki nesnelerle çizim yapsanız, örneğin bir dikdörtgen koysanız bile dikdörtgenden tutun tüm çizimlere kadar herşeyi şu an JavaScript ile yaratmaya çalışıyorum. Ben açıkçası bu noktada SVG kullanımı öngörüyordum fakat şu an için yok. Belki ileride olacaktır.

Peki ya direk SVG Import edersek ne olur? diyorsanız orada da hafif bir hüsran var açıkçası. SVG'lere doğrudan Image gibi "asset" muamelesi yapıyor Edge :) Yani SVG içerisindeki objeleri tek tek anime edebilmeyi veya IDE içerisinde SVG'nin iç objelerine ulaşmayı düşünmeyin bile. Şu an için SVG'yi bir DIV'e JavaScript ile background olarak set ediyor :(

Özetle...

HTML5 ile designer-developer işbirliğini tooling olarak destekleyebilme noktasında ne kadar erken bir çağda olduğumuzu Adobe Edge de destekliyor ve kanıtlıyor... Bu konuda ana iki savaşçı olarak MS de Adobe de kabaca aynı noktada gibi duruyor. Aradaki büyük farklılıklardan biri MS'in elinde kendi tarayıcısı olması ve tarayıcısını da HTML5'i istediği noktaya getirmek için değiştirebiliyor olması :) Tabi bu durum biraz da tehlikeli çünkü MS'in IE'de yaptıkları sonuç itibari ile cross browser olmuyor. Nitekim şu an için baktığınızda çılgın HTML5 implementasyonları daha fazla Windows 8 ile gelen METRO UI'yı hedeflemiş gibi duruyor, genel web ortamını değil. Adobe ise doğal olarak bu riski göze alamaz (MS bu riski METRO dışında alacak mı o da pek belli değil) Adobe'nin yapmaya çalıştığı cross-browser bir çözümü eldeki araçlarla yaratmak. Bu çerçevede doğru bir başlangıç noktasında olduklarını da itiraf etmek gerek.

Aslında Adobe ile MS'i yani Edge ile Blend'i karşılaştırırken ilginç bir nokta var :) Blend'in şu ana kadar çıkan Preview'ları sadece Windows 8 Metro'yu hedefliyor aslında. Yani Blend'in Edge gibi genel web uygulamalarını HTML5 ile hedefleyip hedeflemeyeceği daha pek belli değil. Bakalım önümüzdeki aylar ne gösterecek.

Tavsiye ;)

Microsoft'un HTML5 bakışını incelemek için tavsiyem aşağıdaki iki webcast videosunu izlemeniz ;) Geleceğe dair ciddi fikir vereceklerinden eminim.

Hepinize kolay gelsin.

Bu makaledeAdobe Edge Preview 3 kullanılmıştır.