Video arkaplanlı Login sayfası Yapma .NET C#

Merhaba,

Bu yazımda özellikle sosyal medya sitelerinde favori olan video arka planlı Kulanıcı Girişi sayfası yapımından bahsedeceğiz.Ayrıca bu web sitemizde Bootstrap front-end frameworkunun da nasıl kullanıldığını göreceğiz.

Ben kodlarken büyük zevk aldım umarım siz de beğenirsiniz. Ve her zamanki gibi final projesini github hesabımda bulabilirsiniz. Yazının sonunda linki vereceğim.Ne yapacağımızı daha iyi anlamak için sayfayı okumadan önce benzer olan bu sayfaya bakabilirsiniz.

Öncelikle .NET C# ortamında boş bir proje oluşturalım.Aşagıdaki ekrandaki gibi:

Ve Bootstrap entegrasyonunu yapalım Bootstrap aslında sizin için önceden oluşturulmuş bir tasarım ve buton navbar panel gibi elementlerin kendine has bence güzel olan stileri var ve sizde bu componentleri kullanarak çok güzel tasarımlar elde etmiş oluyorsunuz.Bootstrap ile oluşturulmuş hazır temaların ,şablonların olduğunu da belirmek isterim.

Bootstrap front-end frameworkunu indrimek için bu linkten bilgi alabilirsiniz ve örneklere kullanımına erişebilirsiniz. İlerleye yazılarımda Bootstrap kullanımı ile daha detaylı yazılar yazmayı planlıyorum. Şimdilik bu yazıda ana temamız videolu background :)

Projemize bootstrap dosyalarını da ekledikten sonra (isterseniz benim sizler için hazırladığım github projesindeki " bower_components" klasorünü ve bower.json dosyasını projenize ekleyebilirsiniz.Bu yeterli olacaktır.)Ayrıca arka planda oynayacak Video ve Imajlar için images ve back_videos klasörünü projenize kopyalayabilirsiniz.

Şimdi Login adında bir WebForm oluşturalım ve istediğimiz video backgroundlu sayfayı kodlamaya çalışalım.Header tagında Bootstrapt için js ve css leri referans alalım aslında bunlar bizim login paneli stillleri için gerekli, video backgroundu ile alakalı değil.

<head>

<title>Video Back Login</title>

Şimdi body tagında html olarak kullanıcı emali ve şifresi için TextBox ve Giriş yap butonunu oluşturalım.

<body>

<h3 class="panel-title">Giriş</h3>

</div>

<asp:TextBox ID="UserName" runat="server" class="form-control" placeholder="E-mail" name="email" type="email"></asp:TextBox>

</div>

<asp:TextBox runat="server" ID="Password" class="form-control" placeholder="Şifre" name="şire" type="password" value=""></asp:TextBox>

</div>

<label>

<asp:CheckBox Text="Beni hatırla" ID="RememberMe" runat="server" />

</label>

</div>

<asp:Button ID="LoginButton" runat="server" Text="Giriş Yap" OnClick="LoginButton_Click" class="btn btn-lg btn-success btn-block"></asp:Button>

<asp:Label Style="color: red" runat="server" ID="lblAlert_Text"></asp:Label>

</fieldset>

</div>

</form>

</body>

Görüldüğü gibi bu kısımlar .Net ortamında alışık olduğumuz gibi bu componentleri bootstrap tasarımına bürüyeceğiz sadece, hemen .Cs kısmında basit bir Login kontrol koyalım ör: kullanıcı adı "sampleuser@hotmail.com" olan şifresi "2015" olan kişi siteye giriş yapabilsin , diğer durumlarda kullanıcılara hata dönelim.Login butonun click event 'ine yazacağımız kod parçası aşagıdaki ibi olacaktır.

protected void LoginButton_Click(object sender, EventArgs e)

{

bool IsValid = false;

if(UserName.Text.Count()>0 && Password.Text.Count()>0)

{

try

{

//Şifre kullanıcı adı kontrolü işlemleri...

if (UserName.Text == "sampleuser@hotmail.com" && Password.Text=="2015")

{

lblAlert_Text.Visible = false;

IsValid = true;

}

catch (Exception ex)

{

lblAlert_Text.Visible = true;

lblAlert_Text.Text = "Sistemde bir hata oluştu daha sonra tekrar deneyiniz.";

}

if (!IsValid)

{

lblAlert_Text.Visible = true;

lblAlert_Text.Text="Yanlış kullanıcı adı ve şifre.";

return;

}

else

Response.Redirect("~/Default.aspx");

}

else

{

lblAlert_Text.Visible = true;

lblAlert_Text.Text = "Kullanıcı adı ve şifre alanlarını doldurunuz.";

}

Projeyi bu haliyle çalışırdığımızda beyaz arkaplanlı bir sayfa göreceğiz.

90'lar pop gibisi yok , ilk sekmede görüldüğü gibi bu yazıyı yazarken İzel-Çelik-Ercan dinliyorum :D Her neyse konumuza dönecek olursak. Video back groundumuzu ekleme zamanımız geldi.

Bunun için head tagımıza bazı style 'lar ekleyeceğiz.

<style>

body {

margin: 0;

background: #000;

}

video {

position: fixed;

right: 0;

bottom: 0;

min-width: 100%;

min-height: 100%;

width: auto;

height: auto;

z-index: -100;

background: url('./images/flowers.jpg') no-repeat;

background-size: cover;

transition: 1s opacity;

}

.stopfade {

opacity: .5;

}

@media screen and (max-device-width: 800px) {

body {

background-image: url('./images/flowers.jpg');

}

#bgvid {

display: none;

}

</style>

HTML5 video elementini tam sayfaya yaymak ve yukseklik ve genişliğini ekrana göre responsible yapmak için .video class 'ını ekledik. Ayrıca 800px'den küçük ekranlar için video oynatmayacağız yani mobil deneyim için sadece arkada videodan alınmış bir resim olacak bu stilide @media screen ile başlayan class ile halletmiş oluyoruz. Bu arada şifre ve kullanıcı adı panelimizde responsive yani her ekrana göre otomaik boyutlanıyor bunu Bootstrap sağlıyor ayrı bir kod yazmıyoruz.

Şimdi body tagına video elementini ekleyelim.

body>

<%-- <source src="//inserthtml.com/demos/javascript/background-videos/flowers.webm" type="video/webm">

</video>

<div class="login-panel panel panel-default"> .....

İlk Login sayfası örneğinde video tekrarını manuel olarak yapacağız 2. örneğimizde ise HTML5 video elementinin loop özelliğini kullanacağız . Neden boyle yapıyoruz derseniz bazen arka planda oynattığımız videolar loop özelliği vermemize rağmen tekrar etmiyor ya da bazı browserlerde loop sorun çıkarabiliyor.Bu durumda videonuz bir kere oynayıp kapanıyor ,tekrar etmiyor.

Burada bu işlevi sağlayacak olan javascript metodumuz "repeatvideo()" bu javascripti ve videonun sayfa ilk açıldığında oynamasını sağlayacak scripti sayfanın head tagı'na eklemeliyiz.

$(document).ready(function () {

var myVideo = document.getElementById('bgvid');

myVideo.load();

myVideo.play();

});

</script>

function repeatvideo() {

var myVideo = document.getElementById('bgvid');

myVideo.load();

myVideo.play();

};

</script>

Video bittiğinde onvideoEnd olayı yani bizim videoyu tekrar yükle ve oynat scriptimiz çalışacak ve bu sayede video dönüye girmiş olacak.Fakat iyi bi video deneyimi için video başlangıcında fadein ve fadeout efektleri olmalı bence yoksa videonun tekrar başladığı belli oluyor.Sert bir geçiş var yani. İkinici türden yapacağımız Login2.aspx de ne demek istediğimi daha iyi anlayacaksınız.

Ve bir diğer konuda video tagının altında dikkat ederseniz bazı yorum satırları var Chrome browser localinizdeki videoları loop ile oynatmıyor çünkü güvenilir sunucu olarak kabul etmiyor bu gibi durumlarda işte manuel olarak anlattığımız gibi loop etmek zorunda kalıyorsunuz ya da videolarınız uzak bir sunucuda olmalı yorum satırlarında olduğu gibi.Bazen de Chorme browser ilk karede videoyu oynaırken bekliyor ve bunun için video elementimize videodan bir ekran görüntüsü olan poster elementini ekliyoruz.Manuel loop 'lu giriş sayfamızı oluşturduk.Doğru kullanıcı adı ve şifresi ile giriş yaptığımızda Merhaba yazısı yazan Default.aspx e yönleniyoruz yoksa altta uyarı alıyoruz.

Ve artık otomatik html5 konrolü özelliği ile loop yapalım fade efekti anlamak için başka bir video kullanalım.genel olarak senaryomuz aynı sadece video elementimizde bazı değişklikler var ve manuel loop için hazırladığımız scriptleri sayfamızdan kaldırmalıyız.Yeni video elementimiz aşagıdaki gibi olmalı.

</video>

Bu örnek projede Login2.aspx ,ilk anlattığımda Login.aspx idi.

Görüldüğü gibi video elemeninde "autoplay" " loop" ve "muted" özellikleri var.işte HTML5 bizim için scriptler olmadan istediğimiz işlevi gerçekleştirmemizi sağlıyor fakat dediğim gibi bazen sorunlar olunca manuel yapmak gerekebiliyor.

Son olarak Login3. aspx sayfamızda aynı senaryo ile video olmadan sayfayı tamamen kaplayabilen bir resmi background yapma işlevine bakalım bunun için body tagındaki video elementini kaldıralım, scriptlerimizi zaten kaldırmıştık. eklediğimiz style yi de kaldırıp yerine sadece şu stili ekleyelim ve Login3.aspx sayfamızı çalıştırıp sonucu görelim.

<style>

body {

background-image: url("http://i.ndtvimg.com/auto/makers/10/63/ferrari-458-italia-01.jpg");

background-color: #cccccc;

background-size: cover;

}

</style>

Umarım yararlı bir yazı olmuştur.Projenin final halini buradan indirebilirsiniz.

İyi mutlu 90'lar poplu günler :)

Author Description