İmagine Cup 2012′ nin Ardından…

Bu yıl 10. sunu düzenlediğimiz Imagine Cup uluslararası teknoloji yarışmasında öğrenciler dünyanın en zor problemlerine teknoloji yardımı ile çözüm bulmaya çalıştı. Geçtiğimiz on yılda, 190 ülkeden 1.65 milyon öğrencinin katıldığı yarışmada 1.75 milyon dolar değerinde ödüller ve hediyeler dağıtıldı. Bu yolculuğa 10 yıl önce, 1993′te, 25 ülkeden sadece 1000 öğrencinin katılımı ile başlamıştık.

Oyundan, mobil cihaz uygulamalarına kadar bir çok alanda yazılımın geliştirildiği yarışmada öğrenciler eğitim, sağlık, çevre ve diğer birçok alandaki sorunlara Birleşmiş Milletler Binyıl Kakınma hedefleri doğrultusunda teknoloji yardımı ile çözümler üretti.

Dünya genelinde, yerel, bölgesel ve çevrimiçi olarak düzenlenen yarışmada seçilen finalistler dünya finallerinde yarışmaya ve teknolojinin getirdiği yenilikleri kutlamaya hak kazandılar.

Bu yıl 75 ülkeden 106 takım dünya finallerinde yarışırken, öğrenciler XBox 360, Windows 8, Windows Azure ve Windows Phone gibi bir çok yeni teknolojiyi ilk kullanan ve uygulamaya dönüştürenler arasında yer aldı.

2012 yılında öne çıkan farklardan bir diğeri Imagine Cup destek programının duyurulmasıydı. Bu yıl ikincisi düzenlenecek olan üç yıllık destek programında Microsoft’un öğrenciler için ayırdığı 3 milyon dolarlık yatırım seçilecek 2-4 arası takıma proje hayallerini gerçek bir uygulamaya dönüştürebilmeleri için verilecek.

Yarışmanın en zorlu ayağı olan Yazılım tasarımı kategorisinde Türkiye’yi bu yıl Eskişehir Osmangazi üniversitesinden Repharmers ekibi temsil etti. Kullanım fazlası eşyaların topluma tekrar kazandırılması için Windows Azure, Windows 8 ve Windows Phone teknolojilerini kullanarak geliştirdikleri projede kullanım fazlası ilaçların ihtiyaç sahiplerine dağıtımı örnek çalışma olarak gösterildi. Microsoft başkan yardımcıları S. Somaseger ve Walid Abu-Hadba ile Akademik Programlar takımı genel müdürü Moorthy Uppaluri, ilk üç’e giren ekipler dışında sadece Türkiye ekibine ödül olarak Microsoft anakaradaki yazılım geliştiriciler konferansına tüm masraflar karşılanmak üzere davetiye verdi.

8 günlük Sydney seyahatinin yaklaşık 40 saati uçak yolculuğu ile geçerken kalan sürede öğrenciler hem eğlendi hemde juri karşısında projelerini anlattı. Bu anlatım bazen kendileri için ayrılan özel sunum odası, bazende tanıtım masasında gerçekleşti. Microsoft başkan yardımcıları tarafından 106 takım arasından sadece ve defalarca ziyaret edilen sayılı proje tanıtım masalarından biri de Türkiye idi.

Açılışını Microsoft başkan yardımcılarından Dan’l Lewin’in yaptığı yarışmanın ilk gününde Sydney havaalanına ulaşan ekipler, güzel bir sürpriz, Sydney ulusal hayvanat bahçesi yetkililerinin getirdiği Koalalar ile karşılandı. Program süresince girişimcilikten, yeni teknolojilere kadar birçok konuda öğrencilerin geleceğe dair bakış açılarını geliştirecek örnekler sunuldu. Yarışma süresince verilen aralarda ise Windows 8, Windows Phone, Azure ve bu yıl duyurulan destek programları hakkında bilgilendirme oturumları yapıldı. Geçmiş yıllardan farklı olarak, standard akşam yemeği programlarına ek, bayan yarışmacılara özel bir akşam yemeği düzenlendi. Geçen senelerdeki ImagineCup yarışmalarında finale kalan, sonrasında şirketlerini kurarak projelerini hayata geçiren ekiplerinde davetli olduğu programda, ekip üyeleri tecrübelerini paylaştı. Ayrıca programın 4. gününde ekipler şehir turu, hayvanat bahçesi ziyareti ve meşhur Sydney köprüsüne tırmanmak gibi etkinliklere katıldı. Son gün akşamı ise farklı ülke ve kültürlerden öğrencilerin aynı coşkuyu paylaştığı büyük birde parti düzenlendi.

Yıllardır, finallere kalan bir çok öğrencinin kariyerine, geleceğe bakış açısına olumlu anlamda katkıda bulunan Imagine Cup yarışmasının bir sonraki dünya finalinde Türkiye’yi sen temsil etmek istemezmisin? Yarışabileceğin bir çok kategori seni bekliyor! Unutma, yolculuğa erken hazırlık başarının temelini oluşturuyor. Peki sen hazırmısın?

Mustafa Kasap
Akademik Programlar Yöneticisi, Microsoft Türkiye

Windows 8, 26 Ekim’de Bizimle!

Yeni bir gelişmeyi sizlerle paylaşmaktan dolayı mutluluk duyuyorum. Steven Sinofsky, Microsoft’un yıllık satış toplantısında Windows 8′in 26 Ekim’de kararlı sürüm olarak kullanılmaya başlanacağını bizlerle paylaştı. Bu ayın başında gerçekleştirilen Microsoft’un iş ortakları toplantısında da Temi Teller Windows 8′in Ekim ayında kullancılarla buluşacağını söylemişti. Ama şimdi herkes kesin tarihi biliyor!

Ben şimdiden ajandama bu önemli günü ekledim bile… Heyecanla 26 Ekim’i bekliyoruz :)

Onur Altıntaş
Windows Pazarlama Grup Müdürü, Microsoft Türkiye

İşte Karşınızda Outlook.com

Daha önceki yazılarımda, Windows 8 ve Windows Phone için bulut servislerini sil baştan yarattığımızı anlatmış ve özellikle SkyDrive’daki birçok yenilikten bahsetmiştim. Bugün ise sizlerle, yepyeni e-posta servisimiz Outlook.com’un önizlemesini paylaşmanın heyecanını yaşıyorum :)

Outlook.com, gerçekten hem işlevsellik, hem de tasarım açısından e-postanın geldiği son nokta ve her ne kadar “önizleme” desek de, işlevsellik açısından şu anda ana e-posta hizmetiniz olmaya hazır.

Outlook.com’u denediğinizde sizin de hemen gözünüze çarpacak birkaç özellikten bahsedeyim. Eminim ki ilk olarak dikkatinizi, tüm cihazlardan en rahat kullanım için optimize edilmiş, yepyeni tasarım çekecek. Bu yeni tasarımda, sayfanın üstündeki menü alanı %60 daha az piksel kullanılarak iyice inceltildi ve gelen kutunuzun ilk sayfasında %30 daha fazla ileti görmeniz sağlandı. Ayrıca arama kutusunun küçültülmesi ve resimli reklamların kaldırılması sayesinde, çok daha temiz ve kolay kullanılabilir bir arayüz yaratıldı.

Bir diğer yenilik ise, sosyal ağlarla entegrasyon tarafında. Outlook.com’un Facebook, Twitter, LinkedIn, Google ve çok yakında gelecek olan Skype entegrasyonu sayesinde direkt e-postanızın içinden arkadaşlarınızın fotoğraflarını, durum güncellemelerini, en son tweet’lerini görebilecek, istediğiniz an arkadaşınızla sohbet ve görüntülü arama gerçekleştirebileceksiniz. Tabi ki her zaman olduğu gibi hangi ağları hesabınıza bağladığınız ve neleri paylaştığınızla ilgili tüm kontrol sizde.

İlerleyen günlerde, Outlook.com’un getirdiği yenilikler ile ilgili ek bilgiler de paylaşacağım, şimdilik daha fazla vaktinizi almadan hemen Outlook’un nasıl kullanmaya başlayabileceğinizi aktarayım:

– Hotmail kullanıcısıysanız, Outlook.com’a Hotmail adresinizle giriş yapabilirsiniz. Bu şekilde, yeni arayüzü @hotmail, @msn veya @live uzantılı mevcut e-posta adresiniz ve şifrenizle hemen kullanmaya başlamanız mümkün. Ayrıca isterseniz, bu hesabınıza yeni bir @Outlook.com adresi de ekleyebilirsiniz.

– Gmail ya da Yahoo gibi farklı bir e-posta hizmeti kullanıyorsanız, yine de Outlook önizlemesini kullanabilirsiniz. Bir Microsoft hesabınız varsa http://www.outlook.com adresinden giriş yapın, veya yine buradan yeni bir e-posta adresi alın ve sadece birkaç adımda mevcut e-postanızın buraya yönlendirilmesini sağlayın.

1996’da ilk web bazlı e-posta hizmeti HoTMaiL’in kullanıma sunulmasından bu yana çok şey değişti. Bugün ise Outlook.com’un kullanıma sunulması ile kişisel e-posta alanında tam anlamıyla bir dönüm noktasındayız. Tavsiyem, hemen girip Outlook’u deneyimlemeniz, hatta adınızı ve soyadınızı yansıtan yeni e-posta adresinizi bir an önce kapmanız :) Yeni Outlook.com’u sizin de en az benim kadar beğeneceğinize eminim!

Leylim Erenel
Internet İş Grubu Yöneticisi, Microsoft Türkiye

İmagine Cup El Kitapçığı(Umut ERKAL) Çıktı.

2009 Senesinden itibaren çeşitli şekillerde içinde bulunduğu Imagine Cup’a ait deneyimlerini bizlerle paylaşıyor…

İmagine Cup El Kitapçıgını İndirin.

“Imagine Cup El Kitabı’nın amacı, 2009 senesinde elde ettiğimiz Türkiye rekorunu kırmanıza ve ülkemizi daha yüksek bir başarıya ulaştırmanıza yardımcı olmaktır. Dile kolay, dünyanın farklı ülkelerinden, farklı özellikleriyle bir araya gelmiş yetenekleri hem teknik hem de sunuş anlamında geride bırakarak dereceye girmek, ancak ciddi bir emek karşılığı ortaya çıkar. Harcanan emek kadar, önceden bu yoldan geçmiş birinin yol gösterici olması da, bir geminin kılavuzu kadar önemlidir. Imagine Cup El Kitabı, 2009 senesinden beri çeşitli şekillerde içinde bulunduğum Imagine Cup deneyimlerimi sizlerle buluşturacaktır. Yarışma prosedürü, püf noktaları, tipik Imagine Cup hataları ve 2009 serüvenimiz incelenerek başarıya sağlam adımlarla ulaşmanız hedef alınmıştır.”   “Umut Erkal”

Kitabın İçeriği:
Imagine Cup Nedir?

Size Ne Katar, Ne Götürür?
Başlangıç Süreci
Yarışmaya Karar Verme Aşaması
Kategori Seçme Aşaması
Ekip
Gömülü Sistemler için İdeal Ekip
Yazılım Tasarımı için İdeal Ekip
Ekip Arkadaşı Nereden Bulunur?
Nasıl Hazırlanılır?
Periyodik Toplantılar ve İletişim
Freerider Durumları
Rapor Hazırlama
Video Sunum Hazırlama
Prototip Geliştirme
Değerlendirme Kriterleri
Yerel Finaller
Kazandığınızı Öğrenince!
Valiz Hazırlığı
Sunumdan Önce
Sunum Anı!
Sosyal Medyanın Kullanımı
Yarışma Sonrası
Case Study #1: Tipik Imagine Cup Hataları
Case Study #2: Imagine Cup 2009 Türkiye Rekoru
Imagine Cup Maceramız (Kahire, 2009)
Kişisel Yorumlar
Özeleştiri
Eleştiri
Bugün Olsaydı
Bize Ne Kattı, Ne Götürdü?


İlk Windows 8 HTML5 Metro Uygulamamız

Build konferansı ile beraber biliyorsunuz artık yeni Windows 8 METRO arayüzünde HTML5 uygulamalarının da çalışabileceği haberi kesinleşmiş oldu. METRO arayüzünde HTML5 ve JS, XAML ve C# veya VB veya C++ beraberce kullanılabiliyorlar. Bu noktada biraz özellikle HTML5 tarafına değinmek istiyorum. Değinirken aklımdaki soruları ve kendi bulduğum bazı cevapları sizlerle paylaşıp biraz da yorumlarınızı dinlemek istiyorum desem doğru olur. Arada da JavaScript WinRT ilişkisine bir giriş yapmış oluruz.

HTML5 = Cross Platform

Aslında bu başlığı atmadan önce şu soruyu sormak lazım: “HTML Cross-Platform mu?” Yani HTML5’den falan bahsetmiyorum. Şu an elimizde var olan HTML Cross-Platform mu? Aslına bakarsanız evet. Bugün HTML ile yapılmış bir site arayüzü kabaca her telefonda, tablette ve bilgisayarda  / işletim sisteminde açılıyor / çalışıyor. Tabi burada konunun biraz detayına girersek hepimiz de biliyoruz ki HTML’in her cihazda aynı şekilde görünebilmesi için birkaç takla atmamız gerekiyor. Ama zaten bu sorunu hoş görmeyi öğrenmiş bir şekilde doğmadık mı biz? 🙂

Peki konu HTML5 olunca birşey değişecek mi? Aslında pek değişmeyecek. Yani bugün HTML ile ilgili var olan sorunlar yine HTML5 ile de var olmaya devam edecek. Diğer yandan da şu anda nasıl HTML bizim “en cross-platform” gidebilen teknolojimiz ise, HTML5 de öyle olacak. Ama ufak bir fark var…

Uygulamalar ve Siteler

Bugüne kadar HTML kullanımımız site yapmakla alaklıydı. Yani veri göstermenin ötesinde pek birşey yapmıyorduk. En fazla bir basit bir kutuya (TextBox) metin alırız sonra HTML sunucuya gider ve yenisi gelir. HTML ile tarayıcı içi uygulamaya yazmaya başlamamız şurada 10 yılı geçmez. JavaScript / AJAX vs ile beraber HTML biraz canlanmaya başladı ve biz bu yolda da birçok sorun yaşamadık. Başımıza bir de JavaScript’in Cross-Platform olma derdi çıktı ve bire bir aynı kolaylıkları ve zorlukları JavaScript ile de yaşadık. Buna rağmen sadece içerik gösteren cross-platform web sitelerinden istemci tarafında tepki verebilen ve yaşayan cross-platform web uygulamalarına geçiş pek de sancılı olmadı. (Esas sancıyı şimdi göreceğiz :))

Önümüzdeki dönemde HTML’i çok daha farklı bir gelecek bekliyor. HTML5 ve JavaScript Windows 8 ile beraber Windows Metro UI uygulaması olarak çalışıyor. Metro UI içerisinde bir Silverlight uygulaması ile HTML5 uygulaması arasındaki farkı kullanıcıların anlama şansı yok. Kulağa ne kadar hoş geliyor değil mi? Sanırım aynı hayali paylaşıyoruz? HTML5+JavaScript ile yazacağım bir uygulama Windows 8’de MetroUI’da çalıştığı gibi yarın iPhone5’te HTML5 destekli tarayıcı da çalışacak…. mı?

Cross Platform Uygulama (Ütopyası)

Başlıktan sanırım nereye gideceğimizi anladınız ama etkilenmemeye çalışın 🙂 Amacım sizleri de düşünmeye itmek ve kesinlikle yorumlarınız duymak. Sonuç itibari ile ben de iki gün önce izlediğim bir Keynote sonrasında kafamda toparlananları döküyorum şu anda ortaya.

Konumuza dönersek 🙂 Hepimizin hayali (en azından benim öyleydi) HTML5’in Windows ortamında doğal bir uygulama geliştirme platformu olması ile beraber tek bir uygulama geliştirip her platformda çalıştırabiliyor olmak. Peki bu gerçekten olabilecek mi? Gelin basit bir Windows 8 HTML5 uygulamasının kodlarına göz atalım.

[HTML5]

<!DOCTYPE html> <html> <head>     <meta charset="utf-8" />     <title>WinWebApp3</title>     <!-- WinJS references -->     <link rel="stylesheet" href="/winjs/css/ui-dark.css" />     <script src="/winjs/js/base.js"></script>     <script src="/winjs/js/wwaapp.js"></script>     <!-- WinWebApp3 references -->     <link rel="stylesheet" href="/css/default.css" />     <script src="/js/default.js"></script> </head> <body> <div style="height: 253.57px; width: 374.11px;"> <button id="Dugme" style="position: absolute; top: 210px; left: 100px;">Deneme</button> <img id="Foto" style="height: 200px; width: 200px;"></div> </body> </html> 

Tüm JavaScript referanslarını bir kenara koyalım. Sonuçta onları diğer platformlarda bir işe yaramasa da sorun yaratmayacaktır. Orta kısma baktığımızda da pek bir sorun görmüyoruz. Yani şimdilik HTML5 kısmı ile ilgili bir sorun yok. Tabi tüm bunları yaparken uygulamanın basitliğini akılda tutmakta fayda var. Ortada sadece bir düğme ve bir de resim nesnesi var. HTML5 ile ilgili MetroUI’da kullanılan bazı elementlerinin daha W3C’nin draft listesinde olduğunu ve her tarayıcı tarafından daha implemente edilmediğini es geçiyorum. Bunlar zaten yazının başında bahsettiğimiz “HTML’in bildiğim, alıştığımız sorunları” listesine dahil.

Şimdi gelin bu uygulamanın JavaScript koduna geçelim. JavaScript kodu içerisinde amacımız düğmeye basıldığında kullanıcının bilgisayarından bir resim almak. Bunun için bir WinRT call başlatıp MetroUI’da Windows 8 ile beraber, işletim sisteminde gelen “FileOpenPicker”ı çalıştırmamız gerek. Aslında bunun Winforms’daki OpenFileDialog’dan pek farkı yok. OpenFileDialog’un MetroUI’cası açılacak 🙂 Uygulamamızı JavaScript ile geliştirdiğimiz için bizim bu WinRT call’u JavaScriptten yapmamız gerek.

[JavaScript]

        var openPicker = new Windows.Storage.Pickers.FileOpenPicker();         openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;         openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary;         openPicker.fileTypeFilter.replaceAll([".png", ".jpg", ".jpeg"]);

Yukarıdaki basit kod bir FileOpenPicker yaratıp açılabilecek dosyaların tiplerini vermekten öteye geçmiyor. Açılan FileOpenPicker’da varsayılan konum olarak “MyPictures” klasörünün gösterilmesini ve gösterilen resimlerin de thumbnail olarak listelenmesini sağlıyoruz.

Bu uygulamamızı birazdan tamamlarız ve açtığımız resmi HTML5’teki Image nesnesine aktarırız ama onun öncesinde koda tekrar bir bakıp ne kadar Cross-Platform olabileceğini bir düşünmenizi istiyorum 🙂 “Windows” ile başlamıyor mu bu API’ler? Yani özetle OpenFileDialog açma şeklinizden tutun cihazın Accelerometer’ına ulaşmaya kadar birçok “HTML5 sitenizi HTML5 uygulaması’na” çevirecek özellik platform bağımlı olmak zorunda kalacak. Özellikle bu API’lerle W3C’nin pek de ingilenmediğini düşünürsek bunların standardlaşması çok zor gözüküyor.

Bu örnek genel resmi görmekten uzak, çok basit bir örnek oldu. Uygulamalarınız karıştıkça kullandığınız şeylerin hem HTML5 tarafında hem de JavaScript tarafında giderek platforma özel hale geldiğini göreceksiniz. Bunun nedenlerinden biri kullanılan bu özelliklerin bazılarının diğer platformlarda veya işletim sistemlerinde olmaması veya basit bir şekilde sadece farklı API’lerle sunulması olması olabiliyor.

Peki Cross-Platform gerçekten hayal mi?

Aslında bu sorunun cevabı Cross-Platform’a ulaşmakla ilgili nasıl bir beklentiniz olduğuna bağlı. Doğru bir katmanlama ve ayrıştırma ile Cross-Platforma’a yaklaşmak doğal olarak HTML5’te Silverlight’tan daha kolay ama bu bir tıklama ile olacak iş de değil. Maalesef HTML5 de olsa birçok cross-platform senaryonuzda bolca if’ler kullanacağınızdan emin olabilirsiniz.

Özetle benim görüşüm MetroUI ve Windows 8 ile beraber gelen HTML5’in bir Cross-Platform mucizesinden öte Cross-Platform hayali yolunda ufak bir adım oluşturarak süreci biraz kolaylaştıracağı yönünde. Ama bunun kesinlikle (maalesef) minör bir adım olduğunun farkında olmak önemli. Diğer yandan tabi ki özellikle HTML ve JavaScript guruları için Windows platformuna ve MetroUI’a geçmek için bu çok önemli bir fırsat.

Uygulamamızı bitirelim 🙂

Şimdi şu fotoğraf seçip açacağımız uygulamamızı bitirelim. Fotoğraf açma işlemi için açtığımız OpenFilePicker Windows 8 Metro arayüzünde yeri geldiğinde harici kaynaklara da ulaşabiliyor. Yani OpenFilePicker’dan kullanıcıların başka bir uygulamaya zıplamış ve oradan resim seçiyor olabilirler veya belki de internet kaynaklı bir yerlere zıplamışlardır. Özetle OpenFilePicker internetteki kaynakların da seçilebilmesine olanak tanıyor. Bu senaryoda bizim dosya açma işlemimiz uzun sürebilir. O nedenle dosya açma işlemi default olarak asenkron bir işlem olarak karşımıza geliyor.

[JavaScript]

        openPicker.pickSingleFileAsync().then(function (file) {             if (file) {                 var Dosya = URL.createObjectURL(file);                 document.getElementById("Foto").src = Dosya;             }         });

Yukarıdaki kod içerisinde pickSinbleFileAsync metodu çalıştırıldıktan sonra then diye bir komut daha göreceksiniz. İşte bu Async Framework’deki wait metodu gibi çalışıyor. Yani eğer bir metod asenkronsa sonrasında then diyerek veridğiniz işlemler o asenkron metod tamamlandıktan sonra çalışıyor. Bir diğer örnekle aslında asenkron çalışan bir yapının Completed gibi bir eventi varsa otomatik olarak onu bekleyip onun eventin listener’ında işlem yapmak gibi bir çalışma yapısından bahsediyoruz.

Bizim Async işlem bittinten sonra parametre olarak gönderilen file objesinden bir ObjectURL yaratmamız gerekiyor. O işlemi de yaptıktan sonra doğrudan HTML’deki Image nesnemizi bulup source’una eldeki dosyayı veriyoruz. Böylece JavaScript’ten bir Windows Runtime (WinRT) API’sini çağırmış olduk.

Hem ilk JavaScript’ten WinRT Call’umuz 🙂 hem de HTML5’in gidişatı ile ilgili beyinlerinize diktiğim şüpheler hepinize hayırlı olsun 😀

Görüşmek üzere!

Bu makale Visual Studio 11 Express for Windows Developer Preview 
ve Windows 8 Developer Preview Build 8102 kullanılarak yazılmıştır

Web Tasarımlarında Renklerin Ahengi

Bir web tasarımın ön grafik tasarımı yapılırken en önemli nokta birbiri ile uyumlu renkleri yakalayabiliyor olmaktır. Genel olarak sanat olarak nitelendirebileceğimiz bu ahengin aslında kısmen de olsa matematiksel sistemlerle de tanımlamak mümkün. Sıcak ve soğuk renklerin birbirleri ile veya kendi içlerindeki uyumları ile ilgili geliştirilmiş derin araştırmalara ve algoritmalara girmeyeceğim. Biraz daha pratiğe yönelerek aşağıda adresi yer alan siteyi ziyaret etmenizi rica ediyorum.

http://www.todotoh.com/rgb/rgbanalysis.aspx

Site, kendisine verilen başka bir adresteki web sitesinin ekran görüntüsünü alarak söz konusu web sitesinde ağırlıklı olarak kullanılmış olan renklerin bir şemasını çıkartıyor. Şemayı çıkartırken hemen kullanabilmeniz için Hex kodlarını yaratmayı da unutmuyor. Böylece beğendiğiniz web sitelerinin renk şemalarını elde edebiliyor ve birbiri ile uyumlu renkleri anında yakalamış oluyorsunuz. Bahsettiğimiz web sitesi John K. tarafından benim “How to take screenshot (thumbnail) of a web site with ASP.NET 2.0?” makalemdeki kod üzerinden gidilerek geliştirildi. (Umarım bir gün söz konusu makaleyi Türkçe’ye çevirmek için zaman ayırabileceğim)

Sizlerle tanıştırmak istediğim bir diğer web uygulaması da www.colormatch.dk sitesinde yer alıyor. Seçilen bir renk üzerinden otomatik olarak uyumlu renkleri bulmayı amaçlayan web sitesinin gerçekten başarılı bir iş çıkardığını söyleyebilirim.

Mayasoft Bilişim Akademi’sindeki son Web Tasarım sınıfımdan öğrencim sevgili Ersin Kılıç’a beni colormatch.dk ile tanıştırdığı için buradan ayrıca teşekkür etmek istiyorum.

(Daron Yöndem)

Adobe Edge ile HTML5’e Erken Bir Bakış

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 🙂

  • Adobe Flash’ı mobil platformların için geliştirmeyi bırakacağını duyurdu.
  • Adobe Flex’i open source hale getirdi.

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’ınyaratı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.

(Daron Yöndem)