Netten Jquery ile google’dan veri arama örneği buldum. Çok hoş olmuş. Örneğe buradan, dosyalara da buradan erişebilirsiniz.

CSRF açıkları genellikle form doğrulamalarında, POST’larda ve GET’lerde görülebilir. Image yoluna aldatma olarak GET metoduyla istenilen query strinler de işletilebilir. Örneğin bir mesaj sistemi yaptık. İlgili kişilere göre yetki sistemini de ayarladık (moderatörler ve yöneticiler silme, değiştirme, onaylama vs.. işlemlerini yapabilme gibi) diyelim. Normal kullanıcıların işlem yapmaması için de güvenlikleri aldık diyelim. Gelelim burada CSRF açığından oluşabilecek güvenlik açıklarına…

Değiştirme, onaylama, silme olaylarını GET yöntemi ile adresten aldığımızı düşünelim (?P=Delete&Id=146). Bu linke giren yetkili kullanıcılar, veritabanında ki 146. idli veriyi silebilirler (?). Sayfanın içine <img src=”?P=Delete&Id=146“  /> image kodunu yazdıktan sonra, sayfaya giren daha önceden girişini yapmış yetkili kullanıcılar ilgili işlemin aynısını yapabilecekler. Farklı bir örnek olarak, bir sayfadan GET yöntemi ile gönderilen verilerinde aynı yöntemi tetikleyeceği unutulmamalıdır. Bir mail geldi diyelim. Kişi, linke tıklamanızı istiyor. Link boş bir html sayfası açıp o anda yönlendirme yaparak bu adresi açtığını düşünelim. O tıklayan kişi yine sisteme giriş yapmış, ve yetkili kullanıcıysa, yine “Delete” stringini görecek ve silme işlemi yapılacaktır.

Bu açıktan korunmanın en güvenli ve hızlı yolu, session kontrolü dür.  Db işlemlerinizden hemen önce session kontrolü yaparak, sayfanın oluşturulan session ile mi geldiğini kontrol ettirebilirsiniz.

Php’de örnek vereyim.

//Mesaj inputu poş ise.
if(empty($_POST["Mesaj"])) {
$_SESSION["anahtar"] = md5(rand(0,9999));
//Random olarak üretilen md5 sessiona atılıyor.

//Form yazdırılıyor.
echo ‘
<form method=”POST”>
<input type=”text” name=”Mesaj” />
<input type=”submit” value=”Gönder” />
<input type=”hidden” name=”token” value=”‘ . $_SESSION['anahtar'] . ‘” size=50″ />
</form>’;
}
//Eğer post işlemi var ve Mesaj değişkeninin içi doluysa
elseif(isset($_POST["Mesaj"])) {
//Sayfadan gelen “token” değeri oluşturulan session ile aynıysa işlemler yapılıyor
if( $_POST["token"] == $_SESSION['anahtar'] ) {
echo(“Giriş Başarılı<br><br>”) . $_POST["Mesaj"];
$_SESSION['anahtar'] = ”; //SESSIONımızı boşalttık ;)
}
else {
//Gelen değer eşit değilse hatayı bas ;)
die(“Doğrulama Yanlış !!!”);
}
}

Burada sayfa post edilmediyse rand ile oluşturulan md5 i session a atıyor. Sonra input hidden nesnesine oluşturulan md5 atanıyor.Post edildiyse oluşturulan en son session ile, Post’tan gelen inputdaki token değeri ile karşılaştırma yapılıyor. Eşitse işleme devam ediliyor. Değilse işlem sonlandırılıyor.

Bu sistem hem flood ı önlemekte, hemde gizli olarak farklı yerden gelen POST, GET ve image içinde ki request değerlerinden korumaktadır.

Form doğrulamarında, kodlarla uğraşmam bana hazır bişiler lazım diyosanız da reCAPTCHA sistemini öneririm.

Sadece TeknoSeyfo’da ;)

EĞİTİM SETLERİ

Jquery Temel Eğitim Seti
http://rapidshare.com/files/274584632/LcjQET-No.part1.rar
http://rapidshare.com/files/274585368/LcjQET-No.part2.rar
http://rapidshare.com/files/274584640/LcjQET-No.part3.rar
http://rapidshare.com/files/274585373/LcjQET-No.part4.rar
http://rapidshare.com/files/274584443/LcjQET-No.part5.rar

Jquery kullanarak Ajax Web Uygulamaları Nasıl Yapılır ?
http://rapidshare.com/files/166696371/How_To_Create_Ajax_Web_Applications_Using_JQuery.part1.rar
http://rapidshare.com/files/166697963/How_To_Create_Ajax_Web_Applications_Using_JQuery.part2.rar
http://rapidshare.com/files/166697403/How_To_Create_Ajax_Web_Applications_Using_JQuery.part3.rar http://rapidshare.com/files/166697234/How_To_Create_Ajax_Web_Applications_Using_JQuery.part4.rar http://rapidshare.com/files/166695765/How_To_Create_Ajax_Web_Applications_Using_JQuery.part5.rar

VİDEOLAR

Jquery Smooth Scrolling Tutorial
jQuery AJAX forms Tutorial
swfupload ajax jquery drupal module image editor
jQuery 1.2.3
Drag and Drop JQuery + AJAX
jComboBox demo Tutorial

YARARLI LİNKLER

1. jQuery Crash Course
2. Getting Started with jQuery
3. AutoCompleter Tutorial
4. Multiple File Upload Magic
5. jQuery for JavaScript programmers
6. Easy Ajax with jQuery
7. jQuery in 15 minutes
8. jQuery Tutorials for Designers
9. Wrapping Images With A Drop Shadow
10. Simplify Ajax development with jQuery
11. Rounded Corners
12. Getting Around The Minimum Height Glitch
13. Multiple Fancy Drop Caps
14. Semitransparent rollovers made easy with JQuery
15. Using JQuery to modify presentation while preserving document semantics
16. Fancy Drop Cap
17. Easy Multi Select Transfer with jQuery
18. Javascript Tooltips on Steroids
19. Edit In Place with AJAX
20. Style Sheet Switcheroo
21. Safer Contact Forms Without CAPTCHA’s
22. Photo Slider Tutorial
23. Text box hints
24. 5 JavaScript Tricks Made Easy with jQuery
25. JQuery Pop-up Menu Tutorial
26. A Quick Code Igniter and JQuery Ajax Tutorial
27. jQuery and XML revisited
28. What is JSONP?
29. Creating A Sliding Image Puzzle Plug-In
30. Slide out and drawer effect
31. Creating accessible charts using canvas and jQuery
32. jQuery liScroll – a jQuery News Ticker
33. Visual jQuery 1.1
34. Jquery Smooth Scrolling Tutorial
35. jQuery AJAX forms Tutorial
36. swfupload ajax jquery drupal module image editor
37. jQuery 1.2.3
38. Drag and Drop JQuery + AJAX
39. jComboBox demo Tutorial
40. 50+ Amazing jQuery Examples
41. 24 ways: Unobtrusively Mapping Microformats with jQuery
42. A List Apart: Articles: Frameworks for Designers
43. mad.ly – JQuery Ajax + Rails
44. 1007 + Ajax/Javascript/Dhtml examples and demos to download
45. QuarkRuby: Why I moved from Prototype to jQuery
46. XML.com: jQuery and XML
47. A List Apart: Articles: Prettier Accessible Forms
48. Agile Ajax: jQuery vs. Prototype v.JavaScript with or without training wheels
49. AlternateIdea: Your Mommas So Fat…Prototype vs. JQuery Edition
50. Ajaxian » Prototype and jQuery: A code comparison
51. 45+ Fresh Out of the oven jQuery Plugins
52. Learning jQuery » A Plugin Development Pattern
53. jQuery: » About client-side form validation and frameworks
54. Why jQuery is The Answer » Articles » Lucumr

ÖRNEKLER

1. jSocialize – jQuery version of mooSocialize!

2. jQuery Virtual Tour

3. jQuery Shoutbox

4. Coda Bubble Tooltip

5. Flexigrid – Data Grid/Table

6. Humanized Messages

7. Img Notes

8. Featured Content Glider

9. Anti-aliased Rounded corners with JQuery

10. jqDnR – Minimalistic Drag’n’Resize

11. jScrollPane

12. jQuery Date Picker

13. jQZoom

14. jQuery Star Rating Plugin

15. jquery.combobox

16. Scrollable HTML table

17. Accessible News Slider

18. Damn Small Rich Text Editor v0.2

19. jFlow 1.2 – The Ultra-lightweight Fluid Content Slider

20. Easy jQuery Pull Quotes

21. Galleriffic jQuery Plugin

22. Supersized – Full Screen Background/Slideshow jQuery Plugin

23. Building a jQuery Image Scroller

24. Sliding Boxes and Captions with jQuery Tutorial

25. Create a Resizable Image Grid with jQuery

26. Create Sliding Image/Reveal Content

27. Creating an Image Slider

28. Galleria jQuery Plugin

29. Create a Beautiful jQuery Slider Tutorial

30. GalleryView jQuery Plugin

31. Simple JQuery Image Slide Show with Semi-Transparent Caption Tutorial

32. jQuery Morphing Gallery Tutorial

33. Zoomimage – jQuery plugin

34. Full Screen Image Gallery Using jQuery and Flickr

35. Easy Slider 1.5

FAYDALI OLMASI DİLEĞİYLE
KAYNAKLAR: bildirgec.org, warez-bb.org, net.tutsplus.com, speckyboy.com

www.000webhost.com

bedava ve reklamsız olarak size 1500 mb alan ve 100 gb aylık trafik sunan bu host bence en güvenilirlerden ve internet dünyasında fazla olmasada bir kariyer yapmış bir firma. 5 dakikanızı ayırarak üye olup hemen hostunuzu alabiliyorsunuz. ayrıca firma “affililate program” çerçevesinde sizin tavsiye linkinizle üye olan ve 3 ay kesintisiz host kullanan kullanıcılar karşılığında size 100$ ödeme yapıyormuş. “yapıyormuş” kelimesinden de anlayacağınız gibi ben ödeme almadım açıkçası alanı da görmedim. hostun belli şartları var tabii ki bunlar; sitenizin aylık belli bir trafiği olması gerekiyor. tabii bu trafik yüzlerce tekil hit değil. aylık 4.84$ ödeyerek de sınırsız alan ve sınırsız trafik imkanından faydalanabiliyorsunuz. domaininizin dns ayarlarını yaparak kendi domaininizi kullanabiliyorsunuz. kendi domaininiz yoksa üzülmeyin sitenin size verdiği ücretsiz domainlerden biriyle hemen başlayabiliyorsunuz. bedava hostunuza istediğiniz siteyi kurabiliyorsunuz mybb smf joomla vs..
www.the3dev.com

firma size reklamsız ve bedava olarak 10 gb alan 500gb trafik sunuyor. 1 ftp hesabı ve 1 adet de mail hesabı veriliyor. pek kullandığım bir firma değil. 4 ay kadar önce bir site kurmuştum kimsenin uğramadığı deneme amaçlı ama sitem silinmiş. tabii sitenize bakmazsanız tüm bedava host firmaları zaten silmektedir.

www.0adz.com

firma her ne kadar ön plana çıkmasada hizmetleri gayet iyi. 5500 mb alan ve 200 gb aylık trafik veriyor. tabii bunların yanında en önemli artı özelliği 50 mysql database ve 50 domain ekleyebilmeniz. “peki bu ne anlama gelir?” derseniz; bir hesap alarak bu hostta tam 50 site barındırabiliyorsunuz. sitede ayrıca otomatik script kurulumu (29 tane) ile anında sitenizi hazırlayabilirsiniz.

www.5gigs.net

firma size reklamsız ve bedava olarak 5 gb alan 30 gb trafik sunuyor. 1 ftp hesabı ve 1 adet de mail hesabı veriliyor. ayrıca otomatik script kurulumu ile anında sitenizi hazırlayabilirsiniz. ayrıca ücretsiz istatistik sistemi de mevcut.

www.freewebhostx.com

firma size reklamsız ve bedava olarak 10 gb alan 10 gb trafik sunuyor. 1 ftp hesabı ve 1 adet de mail hesabı veriliyor. yine otomatik script kurulumu ile anında sitenizi hazırlayabilirsiniz.

www.createandhost.com

firma size reklamsız ve bedava olarak 10 gb alan 30 gb trafik sunuyor. 1 ftp hesabı ve 1 adet mail hesabı veriliyor. sitede ayrıca otomatik script kurulumu (29 tane) ile anında sitenizi hazırlayabilirsiniz. 20 mysql database ve 20 domain ekleme yani tek hesapla 20 site barındırabilrsiniz.

www.trsitem.co.cc

reklamsız ve bedava olarak 300 mb alan 10 gb trafik sunuluyor. 1 ftp hesabı ve sınırsız mail hesabı veriliyor. otomatik script kurulumu (29 tane) ile anında sitenizi hazırlayabilirsiniz. 7 mysql database ve 6 domain ekleme yani tek hesapla 6 site barındırabilrsiniz. sitenin başka bir avantajı sitenin türkçe olması. firmadan host almak isterseniz gmail hesabınızın olması gerekiyor. başka mail adresleriyle bedava host alamıyorsunuz.

www.byethost.com

benim de 4 sitemi bedava olarak barındırdığım hiç bir eksi yönünü görmediğim bir hosting firmasıdır. firma size reklamsız ve bedava olarak 5.5 gb alan 200 gb trafik sunuyor. 1 ftp hesabı ve 1 adet mail hesabı veriliyor. sitede ayrıca otomatik script kurulumu ile anında sitenizi hazırlayabilirsiniz. 50 mysql database ve 50 domain ekleme yani tek hesapla 50 site barındırabilrsiniz. cpanele girdikten sonra “add domain” tıklayarak domain ekleyip dns ayarlarını yaptıktan sonra yine cpanelden “fantastico type installer” tıklayarak domaininizle hemen site kurabiliyorsunuz. ayrıca phpbb, smf vs.. forumları 2 dakikada kurabilirsiniz.

kolay gelsin….

Kaynak: bildirgec.org

1. HTML Entity Character Lookup

Yazmış olduğunuz harf ve karakterlerin html karşılığını bulabiliyorsunuz.

2. Blueprint CSS framework

Çıktı alabilmeniz için proje üzerinde tablolarını kullanarak sağlam bir temel sağlar.
3. Typetester

Web tasarımcısının hayatını kolaylaştıran bu uygulama ekran için font karşılaştırması yapan çevirimiçi bir uygulamadır.

4. Em Calculator

Css tasarımı yaparken ölçeklenebilir ve erişebilir küçük bir javascript aracıdır.

5. Web Developer Toolbar

Firefox için hazırlanan bu uygulama ile menü ve araç çubuğunuza web geliştirici araçları ekleyebilirsiniz.

6. MeasureIt

Web sayfası üzerinde piksel genişlik ve yüksekliği hesaplamak için cetvel kullanarak çizim yapabilirsiniz.

7. ColorZilla

Yine firefox için diğer gelişmiş araçlar gibi renk seçimini iyi bir şekilde yapmanızı sağlıyor.

8. Firebug

Bu eklenti ile haya ayıklayabilir, düzenleyebilir ve css, html, javascript ekranları ile detaylı bir şekilde kod yapısını inceleyebilirsiniz.

9. Designers Toolbox

Her çeşit baskı ve web döküman boyutları

10. What the Font?

Bir resim göndererek veritabanında bulunan en yakın sonuçları size bildiren bir uygulamadır.

11. Formspring

Bu uygulama kendi bünyesinde bulunan bilgiler ile bütünleşik olarak firma ve organizasyonlara online form hazırlama imkanı verir.

12. Easy Web Form Builder

Sitenizi farklı tarayıcılarda test edebilirsiniz.

13. Icon Finder

Simge arama motoru

14. Button Browser

Buton galerisi ve Buton hazırlayıcı

15. Rounded Corner

Köşeleri yuvarlatılmış kutular oluşturmanızı sağlar ve resim dosyaları ile beraber html-css kodunu sizlere sunar.

16. BlogFlux Button Maker

Buton oluşturabileceğiniz güzel bir uygulama.

17. Vecteezy

Ücretsiz vektör grafikleri edinebilirsiniz.

18. Background Image Maker

Arkaplan grafikleri oluşturabileceğiniz güzel bir uygulama.

19. Photoshop Brushes

Bilgisayarınıza yükleyebileceğiniz photoshop fırça setlerine ulaşabilirsiniz.

20. Tartan Maker

Klas tasarımcılar için yeni moda uygulaması.

21. Color Schemer

Renk yönetimi için kullanabileceğiniz en iyi araçlardan birisidir.

22. Webs

Web sitenizi ücretsiz oluşturabilirsiniz.

23. Sampa

Ücretsiz web sitesi oluşturabileceğiniz güzel bir uygulama.

24. Format Pixel

Çevirimiçi dergi, broşür, katalog ve portföy oluşturabileceğiniz faydalı bir site.

25. Weebox

Flash tabanlı website oluşturmanızı sağlayan bir uygulamadır.

• kaynak: Bildirgec.org | devsnippets.com | pelfusion.com

1- Blak Magik

Demo (yoğunluk nedeni ile link çalışmıyor) – Download


2-Aerodrome

Demo – Download
3- Librio

Demo – Download

4- Fluid Yellow

Demo – Download

5- FourWPTP

Demo – Download

6- Carrington Blog

Demo – Download

7- Blue Zinfandel

2 Kolon : demo – Download
3 Kolon : Demo – Download

8- Grass Roots

demo – download

9- Mezzo

demo – download

10- Dreamline

demo – download tam listeye buradan ulaşabilirsiniz. sizin de önereceğiniz templateler olursa yorum olarak ekleyin lütfen.

Kaynak: Bildirgec.org

Yazının devamında bulacağınız 5 teknikle şimdiden geleceğin teknolojisi için hazırlık yapmaya başlayabilirsiniz.

1. Border Radius

border-radius

Muhtemelen günümüzde en çok kullanılan CSS3 tekniği border-radius elementi. Standart HTML blok elementleri kare şeklindedir ve 90 derecelik köşelere sahiptir. CSS3 ile birlikte gelecek olan bu yeni özellik ile birlikte yuvarlatılmış köşeleri de web sitelerimizde kullanabileceğiz.

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

border-radius ayrıca köşelerin her birini ayrı ayrı stillememize de izin veriyor ancak bunun için kullanılan sözdizimi -moz ve -webkit için biraz farklı:

-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

Bu özellik şimdilik Firefox, Safari ve Chrome tarafından destekleniyor. İlgili özellik ayrıca Twitter üzerinde de kullanılıyor.

Ayrıca bakınız:

• W3C şablonu
• CSS3.info’da border-radius
• Web Sanatı

2. Border Image

border-image

Adından da anlaşılabileceği üzere border-image, her bir nesnenin sınırları için bir görsel kullanabilmemizi sağlıyor. İlk olarak görsel, nesenin her bir köşesi için oluşturuluyor. Görselin her bir köşesi, HTML nesnesinin bir köşesine işaret ediyor. Ardından bu görsel aşağıdaki sözdizimi kullanılarak siteye aktarılıyor.

border: 5px solid #cccccc;
-webkit-border-image: url(/images/border-image.png) 5 repeat;
-moz-border-image: url(/images/border-image.png) 5 repeat;
border-image: url(/images/border-image.png) 5 repeat;

{border: 5px;} özniteliği sınırın genel genişliğini belirtirken ardından uygulanan her bir border-image kuralı görsel dosyasını hedefliyor ve tarayıcıya görselin o 5px genişliğindeki alanın ne kadarını doldurması gerektiğini söylüyor.

Sınır görselleri de tıpkı köşelerde olduğu gibi sınır başına tanımlanabiliyor. Bu sayede her bir sınır için farklı görseller kullanılabilmesinin de önü açılmış oluyor.

border-bottom-right-image
border-bottom-image
border-bottom-left-image
border-left-image
border-top-left-image
border-top-image
border-top-right-image
border-right-image

Bu özellik Firefox 3.1, Safari ve Chrome’de destekleniyor. Özellik ayrıca Blog.SpoonGraphics üzerinde de kullanılmış.

Ayrıca bakınız:

• W3C Taslağı
• CSS3.info’da border-image
• Firefox üzerinde border-image

3. Kutu ve Metin Gölgeleri

box-shadow

Gölgeler: Gölge efektini hanginiz sevmiyorsunuz ki? Bu efektler bir web tasarımını doğru kullanıldığında çok güzel, yanlış kullanıldığında da çok kötü yapabilirler. Şimdi, CSS3 ile birlikte gölge efekti oluşturmak için Photoshop’a bile ihtiyacınız olmayacak. Bugüne kadar bu özelliği sitelerinde kullanmaya cesaret edenler ortaya fena işler çıkarmadılar. Özelliğin kullanımına güzel bir örnek olarak bu yıl yayımlanmaya başlayan 24 Ways websitesi gösterilebilir.

-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;

İlk iki öznitelik gölgenin elementten ne kadar uzağa kadar esneyeceğini gösteriyor. Yukarıdaki kod örneğinde bu x ve y açıları için 10 px olarak belirtilmiş. Üçüncü öznitelik ise gölgenin bulanıklık seviyesini belirtirken son öznitelik ise gölgenin rengini tanımlıyor.

Bununla birlikte text-shadow özelliği aynı efektin metin üzerine de uygulanabilmesini sağlıyor.

text-shadow: 2px 2px 5px #ccc;

Şimdilik bu özellik Firefox 3.1, Safari, Chrome (sadece box-shadow) ve Opera (sadece text-shadow) üzerinde kullanılıyor. Örneğin kullanıldığı web sitesi ise 24 Ways.

Ayrıca bakınız:

• W3C Taslağı
• CSS3.info’da box-shadow
• W3C Taslağı
• CSS3.info’da text-shadow

4. RGBA ve Geçirgenlik İle Kolay Saydamlık

opacity

Web Tasarımında PNGlerin Kullanımı saydamlığı anahtar bir tasarım özelliği haline getirdi. CSS3 ile birlikte alpha ve geçirgenlik kurallarını kullanmak mümkün olacak.

rgba(200, 54, 54, 0.5);
/* örnek: */
background: rgba(200, 54, 54, 0.5);
/* ya da */
color: rgba(200, 54, 54, 0.5);

İlk üç numara kırmızı, yeşil ve mavi renk kanallarına işaret ederken son değer ise saydamlık efektini verecek olan alpha kanalını belirtiyor.

Alternatif olarak geçirgenlik kuralı ile birlikte renk ve geçirgenlik değerlerini ayrı ayrı belirtmek mümkün olacak:

color: #000;
opacity: #0.5;

Bu özellik Firefox, Safari, Chrome, Opera (opacity) ve IE7 (opacity, sorunlu). Bu özellik yine 24 Ways sitesinde kullanılmış.

Ayrıca bakınız:

• W3C Taslağı
• CSS3.info’da RGBA
• Saf CSS Geçirgenliği

5. @font-face İle Özel Web Yazıtipleri

@font-face

Web üzerinde daima güvenle kullanabileceğiniz yazıtipleri vardır: Arial, Helvetica, Verdana, Georgia, Comic Sans (hmm…) vs. Şimdi @font-face CSS3 kuralı ile birlikte yazıtipleri çevrimiçi bir dizin üzerinden çağrılabilecek ve web üzerinde kullanılabilecek. Ancak bu özellik telif hakkı sorunlarını da beraberinde getireceğinden şimdilik kullanabileceğiniz sadece birkaç yazıtipi bulunmakta.

Bu özelliğin kullanılabilmesi için gereken kod şu şekilde olmalıdır:

@font-face {
font-family:'Anivers';
src: url('/images/Anivers.otf') format('opentype');
}

Ardından font-family’nin geriye kalan öğeleri de günümüzde kullanıldığı şekilde kullanılmaya devam edecektir.

h1 { font-family: ‘Anivers’, Helvetica, Sans-Serif; }

Bu özellik Firefox 3.1, Safari, Opera 10 ve IE7 (çok sorunlu, eğer kendinizi yeterince cesur hissediyorsanız o zaman IE üzerinde font-face’i çalıştırmayı deneyebilirseniz) üzerinde çalışıyor. Bu özelliği kullanan bir web sitesi olarak TapTapTap gösterilebilir.

Ayrıca bakınız:

• font-face ile kullanılabilecek yazıtipleri
• IE’de font-face’i kullanmak
• Web yazıtipleri, bir sonraki büyük şey – A List Apart

Her ne kadar CSS3 halen geliştirme aşamasında olmasına rağmen burada listelenen kurallar daha şimdiden bazı tarayıcılar tarafından desteklenmektedir. Özellikle Safari‘nin bu yeni özellikler için tam desteği bulunuyor. Ancak ne yazık ki, bence dünyanın en iyi tarayıcısı olmasına rağmen Safari’nin kullanıcı sayısı halen çok değil bu sebeple bu özellikleri sırf Safari kullanıcıları için eklemek, en azından şimdilik pek mantıklı bir çözüm değil. Ancak Apple’ın Mac bilgisayarlarının kullanım oranının gün geçtikçe günlük hayatımıza girmesi ile birlikte Safari’nin de kullanım oranı önemli ölçüde artacaktır.

Firefox da öte yandan İnternet kullanıcılarının %20′den fazla bir kesimini içeriyor. Daha da önemlisi, pek yakında yayımlanacak olan Firefox 3.1 pek çok CSS3 özelliğini de destekliyor. Firefox kullanıcılarının pek çoğunun tarayıcılarını güncelleyeceğini varsayarsak, bu tip yeni stilleme kurallarını destekleyen tarayıcıları kullanan kullanıcıların sayısı önemli ölçüde artacaktır.

Google Chrome ise bu yıl içerisinde yayımlandı. WebKit işleme motorunu kullanan Chrome, aynı işleme motorunu kullanan Safari ile aşağı yukarı aynı özelliklere sahip. Safari özellikle Mac kullanıcıları arasında popülerken, Chrome’nin de piyasaya giriş yapması ile Windows kullanıcıları arasında popülerlik kazanmaya başlıyor.

Yüzde bazında W3′ün tarayıcı istatistiklerine göre Kasım 2008 itibarıyla W3School kullanıcılarının %44.2′si Firefox, %3.1′i Chrome, %2.7′si ise Safari kullanıyor. Bunun diğer anlamı ise bu yeni özellikleri İnternet kullanıcılarının %50′sinin görebilecek olması. Özellikle web tasarım komünitesi içerisinde, ki bu kesim tarayıcı seçimi konusunda daha özenli davranıyor, CSS3 desteğine sahip tarayıcıların kullanım oranı %73.6‘ya kadar çıkıyor (Blog.SoonGraphics‘e göre).

6. Kötü yanları

Web siteniz artık pek çok güzel tasarım özelliğine kavuşmuş olabilir, ancak bu özellikleri kullanırken daima aklınızın bir köşesinde tutmanız gereken bazı kötü tarafları da yok değil:

• Internet Explorer: İnternet kullanıcılarının %46′sı bu yeni özellikleri göremeyecek, o yüzden bu yeni özellikleri web sitenizin hayati önem taşıyan bölümlerinde kullanmayın. İkincil tercihlerin de CSS kodunuz üzerinde oluşturulmuş olmasına dikkat edin.
• Doğrulanmamış Stil Şablonları: Bu CSS3 özellikleri henüz son hallerine ulaşmış değiller. Şimdilik bazı tarayıcıları hedefleyen etiketlerle birlikte kullanılabiliyor. Bu özellikler, CSS stil şablonunuzun doğrulanmaması ile sonuçlanabilir.
• Fazladan CSS Kodlaması: Son maddenin devamı olarak her bir tarayıcıda aynı kuralı uygulamak için tarayıcıları ayrı ayrı etiketlemenin yanısıra CSS derlemesinin son kodunu da sitenize eklemek, CSS kodunuzun uzamasına yol açacaktır.
• Potansiyel Olarak Berbat Kullanımlar: Tıpkı Photoshop filtrelerinin berbat kullanım örneklerine rastladığımız gibi bu yeni stilleme özelliklerinin kötü kullanımı sonucunda da ortaya berbat web siteleri çıkabilir. Özellikle gölge efekti daha şimdiden kulaklarımın çınlamasına yol açıyor. Özellikle kurumların pazarlama departmanlarının bu özelliği ne derecede kullanmak isteyebileceklerini düşünmek istemiyorum.

• Kaynak: Bildirgec - Smashing Magazine