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

Arşiv

Etiketlenen yazılar source

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.

Windows 10 UWP uygulamasında resimleri yuvarlak göstermek

02 March 2016 1 yorum

Son yıllarda özellikle mobil uygulamalarda avatar dediğimiz stilde resimleri yuvarlak göstermek sıklıkla kullanılır oldu.

Bunu gerçekleştirebilmek için resimleri yuvarlak kaydetmeye gerek yok.

Bu makalede Windows 10 UWP projesinde resimleri nasıl yuvarlak gösterebileceğimizi inceleyeceğiz.

Önce bir Blank App (Universal Windows) projesi oluşturalım;

Projenin Assets dizinine yuvarlak göstermek istediğimiz resmi ekleyelim, bu makalede ben Bora Kaşmer‘in aşağıdaki resmini ekliyorum;

MainPage.xaml dosyasını açalım ve kodları aşağıdaki şekilde güncelleyelim;

<Page
	x:Class="YuvarlakAvatarResim.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:YuvarlakAvatarResim">

	<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
		<Image Source="/Assets/bora.jpg" Width="250" Height="250" />
	</Grid>

</Page>

Böylece ekrana bir Image nesnesi ekledik ve içerisinde Bora Kaşmer‘in resmini aşağıdaki gibi gösterdik;

Eğer bu resmi kare değil, yuvarlak göstermek istiyorsak, Grid nesnesinin içindeki Image nesnesini Ellipse nesnesi ile değiştirip, Fill özelliğine ImageBrush nesnesi ekliyoruz;

<Page
	x:Class="YuvarlakAvatarResim.MainPage"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:local="using:YuvarlakAvatarResim">

	<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
		<Ellipse Width="250" Height="250">
			<Ellipse.Fill>
				<ImageBrush ImageSource="/Assets/bora.jpg" />
			</Ellipse.Fill>
		</Ellipse>
	</Grid>

</Page>

Böylece ekranımız aşağıdaki şekilde yuvarlak resim ile gözükür hale geliyor;

C# İsimsiz Tipler – Anonymous Types

21 January 2010 2 yorum

Sadece bir method içerisinde kullanacağınız basit class‘lara kaç defa ihtiyaç duydunuz? Böyle bir class’a her ihtiyaç duyduğunuzda yapmanız gereken, yeni bir class oluşturup, bütün tanımlama kodlarını (private alanlar, public alanlar, vs.) yazmaktır.

C# dili, İsimsiz Tip (Anonymous Type) tanımlamaya izin veriyor. Üstelik, private ve public öğelerin oluşturulmasını ve yönetilmesini C# dilinin kendisi üstleniyor.

public class HataLogla()
{
	var Hata = new { Mesaj = "Hata Mesajının Kendisi", Tarih = DateTime.Now, Yer = "XClass.YMethod" };
	var Kullanici = new { Id = 42, AdSoyad = "Engin Polat", Yonetici = "Ali Veli" };

	string Loglanacak = string.Format("Hata Mesajı: {0}\nTarih: {1} {2}\nHatanın Oluştuğu Yer: {3}\n\nKullanıcıId: {4}\nKullanıcı Adı: {5}\nYöneticisi: {6}", Hata.Mesaj, Hata.ToShortDateString(), Hata.Tarih.ToLongTimeString(), Hata.Yer, Kullanici.Id, Kullanici.AdSoyad, Kullanici.Yonetici);

	File.WriteAllText(Loglanacak, @"C:\Log\Log.txt");

	MessageBox.Show(Hata.Mesaj, Hata.Tarih);
}

Yukarıdaki kodda yer alan Hata ve Kullanici değişkenlerinin tipleri, derleme zamanında derleyici tarafından otomatik oluşturulur. Eğer method‘un içerisine aşağıdaki kodları eklersek;

MessageBox.Show("Hata değişkeninin tipi : " + Hata.GetType().ToString());
MessageBox.Show("Kullanici değişkeninin tipi : " + Kullanici.GetType().ToString());

Mesaj kutularında şu değerleri görürüz;

Hata değişkeninin tipi : <>f_AnonymousType0’3[System.String,System.DateTime,System.String]
Kullanici değişkeninin tipi : <>f_AnonymousType0’3[System.Int32,System.String,System.String]

Farkettiğiniz gibi, böyle bir tip oluşturmaya çalışırsak, derleme zamanında hata alırız, ama C# derleyicisi bizim için bu tipleri oluşturuyor.

Değişkenin tipini veremeyeceğimiz için, C# diline var anahtar kelimesi eklenmiştir.

var anahtar kelimesi sayesinde, değişkenin tipi atandığı değerden otomatik olarak çözümleniyor.

İsimsiz Tipler (Anonymous Types) IDisposable interface’ini uygulamadığı için, Disposable olamazlar.

Eğer yukarıdaki örneği geleneksel kodlama teknikleri ile yazacak olsaydık;

public class HataBilgi
{
	private string _Mesaj = string.Empty;
	private DateTime _Tarih = DateTime.Now;
	private string _Yer = string.Empty;

	public string Mesaj
	{
		get
		{
			return _Mesaj;
		}
		set
		{
			_Mesaj = value;
		}
	}

	public DateTime Tarih
	{
		get
		{
			return _Tarih;
		}
		set
		{
			_Tarih = value;
		}
	}

	public string Yer
	{
		get
		{
			return _Yer;
		}
		set
		{
			_Yer = value;
		}
	}

	public HataBilgi(string Mesaj, DateTime Tarih, string Yer)
	{
		this.Mesaj = Mesaj;
		this.Tarih = Tarih;
		this.Yer = Yer;
	}
}

public class KullaniciBilgi
{
	private int _Id = 0;
	private string _AdSoyad = string.Empty;
	private string _Yonetici = string.Empty;

	public int Id
	{
		get
		{
			return _Id;
		}
		set
		{
			_Id = value;
		}
	}

	public string AdSoyad
	{
		get
		{
			return _AdSoyad;
		}
		set
		{
			_AdSoyad = value;
		}
	}

	public string Yonetici
	{
		get
		{
			return _Yonetici;
		}
		set
		{
			_Yonetici = value;
		}
	}

	public KullaniciBilgi(int Id, string AdSoyad, string Yonetici)
	{
		this.Id = Id;
		this.AdSoyad = AdSoyad;
		this.Yonetici = Yonetici;
	}
}

public class HataLoglama
{
	HataBilgi Hata = new HataBilgi("Hata Mesajının Kendisi", DateTime.Now, "XClass.YMethod");
	KullaniciBilgi Kullanici = new KullaniciBilgi(42, "Engin Polat", "Ali Veli");

	string Loglanacak = string.Format("Hata Mesajı: {0}\nTarih: {1} {2}\nHatanın Oluştuğu Yer: {3}\n\nKullanıcıId: {4}\nKullanıcı Adı: {5}\nYöneticisi: {6}", Hata.Mesaj, Hata.ToShortDateString(), Hata.Tarih.ToLongTimeString(), Hata.Yer, Kullanici.Id, Kullanici.AdSoyad, Kullanici.Yonetici);

	File.WriteAllText(Loglanacak, @"C:\Log\Log.txt");

	MessageBox.Show(Hata.Mesaj, Hata.Tarih);
}

İsimsiz Tip yeteneklerini kullanarak yazdığımızda ise;

public class HataLogla()
{
	var Hata = new { Mesaj = "Hata Mesajının Kendisi", Tarih = DateTime.Now, Yer = "XClass.YMethod" };
	var Kullanici = new { Id = 42, AdSoyad = "Engin Polat", Yonetici = "Ali Veli" };

	string Loglanacak = string.Format("Hata Mesajı: {0}\nTarih: {1} {2}\nHatanın Oluştuğu Yer: {3}\n\nKullanıcıId: {4}\nKullanıcı Adı: {5}\nYöneticisi: {6}", Hata.Mesaj, Hata.ToShortDateString(), Hata.Tarih.ToLongTimeString(), Hata.Yer, Kullanici.Id, Kullanici.AdSoyad, Kullanici.Yonetici);

	File.WriteAllText(Loglanacak, @"C:\Log\Log.txt");

	MessageBox.Show(Hata.Mesaj, Hata.Tarih);
}

Aradaki fark açıkça ortada!

C# 3.0 Object Initializer Özelliği

21 January 2010 1 yorum

C# 3.0 object initialize etmek için kodda kısaltma sağlayacak bir yenilik sunuyor. Hemen hergün aşağıdaki gibi kod yazmamız gerekmez mi?

Personel UygulamaGelistirici = new Personel();
UygulamaGelistirici.Id = 42;
UygulamaGelistirici.AdSoyad = "Engin Polat";
UygulamaGelistirici.Birim = "NTV - Yeni Medya";

Personel sınıfından yeni bir örnek oluşturduktan sonra, sınıfın özelliklerinden ihtiyacımız olanlara atamalar yapmaya başlarız.

Eğer Personel sınıfının constructor‘ı olsaydı ve bu özelliklerin atamalarını yapsaydı, tek bir satırda, hem Personel sınıfının yeni bir örneğini UygulamaGelistirici değişkenine oluşturmuş, hem de bazı özelliklerin değerlerini atamış olabilirdik.

Fakat, Personel sınıfının constructor‘ını yazamadığımız durumlarda veya constructor‘da parametreler ile almak için çok fazla özellik olduğu durumlarda bu yöntemi kullanamayız.

C# 3.0 ile birlikte Object Initializer denilen yeni bir kodlama tekniği tanıtıldı.

Hemen yukarıdaki örneği bu teknik ile yazalım;

Personel UygulamaGelistirici = new Personel() { Id = 42, AdSoyad = "Engin Polat", Birim = "NTV - Yeni Medya" };

Gördüğünüz gibi, kodlama bizim için kolaylaşıyor.

Object Initializer içerisinde sadece özelliklere atama yapabiliyoruz, method çağrımı vs. yapılamıyor.

Eğer sınıfın özellikleri başka sınıflardan örnekler istiyorsa, Object Initializer nasıl yazabiliriz? Aşağıdaki gibi yazabiliriz;

VeritabaniSorgulayici dbSorgu = new VeritabaniSorgulayici() {
	Connection = new SqlConnection("..ConnectionString.."),
	Command = new SqlCommand("..Sorgu..")
};