İnsanların nelerle uğraştığını görünce; bazen bu adamların işi yok mu arkadaş, bazen de vay be yaratıcılığa bak sen! dediğim oluyor. Google’ın sunduğu hizmetleri, insanlar çeşitli alanlarda kullanarak ya da bu hizmetleri kendilerince tasarladıkları tanıtımları video olarak kaydettikten sonra insanların beğenisine sunuyorlar.

Anlaşılan önce YouTube‘da yayınlanan bu görsellere Google daha sonra ayrı bir ortam hazırlayarak, bir yarışma havası katmış. DemoSlam olarak adlandırdığı bu ortamın tasarımı da gayet kendine yakışır şekilde hazırlanmış.

Tanıtım Videosu

Click here to view the embedded video.

Kullanıcılar tarafından çekilen bu tanıtıcı videolar bana Turkcell’in reklamlarını anımsattı!

İzlerken sıkılmayacağınız bu videolardan bir kaçını aşağıda sizlerle paylaştım. Türk internet kullanıcısından bir isteğim var! Lütfen bizi temsil edebilecek yaratıcı arkadaşlarda çıksın!

Bunlardan biride Google Translate ile BeatBox yapımı. Bununla ilgili video ait bir yorumda aşağıdaki gibi harf dizisini Google Translate‘e yapıştırın ve dil seçeneğini Almanca’dan Almanca’ya olarak ayarlayın ve ardından “Dinleyin” düğmesine tıklayın! Eminim sizinde hoşunuza gidecek.

“bch tz tz tz bsch tz tz bch tz tz bch tz bsch tz tz tz bch tz tz tz bsch tz tz bch tz tz bch tz bsch”

Bu uygulamaya ait örnek çalışma aşağıdaki videoda!

Click here to view the embedded video.

Skydiving

Click here to view the embedded video.

İki Arkadaş Arasındaki Bir Yarışma

Click here to view the embedded video.

Video Sohbet

Click here to view the embedded video.

Google Translate’in Faydalarından Biri

Click here to view the embedded video.

Evde Seyehat Sanırım Böyle Yapılır!

Click here to view the embedded video.

Bilgi vermeden önce size bu çalışmanın demosunu görmenizi tavsiye edeceğim, o zaman neden bahsettiğimi anlayacaksınız.

Zoomer Gallery Demo

Zoomer Gallery İndir

Evet, şimdi kaynağımızı indirmiş arkadaşlar için kurulumu anlatmaya başlayalım.

İndirdiğimiz dosyada resimler ve bunlarında yanında 3 adet dosya var. Bunlar zoomer.html , zoomer.css ve zoomer.js dosyaları.

Zoomer.HTML

Bu dosyadaki kodların açıklamaları şu şekildedir.

$.fn.Zoomer=function(b){

var c=$.extend({

speedView:200,    //Resimlerim büyüme zamanı

speedRemove:400,  //Üzerine gelip büyüttüğünüz resmin küçülme zamanı

altAnim:false,  //Başlığın gösterilip gösterilmeyeceği (false:göstermez, true: gösterir)

speedTitle:400, //Başlığın kayma süresi

debug:false},b);  //Yapılan ayarları onaylama seçeneği(gibi birşey)

var d=$.extend(c,b);

Zoomer.CSS

Stil dosyası ile resimlerin çerçevesini ve arka planında değişiklik yapabilirsiniz.

ul.thumb li img {

width: 100px;

height: 100px;

border: 1px solid #ddd;

padding: 5px;

background: #f0f0f0;

position: absolute;left: 0; top: 0;

-ms-interpolation-mode: bicubic;

}

ul.thumb li img.hover

{

margin-top:15px;

background:url(thumb_bg.png) no-repeat center center;

border: none;

}

Şimdi gelelim sayfamızda çalışmayı çağırmaya geldi.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="zoomer.js"></script>
<script type="text/javascript">
$(document).ready(function(){
     $(’ul.thumb li’).Zoomer({speedView:200,speedRemove:400,altAnim:true,speedTitle:400,debug:false});
});
</script>

Resimlerimizi sayfaya yerleştirmek için aşağıdaki kodları kullanmamız gerekiyor.

<ul class="thumb">
                <li><a href="#"><img src="image1.jpg" alt="Title 1" /></a></li>
                <li><a href="#"><img src="image2.jpg" alt="Title 2/></a></li>
                <li><a href="#"><img src="image3.jpg" alt="Title 3" /></a></li>

</ul>

Kısaca anlatmaya çalıştım. İngilizce kaynak için burayı ziyaret edebilirsiniz.

CSS Dock Menu

Fish Eye Menu Tutorial

Fish Eye Menu for Prototypejs

Fish Eye Menu for Mootools

Mevcut çalışmanın kodları aşağıdaki gibidir.

Yapı Kuruluşu – XHTML

Üç sutunlu listeleme basit olacaktır.

  <ul class="thumb">
	  <li> <a href="#"> src="thumb1.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb2.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb3.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb4.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb5.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb6.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb7.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb8.jpg" alt="" /> </ a> </ p>
	  <li> <a href="#"> src="thumb9.jpg" alt="" /> </ a> </ p>
  </ ul>

Şekillendirme – CSS

Listedeki resimlerin görünümü ve durumlarının nasıl olacağının belirlenmesi.

 ul.thumb (
	  float: left;
	  List-style: none;
	  margin: 0; padding: 10px;
	  width: 360px;
  )
  ul.thumb p (
	  margin: 0; padding: 5px;
	  float: left;
	  konum: göreli; / * Set mutlak konumlandırma taban * koordine /
	  width: 110px;
	  height: 110px;
  )
  ul.thumb Li img ismiyle bir dizin (
	  width: 100px; height: 100px; / * * küçük küçük boyutları ayarla /
	  -ms-interpolasyon mod: bicubic; / * Fix IE Bicubic Ölçekleme * için /
	  border: 1px solid # DDD;
	  padding: 5px;
	  background: # f0f0f0;
	  konum: mutlak;
	  left: 0; top: 0;
  )
  ul.thumb Li img.hover (
	  background: (thumb_bg.png) no-repeat merkezi merkezi / * Görüntü duraksamak etkisi üzerinde artalan olarak kullanılacak URL
	  border: none; / * alın sınırın üstünde uçmak üzerine * kurtulmak /
  )

Hayat Vermek – JQuery

Sıra geldi yapılan çalışmaya canlılık katmaya.

$ ( "ul.thumb Li"). sallanmak (function () (
	  bu görüntü kalır $ (this). CSS (( 'z-kütüğü':'10 ')); / yüksek bir z-endeks değeri Ekle * * Yukarı /
	  $ (this)) ( 'img ismiyle bir dizin' bulmak.. addClass ( "sallanmak"). stop (), daha sonra "sallanmak" nin sınıf Ekle * durdurmak animasyon kuyruk buildup * /
		  . canlandırabiliriz ((
			  110px ', / * marginTop:' Bir sonraki 4 hat dikey * Bu görüntü hizalamak olacak /
			  marginLeft: '-110px',
			  top:'50% ',
			  Sol:%'50 ',
			  genişlik:'174px ', / * Set yeni genişliği * /
			  height:'174px ', / * Set yeni yükseklik * /
			  padding:'20px '
		  200 of "), 200); / * Bu değeri" ne kadar hızlı ve hızla bu duraksamak yavaş * animates / 

	  ), Function () (
	  $ (this). CSS (( 'z-kütüğü':'0 ')); / * Z-INDEX geri 0 * Set /
	  $ (this)) ( 'img ismiyle bir dizin' bulmak.. removeClass ( "sallanmak"). durdurmak () / * çıkarın "sallanmak" sınıf, daha sonra animasyon kuyruk buildup * durdurmak /
		  . canlandırabiliriz ((
			  marginTop:'0 ', / * Set hizalamayı geri * varsayılan /
			  marginLeft:'0 ',
			  top:'0 ',
			  left:'0 ',
			  genişlik:'100px ', / * Set genişliği geri * varsayılan /
			  height:'100px ', / * Set yüksekliği geri * varsayılan /
			  padding:'5 piksel '
		  ), 400);
  ));

Çalışmanın demosunu görmek için burayı tıklayın.

Kaynak bilginin orjinaline buradan ulaşabilirisiniz. Bu çalışmayı bizimle paylaştığı için Soh Tanaka’ya teşekkür ederiz. Thanks for this work, Soh.

Tamanın görünümü aşağıdaki gibidir.

Nishita-Tr Teması

Demosunu görüntülemek için buraya tıklayın.

Çok sık olarak çıkarılan bu sürümlerin eklenti ihtiyaçları nasıl giderilecek? Umarım yeni sürüm en azından 2.5′in eklentilerini desteklediğini görebiliriz.

Özelliklerin neler olduğunu buradan takip edebilirsiniz.

WordPress 2.6 test etmek için burayı yıklayın.

Kullanıcı adı : admin

Parola : demo

WordPress’in öncüsü Mullenweg, WordPress 2.6 hakkında konuşuyor

Günümüzde internet yapmcılarının vazgeçemedikleri bir olan AJAX teknolojisi kullananların sayfalarında çekiciklik katıyor. Neyse artık konuya geçmenin zamanı geldi sanırım.

Nasıl bir görünüm kazanaksınız

Yukarıdaki gibi bir görünüm fakat yeterli değil diyorsanız buradan demoyu inceleyebilirsiniz.

İcraat Bölümü

1. Gerekli dosyalarınız öncelikle buradan indir ve .rarlı dosyadakileri çıkarın.
2. JScript dosylarını ana dizine atın.
3. Style.css dosyasındaki kodları kendi temanızın style dosyasının içine yapıştırın(*dikkat edilmesi gereken konu .body bölümü, çünkü kendi temanızda muhtemelen body olarak tanımlı bölüm mevcut olacaktır.)
4. .rarlı dosyaan çkardığınız klasörün içindeki örenklerden(HTML dosyalarını inceleyin) hangisini beğendiyseniz. onu açın ve görüntüleyin. Ekrana fare ile sağ tıklayın ve kaynağ görüntüleyi seçin.
5. Aşağıdaki koduları JScript dosyasını çağırmak için görüntülemek istediğiniz dosyanın içine yağıştırın.

Turuncu ile gösterdiğim bölgelere alternatifler üretebilirsiniz. 

Elimden geldikçe basit anlatmaya çalıştım, gereksiz bilgilerden kaçındım. Umarım faydalı olmuştur.