Microsoft geçen aylarda Expression ürünü piyasaya sürdü, veya ben yeni tanıştım :) Sizde tanışmak isterseniz buradan resmi sitesine erişebilirsiniz.
Çalıştığım şirket Expression içerisinde olan SketchFlow kullanımını incelememi istedi, bende inceleme sonuçlarını sizlerle paylaşmak istedim. Burada sadece Blend için bir SketchFlow projesi üzerine inceleme yaptım. WPF değil, "Silverlight 3 SketchFlow Application" projesi oluşturdum ve buradaki eğitim videolarını kullandım. Jeremy Osborn adlı birisi anlatımı yapıyor. 2009 Haziran ayında kaydedilmiş, henüz ürün betayken. Eğitim video sayfasında "Download the assets, step-by-step guide, and video package (127MB)" linkinden tüm ilgili videoları ve örnek kodları tek seferde indirebilirsiniz.
Çalıştığım şirket Expression içerisinde olan SketchFlow kullanımını incelememi istedi, bende inceleme sonuçlarını sizlerle paylaşmak istedim. Burada sadece Blend için bir SketchFlow projesi üzerine inceleme yaptım. WPF değil, "Silverlight 3 SketchFlow Application" projesi oluşturdum ve buradaki eğitim videolarını kullandım. Jeremy Osborn adlı birisi anlatımı yapıyor. 2009 Haziran ayında kaydedilmiş, henüz ürün betayken. Eğitim video sayfasında "Download the assets, step-by-step guide, and video package (127MB)" linkinden tüm ilgili videoları ve örnek kodları tek seferde indirebilirsiniz.
SketchFlow projelerinin amacı, özellikle web projelerinde, sayfa tasarımlarının en başta, tahta veya kağıt üzerinde çizilmesi yerine bilgisayar ortamında yapılmasına imkan vermek. Kağıda çizerek "abi bu olmuş mu" demek yerine, biraz daha çaba göstererek SketchFlow projesi oluşturursak bize ne avantajlar sağlıyor önce buradan başlayalım.
SketchFlow kullanıldığında, isteğinize göre el çizimine benzer şirin kontroller veya daha ciddi duran, web kontrolleri kullanma imkanınız var. Buradaki tercihimiz, ürünü kullanım amacımıza göre değişebilir. Örneğin şirket içinde kendi geliştirme akışımızda ürünü kullanacaksak, çok ciddi ekranlara ihtiyacımız yok, amacı net ortaya koyan ekranlar yeterli olabilir. Amacımız müşterilere yönelik bir sunum yapmak ise, -örneğin bir demo sunumu- animasyonlar ile süslenmiş ve ciddi tasarlanmış ekranlar seçilebilir.
Bu ürünü istediğimiz gibi kullanmakta özgürüz ancak ürün müşteri sunumları için tasarlanmış değil. Genede kullanılabilir, sadece müşterilere bu demonun amacının ne olduğu çok itina ile izah edilmeli :)
Teknik konulara girersek, SketchFlow'un en büyük özelliği çok basit bir şekilde sayfa hareketlerinin tanımlanmasını sağlaması. Bir sayfa eklediğimizde, sıradaki sayfanın ne/neler olacağını, nasıl bir akış ile ilerleneceğini ayarlamak gerçekten çok basit ve kullandığımız yazılım (IDE) bu konuda işlevsel. Sayfalarda UserControl ve ComponentScreen olarak kontroller tanımlayabilir ve bunları istediğimiz tüm sayfalara sürükle-bırak yöntemi ile ekleyebiliyoruz.
Butonlara geldiğimizde şu nokta önemli, butonun tek bir işlevi olmalı, bir kontrolün yapacağı işlem başka kontrole bağımlı olmamalı. Yani eğer butona ilk basıldığında şu olsun, sonrasında tekrar basılırsa bu olsun derseniz script kullanmanız gerekecek. Veya şu checkbox seçiliyse butona basıldığında bu olsun derseniz gene aynı şekilde script kullanmanız gerekecek. Script kullanma durumlarını ben incelemedim ve videolarda bu kısım geçmiyor, bir tek yerde script kullanılması gerekli ama bu bizim konumuz dışında şeklinde bir uyarı vardı. Kısacası script kullanımı kolay mıdır, zor mudur benim bir bilgim yok.
Sayfalarımızı basit tasarladığımızda, duruma göre davranan kontrollerden kaçındığımız durumlarda, SketchFlow bize çok büyük zaman kazandırabiliyor. Hem kısa zamanda güzel görsel bir sonuç elde ediliyor hemde aşağıda açıklayacağım farklı imkanlardan faydalanmamızı sağlıyor.
Animasyon konusuna da değinmek isterim, daha önce hiç animasyon ile uğraşmamış bir kişi olarak Silverlight SketchFlow projelerindeki animasyon imkanları gerçekten çok hoşuma gitti. Butona tıklandığında neler olacak, göstermek isterseniz, bunu inanılmaz kolay bir şekilde yapabiliyorsunuz. İşte bu yetenek, özellikle müşterileri görsel olarak etkileyecek bir sunumda çok faydalı olacaktır. Bu iş için tasarımcı ayıramayan şirketlerde; ön satış, satış hatta teknik ekipler bile etkileyici animasyonlar hazırlayabilirler.
Peki projemizi bitirdik, şimdi ne olacak.
Öncelikle karşımıza beklediğimiz şekilde bir web sitesi çıkmayacak. Silverlight SketchFlow projelerini "package" oluşturarak çalışır hale getirebiliyorsunuz. SketchFlow Player aracılığı ile sayfları gezebiliyorsunuz, bu player İnternet Explorer ile veya farklı bir browser ile, silverlight yüklü bir bilgisayarda açılabiliyor. Burada önemli nokta şurada, browser ile açabiliyor olmamız, elimizde web sayfaları olduğu anlamına gelmiyor. Basitçe player sayfaları gezme imkanını bize sunuyor. Player yoksa gezecek birşeyimiz de yok :)
Player sadece sayfları gezme imkanı vermiyor, altta map ile tüm sayfaları ve birbirlerine bağlantılarını bize gösterebiliyor. Sayfa sayımız arttıkça bu bağlantıları incelememiz zorlaşıyor, yani bu map kızmını akış çıkarmak için kullanmak pek olası değil. Sayfayı gezerken yan tarafta, o sayfanın etkileşimde olduğu diğer sayfaları ve o sayfa içerisindeki eventlerin neler olduğunu görebiliyoruz. Blend içerisinde bu işlemin adı event değil, sanırım behavior terimi kullanılıyor.
Player ile yapılan sayfaları gezen kişiler, ekran ile ilgili yorum, öneri ve isteklerini player aracılığı ile kaydedebiliyor. Bu çok uygun geri dönüşler alınmasına imkan sağlıyor. İzleyen kişi ekrana çizim yaparak müdahale edebiliyor, bu çizimler bizim projemizi bozmuyor. Çizim yanında yan tarafa not ekleyebiliyor, veya bazı yazıları "highlight" edebiliyor. Sonrasıda bunu bir "feedback" olarak kaydediyor ve projeyi yapana gönderiyor. Burada sadece feedback dosyasının gönderidiğini ve projenin tamamının gönderilmediği önemli. Projeyi yapan kişi, feedback dosyasını açtığında, kim-nerede-ne zaman-ne yorum yapmış, ekranda neresi için öneri/istekte bulunduş detaylıca görebiliyor. Bu kısım müşterilerle olan iletişimlerde de sayfalarda mutabık kalınması konusunda son derece verimli olarak kullanılabilir.
Projenin sonunda "Export to Microsoft Word" dediğimizde, projemizdeki her sayfa için bir screenshot barındıran bir çıktı elde ediyoruz. Bu word dosyasında, içerik bilgileri dahi var, kendi anlatımımızı gereken yerlere eklediğimizde elimizde harika bir doküman oluşmuş oluyor.
Sonuç olarak, bu ürün ile amacımız, karşımızdaki kim olursa olsun, onlara bir izlenim verebilmek. Detaylara girmeden, basitçe, mümkünse animasyonlar kullanarak, know-how'ımız nedir, neler yapabiliriz, fonksiyon setimiz nedir, gibi bilgileri muhattabımıza aktarmak.
Bana göre, sunumu yapılan veya tasarlanan gerçek sistemde, müşteri için 15 bilgi alacaksak, bunların tamamını sunuma koymaya gerek yok, 2-3 tanesini yazmamız yeterli olacaktır. Burada amacımız karşımızdakine müşteri bilgilerini tutarız fikrini verebilmek. İleriki aşamalarda, hangi bilgileri tutulmalıya kadar geldiğimizde gereken alanları ekleyebilir, karşı taraftan yeni alanlar için feedback alabiliriz.
SketchFlow kullanıldığında, isteğinize göre el çizimine benzer şirin kontroller veya daha ciddi duran, web kontrolleri kullanma imkanınız var. Buradaki tercihimiz, ürünü kullanım amacımıza göre değişebilir. Örneğin şirket içinde kendi geliştirme akışımızda ürünü kullanacaksak, çok ciddi ekranlara ihtiyacımız yok, amacı net ortaya koyan ekranlar yeterli olabilir. Amacımız müşterilere yönelik bir sunum yapmak ise, -örneğin bir demo sunumu- animasyonlar ile süslenmiş ve ciddi tasarlanmış ekranlar seçilebilir.
Bu ürünü istediğimiz gibi kullanmakta özgürüz ancak ürün müşteri sunumları için tasarlanmış değil. Genede kullanılabilir, sadece müşterilere bu demonun amacının ne olduğu çok itina ile izah edilmeli :)
Teknik konulara girersek, SketchFlow'un en büyük özelliği çok basit bir şekilde sayfa hareketlerinin tanımlanmasını sağlaması. Bir sayfa eklediğimizde, sıradaki sayfanın ne/neler olacağını, nasıl bir akış ile ilerleneceğini ayarlamak gerçekten çok basit ve kullandığımız yazılım (IDE) bu konuda işlevsel. Sayfalarda UserControl ve ComponentScreen olarak kontroller tanımlayabilir ve bunları istediğimiz tüm sayfalara sürükle-bırak yöntemi ile ekleyebiliyoruz.
Butonlara geldiğimizde şu nokta önemli, butonun tek bir işlevi olmalı, bir kontrolün yapacağı işlem başka kontrole bağımlı olmamalı. Yani eğer butona ilk basıldığında şu olsun, sonrasında tekrar basılırsa bu olsun derseniz script kullanmanız gerekecek. Veya şu checkbox seçiliyse butona basıldığında bu olsun derseniz gene aynı şekilde script kullanmanız gerekecek. Script kullanma durumlarını ben incelemedim ve videolarda bu kısım geçmiyor, bir tek yerde script kullanılması gerekli ama bu bizim konumuz dışında şeklinde bir uyarı vardı. Kısacası script kullanımı kolay mıdır, zor mudur benim bir bilgim yok.
Sayfalarımızı basit tasarladığımızda, duruma göre davranan kontrollerden kaçındığımız durumlarda, SketchFlow bize çok büyük zaman kazandırabiliyor. Hem kısa zamanda güzel görsel bir sonuç elde ediliyor hemde aşağıda açıklayacağım farklı imkanlardan faydalanmamızı sağlıyor.
Animasyon konusuna da değinmek isterim, daha önce hiç animasyon ile uğraşmamış bir kişi olarak Silverlight SketchFlow projelerindeki animasyon imkanları gerçekten çok hoşuma gitti. Butona tıklandığında neler olacak, göstermek isterseniz, bunu inanılmaz kolay bir şekilde yapabiliyorsunuz. İşte bu yetenek, özellikle müşterileri görsel olarak etkileyecek bir sunumda çok faydalı olacaktır. Bu iş için tasarımcı ayıramayan şirketlerde; ön satış, satış hatta teknik ekipler bile etkileyici animasyonlar hazırlayabilirler.
Peki projemizi bitirdik, şimdi ne olacak.
Öncelikle karşımıza beklediğimiz şekilde bir web sitesi çıkmayacak. Silverlight SketchFlow projelerini "package" oluşturarak çalışır hale getirebiliyorsunuz. SketchFlow Player aracılığı ile sayfları gezebiliyorsunuz, bu player İnternet Explorer ile veya farklı bir browser ile, silverlight yüklü bir bilgisayarda açılabiliyor. Burada önemli nokta şurada, browser ile açabiliyor olmamız, elimizde web sayfaları olduğu anlamına gelmiyor. Basitçe player sayfaları gezme imkanını bize sunuyor. Player yoksa gezecek birşeyimiz de yok :)
Player sadece sayfları gezme imkanı vermiyor, altta map ile tüm sayfaları ve birbirlerine bağlantılarını bize gösterebiliyor. Sayfa sayımız arttıkça bu bağlantıları incelememiz zorlaşıyor, yani bu map kızmını akış çıkarmak için kullanmak pek olası değil. Sayfayı gezerken yan tarafta, o sayfanın etkileşimde olduğu diğer sayfaları ve o sayfa içerisindeki eventlerin neler olduğunu görebiliyoruz. Blend içerisinde bu işlemin adı event değil, sanırım behavior terimi kullanılıyor.
Player ile yapılan sayfaları gezen kişiler, ekran ile ilgili yorum, öneri ve isteklerini player aracılığı ile kaydedebiliyor. Bu çok uygun geri dönüşler alınmasına imkan sağlıyor. İzleyen kişi ekrana çizim yaparak müdahale edebiliyor, bu çizimler bizim projemizi bozmuyor. Çizim yanında yan tarafa not ekleyebiliyor, veya bazı yazıları "highlight" edebiliyor. Sonrasıda bunu bir "feedback" olarak kaydediyor ve projeyi yapana gönderiyor. Burada sadece feedback dosyasının gönderidiğini ve projenin tamamının gönderilmediği önemli. Projeyi yapan kişi, feedback dosyasını açtığında, kim-nerede-ne zaman-ne yorum yapmış, ekranda neresi için öneri/istekte bulunduş detaylıca görebiliyor. Bu kısım müşterilerle olan iletişimlerde de sayfalarda mutabık kalınması konusunda son derece verimli olarak kullanılabilir.
Projenin sonunda "Export to Microsoft Word" dediğimizde, projemizdeki her sayfa için bir screenshot barındıran bir çıktı elde ediyoruz. Bu word dosyasında, içerik bilgileri dahi var, kendi anlatımımızı gereken yerlere eklediğimizde elimizde harika bir doküman oluşmuş oluyor.
Sonuç olarak, bu ürün ile amacımız, karşımızdaki kim olursa olsun, onlara bir izlenim verebilmek. Detaylara girmeden, basitçe, mümkünse animasyonlar kullanarak, know-how'ımız nedir, neler yapabiliriz, fonksiyon setimiz nedir, gibi bilgileri muhattabımıza aktarmak.
Bana göre, sunumu yapılan veya tasarlanan gerçek sistemde, müşteri için 15 bilgi alacaksak, bunların tamamını sunuma koymaya gerek yok, 2-3 tanesini yazmamız yeterli olacaktır. Burada amacımız karşımızdakine müşteri bilgilerini tutarız fikrini verebilmek. İleriki aşamalarda, hangi bilgileri tutulmalıya kadar geldiğimizde gereken alanları ekleyebilir, karşı taraftan yeni alanlar için feedback alabiliriz.
teşekkürler güzel bir yazı olmuş:)
YanıtlaSil