DeepZoom uygulamalar Silverlight 2.0 yayınlandığından bu yana en ilgi çeken popülar uygulamalardan biri. DeepZoom ile beraber çok büyük fotoğraf arşivlerini rahatlıkla tarayıcı içerisinde gösterebilmekle kalmıyor aynı anda kullanıcılara çok farklı bir deneyim de yaşatabiliyoruz. Bugüne kadar DeepZoom uygulamaları geliştirirken kullandığımız DeepZoom Composer bundan bir süre önce beta olmaktan kurtulup ilk sürümü ile yayınlandı.

DeepZoom Composer download link:
http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=457b17b7-52bf-4bda-87a3-fa8a4673f8bf

DeepZoom Composer'ın son sürümünde standart DeepZoom uygulamaları ile ilgili çok güzel yenilikler geliyor ve bir satır bile kod yazmadan günü birlik kullanıma uygun güzel sonuçlar alınabiliyor. Bu yazımızda DeepZoom Composer'ın son sürümünü inceleyerek gelen yeniliklerden bahsedeceğiz.

Başlangıç için...

DeepZoom Composer'a açtığımızda hemen projemizi yaratıp ekrandaki "Add image" menüsünden yüksek çözünürlüklü resimlerimizi ekleyebiliyoruz. Import modundayken tüm resimlerimizi ekledikten sonra uygulamanın arayüzünü tasarlamak için Compose moduna geçebiliriz. Resimlerimizi farklı şekillerde ister iç içe, ister yan yana yerleştirebiliriz. Hayal gücü size kalmış. Şimdi gelin elimizdeki yeni proje ile en son yeniliklere göz atalım.

DeepZoom içinde linkler!

DeepZoom uygulamalarında binlerce resim olabilir. Bu gibi durumlarda bazen bu resimlerden birine tıklandığında veya ekranda belirli bir alana tıklandığında başka bir resme kullanıcıyı yönlendirmek isteyebilirsiniz. Belki de tamamen DeepZoom uygulaması dışında bir adrese yönlendireceksiniz kullanıcıları. Tüm bunları artık doğrudan DeepZoom Composer içerisinde ayarlayabiliyorsunuz.

Link olacak alanı belirlerken...

Uygulamanız içerisinde link olarak tıklanacak bir alanı belirlemek için yukarıdaki resimde de görebileceğiniz ufak "Add area" düğmesini kullanacağız. Düğmeye tıkladıktan sonra DeepZoom uygulamanızın compose ekranında istediğiniz alanı bir kare içerisine alabilirsiniz.

Link olacak bölgeyi yarattık.

Link olarak kullanılacak bölgeyi tanımladıktan sonra sıra geliyor linkin ne işe yarayacağını ayarlamaya. Daha önce de bahsettiğimiz gibi aslında iki farklı seçenek var. Bunlardan ilki linkin kullanıcıyı DeepZoom uygulaması içerisinde başka bir resme yönlendiriyor olması. Diğer seçenek ise doğrudan kullanıcıyı harici bir adrese yönlendirmek. İlk olarak gelin dahili linkleme işlemini nasıl yapabiliyoruz görelim.

Dahili linkleme işlemini yapıyoruz...

Programı sol kısmında yukarıdaki aşağıya dikey bir menü göreceksiniz. Bu menünün üzerinde "Internatl Links" tabına bastıktan sonra "Layers" tabında yer alan ve daha önce yarattığımız alanlardan (Area) herhangi birini alıp "Internatl Links" tabına sürükleyerek atabiliyoruz. Bu işlemi yaptığımız gibi hemen karşımıza Direct Link penceresi geliyor ve bu alanın bir dahili link (Internal link) olarak kullanılırken DeepZoom uygulaması içerisinden hangi resmi hedef alacağını belirtmemizi istiyor. Bu ekrandan da bir resim seçmeniz ile artık linkleme işlemini bitirdiniz demektir. Bu şekilde rahatlıkla istediğiniz kadar link ayarlayabilir ve DeepZoom uygulamalarınız içerisinde ilginç navigasyon sistemleri oluşturabilirsiniz.

Harici link eklemenin yolu.

DeepZoom uygulamalarınız içerisinde dahili linkler gibi isterseniz harici sitelere linkler de yerleştirebilirsiniz. Bunun için ilk olarak "External Link" tabını açmış olmanız gerekiyor. Sonrasında ekranın sağ tarafındaki "Layers" tabından herhangi bir "Area"yı alarak "External Links" tabına sürükleyip bırakabilirsiniz. İşlemi tamamlamanızla beraber karşınıza "External Links Management" ekranı gelecektir. Hemen araç çubuğundan bir link ekleyebilir ve linkin adını, adresini girebilirsiniz. İşte bu kadar, artık DeepZoom uygulamasından dışarıya çıkacak bir link eklemiş oldunuz bile.

DeepZoom ile Slideshow!

DeepZoom uygulamaları resim göstermek ne kadar hoş olsa da bazı durumlarda resimlerin sırası ile ekrandan geçmesini isteriz. Bu gibi durumlarda ayrı Slideshowlar kullanmak zorunda kalsak da aslında DeepZoom uygulamaları kendi iç özelllikleri ile beraber SlideShow altyapıları içinde muhteşem bir sistem olarak öngörülebilir. Bu gibi bir çalışmayı yapmak için daha önceleri kod yazmak zorunda kalsak da artık DeepZoom Composer bize bu özelliği hazır olarak getiriyor.

Slideshow hazırlıyoruz.

DeepZoom uygulamanız içerisinde resimleri istediğiniz gibi yerleştirebilir, sıralayabilirsiniz. Bazı resimler ufak bazıları ise büyük hatta iç içe resimler bile olabilir. Tüm bunları algılayacak olan SlideShow sistemi otomatik olarak resimlerinizi tek tek gezerek ekrana sığdıracak şekilde resimlerinize gerektiğinde zoom da yapacaktır, aynı şekilde zoom out da yapabilir.

Uygulamanızın ana ekran tasarımını bitirdikten sonra "SlideShow" tabını açarak sağ taraftaki "Layers" bölümünden istediğiniz resimleri sırası ile "SlideShow" tabına sürükleyerek bırakabilirsiniz. Tab içerisindeki resimler yine tab içerisindeki sıraları ile DeepZoom uygulamasında gezilecektir.

Örnek DeepZoom uygulamasından bir kare.

DeepZoom uygulamalarında dahili menüler!

Menü sistemleri neredeyse her web sitesinde vardır. SlideShow ve harici linklerin dışında bazen bir DeepZoom uygulamasında çok fazla fotoğraf olduğunda ayrı bir menü ile fotoğrafların listelenebilmesi hatta belki de kategorilerine göre ayrılabilmelerini sağlamak hoş olabilir. İşte bu gibi bir işlevselliği rahatlıkla DeepZoom Composer içerisindeki menü sistemi ile geliştirebilirsiniz.

DeepZoom'umuz için menü hazırlıyoruz.

DeepZoom uygulamanıza bir menü eklemek için hemen "Menu" tabını açarak sağ taraftaki "Layers" tabından istediğiniz fotoğrafları "Menu" tabına sürükleyerek atabilirsiniz. Tüm fotoğraflarınızı taba aldıktan sonra istediğiniz bir fotoğrafı seçip dikey veya yatay olarak menü içerisindeki pozisyonunu değiştirebilirsiniz. Böylece rahatlıkla gruplamalar da yapabilirsiniz.

DeepZoom uygulamamızdaki menü!

Gördüğünüz gibi artık DeepZoom uygulamamızın sol üstündeki oktan ayrı bir menüye ulaşabiliyoruz. Bu menüde daha önce DeepZoom Composer içerisinde hazırladığımız resimlerin bir listesi uygun şekilde listeleniyor. Menüden herhangi bir resme tıkladığınızda DeepZoom uygulaması otomatik olarak o resme zoom yapıyor.

DeepZoom Composer gün geçtikçe tek başına ayakta durabilen ayrı bir program halini alıyor. Özellikle bu son eklenen işlevsellikler ile beraber internetten indirilebilen ücretsiz bir program olarak web siteleri hazırlarken hızlı çözümler yaratmak adına işimizi kolaylaştıracağı kesin.

Hepinize kolay gelsin!