Yarın büyük gün yeni Microsoft teknolojilerine yakından bakmak ister misiniz?

 

26 Ocak 2013 Cumartesi 10:00-17:00 arası Microsoft Türkiye Ofisindeki etkinliğe hepinizi bekliyoruz.

 

 

İyi çalışmalar

Tıpkı Start Screende olduğu gibi GridView'ınızın içeriğini ilk geldiği zaman sol tarafa hizalandırılmış şekilde göstererek, sonrasında da hareket ettirildiğinde içeriklerin sol tarafa hizalandırılmasını istiyorsanız bunun için padding özelliğini kullanabilirsiniz.

 

 

Sayfa içerisinde hizalandırmalar yapılırken takip edilmesi gereken bilgilere buradan erişebilirsiniz

 

Örneğin bir uygulamada içeriğin sola olan hizası 120px ve yukarıya olan hizası 140px şeklindedir.

 

 

Uygulamamız hali hazırda aşağıdaki gibi gelmektedir.

 

 

Properties'te Layout'un altında ekstradan açılan panelde "Padding" özelliği bulunmakta buradan değişiklikler yapabilir

 

 

Ya da bunu direkt olarak xaml içerisinde de gerçekleştirebilirsiniz.

 

<GridView x:Name="grdViewPhotos" Margin="0,140,0,0" 

ItemTemplate="{StaticResource DataTemplatePhoto}" Padding="120,0,0,10"/>

 

 

Bu işlem sonunda görüntümüz yukardaki gibi olacaktır. Böylelikle sol tarafa olan hizası 120px iken sağa doğru kaydırdığımızda içeriğimiz ekranın köşesine kadar gitmektedir.

 

Daha fazla detaylı bilgi için

http://msdn.microsoft.com/en-us/library/windows/apps/hh872191.aspx

 

Beni https://twitter.com/ikivanc dan takip edebilir ve sorularınızı buradan sorabilirsiniz.

İyi çalışmalar.

Windows 8 üzerinde tasarım ve kullanıcı deneyimi çok önemli konulardan ve Microsoft Design konsepti adını verdiğimi ikonik arayüz konseptimiz bunu kolay bir şekilde kullanıcıya sunmamız için oluşturuldu. Bu konsepte uyabilmemiz için, dikkat etmemiz gereken bazı noktalar mevcut. Bu bilgileri detaylı olarak http://design.windows.com/ adresinden bulabilirsiniz.

 

Bu yazımızda unit yapısından bahsedeceğiz.

 

5x5px'lik birime "sub-unit" adını veriyoruz. 20x20px’lik birmimiz de unit adını alıyor. Bunu sıkça şablonlarımızda kullanacağız.

 

 

Örneğin bir uygulamada içeriğin sola olan hizası sola 6 unit (120px) ve yukarıya olan hizası 7 unit(140px) şeklindedir.

 

Uygulamanın başlığı da aşağıda belirtildiği gibi üst tarafa 5unit(100px)e göre hizalandırılmalıdır.

 

Uygulama içerisinde bulunan içeriklerin hizalandırılması da yine aynı şekilde bu kurallara tabidir.

 

Aslında bu kuralların olmasının sebebi, tasarım konusunda zorluk çeken yazılım geliştiriciler için bir yardımcı kaynak olması. Bu sayede bu kurallara uyarak uygulama geliştiren bir yazılım geliştiricinin elinde kullanıcının rahatsız olmayacağı ve tasarım silüeti olarak kendisini rahat hissedeceği bir uygulamaya sahip olması.

 

Bu tasarım konsepti yazılım geliştiricileri sadece bu kalıplarla kısıtlamıyor, bunun haricinde kreatif tasarımlarınız ve konseptleriniz varsa bunları da projenize rahatlıkla uygulayabilirsiniz.

 

Daha detaylı bilgi için aşağıdaki kaynakları inceleyebilirsiniz.

http://msdn.microsoft.com/en-us/library/windows/apps/hh872191.aspx

Navigation design for Windows Store apps

 

Beni https://twitter.com/ikivanc dan takip edebilir ve sorularınızı buradan sorabilirsiniz.

İyi çalışmalar.

Proje içerisinde, rastgele eklediğimiz GridView, içerisine verileri bind ettikten sonra aşağıdaki gibi görünüme sahip oldu

 

 

MainPage.xaml içerisinde GridView yapısı aşağıdaki yapıdadır,

 

<GridView x:Name="grdViewPhotos" HorizontalAlignment="Left" 

Margin="168,131,0,0" VerticalAlignment="Top" Width="860" Height="479" 

ItemTemplate="{StaticResource DataTemplatePhoto}"/>    

 

Aşağıdaki şekilde değiştirererk sayfanın genişliğine ve yapısına göre boyutlanmasını sağlayacağız.

 

<GridView x:Name="grdViewPhotos" Margin="0,140,0,0" 

ItemTemplate="{StaticResource DataTemplatePhoto}"/>

 

 

Tasarım ekranında yukarıdaki gibi görünecektir.

Çalıştırdığımız zaman da proje aşağıdaki şekilde görünecektir.

 

 

Bu şekilde yaptığımız değişiklikler farklı ekran çözünürlüklerinde de ekran büyüklüğünü göre farklı davranacak tıpkı bizim Başlangıç ekranındaki gibi adaptif bir yapıda davranacaktır.

 

 

1366x768'de de esnek bir şekilde aşağıdaki şekilde görünecek.

 

 

Daha fazla detaylı bilgi için:

Adding ListView and GridView controls

How to Add a grid view

XAML ListView and GridView essentials sample

 

Beni https://twitter.com/ikivanc dan takip edebilir ve sorularınızı buradan sorabilirsiniz.

İyi çalışmalar.

Bir önceki yazımızda custom class'a sahip bir listenin bind edildiğinde elementimize nasıl yansıdığını gördük. Bu durum, GridView, ListView, FlipView'de de aynı şekilde karşımıza çıkacaktır.

 

 

Bunu editleyebilmek için VS içerisinde GridView nesnemizi aşağıdaki şekilde sağ tıklayarak, "Edit Additional Templates" > "Edit Generated Items" > "Create Empty" diyerek ilgili elementimizin tek bir item'ını mofidifiye edeceğiz.

 

 

Karşımıza tanımlayacağımız tasarım stilini nerede saklayacağımız ve hangi ismi vereceğimiz çıkacak. Ben bunu App.xaml içerisinde evrensel olarak saklamak istediğimden dolayı "Application" ı seçiyorum. Bu sayede başka sayfalarda da aynı stil'i kullanabileceğim.

 

 

Daha sonra karşıma boş bir grid çıkacak ve ben bunun tasarımını aşağıdaki gibi yüksekliği 150, genişliği 300 px olacak şekilde düzenleyeceğim.

 

 

Ayrıca bu grid'in içerisine Image nesnesi atarak bunun source'unu benim nesnemden çekebilmesi için "{Binding Url}" şekilinde kullandım. Bu sayede bind edilmiş class'ın property içeriklerini gösterebileceğim.

Ayrıca Fotoğrafımın tam olarak ekranı doldurması için de properties kısmından Strech özelliğini "UniformToFill" olarak seçiyorum.

 

 

XAML'ın yapısı böylelikle aşağıdaki gibi oldu.

 

<DataTemplate x:Key="DataTemplatePhoto">
   <Grid Height="150" Width="300">
      <Image Source="{Binding Url}" Stretch="UniformToFill"/>
   </Grid>
</DataTemplate>

 

Bu değişikliği App.xaml içerisinde yaptığımız için MainPage.xaml tarafına geri dönebilmek için aşağıdaki gibi "Document Outline" içerisindeki küçük ikona "Return scope to [Page]" tıklayarak, geri dönebiliriz.

 

 

Geri dönüp çalıştırdıktan sonra görüntümüz aşağıdaki gibi olacaktır.

 

 

Daha fazla detaylı bilgi için:

Adding ListView and GridView controls

How to Add a grid view

XAML ListView and GridView essentials sample

 

Beni https://twitter.com/ikivanc dan takip edebilir ve sorularınızı buradan sorabilirsiniz.

İyi çalışmalar.

Bir önceki yazımızda, portfolio uygulamamız için gerekli olan yapıyı ve adımları paylaşmıştık. Şimdi de uygulamamız içerisine görebilmemiz için basit bir veri girişi yapalım.

 

Örnek fotoğrafları projem içerisine oluştuduğum "Images" klasörünün altında host edeceğim.

Onları da kopyalayıp bu klasör altına yapıştırdım.

 

 

Şimdilik temel olarak işimizi görecek olan bu verileri önümüzdeki günlerde update edeceğiz. Bu içeriği gösterebilmek için class'ımızın yapısı aşağıdaki gibi olacak.

 

IKPhoto.cs

Class’ımızın içeriği aşağıdaki olacak, IKPhoto.cs (10,23 kb) dosyasını indirerek inceleyebilirsiniz.





 

Bu verileri de uygulamamızda gösterebilmek için "GridView" componentimizi kullanacağız, buna grdViewPhotos ismini vereceğim.

grdViewPhotos componentimi MainPage.xaml içerisine aşağıdaki gibi ekledim.

 

 <GridView x:Name="grdViewPhotos" HorizontalAlignment="Left" 

Margin="168,131,0,0" VerticalAlignment="Top" Width="860" Height="479"/>

 

MainPage.xaml.cs içerisine, xaml tarafına eklediğimiz GridView elementimizin içeriğini, OnNavigatedTo event handler'ı altında, sayfaya navigate ediliği zaman aşağıdaki şekilde bind edelim.

 

    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }
 
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            IKPhoto data = new IKPhoto();
            grdPhotos.ItemsSource = data.getAllPhotos();
        }
    }

 

GridView gibi birden fazla item'ı içerisinde bulunduran bir yapıda olduğu için ItemSource'una bind ettiğimiz listeyi verdiğimiz zaman listemizi ekranda gösterecektir..

Projemizi çalıştırdığımız zaman aşağıdaki şekilde görünecektir.

 

 

Burada custom class yapımızı GridView içerisinde direkt olarak göstermeye çalıştığımız için sadece nesne olarak görebiliyoruz. Bir sonraki yazımızda da custom class'ımızın içeriğini GridView içerisinde nasıl göstebileceğimizi göreceğiz.

 

Daha fazla detaylı bilgi için:

Adding ListView and GridView controls

How to Add a grid view

XAML ListView and GridView essentials sample

 

Beni https://twitter.com/ikivanc dan takip edebilir ve sorularınızı buradan sorabilirsiniz.

İyi çalışmalar.

Projemizin içeriğini ve sayfa akışlarını belirledikten sonra da adım adım hayata geçirmeye başlayalım. Temel bir şekilde nasıl bir yapı oluşturabiliriz ona bir göz atalım:

Fotoğraflarımızın özelliklerini barındıracak ve onları temsil edecek olan IKPhoto isminde bir class oluşturarak bunun propertylerini ve metodlarını belirleyelim.

 

IKPhoto'nun property'leri fotoğrafçılık ile ilgili en önemli fotoğraf değerlerini içinde barındıran özellikleri olacak. ISO, Aperture (Diyafram Açıklığı) , ShutterSpeed (Enstantane), lens bilgileri ve diğer detay bilgileri bunun içerisinde tanımlayacağız.

 

Daha sonra da tüm fotoğrafları bize getirecek olan getAllPhotos() methodu ile şehir ismi parametresi ile bize ilgili şehirdeki fotoğrafları bize getiren getByCity() methodumuzu ekleyelim.

 

Class diyagramımız aşağıdaki gibi olacaktır

 

Yukarıdaki gördüğünüz class diagramına sahip olan ilgili class kodumuz aşağıdaki gibi olacak

 

IKPhoto.cs

 

Bir sonraki adımımızda da bu verileri popüle ederek projemizdeki MainPage içerisinde göstereceğiz.

 

Beni https://twitter.com/ikivanc dan takip edebilir ve sorularınızı buradan sorabilirsiniz.

 

İyi çalışmalar.

Windows 8 uygulama geliştirmeye ilgi duyup nereden başlayacağınızı bilemiyorsanız, aşağıdaki kaydettiğimiz 10 bölümlük eğitim serisi sizler için güzel bir başlangıç olacak.

Eğitim 1: Windows 8'de Uygulama Geliştirici Olmak

Eğitim 2: Windows 8'e Giriş

Eğitim 3: System Contracts

Eğitim 4: Tiles and Notifications

Eğitim 5: Sensors

 

 

Bu videoları da izledikten sonra bir sonraki aşama için, konu başlığına özel bilgi almak isterseniz aşağıdaki detay videolarımızı da izleyebilirsiniz.

 

MEA Win8 Champ Call - Bing Maps SDK 

MEA Win8 Champ Call - Blend & Animations

MEA Win8 Champ Call - Background Tasks

MEA Win8 Champ Call - Microsoft Design Style

MEA Win8 Champ Call - Azure Mobile Services

 

Kolay gelsin, iyi çalışmalar

 

Eğer sorularınız varsa beni http://www.twitter.com/ikivanc dan takip edebilir ve buradan sorularınızı sorabilirsiniz.

 

İyi çalışmalar.

Bir önceki püf noktamızda da belirttiğimiz gibi kağıt üzerinde Mock-Up / WireFrame Sketch'lerinin hazırlanması projenin taslağını çıkarmak için önemli adımlardan birisi. Bu taslağı çıkarttıktan sonra, bir sonraki adım da projedeki diğer birimlerin, proje analizinden sonra iş akışları ve navigationlar hakkında bilgi sahibi olmalarıdır.
 
Özellikle çok sayıda üyesi olan ekibinizin diğer üyelerinin bilgi almaları veya başka bir topluluk karşısında proje fikrinizin sunumunu yapmak istediğinizde, çıkarttığınız bu çizim/taslakları biraz daha somutlaştırmanız ve detaylandırmanız gerekecektir. Bu işlemleri de gerçekleştirecek pek çok başarılı ürünler bulunmaktadır. Bu araçları işletim sisteminize indirerek kullanabileceğiniz gibi online versiyonları olan araçları da browser aracılığı ile kullanabilirsiniz.

Bu yazıda bahsedeceğim araç ise özellikle Windows 8 ve Windows Phone 8 uygulamalar için çok güzel bir kaynak; PowerPoint 2013 eklentisi.

Visual Studio 2012 'yi kurduktan sonra PowerPoint 2013'e çok güzel bu özellik ekleniyor "StoryBoarding".

 

 

 

StoryBoarding sayesinde uygulamanızın yaklaşık olarak görünüşünü senaryo bazlı adım adım taslak üzerinde görebiliyor olmanız.

 

 

Özellikle bu dökümanı projenizde yer alan iş analistleri ve UX designer'lar tasarlıyarak ekibin diğer üyeleri ile projenin gidişini paylaşabilirler. Bende bu örnekte hazırlayacak olduğumuz Photo Portfolio uygulamasının temel storyboarding işlemlerini gerçekleştirdim. Tekrardan bu konuya önümüzdeki günlerde UX kapsamında çok daha detaylı ve derinlemesine inceleyeceğiz.

 

Yukarıdaki örnek storyboard'ı aşağıdaki powerpoint dosyasını indirerek göz atabilirsiniz.

IKPhotoApp_Storyboard.pptx (377,36 kb)

Diğer web projeleriniz için de aşağıda bulunan araçları inceleyebilirsiniz. 

http://webdesignledger.com/tools/10-excellent-tools-for-creating-web-design-wireframes 

 

Beni https://twitter.com/ikivanc dan takip edebilir ve sorularınızı buradan sorabilirsiniz. 

İyi çalışmalar.

Bir uygulama geliştirmeye başlamadan önce en önemli aşama analiz kısmıdır. Analizin ardından, gereksinimlerin belirlenmesi ve proje kapsamının netleştirilmesinden sonra, proje fikrinin uygulama üzerinde somutlaştırdığımız, iş akışları belirdiğimiz aşama: Wireframe Sketch'lerinin oluşturulmasıdır.

 

 

Bu püf noktası serimizde amacımız, Windows8 üzerinde sıfırdan başlayarak uzun zamandır aklımda olan bir fotoğraf portfolyo uygulamasını hep birlikte yapmak. Yapacağımız projede hobi amaçlı çektiğim fotoğrafları yayınlayacağım. Bunu bir template olarak belirleyerek ilerleyen günlerde uygulama üzerinde güzel sürprizlerim de olacak. Uygulama sayesinde de ince detaylar ve UX konularına değiniyor olacağız.

 

Bu yazımızda uygulamamıza ait wireframe çizimi nasıl olacak onu göreceğiz.

 

Bu örneğimizde sadece high-level olarak değindiğim wireframe sketchler konusunda, önümüzdeki günlerde ayrı bi yazı dizisi olarak başlatacağım.

 

Şimdi bizim fotoğraf portfoliosu için sahip olacağımız wireframe genel görünümü aşağıdaki gibi olacak.

 

 

 

3 temel sayfası olan ve hiyerarşik olarak 3 aşamaya sahip olacak bir uygulama olacak.

 

MainPage.xaml

MainPage.xaml projemizin anasayfası olacak ve ilgili gruplar altında detayları görebileceğiz, Bu sayfadan hem group sayfasına hem de detay sayfasına linkler olacak.

Bu sayfa içerisine pek çok özellikler ekleyeceğiz, Semantic Zoom, Application bar, system contractları(search,share ve settings gibi)... İstediğimiz takdirde de gruplama kriterini değiştirebileceğiz.

 

groupPage.xaml

Bu sayfamızda proje içerisinde grupladığımız içeriklere grup bazında erişerek içeriklerini görebileceğiz. Bu ilgili içeriklerin detaylarına yine tıklayarak gidebileceğiz.

 

detailPage.xaml

Detay sayfasında seçtiğimiz fotoğrafın büyük halini görebilecek, ilgili fotoğraf açıklamaları ve değerlerine erişebileceğiz. Ayrıca burada Fullview settings'i olacak. Fotoğraf'a ait tüm detaylarla birlikte bing maps üzerinde nerede çekildiğini de pinleyebileceğiz.

 

Uygulamanın sistem charms içerisinde sahip olacağı özellikleri de aşağıdaki gibi olacaktır.

 

Settings

Burada uygulamaya ait özelliklerin bulunacak ve kullanıcılar bu özellikleri isteklerine göre değiştirebilecekler; arkaplan rengi, uygulamanın background'da çalışıp çalışmaması, lokasyonu kullanıp kullanmaması gibi özellikleri yer alacak.

 

Search

Fotoğrafın başlık veya içeriğinde arama yaparak ilgili fotoğraf sonuçlarını elde edeceğiz. Bu filtrelenen sonuçlara da tıklayarak yine aynı şekilde fotoğraf detaylarını görebileceğiz.

 

Share

Bu paylaşma özelliği ile, seçilen fotoğraf detayını e-posta veya sosyal ağlarda paylaşmak için uygulamamıza share contract'ı ekleyeceğiz.

 

 

Aşağıda da alanında çok güzel WireFrame çizimleri mevcut, bu çizimlere de bakarak sizin çizeceğiniz fikirler için ilham alabilirsiniz.

http://webdesignledger.com/inspiration/inspiring-ui-wireframe-sketches

http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-and-mockups

 

Beni https://twitter.com/ikivanc dan takip edebilir ve sorularınızı buradan sorabilirsiniz. 

 

İyi çalışmalar.