Kadir GÜNAY' ın Css, Xhtml, jQuery ve Arayüz Geliştirme Güncesi

The BelOMO Vilia

BelOMO Vilia Rus yapımı bir fotoğraf makinesi. Tam olarak bilmiyorum fakat internette araştırmam neticesinde bende olan makinenin 1986 model olduğunu biliyorum. Yani 23 yaşında Ben çocukken (5-6 yaşlarında) babam ile almaya gitmiştik bu fotoğraf makinesini. Hatta ilk aldığımız zaman bir deneme fotoğrafım bile var arşivlerimde. Gel zaman git zaman derken makine unutuldu. Evde öyle bir yerde duruyordu. Yatış zamanına kadar kullanılmadı değil aslında kullanıldı, ve çok güzel fotoğraflar çekti.

1 ay öncesine kadar aklımda bile değilken ofisteki arkadaşların fotoğraf muhabbeti sırasında aklıma geldi makinenin varlığı. Hemen annemi aradımve makinenin ne durumda olduğunu, halen bir yerde yatıyor mu yoksa bir çöp tekenesinde mi olduğunu sordum? Halen duruyor cevabını alınca çok sevindim. İşte derken makinem bugün geldi. Makinem diyorum çünkü artık oturmuşluğun ve merakın getirdiği güç ile makineyi acayip sahiplendim. Fotoğrafçılık konusunda hiç bir tecrübem yok. Bu makine ile öğreneceğimi düşünüyorum. Bu aşamada çok zorlanacağım  farkındayım. Neden mi? Çünkü makinede tek bir otomatik ya da dijital aksam, yer, nokta her neyse artık yok. Tüm işlevselliği ile tamamen manuel. Uzaklık ayarı, görüntü ayarı, asa ayarı her yeri manuel. İşte güzelliği burada.

The BelOMO Vilia

Bu da kendisi

bö!2009′ da Yarışıyorum

bö!2009 - Blog Ödülleri Yarışması

Geçen sene ilki düzenlenen, Türk blog yazarlarını bir araya toplayan ve tanıtımlarına da katkı sağlayan blog ödülleri yarışmasının ikincisi başladı.

kadirgunay.com olarak Teknoloji kategorisinde yarışıyorum. Çok iddialı değilim ama sizlerin de beni yalnız bırakmayacağını biliyorum.

Destek vermek ve kadirgunay.com için oy kullanmak istiyorsanız;

1. bö!2009 sitesine gidip kayıt olmalısınız -> kayıt olmak için tıklayın
   kayıt olduktan sonra e-posta adresinize gelen doğrulama bağlantısına tıklayarak üyeliğinizi aktif hale getirin.
2. Daha sonra ise benim yarıştığım alan olan Teknoloji kategorisine giderek kadirgunay.com için oy ver linkine tıklayın. kadirgunay.com için oy vermek isteyenler -> kadirgunay.com’ a oy ver!

Yaklaşık 1 senedir kadirgunay.com’ a yazıyorum. Yazılarımı takip edenler bilir çok fazla kişisel olmayan daha çok xhtml, css, jQuery alanlarında hem kendi öğretilerim hem de sektörel yardım anlamında makaleler ve yazılar yazıyorum.

bö!2009′ da benimle aynı kategoride yarışan diğer tüm blogcu arkadaşlarıma başarılar dilerim. Güzel bir yarışma olması dileğiyle.

jQuery Sliding Box & Caption – jQuery ile Kayan Kutu ve Başlıklar

jQuery İle Kayan Kutu ve Başlık - jQuery Sliding Box & Caption

Adım 1) jQuery Dosyasını Sayfaya Ekleme

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script

Ben direk google sunucusundan çektim siz istediğiniz şekilde indirip ekleyebilirsiniz.

Adım 2) Html Kodlarını Eklemek

<div class="resimKutusu tamBaslik">
<img src="vladstudio_eve_1600x1200_1.jpg"/>
<div class="kutuHareket resimBasligi">
<h3>Duvar Kağıdı 1</h3>
<p>Hazırlayan<br/><a href="#">Vlad Studio</a></p>
</div>
</div>

<div class="resimKutusu baslik">
<img src="vladstudio_friends_1600x1200_1.jpg"/>
<div class="kutuHareket resimBasligi">
<h3>Duvar Kağıdı 2</h3>
<p>Hazırlayan<br/><a href="#">Vlad Studio</a></p>
</div>
</div>

<div class="resimKutusu slideright">
<img class="kutuHareket" src="vladstudio_mightymouse_1600x1200_1.jpg"/>
<h3>Duvar Kağıdı 3</h3>
<p>Hazırlayan<br/><a href="#">Vlad Studio</a></p>
</div>
<div class="resimKutusu thecombo">
<img class="kutuHareket" src="vladstudio_music_1600x1200_1.jpg"/>
<h3>Duvar Kağıdı 4</h3>
<p>Hazırlayan<br/><a href="#">Vlad Studio</a></p>
</div>

<div class="resimKutusu slidedown">
<img class="kutuHareket" src="vladstudio_trafficlights_1600x1200_1.jpg"/>
<h3>Duvar Kağıdı 5</h3>
<p>Hazırlayan<br/><a href="#">Vlad Studio</a></p>
</div>
<div class="resimKutusu peek">
<a href="#"><img src="birss.jpg"/></a>
<a href="#"><img class="kutuHareket" src="vladstudio_vitruvianman_1600x1200_1.jpg"/></a>
</div>

Burada dikkat etmeniz gereken nokta şudur, her resim için genel bir divimiz var ve o divin içinde bir de başlık alanı için açtığımız bir div var. İkisi farklı bunu unutmayın.

Adım 3) Css Kodlarını Eklemek

a{ color:#C8DCE5; }
h3{ margin: 10px 10px 0 10px; color:#FFF; font:18pt Arial, sans-serif; letter-spacing:-1px; font-weight: bold;  }

.resimKutusu{
width: 325px;
height: 260px;
margin:10px;
float:left;
background:#161613;
border: solid 2px #8399AF;
overflow: hidden;
position: relative;
}
.resimKutusu img{
position: absolute;
top: 0;
left: 0;
border: 0;
}
.resimKutusu p{
padding: 0 10px;
color:#afafaf;
font-weight:bold;
font:10pt "Lucida Grande", Arial, sans-serif;
}

.resimBasligi{
float: left;
position: absolute;
background: #000;
height: 100px;
width: 100%;
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.tamBaslik .resimBasligi {
top: 260;
left: 0;
}
.baslik .resimBasligi {
top: 220;
left: 0;
}

Adım 4) jQuery Kodlarını Eklemek

$(document).ready(function(){
//Yönleri değiştirmek için sadece "-" kullanın.
//Dikey Kayma
$('.resimKutusu.slidedown').hover(function(){
$(".kutuHareket", this).stop().animate({top:'-260px'},{queue:false,duration:300});
}, function() {
$(".kutuHareket", this).stop().animate({top:'0px'},{queue:false,duration:300});
});
//Yatay Kayma
$('.resimKutusu.slideright').hover(function(){
$(".kutuHareket", this).stop().animate({left:'325px'},{queue:false,duration:300});
}, function() {
$(".kutuHareket", this).stop().animate({left:'0px'},{queue:false,duration:300});
});
//Diagnal Kayma
$('.resimKutusu.thecombo').hover(function(){
$(".kutuHareket", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});
}, function() {
$(".kutuHareket", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
});
//Bölüm Bölüm Kayma (sadece arka planın bir kısmı gözükür)
$('.resimKutusu.peek').hover(function(){
$(".kutuHareket", this).stop().animate({top:'90px'},{queue:false,duration:160});
}, function() {
$(".kutuHareket", this).stop().animate({top:'0px'},{queue:false,duration:160});
});
//Tüm başlığı gösterme (Resmi Gizleme)
$('.resimKutusu.tamBaslik').hover(function(){
$(".kutuHareket", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".kutuHareket", this).stop().animate({top:'260px'},{queue:false,duration:160});
});
//Başlık Kayma (Başlığın bir kısmı gizlenir)
$('.resimKutusu.baslik').hover(function(){
$(".kutuHareket", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".kutuHareket", this).stop().animate({top:'220px'},{queue:false,duration:160});
});
});

Not: Uygulamaya ait orjinal sayfayı incelemek için -> http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/

Uygulamaya Ait Örneği Görmek İçin Tıklayınız

Uygulamaya Ait Dosyaları İndirmek İçin Tıklayınız

ShadowBox – Tam Teşekküllü Uygulama

Neden tam teşekkülü dedim biliyor musunuz? Kullananlar bilir, kullanmayanlar da yazıyı okuyunca öğrenecekler.

Shadowbox Nedir?

Shadowbox javascript ve css üzerine kurulu ve web standartlarına uygun olarak inşa edilmiş hemen hemen tüm medya formatlarını tanıyan bir uygulama.

Peki Nedir Bu Kadar Önemli Kılan?

Shadowbox’ ın özelliklerine bakınca hadi canım diyebilirsiniz. Kullanımı, kolaylığı, destekledikleri. Bir liste yapalım;

• Standartlar : HTML doğrulamasını kullanır ve sahte html etiketlerine gerek duymaz. Kullanılan tüm etiketler doğrulamadan geçer
• Adaptörler : Hangi javascript kütüphanesini kullanıyorsanız o kütüphaneye kolaylıkla entegre edilebilir.
  Desteklediği Kütüphaneler : YUI, EXT, Prototype, jQuery, MooTools (1.2) ve DoJo ToolKit
• Tema Desteği : Shadowbox’ ı kendi türündeki uygulamalardan ayıran en büyük özellik ise tema desteği. Kendine ait bir teması var ve siz daha başka temalar da ekleyip kullanabiliyorsunuz.
• Medya : Desteklediği medya formatları ise, İmajlar(Image), Quicktime, FLV, Windows Media Player, Html sayfalar ve dışarıdan çağırılabilen her sayfa.
• Şıklık : Oldukça hafif, şık kullanım ve tam kontrol.
• Evrensel : Hemen hemen tüm dilleri destekliyor. İçinde dil dosyalarının js halleri mevcut.
• Seçenek : İster tüm paket olarak, ister diğer kütüphaneler ile isterseniz de kendi seçenekleriniz ile kullanma seçeneği.
• Modüler : Modülerden kastım şudur arkadaşlar shadowbox ı indirmek istediğiniz zaman kullanacağınız modülleri seçip indirebiliyorsunuz.

İlk önceleri lightbox kullanıyordum fakat daha sonra lightboxta şöyle bir sorun gördüm ki flashların arkasında kalıyor. Derken daha farklı sorunlar çıkmaya başladı. Genelde kullandığım kütüphane hep jQuery oluyor ve bu kütüphaneye ait bu tarz uygulamalar kısıtlı. Shadowboxı bulduktan sonra oldukça rahatladım. İstediğim gibi düzenlemeler ve dosyaları ekliyorum. FLV olsun Quicktime olsun hiçbir sorun çıkarmıyor. Galerilerde ise oldukça kullanışlı. Şu an için en güzel özelliği ise uygulama başladığı anda geri planda olan tüm flashları kapatıyor olması ve çakışmayı önlüyor olması.

Uygulamanın orjinal sitesine buradan ulaşabilirsiniz -> http://mjijackson.com/shadowbox/

Kullandığım bazı projeler;

• www.sutas.com.tr
• www.bestfm.com.tr

biliyorum, biliyorum…

Dün 1 Nisandı ve ben de bunun için klasik şakalar yerine başka bir şaka yapayım dedim. Tepki almadım değil aldım ama kimseyi kırmak ya da üzmek değildi derdim. Bakalım beni ne kadar seviyorlar gibi de bir derdim olmadı. Aklıma geldi ve uyguladım. Bir an bile olsa düşünen ve canı sıkılan herkesten özür dilerim. Şaka sonuçta hepimiz bunu hayatımızda yapıyoruz, yaşıyoruz.