Height | Engin Polat\'ın Windows 8 , Windows Phone 8 ve C# içerikli programcılık sitesi

Arşiv

Etiketlenen yazılar height

HTML5 video element ile sayfanın arkaplanında video oynatmak

02 April 2016 Yorum yapılmamış

Son zamanlarda internette çeşitli sitelerin sayfalarının arkaplanlarını video haline getirdiklerini görüyoruz, örneğin;

Bu makalede bir web sayfasının arkaplanını video haline getireceğiz. Öncelikle yeni bir html sayfası oluşturalım;

Sayfanın <body></body> taglarının arasına video elementimizi ekleyelim;

Artık sayfada video elementimiz gözükecek, hatta video sonuna kadar oynadıktan sonra başa dönecek ve sessiz başlatılacak, fakat istediğimiz gibi sayfanın arkaplanını henüz kaplamıyor. <head></head> elementi içerisine <style></style> elementi ekleyelim ve aşağıdaki stili tanımlayalım;

Son olarak <head></head> elementi içerisine <script></script> elementi aracılığıyla aşağıdaki javascript kodunu ekleyelim ve böylece tarayıcının boyutlandırıldığı durumlarda sayfanın arkaplan video’sunu sayfanın içine tam sığacak şekilde boyutlandıralım;

Bu durumda sayfamızın arkaplanında tam ekran video oynayacak, istersek sayfaya butonlar, menüler, başlıklar, yazı alanları, linkler ekleyebileceğiz;

HTML5 video element özellikleri

25 March 2016 Yorum yapılmamış

Web sayfalarında multimedia oynatmak için HTML5 ile yeni birkaç element ve Javascript API hayatımıza girdi.

Bu makalede HTML5 ile yeni gelen <video> element’ini inceleyeceğiz. Hemen yeni bir html sayfası oluşturalım ve video elementini incelemeye başlayalım.

Visual Studio Code editörünü açalım ve istediğimiz dizinde video.html dosyasını oluşturalım, içerisine en temel HTML5 kodlarını aşağıdaki gibi ekleyelim;

Öncelikle <body></body> tagları arasına yeni bir <video></video> element ekliyoruz. Sayfayı kaydedip tarayıcıda açtığımızda ekranda herhangi bir şey görmüyoruz, çünkü hiçbir özellik verilmemiş olan video elementi ekranda gözükmez.

Basitçe video elementine src attribute tanımlayarak sayfada video‘nun görüntülenmesini sağlayabiliriz, örneğin;

Sayfayı tarayıcıda açtığımız zaman, video‘nun orjinal boyutlarında siyah bir dörtgen görmemiz lazım;

Fakat bu noktada video‘yu başlatmak, durdurmak, ses seviyesini değiştirmek gibi şeyleri yapamıyoruz. Eğer video elementine controls attribute ekleyecek olursak, video‘yu başlatabileceğimiz, durdurabileceğimiz, ilerlemesini takip edebileceğimiz çeşitli butonlar video’nun altına eklenecek, örneğin;

Farklı tarayıcılar farklı video formatlarını desteklerler, yukarıdaki örnekte olduğu gibi eğer sadece mp4 formatını kullanacak olursak bazı kullanıcılar video’yu izleyemeyecekler.

Sayfada video elementinin src attribute’ünü kullanmak yerine, source elementinden birkaç tane kullanabiliriz, böylece birden fazla formatta aynı video’yu video elementine ekleyebiliriz, örneğin;

Artık mp4, webm ve ogg formatlarından birini destekleyen tüm tarayıcılarda videomuz oynatılabilecek. video element içerisine istediğimiz kadar format için istediğimiz kadar source element ekleyebiliriz.

Eğer video‘nun orjinal boyutlarında değil, bizim istediğimiz boyutlarda ekranda görüntülenmesini istiyorsak, yapmamız gereken video elementine width ve height özelliklerini vermek olacak, örneğin;

Eğer video’nun orjinal boyutları ile orantılı boyut belirlersek, video ilgili alanda gösterilir, eğer orantılı boyut belirlemezsek, video ilgili alanın ortasına gelecek şekilde boyutlandırılır, soldan-sağdan veya üstten-alttan kalan boşluklar siyah renk ile doldurulur.

Birçok tarayıcı, sayfadaki video elementinde bulunan video’yu önceden yüklemeye başlar, böylece video oynatılacağı zaman kullanıcı bir miktar yüklenene kadar beklemek zorunda kalmaz.

İstersek bu özelliğin farklı şekilde davranmasını video elementinin preload özelliğine vereceğimiz değer ile sağlayabiliriz.

preload=”none”

Bu durumda, video başlatılana kadar ekranda hiç yer kaplamayacak, siyah arkaplan gözükmeyecek, video uzunluğu dakika/saniye cinsinden bilinmeyecek. Video başlatıldığında video’nun boyutu bulunacak ve boyutu kadar yer kaplamaya başlayacak.

Mobil cihazlarda görüntülenecek video’lar için tavsiye edilen özellik budur. CSS ile video’nun görüntüleneceği alana stil verip, video başlatılana kadar hiç yüklenmemesi sağlanabilir.

preload=”metadata”

Bu durumda, video’nun ne kadar büyük olduğu bilgisi otomatik olarak okunur ve gerekli alanı kaplamaya başlar. İstersek CSS ile stil verebiliriz, vermesek bile en azından video alanı, dakika/saniye cinsinden uzunluğu sayfada gözükür.

İstersek autoplay özelliğini kullanarak, video’nun sayfa açıldığında otomatik olarak oynatılmaya başlanmasını da sağlayabiliriz, örneğin;

Ayrıca loop özelliğini kullanarak, video’nun sonuna gelindiğinde otomatik olarak başa dönerek tekrar oynatılmasını sağlayabiliriz, örneğin;

Eğer video alanının video oynatılana kadar siyah kalmasını istemiyorsak, poster özelliğini kullanabiliriz, örneğin;

Eğer video’nun sessiz oynatılmasını istiyorsak, muted özelliğini kullanabiliriz, örneğin;

Böylece, kullanıcı video’nun sesini açmadıkça, video sessiz olarak oynatılacaktır.

Unity3D projesinde Terrain ve Tree kullanarak sahne oluşturmak

03 March 2016 Yorum yapılmamış

Bu makaleyi okumadan önce Unity3D Kategorisindeki diğer makalelerimi okumanızı tavsiye ederim.

Bu makale sonunda oyun sahnenizde istediğiniz yeryüzü şekilleri ve ağaçlar oluşacak.

Öncelikle Unity3D‘yi açarak bir oyun projesi oluşturuyoruz;

GameObject menüsü altından 3D Object / Terrain menüsüne tıklıyor ve sahneye bir Terrain nesnesi ekliyoruz.

Sahneye eklediğimiz Terrain nesnesinin üzerine ağaçlar koymak istiyorsak, öncelikle projeye Tree Asset eklemeliyiz. Bunun için Assets menüsü altından Import Package / Environment menüsüne tıklamalıyız.

Açılan ekrandaki Import butonuna tıklıyoruz.

Böylece oyun sahnesine bir Terrain nesnesi ve Terrain üzerine yerleştireceğimiz Tree Asset‘lerini eklemiş olduk.

Inspector panelinde bulunan Add Tree butonuna tıklıyoruz.

Açılan ekranda istediğimiz Tree Asset‘lerden birini seçiyoruz;

Artık Terrain üzerine ekleyeceğimiz ağaçların farklı boylara sahip olması için Tree Height özelliğindeki aralığı istediğimiz gibi belirleyebilir, Mass Place Trees butonuna tıklayarak, açılan ekranda Terrain üzerine kaç ağaç eklemek istediğimizi belirleyebiliriz.

Bu makalede ben 1.000 ağaç ekleyeceğim.

Ağaçlar eklendikten sonra sahnemiz aşağıdaki gibi gözüküyor olmalı.

Inspector panelinde yeralan Raise/Lower Terrain butonuna tıklayarak Terrain üzerinde yükseltiler ve alçaltılar oluşturabiliriz. İstediğimiz şekli seçip, Settings altında yeralan Brush Size ile büyüklüğü belirleyip Terrain üzerinde dağlar ve vadiler oluşturabiliriz.

Eğer yakından bakacak olursak, Terrain üzerine eklediğimiz ağaçların dağların ve vadilerin yamaçlarında da yer alabildiğini görebiliriz.

Böylece istediğimiz kadar gerçekçi bir oyun alanı oluşturabilmemiz mümkün.

Universal App ekran çözünürlüğünü bulmak

05 July 2014 Yorum yapılmamış

Windows Store ve Windows Phone için tek bir uygulama geliştiriyorsunuz (Universal App) ve uygulamanın çalıştığı cihazın ekran çözünürlüğünü bulmanız gerekiyor.

Öncelikle Windows.Graphics.Display namespace‘inde yeralan DisplayInformation sınıfının RawPixelsPerViewPixel property‘sinin değerini okuyalım;

var rawPixelPerView = DisplayInformation.GetForCurrentView().RawPixelsPerViewPixel;

Şimdi ekran genişliği ve yüksekliği bilgilerini okuyarak yukarıda bulduğumuz değişken ile çarparak ekran çözünürlüğünü hesaplayabiliriz;

var width = Window.Current.Bounds.Width * rawPixelPerView;
var height = Window.Current.Bounds.Height * rawPixelPerView;

Hesapladığımız ekran çözünürlüğünü bir MessageDialog aracılığı ile kullanıcıya göstermek için ShowAsync() methodunu kullanıyoruz;

var dialog = new MessageDialog(string.Format("Çözünürlük: {0} * {1}", width, height);
dialog.ShowAsync();

Windows Phone 8 ile telefonun operatörünü bulma

27 July 2013 Yorum yapılmamış

Windows Phone 8 için geliştirdiğiniz uygulamanın çalıştığı telefonun bağlı olduğu operatör‘ü bulmak isteyebilirsiniz.

Özellikle operatör‘e özel seçenekler çıkartmak veya kısıtlamalar getirmek için bunu yapmaya ihtiyacınız olabilir.

Windows Phone 8 SDK içerisinde yer alan DeviceNetworkInformation sınıfında Mobil Operator bilgisini kolaylıkla almanızı sağlayan static tanımlı CellularMobileOperator özelliği mevcuttur.

Hemen yeni bir proje oluşturarak kullanımını inceleyelim;

MainPage.xaml dosyasını açarak sayfanın tasarımını değiştirelim. StackPanel içerisine bir Button nesnesi ekleyelim, Content özelliğine Tıkla, Background özelliğine StaticResource PhoneAccentBrush, Height özelliğine 120 değerlerini verelim;

<phone:PhoneApplicationPage
	x:Class="OperatorSample.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
	xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	FontFamily="{StaticResource PhoneFontFamilyNormal}"
	FontSize="{StaticResource PhoneFontSizeNormal}"
	Foreground="{StaticResource PhoneForegroundBrush}"
	SupportedOrientations="Portrait" Orientation="Portrait"
	shell:SystemTray.IsVisible="True">

	<StackPanel>
		<StackPanel x:Name="TitlePanel" Margin="12,17,0,28">
			<TextBlock Text="http://www.enginpolat.com" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
			<TextBlock Text="operatör" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
		</StackPanel>

		<StackPanel Margin="12,0,12,0">
			<Button Content="Tıkla" Background="{StaticResource PhoneAccentBrush}" Height="120" Click="Button_OnClick" />
		</StackPanel>
	</StackPanel>

</phone:PhoneApplicationPage>

Background özelliğine StaticResource listesinden PhoneAccentBrush değerini vererek, buton’un arkarengini kullanıcının tercih ettiği tema rengine ayarlamış olduk;

Button‘a tıklandığında Button_OnClick() method’u tetiklenecek;

private void Button_OnClick(object sender, RoutedEventArgs e)
{
	var operatorAdi = DeviceNetworkInformation.CellularMobileOperator;

	MessageBox.Show(operatorAdi);
}

Butona tıkladığımızda ekrana, uygulamanın kurulu olduğu telefonun mobil operatörü gelmeli;