Beşiktaş.Us

Beşiktaş Haber Portalı

SinerjiSoft için hazırladığım Beşiktaş Haber Sitesi tasarımının script giydirilmesi tamamlandı ve site yayın hayatına beta olarak basladı.

Siteye Katkım:

 Tasarım, Xhtml ve Css Kodlama

SinerjiSoft.Com Beşiktaş.Us - Ziyaret Et

HTML5 ve Yenilikleri Hakkında

tarih 17 Temmuz 2010 yazarMustafa AYDIN
Kategori: 
Web Tasarım
yorum 0 Yorum;

XHtml her ne kadar css ile birlikte kolaylık sağlasa da ve Html’i belli standartlara oturtsa da, yine de bazı noktalarda kod kalabalığının önüne geçemiyor. İşte bu noktadan hareketle geliştirilmeye başlanan HTML5 çok güzel özelliklere sahip. Bunlarda bazıları ise şöyle:

  • <canvas>: Sayfada bir tuval alanı oluşturur. Tuvale çizim javascript ile yapılabilir.
  • <audio>: Sayfaya ses oynatıcı bir modül ekler.
  • <video> : Video oynatıcı bir modül ekler.
  • <progress> : İşlem süreci göstergesi ekler.
  • <caption> : Başlık olarak düşünülen metinleri düzenler.
  • <header> : Sitenin başlık ve açıklama içeriğini alır.
  • <nav> : Menüleri ve bir takım zaruri işlevleri içine alır.
  • <footer> : Sitelerin en alt kısmını içine alır.
  • <section> : Sitelerin ana içerik kısmını içine alır.
  • <aside> : Ana içerikte ayrı yazılan kısımdır.
  • <article> : Makale, deneme tarzı yazıları kapsar.
  • <embed> : Dışarıdan eklenen componentler için kullanılır. (Örn : .swf uzantılı dosyalar)
  • <details> : Detay bilgisi içerir.
  • <summary> : Yazının başlığını belirler.
  • <time> : Tarih, saat verilerini kapsar.
  • <mark> : Yazı içerisinde özellikle üstünde durulan kelimeleri belirler.
  • <fig>
  • <figure>
  • <hgroup>

HTML5 yapısını şu anda Mozilla Firefox 3.6.3, Opera 10.53, Apple Safari 5, Google Chrome 5 tarayıcıları kısmen desteklemektedir. Ancak Internet Explorer 8 bu yapıyı hiç tanımamaktadır. Yeni geliştirilen Internet Explorer 9’un ise test aşamasında şu anda %88 olarak desteklediği söylenmektedir Microsoft tarafından. Bu değerleri http://samples.msdn.microsoft.com/ietestcenter/#html5Canvas adresinden takip edebilirsiniz.

http://html5demos.com/ sitesinden ise HTML5’in yeni özelliklerini ve bunların demolarını inceleyebilirsiniz.

http://www.whatwg.org/specs/web-apps/current-work/ adresinden HTML5 hakkında geniş kapsamlı bilgiye ulaşabilirsiniz.

Google, Internet Explorer 6′ya desteğini çekti

tarih 02 Şubat 2010 yazarMustafa AYDIN
Kategori: 
Web Tasarım, İnternet
yorum 1 Yorum;

Uzun bir süredir siteme yazı yazmmıyordum. Ancak son bir iki haftadır da içimde böyle bir istek vardı. Bugün bu konuyu görünce de dayanamadım bu sevincimi herkesle paylaşmak istedim. :D Ne kadar mutlu oldum anlatamam : )

Evet yanlış duymadınız Google artık Internet Explorer’in eski versiyonlarını desteklemeyecekmiş. Yani artık Internet Explorer’ın artık dönemi kapanmasına rağmen kullanılan ve web site tasarımcılarını deli eden eski versiyonlarıyla Google siteleri ziyaret edilemeyecek. Bu müthiş haber bende heyecan yarattı hemen. Çünkü artık bu sayede Internet Explorer 6′nın sonu gelebilir.

Şimdi haberin ayrıntılarına gelelim. Google 1 Mart tarihinden itibaren eski versiyon tarayıcılarda düzgün görüntülenemeyecek. Ben başlıkta IE6 yazdım fakat bunun yanı sıra diğer eski versiyon tarayıcılar da aynı şekilde destekten yoksun.

Ayrıca yapılan açıklamada kullanıcıların Internet Explorer 7 ve üstü, Mozilla Firefox 3 ve üstü, Google Chrome 4 ve üstü, Safari 3 ve üstü versiyonları kullanmaları öneriliyor.

Ben de böylece bu güzel haberle tekrar yazı yazmış oldum. Çifte mutluluk. :D

CSS3 – Border (Çerçeveler – Kenarlar)

tarih 06 Eylül 2009 yazarMustafa AYDIN
Kategori: 
CSS3 Hakkında, Web Tasarım
yorum 0 Yorum;

Css3 ile gelen yeniliklerden biri de borderlar üzerinde artık daha fazla hakim olabileceğiz. Yani şöyle ki artık borderlara istediğimiz resmi arkaplan olarak atayabileceğiz. Çok güzel bir özellik değil mi.  Diğer özellik ise kalın borderlarda her pixele ayrı bir renk tonu atayarak gradient görünümlü borderlar hazırlayabilirsiniz. Birde köşeleri ovalleştirebildiğimizi zaten bir önceki konuda ayrıntılarıyla anlatmıştım.

Köşelerde her pixele ayrı renk atama:

Evet bu özellik şu anda sadece Firefox tarayıcısında çalışıyor. Örnek kodlarımız da işte şöyle:

Kodu Görüntüle CSS
1
2
3
4
5
6
7
8

#kutu {
	border: 8px solid #000;
	-moz-border-bottom-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;
	-moz-border-top-colors:    #033 #039 #777 #888 #999 #aaa #bbb #ccc;
	-moz-border-left-colors:   #033 #039 #777 #888 #999 #aaa #bbb #ccc;
	-moz-border-right-colors:  #033 #039 #777 #888 #999 #aaa #bbb #ccc;
	width:400px;
}

Aşağıda da örnek görünümü bulunuyor. Bu kutuyu görebilmeniz için Firefox ile sitemizi ziyaret etmeniz gerekir.

devamını oku

CSS Pseudo-elementleri

tarih 04 Eylül 2009 yazarMustafa AYDIN
Kategori: 
CSS, Web Tasarım
yorum 0 Yorum;

Bir önceki yazımda pseudo sınıflarından bahsetmiştim. Şimdi ise elementlerden bahsedeceğim. Yani sahte element sınıfları oluşturacağız diyebiliriz. Yazılışları pseudo sınıflarıyla aynıdır:

Kodu Görüntüle CSS
1

secici-adi: pseudo-elementi {özellik:değer;}

Hemen pseudo-elementlerinde bahsetmeye başlayalım:

First-line Pseudo-elementi

“First-line” pseudo elementi bir metnin ilk satırı için özel bir stil eklemek için kullanılır. Yani bir metnin sadece ilk satırının rengini değiştirebilir, kalın yapabilir, fontunu değiştirebilirsiniz. Kullanımı şu şekildedir:

Kodu Görüntüle CSS
1
2
3
4
5

p:first-line 
{
color:#ff0000;
font-variant:small-caps;
}

devamını oku

CSS Pseudo-sınıfları

tarih 04 Eylül 2009 yazarMustafa AYDIN
Kategori: 
CSS, Web Tasarım
yorum 0 Yorum;

CSS’de bulunan Pseudo (Sözde, Sahte) sınıflarla seçicilerinize özellikler ekleyebilirsiniz. Bunlar belli koşullarda uygulanacak özelliklerdir. Xhtml ile ulaşamadığımız koşullara ulaşabilmemizi sağlar. Belki şu anda ne demek istediğimi anlamadınız ama açıkladıkça emin olun kolay bir yöntem olduğunu fark edeceksiniz. Öncelikle Pseudo sınıflarının nasıl yazıldığını gösterelim:

Kodu Görüntüle CSS
1

secici-adi: pseudo-sinifi {özellik:değer;}

Gördüğünüz gibi her zamanki gibi bir sınıf adımız yani secici adımız var. Bu ister id olsun isterse de class olsun. Daha sonra iki nokta işaretini kullanıyor ve bir boşluk bıraktıktan sonra pseudo sınıf adını yazıyoruz ve süslü parantezlerimizin arasına da özellik ve özellik değerlerini belirtiyoruz.

Bağlantılar (Linkler) İçin Pseudo Sınıfları

Pseudo sınıflarını bağlantılarda kullanarak onlara istediğimiz şekilleri verebiliriz. Bağlantılarda kullanabildiğimiz pseudo sınıfları ise şunlardır : hover, visited, active, link. Belki bunları siz de kullanıyordunuz ama bunların adının pseudo sınıfları olduğunu bilmiyordunuz. Şimdi örnek kodlarımızı da gösterelim:

Kodu Görüntüle CSS
1
2
3
4

a: link (color: # FF0000) /* ziyaret edilmemiş link */ 
a: visited (color: # 00FF00) /* ziyaret link */ 
a: hover (color: # FF00FF) /* fare ile üzerine gelinen link */ 
a: active (color: # 0000FF) /* seçilen link */

devamını oku

Bağlantılara (Linklere) Küçük Önizleme Resmi

tarih 01 Eylül 2009 yazarMustafa AYDIN
Kategori: 
CSS, Javascript, Web Tasarım
yorum 2 Yorum;

Bazı sitelerde görürüz, var olan bağlantıların üzerine gittiğimizde açılacak olan sitenin küçük bir resmi gösterilir. İşte bunu ufak bir javascript ve css ile halledebiliriz. İlk olarak sayfanın en altında bulunan download butonuna tıklayarak gerekli dosyaları indirin. Bu .rar içerisinde iki adet dosya çıkacak. Biri javascript dosyası biri de image…

Şimdi ilk olarak javascript dosyamızı sitemizde head kodları arasına şu kodla ekleyelim (Not: Dosyalar sitenizin ana dizininde olduğu düşünülerek dosya yolu belirtilmiştir. Eğer başka bir dizine koyarsanız o yolu değiştirmeyi unutmayın.):

Kodu Görüntüle XHTML
1

<script language="JavaScript" type="Text/JavaScript" src=" arc90_linkthumb.js"></script>

Şimdi de css kodlarımız arasına şu kodu da ekleyelim:

Kodu Görüntüle CSS
1
2
3
4
5

.arc90_linkpic { display: none; position: absolute; left: 0; top: 1.5em; } 
.arc90_linkpicIMG {
 padding: 0 4px 4px 0; 
background: #FFF url(linkpic_shadow.gif) no-repeat bottom right;
 }

devamını oku

CSS Nimetleri – Bağlantınızın (Linkinizin) Üzerine Geldiğinizde Yeni Yazı Gösterme

tarih 01 Eylül 2009 yazarMustafa AYDIN
Kategori: 
CSS, Web Tasarım
yorum 2 Yorum;

Başlıktan pek bir şey anlamamış olabilirsiniz. Uygun bir başlık olarak en uygunu bu olduğuna karar verdim pek bir şey anlaşılmasa bile. Ama açıklamaya başlayayım en iyisi. :D Bir bağlantınız var diyelim ve o bağlantınızın üzerine fare ile gelindiğinde o yazının yerin başka bir yazı çıkmasını ya da yanına bir yazı daha eklenmesini istiyorsunuz diye düşünürsek başlığı biraz daha anlaşılır kılmış oluyor muyuz? CSS’nin bize sağlamış olduğu content kodu bu işe yarıyor işte. Hemen örneklerle açıklamaya geçelim. İlk önce XHtml kodlarımızı hazırlayalım:

Kodu Görüntüle XHTML
1

<a href=”#”>Bağlantı Yazımız</a>

Sonrada css dosyamızı şu şekilde hazırlayalım :

Kodu Görüntüle CSS
1

a:hover:after{ content: “ (Yazının Üstüne geldiğimizde görünecek yazı)”;}

devamını oku

CSS 3 İle Dışarıdan Font Dosyası Kullanma

tarih 31 Ağustos 2009 yazarMustafa AYDIN
Kategori: 
CSS3 Hakkında, Web Tasarım
yorum 0 Yorum;

CSS3 ile bir sürü yenilik girdi hayatımıza. Bunlardan biri de var olan yazı fontlarıyla yetinmeyenler için dışarıdan font dosyası tanıtma özelliğidir. Bu şekilde çok değişik fontları sitemizde dilediğimizce kullanabiliriz. Tabii bunun için öncelikle sunucumuza attığımız fontumuzu css dosyamıza tanıtmamız lazım. Bunun içinde css dosyamızın en başına şu şekilde bir kod eklemeliyiz:

Kodu Görüntüle CSS
1
2
3
4

@font-face { 
font-family: SketchRockwell; 
src: url(‘SketchRockwell.ttf’); 
}

Sonrasında bu fontu dilediğimizce istediğimiz yerde kullanabiliriz:

Kodu Görüntüle CSS
1
2
3
4
5
6

.ornek-sinif { 
font-family: SketchRockwell; 
font-size: 3.2em; 
letter-spacing: 1px; 
text-align: center; 
}

Şu anda bu özelliği destekleyen tarayıcılar: Firefox 3.5, Safari (3.2.1, Windows), Internet Explorer 7 ve 8 (Eğer. eot uzantılı yazı fontu kullanıyorsanız, pek fazla mümkün değil.)

Yatay Menüyü, Listeyi Ortalama

tarih 30 Ağustos 2009 yazarMustafa AYDIN
Kategori: 
CSS, Web Tasarım
yorum 0 Yorum;

Yatay menü ya da liste yapıp, onu sayfada ortalayamıyor musunuz? Çünkü listenizi büyük ihtimalle float özelliği ile oluşturuyorsunuzdur. Float özelliği ile yapılmış listelerde liste elemanları sağa yada sola dayalı olduklarından dolayı ortalanmazlar. Bu yüzden yapmanız gereken listenize bir genişlik vermektir. Ancak bunun da şöyle bir eksik yönü var. Diyelim bir Wordpress teması yaptınız ve bu temayı dağıtacak ya da satacaksınız. Ama bu temayı alanların liste uzunluğunu nerden bileceksiniz ki. Bu temayı her kullanan kullanıcının liste uzunluğu hep farklı olacaktır. İşte bu durumlarda listeyi düzgün bir şekilde ortalamanız zor olur.

Eğer listenizi float değil de display özelliği ile yatay duruma getirirseniz, istediğiniz şekilde bu listeyi ortalayabilirsiniz. Bunun için de display:inline değerini kullanmanız gerekir ve asıl listeyi ortalayacak olan ise ul etiketinde yazıları text-align:center kodu ile ortalamanızdır. İşte örnek XHTML VE CSS kodları. Css’de display:inline ve text-align:center kodlarının hangi etiketlerde olduğuna dikkat edin:

devamını oku

RSS Besleme Dosyanızda CSS Kullanın

tarih 30 Ağustos 2009 yazarMustafa AYDIN
Kategori: 
CSS, Web Tasarım
yorum 0 Yorum;

RSS Besleme dosyanızda Css kullanmak çok kolay. Böylece RSS Beslemenizde istediğiniz elementi görünür kılıp istediğiniz elementi de gizleyebilirsiniz. CSS sayesinde karmaşık haldeki metinleri daha anlaşılır hale sokabilirsiniz. Peki, Css dosyanızı nasıl RSS Besleme dosyanıza tanıtacaksınız. Çok basit, aşağıdaki örneğe bakarak ayarlayabilirsiniz.

Kodu Görüntüle XML
1
2
3

< ?xml version="1.0" ?>
< ?xml-stylesheet type="text/css" href="http://you.com/rss.css" ?>
...

Rss etiketinizde istediğiniz elementleri görünür kılıp istediğiniz elementleri de gizlemek için ise örnek kodumuz şu şekilde:

devamını oku