Güncel
Loading...

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>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Video Back Login</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Bootstrap Core CSS -->
    <link href="./bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- MetisMenu CSS -->
    <link href="./bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
    <!-- Custom Fonts -->
    <link href="./bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">


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

<body>
    <form id="form1" runat="server">
        <div class="container">

            <div class="row" style="margin-top: 200px;">
                <div class="col-md-4 col-md-offset-4">
                    <div class="login-panel panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">Giriş</h3>
                        </div>
                        <div class="panel-body">

                            <fieldset>
                                <div class="form-group">
                                    <asp:TextBox ID="UserName" runat="server" class="form-control" placeholder="E-mail" name="email" type="email"></asp:TextBox>
                                </div>
                                <div class="form-group">
                                    <asp:TextBox runat="server" ID="Password" class="form-control" placeholder="Şifre" name="şire" type="password" value=""></asp:TextBox>
                                </div>
                                <div class="checkbox">
                                    <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>
                    </div>
                </div>
            </div>
        </div>

        <!-- jQuery -->
        <script src="./bower_components/jquery/dist/jquery.min.js"></script>

        <!-- Bootstrap Core JavaScript -->
        <script src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

        <!-- Metis Menu Plugin JavaScript -->
        <script src="./bower_components/metisMenu/dist/metisMenu.min.js"></script>

    </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>
    <form id="form1" runat="server">
        <div class="container">
            <video onended="repeatvideo();" poster="/images/flowers.jpg" id="bgvid" muted>

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

            <div class="row" style="margin-top: 200px;">
                <div class="col-md-4 col-md-offset-4">
                    <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.


<script>
        $(document).ready(function () {
            var myVideo = document.getElementById('bgvid');
            myVideo.load();
            myVideo.play();
        });
    </script>

    <script type="text/javascript">
        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 poster="./images/back2.jpg" id="bgvid" autoplay loop muted>
                <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
                <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
       </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 :)


Share on Google Plus

About Sema KUDU

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment

0 yorum :

Yorum Gönder

Türkiye yenilmez,Millet Eğilmez!