Logo 1

kadirgunay.com Logo 1

Logo 2

kadirgunay.com Logo 2

Logo 3

kadirgunay.com Logo 3

Logo 4

kadirgunay.com Logo 4

Evet arkadaşlar 4 örneğimiz var sizce hangisini logo olarak kullanalım? Benim şahsi fikrim tabi ki 1 numara. 4 numara ile ilgili bir bilgi vereyim size ben orada uyuyorum

Logoları özenerek tasarlayan çalışma arkadaşım Öykü Akgürgen’ e buradan bir kez daha teşekkür ediyorum. Ellerine sağlım dostum.

Adım 1 - HTML kodları

<div id="OrtalananGenelAlan">
<div id="Icerik">
<h1>Yatay ve Dikey Ortalama Tekniği</h1>
<p>Gördüğünüz bu kutu şeklindeki DIV, yatay ve dikey olarak ekranın tam ortasında durmaktadır.IE5 ve Mac' lerde bazı problemler olsa da bunları bazı CSS hackler ile çözüyoruz. Yeni nesil tarayıcılar ise hiçbir sorun çıkarmadan yatay ve dikey ortalamayı yapabiliyorlar. Tarayıcınızın ekranını küçülttüğünüzde dahi bu ortalanmış DIV hiçbir şekilde kaymayacaktır. Sayfanın genelinde hiçbir şekilde kaydırma çubuğu görmeyeceksiniz. DIV içindeki kaydırma çubuğu DIV' e verilen overflow özelliğinden kaynaklanmaktadır.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec risus. Sed rhoncus sodales metus. Donec adipiscing mollis neque. Aliquam in nulla. Quisque faucibus tellus. Proin iaculis. Donec lobortis. Maecenas ut velit. Quisque molestie wisi. Sed sem lectus, ullamcorper quis, bibendum in, tincidunt quis, nulla. Nulla malesuada. Donec a elit at risus bibendum commodo. Duis quis ipsum. Sed ultricies, odio quis rutrum porta, lorem lacus sodales erat, nec scelerisque felis ipsum ut diam. Nunc lorem eros, dignissim quis, rhoncus sit amet, mattis eu, lacus. Vestibulum ipsum tellus, imperdiet iaculis, vulputate gravida, venenatis sit amet, lacus. Cras cursus. Cras dignissim mauris nec lorem. Curabitur malesuada. Nulla eleifend.</p>
.....

</div>
</div>
</div>

Adım 2 - CSS Kodları

    /* Mac ve IE5 için hack */
#OrtalananGenelAlan {
background-color:#999999;
width:720px;
height:420px;
margin:10px auto;
position:relative;
}

#Icerik {
background-color:#fff;
position:absolute;
top:10px;
left:10px;
height:380px;
width:670px;
padding:10px 20px 10px 10px;
overflow:auto;
}
/* commented backslash hack  - invisible to IE 5 \*/
#OrtalananGenelAlan {
position:absolute;
margin:-210px 0 0 -360px;
left:50%;
top:50%;
}
/* hack biter */

OrtalananGenelAlan isimli DIV için Mac ve IE5′ te yatay hizalamasında sorun çıkarmaması için önce bir hack uyguladık. İkinci değerler ise dikey ortalama için verildi.

Örnek Uygulama

Neden bu arayüz?

Öncelikle sadeliği ve kullanımı çok hoşuma gitti. Sonrasında ise renkleri ve son yazı bölümünün kullanımını görünce evet bu dedim. İlk olarak iç karartıcı gibi gelse de gözü çok yormadığını yazılar arasında geçiş yaptıkça anlayacaksınız.

Bu nasıl bir logo?

Görüp tanıyanlar beni az çok bilirler, saçlarım sürekli kısa hatta tabiri caiz ise 1 numara ve sakalım uzundur. Çalışırken, yolda yürürken sürekli kulaklık takarım. İşte bunları alıp birleştirdim ve ortaya böyle bir logo çıktı. Logoyu Adobe Illustratorda tasarladım. Daha sonra Photoshopa aktardım ve png formatında kaydettim. Logoya eklenecek bir kaç özellik daha var aslına bakarsanız. Logo ile alt kısımları görünüşte bağlayacak bazı ufak detaylar. Onları da yakın zaman içinde tamamlayacağım.

Güncelleme öncesi

Aslına bakarsanız 1-2 gündür logo çalışması üzerindeyim. Şu andaki logo sadece o kısmın boş kalmaması için FWde çabuk biçimde hazırlanmış ve konulmuş bir logo. Önümüzdeki hafta içinde web 2.0 mantığında ve çizgilerinde bir logo ekleyeceğim o bölüme. Ekleyeceğim logonun %70′ lik kısmı bitti sayılır. Aklımda tasarladığım ve AIde çizdiğim bir iki örnek var. O örneklerden birisine karar verip ekleyeceğim.

Arayüz (Tema) kime ait?

Daha önceki sürümlerde de temalarını kullandığım Blog Oh Blog’ a ait. http://www.blogohblog.com/wordpress-theme-portfolio-press/ adresinden tema ile ilgili yorumlara bakabilir, ön izleme yapabilir ve indirebilirsiniz.

Ben temanın CSS, sidebar.php dosyaları ile oynadım ve Türkçeleştirdim.

Gördüğünüz hata veya eksik yerleri yorum olarak yazarsanız çok sevinirim.

Her sene olduğu gibi bu sene de oturup 2008′ den akılda kalanları yazmak isterdim ama öyle uzun uzadıya yazmayacağım sadece benim aklımda kalan sektörel gelişmeler ve haberleri yazacağım;

• Firefox 3.0 sürümü indirilme dünya rekoru kırdı
• CSS2.1 yerini yavaşca 3.0′ a bırakma yolunda ilerlemeye başladı
• Joomla 1.0.x sürümlerinin yanı sıra 1.5.x sürümlerini çıkarmaya başladı
• Wordpress sürüm üzerine sürüm çıkardı ama şu an için en son 2.7 sürümünde karar kıldı
• Betik dil kütüphaneleri arasında jQuery büyük bir atak yaptı ve kendinden çok söz ettirdi
• Facebook kendini yeniledi ve ajax kullanımının dibine vurdu
• Ruby On Rails son 10 yılın en hızlı yükselen yazılım dili olarak açıklandı
• CMS ödüllerinde Drupal birinci olurken Joomla ve dotnetnuke ikinci oldu
• Ben deniz Kadir GÜNAY CMSTURK.NET sitesinde yönetici oldum
• .Net’ e ait framework 3.5 sürümü yayınlandı
• Adobe firması CS4 sürümünü piyasaya sürdü

Arkadaşlar benim aklımda kalanlar bunlar. Sizlerin eklemek istedikleri varsa yorum olarak ekleyebilirsiniz ben de böylece yazıyı güncelleyebilirim.

Bunların haricinde 2008 benim için iyi bir yıldı. Özellikle son 6 ayında kendimi geliştirme adına çok işler yaptım. Antalya’ dan İstanbul’ a taşındım ve kariyerimde ilerleme adına çok başarı bir ajansta çalışmaya başladım.

Her yazı ve konuşmanın sonunda yeni yıl ile ilgili dilekler söylenir ya işte bu kısım da onun için;

Ne olursa olsun yıllar, günler size ne getirirse getirsin bana göre umutlar yitirilmemeli. İnancınız ve umutlarınız ne kadar yüksek olursa o kadar kazanmaya yakınsınız demektir.

Sağlıklı, mutlu ve başarılı bir yıl dileklerimle.

jQuery Kayan Panel

Adım 1 - XHTML Oluşturmak

<div class="GenelAlan">
<div id="FormAlan">
<div id="IletisimForm">
<fieldset>
<label for="Name">İsim *</label>
<input id="name" type="text" />
<label for="Email">E-Posta Adresi*</label>
<input id="Email" type="text" />
<label for="Message">Mesajınız *</label>
<textarea id="Message" rows="3" cols="20"></textarea>
<input id="sendMail" type="submit" name="submit" onClick="closeForm()" value="Gönder" />
<span id="MesajGonderildi">Mesajınız başarıyla gönderildi!</span>
</fieldset>
</div>
<div id="IletisimBtn"></div>
</div>
<div class="header">
<h1>
<img src="logo.png" style="margin-top: -20px;" /></h1>
</div>

.....

Adım 2 - CSS Hazırlamak

.GenelAlan
{
margin: 0px auto;
width:960px;
background-color:#ffffff;
text-align:left;
position: relative;
}

#FormAlan
{
position:absolute;
left:600px;
float:right;
}
#IletisimForm
{
height:277px;
width:351px;
background-image:url('bkg.jpg');
display:none;
}
#IletisimForm fieldset
{
padding:30px;
border:none;
}
#IletisimForm label
{
display:block;
color:#ffc400;
}
#IletisimForm input[type=text]
{
display:block;
border:solid 1px #4d3a24;
width:100%;
margin-bottom:10px;
height:24px;
}
#IletisimForm textarea
{
display:block;
border:solid 1px #4d3a24;
width:100%;
margin-bottom:10px;
}
#IletisimForm input[type=submit]
{
background-color:#4d3a24;
border:solid 1px #23150c;
color:#fecd28;
padding:5px;
}
#IletisimBtn
{
height:40px;
width:351px;
background-image:url('iletisim_form_btn.png');
display:block;
cursor:pointer;
}
#MesajGonderildi
{
color:#ff9933;
display:none;
}

Adım 3 - jQuery Dosyalarını İndirmek ve HTML Dosyasına Tanıtmak

Bildiğiniz gibi jQuery bir javascript kütüphanesi. jQuery ile çalışmak istiyorsanız bu kütüphaneye ait js dosyasını indirmek zorundasınız. İndirmek için jQuery resmi sitesini ziyaret edip son versiyonu indirebilirsiniz. İndirdiğiniz js dosyasını şu şekilde HTML dosyanıza ekleyin;

<script src="dizin/jquery-1.2.6.min.js" type="text/javascript"></script>

Siz direk ana klasöre de ekleyebilirsiniz.

Adım 4 - jQuery Kodlarını HTML Dosyasına Eklemek

Daha önceki konularda da söylediğim gibi jQuery ile ilgili işlemleri gerçekleştirebilmek için sadece js dosyasını eklemek yeterli olmuyor. Gerekli alanlar için tetikleyici bir kod bloğu eklemeniz gerekir.

<script type="text/javascript">
$(document).ready(function(){

$("#IletisimBtn").click(function(){
if ($("#IletisimForm").is(":hidden")){
$("#IletisimForm").slideDown("slow");
}
else{
$("#IletisimForm").slideUp("slow");
}
});

});

function closeForm(){
$("#MesajGonderildi").show("slow");
setTimeout('$("#MesajGonderildi").hide();$("#IletisimForm").slideUp("slow")', 2000);
}
</script>

Bu kod’u kısaca anlatmamız gerekirse;

$(document).ready(function(){

Tetikleyiciyi çalıştır

$("#IletisimBtn").click(function(){
if ($("#IletisimForm").is(":hidden")){
$("#IletisimForm").slideDown("slow");
}
else{
$("#IletisimForm").slideUp("slow");
}
});

#IletisimBtn isimli dive bir tıklama fonksiyonu oluştur ve eğer bu div gizli ise yavaş biçimde (.slideDown(”slow”)) aşağıya kaydır. Gizli değilse yine yavaş biçimde yukarı kaydır (.slideUp(”slow”))

;function closeForm(){
$("#MesajGonderildi").show("slow");
setTimeout('$("#MesajGonderildi").hide();$("#IletisimForm").slideUp("slow")', 2000);
}

closeForm isminde bir fonksiyon oluştur ve #MesajGonderildi isimli div’i yavaşca göster. setTimeout komutu ise MesajGonderildi divi içindeki mesajın yok olma zamanını belirtiyor. Bu mesaj yok olduktan sonra da IletisimForm isimli divi yani aşağıya kayan divimizi yavaşca yukarı doğru ilerlet ve kapat komutunu gerçekleştiriyor.

Örnek Uygulama

Örnek Dosyaları İndir

Not: Orjinal makale adresi http://designshack.co.uk/tutorials/creating-a-slide-in-jquery-contact-form ben jQuery kod bloğunu, css ve xhtml dosyalarını Türkçe anlattığım ve herkesin anlaması için bir bölümünü değiştirdim.