HTML5 ile Arkaplanda Video!

Günümüzde birçok web tasarımında hareketli arkaplanlar kullanıldığını görüyoruz. Özellikle şeffaf bir perde ile kullanılan bu yapı günden güne popülerleşiyor.

HTML5‘in getirdiği yenilikler, hareketli arkaplanlar hazırlarken Flash’a muhtaç kalmamamıza sebep oluyor. Böylece sadece birkaç satır kod yazarak ilgi çekici ve hareketli arkaplanlar oluşturuyoruz.

Bu dersimizde HTML5′in video oynatıcısını biraz daha yakından tanıyoruz, beraberinde de manipüle ediyoruz. Örneği görüntüleyerek başlayabilirsiniz.

HTML5 ile tam ekran video arkaplan nasıl yapılır?

İlk olarak HTML5′in medya oynatıcılarını yakından tanımak isteyebilirsiniz. Aşağıdaki makaleler ilginizi çekecektir.

1. HTML5 Video Oynatıcı


2. HTML5 Müzik Oynatıcı

Eğer hazırsanız örneğimiz hakkında konuşmaya başlayabiliriz. Yapacağımız işlemi yüzeysel olarak belirleyelim.

İlk olarak tüm ekranı (body elemanını) kaplayacak bir video oluşturacağız. Bunu yapmak için CSS‘den yardım alıp video elemanını genişleteceğiz. Daha sonra bu video elemanını z-index ile hiyerarşik olarak en alta koyup üst kısmına web sayfamızın diğer öğelerini ekleyeceğiz.

Özetle body elemanına yazılmış bir background tanımlaması yerine body’nin bir adım üstüne koyulmuş ve büyütülmüş video elemanı sayesinde arkaplanımızı oluşturacağız. Şimdi bu anlatımı kodlarımız ile örneklendirelim.

HTML Kodları

İlk olarak videomuzu oluşturalım. Dropbox üzerinden MP4 uzantılı kısa bir video çağırıyoruz. Autoplay(sayfa açılınca otomatik oynat), loop (sürekli tekrar et) ve muted (sessiz oynat) gibi iç tanımlamalar da yapıyoruz.

<video autoplay loop muted>
 <source src="http://dl.dropboxusercontent.com/s/ldnrmjjtaf3gi66/Family-Guy.mp4" type="video/mp4">
</video>

Daha sonra içeriğimizi kodlarımıza ekleyelim.

<div class="icerik">
 <section>
 <h1>Full Arkaplan HTML5 Video</h1>
 <p>HTML5 Video Player ile tüm sayfayı kaplayacak video arkaplanlar oluşturabilirsiniz. Hem de dakikalar içerisinde!</p>
 </section>
</div>

CSS Kodları

En önemli kısım burası. İlk olarak HTML5 video oynatıcımızı geniş bir arkaplan yapısına çeviriyoruz.

video 
 position: fixed;
 right: 0;
 bottom: 0;
 min-width: 100%;
 min-height: 100%;
 width: auto;
 height: auto;
 z-index: -100;
 background-size: cover;

Şimdi de içeriğimiz için bir tanımlama yapalım.

.icerik 
 width: 30%;
 background: rgba(0,0,0,0.7);
 display: table;
 height: 100%;
 position: absolute;
 top: 0;
 bottom:0;
 left: 70%;
 text-align:center;


.icerik section
 display: table-cell;
 vertical-align: middle;
 color: #fff;


.icerik h1 
 font-weight:300;

Bu kadar.

Kapanış

Küçük bir ipucu ile makaleyi tamamlıyoruz. HTML5 ile oluşturduğunuz video arkaplanlar üzerine PNG formatında bol desenli ve fazla göz yormayan görseller atarsanız daha şık sonuçlar elde edebilirsiniz. Bilginize.

İyi çalışmalar.

HTML5 ile Arkaplanda Video!

Kod Yazmayı Öğrenmek

“Programcılık insana düşünmeyi öğretir. Bu yüzden bu ülkedeki herkesin öğrenmesi gerekir.” diyor Steve Jobs.

İlk adımlar her zaman zordur. Ancak bu sefer başarılı isimlerin ağzından programcılığın sanıldığı kadar zor olmadığını duyuyoruz. Microsoft’un kurucusu Bill Gates‘in, Facebook’un kurucusu Mark Zuckerberg‘in, ve Twitter’ın kurucusu Jack Dorsey‘nin programcılık geçmişi olması aşikar. Peki ya NBA oyuncusu Chris Bosh‘a ne demeli?

Programcılığa başlamayı düşünen ve rakamlarla oynamaktan keyif alan kişiler için paha biçilemez bir ilham kaynağı.

Kod Yazmayı Öğrenmek

Ders 1 : Bootstrap nedir?

Web tasarımını öğrenmek mi istiyorsunuz? CSS ve JavaScript hatta HTML öğrenmek sizi zorluyor mu? Ya da bütün bunlarla uğraşmak için zamanınız yok mu? Doğru yerdesiniz.

Adobewordpress olarak yepyeni bir makale dizisiyle sizlerleyiz.

Karşınızda günümüzün öne çıkan front-end frameworklerinin en popüleri; Bootstrap. Bu makalemizde Bootstrap‘in tam olarak ne olduğu ve ne işe yaradığını konuşacağız, bir HTML iskeleti ile örneğimizi oluşturacağız.

Bootstrap nedir?

Birçok yazılım dilinde olduğu gibi web tasarımında da süreci hızlandırmak için belirli iskelet yapılar mevcut.

Bir ilkokul öğretmeni olduğunuzu varsayın. Okuma-yazmayı öğretmeniz gereken 5 adet sınıf olduğunu düşünün. Bu sınıfların herbirine tek tek gidip, 5 kere aynı şeyleri anlatıp tüm öğrencilere okuma-yazma öğretebilirsiniz. Ya da okuma-yazma öğreten bir CD satın alıp tüm sınıflardaki öğrencilere bu eğitim CD’sini izletebilirsiniz. Böylece yine tüm öğrenciler okuma-yazma öğrenir, siz de boşuna efor harcamamış olursunuz.

İşin programlama tarafında bu yapılara framework, yani iskelet denir.  Bootstrap ise an itibariyle dünyanın en popüler front-end (ön yüz) iskeletidir.

Kullanmak için tek yapmanız gereken Bootstrap’in web sayfasından son versiyonu yüklemek ve tanımlamalarınızı HTML, PHP, ASPX ya da diğer dosyalarınız içinde göstermek.

Yapımız şu şekilde :

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
 └── examples/

Neden Bootstrap kullanmalıyız?

Bunu bir zorunluluk olarak düşünmemeliyiz. Ancak Bootstrap kadar güçlü bir altyapıya sahip değilsek ve daha iyi bir alternatifimiz yoksa bu soruyu kendimize sormalıyız.

Bootstrap’in sunduğu büyük avantajlardan 3 tanesini tanıyalım.

Önişlemci desteği

Bootstrap, Less ve Sass gibi popüler CSS önişlemcilerini desteklemekte.

Tek Framework ile Tüm Cihazlara Hükmedin

Bootstrap ile hazırladığınız tasarımlar her tip cihazda sorunsuz olarak çalışmakta. İşte bu yüzdendir ki Responsive ile Bootstrap kavramları yanyana çok kez kullanılmakta.

Kapsamlı Kaynak

Bootstrap hakkında binlerce makale ve anlatım mevcut. Ayrıca yapımcıların hazırladığı resmi kaynaklar ve örnekler de fazlasıyla doyurucu. Hal böyleyken işiniz daha da kolaylaşmakta.

Desteklediği Tarayıcılar

Bootstrap popüler tüm tarayıcılarda çalışmakta.

Download Bootstrap

Bu makaleleri hazırlarken Bootstrap’in en güncel versiyonu 3.1.1′idi. O yüzden yazılarımızı oluştururken bu versiyonu temel alacağız. Burayı tıklayarak 3.1.1 versiyonunu indirebilirsiniz ya da aşağıdaki bağlantıdan güncel versiyona erişebilirsiniz.

Boostrap’i indir

Template (Şablon Yapı)

Bootstrap’i download ettiyseniz bir örnek hazırlayalım. Frameworkü kullanmamız için ilk olarak head tagı içerisinde CSS dosyalarımızı tanımlamamız gerekiyor. Beraberinde istersek Internet Explorer ile uyumu sağlayan Respond ve Shim dosyalarını da bu alanda ekleyebiliriz. Body tagını kapatmadan önce de ilk jQuery, sonra da Bootstrap.JS’yi tanımlayarak işlemi tamamlıyoruz.

İşte örnek bir yapı :

<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
Bootstrap Taslağı ~ adobewordpress.com

<!-- Bootstrap -->
	<link href="css/bootstrap.min.css" rel="stylesheet" />

<!-- IE8 HTML5 ve media sorguları için Shim ve Respond JS dosyalarını kullanalım -->
<!-- UYARI: Eğer dizini file:// şeklinde gösteriyorsanız Respond.js çalışmayacaktır -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]--></pre>
<h1>Merhaba dünya!</h1>
<pre>
Adobewordpress.com ile Bootstrap öğrenmeye devam ediyoruz.

<!-- jQuery (Bootstrap'in JavaScript kodları için gerekli) -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><!-- Bootstrap için ihtiyaç duyulan tüm JS kodlarımız aşağıdaki dosyada --><script type="text/javascript" src="js/bootstrap.min.js"></script>

Kapanış

Bir sonraki dersimizde Bootstrap’in 12′lik grid yapısından bahsedeceğiz. Böylece responsive web tasarımının en kolay yapısı ile tanışmış olacağız. Şimdilik bu kadar. Hoşçakalın.

Ders 1 : Bootstrap nedir?

Photoshop ile sis efekti nasıl yapılır?

Bu dersimizde Photoshop ile fotoğraflara sis efekti ekliyoruz.

Orjinal Fotoğraf

Derste aşağıdaki görsel kullanılmıştır.

Video Dersler

Video derslerimizi takip etmek için YouTube kanalımıza abone olabilirsiniz.

Photoshop ile sis efekti nasıl yapılır?

Görselleriniz üzerine gelince büyüsün

CSS3 ile birlikte görsellere ekleyebileceğimiz interaktif efektlerin sayısı günden güne çoğalmakta. Bugün sizlerle birlikte üzerlerine gelindiğinde büyüyen arka plan yapılı tasarımlar oluşturacağız.

Nasıl yapılır?

Tasarım background olarak atanmış görselleri olduğundan daha büyük göstererek, sabit bir eleman içerisinde listelemeyi amaçlıyor. Yani kısaca div veya table gibi bir yapının içerisine bir arkaplan resmi koyarak başlıyoruz. Daha sonra bu arkaplan resmini barındıran yapının üzerine gelince hover tekniğiyle, background-size’ı büyütüyoruz. Tabii bunu yaparken de transition kullanarak bu geçişleri yumuşatıyoruz. Bu kadar! Hadi şimdi lafta kalmayıp bu söylediklerimizi koda dökelim.

HTML Kodları

Yukarıda bahsettiğimiz gibi tanımlı bir öğeye ihtiyacımız var. Div yeterli olacaktır. Class tanımlamayı unutmayalım.

<div class="resim"></div>

Bu kadar.

CSS Kodları

Sırada CSS kodlarımız var. İlk olarak görselinizin boyutunu belirleyin ve aşağıdaki width ve height değerine o rakamları girin. Background kısmını da kendi URL’nizi girin. Bu alandaki background-position alanı kritik, satır zoom yapılsa dahi resmin ortasındaki odağın dağılmasını engelleyecek. Transition ise geçişleri yumuşatmakta.

.resim
 width: 500px;
 height: 281px;
 background:url("http://www.adobewordpress.com/wp-content/uploads/2014/02/wallpaper-thumb-96.jpg");
 background-size: 100% auto;
 background-position: 50% 50%;
 transition: background-size .2s;
 

Ve son olarak resmin üzerine gelinince büyümesini sağlayalım.

.resim:hover
 background-size: 130% auto;

Bitti.

Kapanış

Bu tip kısa ve basit CSS dersleri yeni gelen tanımlamaları kolayca kavramamızı sağladıkları için önemli. Bir sonraki CSS dersimizde görüşmek üzere, hoşçakalın.

Görselleriniz üzerine gelince büyüsün

Hiyerarşik Treeview nasıl yapılır?

Açılabilir liste, hiyerarşik listeleme ve treeview diye birçok farklı şekilde isimlendirilen bu yapı dallara ayrılan uzun içerikleri anlaşılır bir şekilde göstermemizi sağlıyor. Ayrıca yanlarına ekleyeceğimiz checkbox inputları sayesinde de bir seçim işlemi yaptırabileceğiz.

Kısa bir aradan sonra jQuery makalelerimize devam ediyoruz. Bugün jQuery desteğiyle hierarchic treeview yapısını nasıl oluşturabileceğinizi anlatacağız. Örneği test ederek başlayabilirsiniz.

Treeview nasıl yapılır?

Daha önceden eklemediyseniz güncel jQuery versiyonunu web sitenize dahil ediniz. Kullanılabilir versiyonlara buradan göz atabilirsiniz. Örnek kod aşağıdaki gibidir.

<script src="http://code.jquery.com/jquery-xxxxxxx.min.js"></script>

HTML Kodları

Şimdi HTML kodlarımızı ekleyerek devam edelim.

<input type="checkbox"><span class="detailed">Yönetici</span>

Buradaki amaç checkbox ile tanımlamaya farklı işlev vermek. Bildiğiniz gibi normalde ilgili checkbox tanımı tıklandığında da otomatik olarak check işareti gelir. Fakat biz onları ayırarak kullanıcının tıklama ile dip kategorilere, hiyerarşinin içine inmesini sağlayacağız.

Tüm HTML kodlarımız aşağıda;

<ul class="awTreeview">
 <li><label>
 <input type="checkbox" checked>
 </label><span class="detailed">Üst Düzey Yönetici</span> 
 <ul>
 <li>
 <input type="checkbox" class="selectall"><span class="detailed">Tüm Çalışanlar</span> 
 </li>
 <li>
 <input type="checkbox"><span class="detailed">Yönetici 1</span>
 </li> 
 <li><input type="checkbox"><span class="detailed">Yönetici 2</span>
 <ul style="display: none">
 <li>
 <input type="checkbox" class="selectall"><span class="detailed">Tüm Çalışanlar</span> 
 </li>
 <li>
 <input type="checkbox"><span class="detailed">Çalışan 1</span> 
 <ul style="display: none">
 <li>
 <input type="checkbox" class="selectall"><span class="detailed">Tüm Çalışanlar</span> 
 </li>
 <li>
 <input type="checkbox"><span class="detailed">Alt Çalışan 1</span> 
 </li>
 <li>
 <input type="checkbox"><span class="detailed">Alt Çalışan 2</span>
 </li>
 </ul>
 </li>
 <li>
 <input type="checkbox"><span class="detailed">Çalışan 2</span> 
 </li>
 </ul>
 </li> 
 <li>
 <input type="checkbox"><span class="detailed">Yönetici 3</span> 
 </li> 
 </ul>
 </li>
</ul> 

CSS Kodları

Aslına bakarsanız CSS tarafında pek bir işimiz yok. Ancak biraz süsleme işlemi yapmaktan kimseciklere zarar gelmez. Aşağıdaki kodlar ile küçük bir border oluşturalım, beraberinde de varsayılan ul yapısını şekillendirelim.

.awTreeview, .awTreeview lilist-style: none;
.awTreeview ulmargin-left:6px;padding-left:25px; border-left:3px solid #E6E6E6;

Devam edelim.

jQuery Kodları

Bildiğiniz gibi makalenin başında jQuery dosyasını tanımlamanızı söylemiştik. Şimdi bu tanımlama içerisindeki geniş kütüphaneyi kullanarak hiyerarşik yapımızı tamamlayalım.

Şimdi jQuery kodlarımız ile devam edelim. Kodu birkaç parçaya ayırıp işi daha zor kılmak istemiyoruz. O yüzden ilgili yerlere girdiğimiz yorum satırlarıyla tam olarak ne yaptığımızı anlatmaya çalıştık.

$(function() 
 /* Her menünün başındaki tüm çalışanlar sekmesini işlevsel hale getirelim. */
 $('.awTreeview .selectall').change(function() 
 $(this).closest('li').nextAll().find("input[type='checkbox']").prop('checked', this.checked);
 );
 
 /* Altında içerik bulunan listeleri tıklandığında açılıp/kapanır kılalım. */
 $(".awTreeview .detailed").click(function () 
 $(this).siblings('ul').toggle();
 );

 /* Altında içerik bulunan listeleri kullanıcıya hissettirmek için üzerine gelince fare imlecini değiştirelim. */
 $(".awTreeview .detailed").mouseover(function() 
 $(this).css( "cursor", "default" );
 if ($(this).siblings('ul').length>0) $(this).css( "cursor", "crosshair" );
 );

 /* Bir yönetici seçildiğinde altındaki tüm listenin de seçilmesini sağlayalım. */
 $(".awTreeview input[type='checkbox']").change(function () 
 $(this).find("ul").toggle();
 $(this).parents().siblings('ul')
 .find("input[type='checkbox']")
 .prop('checked', this.checked);
 );
);

Hazırız.

Kapanış

Özellikle personel yönetim sistemlerinde sık sık kullanmak durumunda kaldığımız treeview yapısına da böylece örneklendirmiş olduk. Konuyla ilgili soruları yorum alanında bekliyor olacağız.

İyi çalışmalar.

Hiyerarşik Treeview nasıl yapılır?