bildirgec.org - Bceksu - beğendikleri

jQuery Tools ile daha ileri jQuery gereçleri

Bceksu — Wed, 09 Dec 2009 10:28:00 GMT

Son zamanlar web programcıların biricik aşkı jquery'yi web tasarım işiyle uğraşıp da duymayan kalmamıştır sanırım.

Şimdi sizlere jquery efektlerinizi çok daha kolay ve zahmetsizce yapabileceğiniz jQuery Tolls'u tanıtacağım.

jQuery Tolls

.....

jQuery Tools en güzel özelliği belli başlı en çok kullanılan jQuery gereçlerini bir arada sunuyor olması.

Peki nedir bu gereçler derseniz;

Tabs (Sekmeler)
Web çalışmalarınızda yatay veya dikey sekmeler oluşturabilirsiniz.

jQuery Tolls | Tabs

Tooltip (Açıklama baloncukları)
Text alanlarına, Resimlere veya form elemanlarına açıklama veya yardım baloncukları koyabilirsiniz.

jQuery Tolls | Tooltip

Overlay (Modal Diyalog Kutucukları)
Son zamanlar birçok web sitesinde yer alan modal kutucukları.

jQuery Tolls | Overlay

Expose
jQuery Tools'un en sevdiğim özelliği diyebilirim. Sayfa içerisinde bir unsuru (örneğin; div, image, video) belirgin yapmanızı sağlıyor.

jQuery Tolls | Expose

Scrollable (Kaydırma)
Çok hoşunuza gideceğini umduğum kaydırma grupları oluşturabileceğiniz harika bir gereç. Örneğin bir kayıt formunu kaydırma efekteleri ile hazırlamanız mümkün.

jQuery Tolls | Scrollable

Flash embed
ve son olarak isminden de tahmin edeceğiniz gibi flash dosyalarımızı web sayfasına eklemek için kullanabileceğimiz bir gereç.

jQuery Tolls | Flashembed

jQuery Tools'un en önemli özelliğinin yukarıda saydığım özellikleri bir arada sunuyor olması demiştim fakat bu özelliklerden birkaç tanesini veya sadece birini kulanmayı planlıyorsanız plugin dosyalarını ayrı ayrı indirme şansınız da mevcut...

jQuery Tolls download sayfası için buraya
Demolar için buraya tıklayınız.

Bu yazı Bceksu tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Open Source TOP 100

Bceksu — Mon, 12 Jan 2009 08:11:00 GMT

Top 100

eğerli sizlerde open source hayranı iseniz. O zaman bu sayfa eminim hoşunuza gidecek.
t3n tamamen open source ( açık yazılım) dergisi. bu sayfada top 100 yazılımı bulmak mümkün.

1. MySQL
Yönetim » Veri Bankası

2. WordPress
Content Management » Blog

3. Firefox
Office & Multimedia » Browser & Feed-Reader

4. phpBB
Content Management » Forum

5. Ubuntu
Yönetim » İşletim Sistemi

6. Debian
Yönetim » İşletim Sistemi

7. osCommerce
Tıcaret » E-Tıcaret

8. Joomla!
Content Management » CMS

9. xt: Commerce
Tıcaret » E-Tıcaret

10. Plone
Content Management » CMS

11. Apache
Yönetim » Server

12. OpenOffice.org
Office & Multimedia » Office

13. Drupal
Content Management » CMS

14. Gnome
Office & Multimedia » Desktop

15. Eclipse
Geliştirme » IDEs & Editör

16. KDE
Office & Multimedia » Desktop

17. TYPO3
Content Management » CMS

18. VLC
Office & Multimedia » Multimedia

19. PostgreSQL
Yönetim » Veri Bankası

20. Serendipity
Content Management » Blog

21. Rails
Geliştirme » Frameworks

22. Thunderbird
İşbirliği » E-Mail

23. Movable Type
Content Management » Blog

24. VirtualBox
Yönetim » Sanal Yönetim

25. Moodle
Content Management » E-S

26. Magento
Tıcaret » E-Tıcaret

27. jQuery
Geliştirme » Ajax

28. Zope
Yönetim » Server

29. Tomcat
Yönetim » Server

30. Kubuntu
Yönetim » İşletim Sistemi

31. Gimp
Office & Multimedia » Grafik

32. MediaWiki
Content Management » Wiki

33. Blender
Office & Multimedia » Multimedia

34. phpMyAdmin
Yönetim » Veri Bankası

35. Pligg
Content Management » Sosyal

36. NetBeans
Geliştirme » IDEs & Editör

37. Zend Framework
Geliştirme » Frameworks

38. Audacity
Office & Multimedia » Multimedia

39. OpenSuse
Yönetim » İşletim Sistemi

40. 7-Zip
Office & Multimedia » Office

41. Asterisk
Yönetim » Server

42. Konqueror
Office & Multimedia » Browser & Feed-Reader

43. Miranda
İşbirliği » Instant Messaging

44. Mambo
Content Management » CMS

45. Phorum
Content Management » Forum

46. Songbird
Office & Multimedia » Multimedia

47. Miro
Office & Multimedia » Multimedia

48. Alfresco
Content Management » DMS

49. Inkscape
Office & Multimedia » Grafik

50. Django
Geliştirme » Frameworks

51. Firebug
Geliştirme » IDEs & Editör

52. Camino
Office & Multimedia » Browser & Feed-Reader

53. Scribus
Office & Multimedia » Grafik

54. Nagios
Yönetim » Server

55. Lighttpd
Yönetim » Server

56. Trac
Geliştirme » Bugtracking

57. Spring
Geliştirme » Frameworks

58. Edubuntu
Yönetim » İşletim Sistemi

59. Xen
Yönetim » Sanal Yönetim

60. Pidgin
İşbirliği » Instant Messaging

61. Prototype
Geliştirme » Ajax

62. Dojo
Geliştirme » Ajax

63. Firebird
Yönetim » Veri Bankası

64. Piwik
Tıcaret » Online-Marketing

65. IPCop
Yönetim » Server

66. Sqlite
Yönetim » Veri Bankası

67. Textpattern
Content Management » Blog

68. Symfony
Geliştirme » Frameworks

69. MPlayer
Office & Multimedia » Multimedia

70. KOffice
Office & Multimedia » Office

71. AbiWord
Office & Multimedia » Office

72. OpenCms
Content Management » CMS

73. Sphinx
Geliştirme » Arama

74. Zimbra
İşbirliği » Groupware

75. Burn
Office & Multimedia » Multimedia

76. Notepad++
Geliştirme » IDEs & Editör

77. CakePHP
Geliştirme » Frameworks

78. MediaPortal
Office & Multimedia » Multimedia

79. YUI
Geliştirme » Ajax

80. Sunbird
Office & Multimedia » Office

81. Bugzilla
Geliştirme » Bugtracking

82. Vienna
Office & Multimedia » Browser & Feed-Reader

83. TWiki
Content Management » Wiki

84. Fedora
Yönetim » İşletim Sistemi

85. Freemind
Office & Multimedia » Grafik

86. Squid
Yönetim » Server

87. Mootools
Geliştirme » Ajax

88. Elgg
Content Management » Sosyal

89. Contenido
Content Management » CMS

90. XAMPP
Yönetim » Server

91. Beast
Content Management » Forum

92. Liferay
Content Management » Portal

93. Mantis
Geliştirme » Bugtracking

94. Filezilla
Office & Multimedia » FTP

95. Adium
İşbirliği » Instant Messaging

96. SpamAssassin
Yönetim » Antivirus & Antispam

97. FWP shop
Tıcaret » E-Tıcaret

98. Script.aculo.us
Geliştirme » Ajax

99. eGroupWare
İşbirliği » Groupware

100. Vanilla
Content Management » Forum

Bu yazı Bceksu tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Türkiye'nin İnteraktif Web Ajansları

Bceksu — Tue, 25 Aug 2009 16:17:00 GMT

teknolojinin gelişmesiyle birlikte internet dünyası da bu gelişmelere paralel olarak hızla yoluna devam ediyor. Bu değişim ister istemez internet site tasarımlarına da yeni ve modern tasarım ve uygulamalar olarak karşımıza çıkıyor.

Bu yeni trendlerin arka planında "interaktif web tasarım ajansları" yer alıyor.

türkiye’nin önde gelen markalarının digital ortamda kurumsal web sitesi tasarımlarını yapan yaratıcı "interaktif ajanslar" hem kendi sitelerinin tasarımları, hem de zengin, kaliteli portfolyoları ile tasarımcılara ''ilham kaynağı'' oluyor.

kimi ajanslar sadece web 2.0 kurumsal bazlı projelere ağırlık verirken, kimi ajanslar sadece kampanya sitelerinde ön plana çıkıyor, bazı ajanslar ise her iki kategoride de çalışmalara imza atmış.

c-section

www.csdlab.com

turkcell, arçelik, coca cola gibi markaların daha çok kampanya siteleri üzerine yaratıcı web çalışmalarına imza atan ve yaptığı projeleri "bebek" olarak isimlendiren c-section "2008 altın örümcek ödülleri"nde, kendi kategorilerinde aşağıdaki çalışmaları ile derece almış.

istanbul modern (birincilik)
sıradışı araba bravo (birincilik)
sevgiliyekurabiye (ikincilik)
kitchenette (ikincilik)
ray sigorta (ikincilik)
efe rakı (üçüncülük)
futbola yeniden bak (üçüncülük)
arçelik süpürge banner (en iyi banner, birincilik)
WWF Banner (en iyi banner, ikincilik)

magiclick

magiclick

diğer ajanslardan farklı olarak sade ve kurumsal bir web sitesine sahip olan magiclick "2008 Altın Örümcek yarışması"nda, kendi kategorilerinde,
hsbs ile ikincilik, clubfinans ile üçüncülük ödülünü alırken ta-ze ve rotavirus siteleri ile birincilik ödülünü almış.

manadigital

manadigital

2003 yılında kurulan manadigital interaktif projelerin yanında kurumsal işler de yapıyor. son olarak bonus ve türk telekom web sitelerini yapmışlar. "2008 Altın Örümcek Yarışması"'nda "turktelekom" ile ikinci, farklı kategorilerde fiat500 ve "en büyük asker bizim asker" siteleri ile üçüncülük ödülü almışlar.

ad interactive

adinteractive

igoa

igoa

igoa "2008 Altın Örümcek Ödülleri Yarışması"nda, kendi kategorilerinde "nil takipte" sitesi ile birincilik, "nba-garanti" ile ikincilik, "otto istanbul" sitesi ile üçüncülük ödülünün sahibi.

madebycat

madebycat

madebycat'in "2008 Altın Örümcek Yarışması"nda etkinlik kategorisinde garanti talent camp sitesi ile birincilik ödülü var.
pixelplus

pixelplus

2000 yılında kurulan pixelplus 2008 Altın Örümcek Yarışmasında iki ödülün sahibi:

flexi card (birincilik)
renkli ufuklar (en iyi erişilebilir site)
mimar sinan güzel sanatlar üni. (ikincilik)
wolksvagen binek araç (ikincilik)
garanti emeklilik (üçüncülük)

tagwondo

tagwondo

türkline

türkline

türkiye'de internetin başlangıcı olarak kabul edilen 1997 yılında faaliyetlerine başlayan türkline, akbank sitesi ile "global finance magazine" tarafından iki ödül alırken; aynı zamanda axess, fishcard, biletix, bmw, citibank'ın,kurumsal web sitelerini yapmış.

onkaplan

on kaplan

""on kaplan"', global finance magazine dergisi tarafından 2008 yılı "türkiye'nin en iyi bireysel bankası'" ödülünü alan "garanti.com.tr"' sitesini yapmış.

41? 29!

41? 29!

akinon design

akinon design

akinon "2008 altın örümcek yarışması"nda turkolimpiyat takımı ve cartoon network siteleri ile kendi kategorilerinde üçüncü olmuşlar.
B2B

b2b

gri creative

gri creative

mocha creative

mocha creative

nexum creative

turkcell.com.tr ile 2008 altın örümcek ödülü bulunuyor.

rabarba

rabarda

17 ay önce kurulan rabarda, 40'a yakın yaptığı proje ile 2008 altın örümcek yarışmasında caloynasin, turkcellsuperligi ile birincilik ödülü alırken, dodisigelenedido sitesi ile de ikincilik ödülü almış. ayrıca turkcell'in tarife yumurtlayan tavuk'u, garanti bankası'nın yazık değil mi carlosa kampanyasını da yapmışlar.

sistemsensin

wanda digital

wanda digital

ruffles ile altın örümcek 2008 en iyi site ödülünün sahibi olan wanda digital, yapı kredi ile üçüncülük, bendegemideyim ile de ikincilik ödülünün sahibi.

trafo

trafo

vodaco agency

vodaco agecy

""vestel 'in kurumsal"" web sitesi ve vestel pixellence sitelerini yapmışlar.
young new media

young new media

2007 altın örümcek'de dört ödüle layık görülmüş bir ajans.

be2do

galya reklam ajansı

interajans

litespell

luckyeye

nerdverk

project house

pure new media

biyer

bezoone

bezoone

bezoone 2008 altın örümcek yarışması'nda kendi kategorisinde hotic ile birincilik ödülü, thy banner ile en iyi banner, marketingturkiye ve fxtv siteleri ile ikincilik, turk.net ile de üçüncülük derecelerinin sahibi olmuş.

code interactive

code interactive

şekerbank, tansaş, teb faktoring projelerine imza atmışlar.

creaturk

creaturk

sibername

hiperaktif

hiperaktif

sesliharfler

sesli harfler

precision design

precision design

crema

crema

galen

primeart

positive

positive

ilginizi çekebilir:

+ rengârenk kampanya siteleri
+ rengârenk kampanya siteleri 2
+ web tasarımcılar için 11 araç
+ 35 kore web sitesi tasarımı

Bu yazı Bceksu tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Google'da ileri arama teknikleri-1

Bceksu — Mon, 20 Jul 2009 11:05:00 GMT

Değerli arkadaşlar burada anlatacaklarım google da arama boşluğuna yazmanız gereken kodlar ile ilgilidir. Bu kodları yazdıktan sonra arayacağınız kelimeleri yazdığınızda karşınıza bambaşka sonuçlar çıkıyor.

google

İlk olarak

inurl:

koduyla başlayacağım. bu kodu yazdıktan sonra ilk yazacağınız kelime site url'si olmalı, diğer kelimeler de o url içerisinde arayacağınız kelimeler olmalıdır. Bunu bir örnek ile anlatacak olursak; benim sitem olan fullturizm.com içerisinde Ayasofya kelimesinin geçtiği sayfaları arayacağız. Bunun için arama boşluğuna, inurl:fullturizm ayasofya yazmamız yeterlidir.

İkinci kodumuz ise

allinurl:

Bu kodun bir öncekinden farkı aradığınız kelimenin url'de yer aldığı sayfaları göstermesidir. Bir öncekinde fullturizm.com sitesi içindeki tüm ayasofya kelimesinin geçtiği yazı ve sayfaları gösteriyordu. Bu kodda ise ayasofya kelimesinin url'de geçmesi zorunluluğu aranıyor.

Üçüncü kodumuz

intitle:

Burada ise koddan sonra ilk yazılan kelime başlık satırında aranır, diğer kelimeleri ise o sitedeki metinlerin içerisinde arar.

dördüncü kodumuz

allintitle:

kodudur. ilk üç koddan farklı olarak yazılan tüm kelimelerin başlık satırında olmasının istendiği durumlarda kullanılır.

beşinci kodumuz

intext:

Bu koddan sonra yazılan kelimeler sitelerin metin kısmında olmasını istediğimiz durumlarda kullanılır.

altıncı kodumuz

allintext:

Bu kodun 5. koddan farkı, aradığımız birden fazla kelime var ise bu kelimelerin sanki tırnak içinde yazmışız gibi görülmesi. sitelerin sadece metin kısımlarında olmasını istediğimiz durumlarda kullanırız.

yedinci kodumuz

filetype:

kodudur. Bu kod, adından anlaşılabileceği gibi google tarafından desteklenen dosya formatlarında arama yapacağımız durumlarda kullanılmalıdır.

sekizinci kodumuz

cache:

google tarafından daha önce indexlenmiş ve google'ın belleğinde tuttuğu daha sonraları herhangi bir sebeple online olmayan site veya yayınları bulmanızda işinize çok yarar.

Bu yazı Bceksu tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

etkili grafikler oluşturmak için 25 ücretsiz kaynak

Bceksu — Wed, 15 Apr 2009 15:57:00 GMT

sunumlar, eğitim hayatımız olsun iş hayatımız olsun birçok alanda karşımıza çıkar. sunumların en önemli kısımlarından birisi de sunumda bahsi geçen ölçülerin, değerlerin ne kadar yer tuttuğunu grafik olarak gösteren diyagramlar, tablolardır.
bu bildiride, sunumlarınızda, sitenizde veya diğer projelerinizde kullanmak üzere birbirinden mükemmel grafikler oluşturmanızı sağlayacak 25 adet ücretsiz kaynağa yer vereceğiz. ayrıca yazının sonunda 3 adet ders bulunmakta (Adobe Illustrator ve css için).

JS Charts (java tabanlı grafik üretici)

Visifire

Protovis

XML/SWF grafikler

pChart (PHP)

Open Flash Chart 2

JFreeChart (flash)

Chronoscope

Ejschart (Javascript)

FusionCharts Free

Google Chart Generator

Flare (ActionScript library)

Google Chart API

YUI Library

Protochart

Timeplot (DHTML-based AJAXy widget)

CSS Chart Generator

PlotKit (Javascript)

Flotr (javascript)

Bluff (JavaScript)

Raphaël (JavaScript)

Pure Css Line Graph

Pure Css Data Chart

CSS Stacked Bar Graphs

Illustrator tutorial

[kaynak]

Bu yazı Bceksu tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Size Sıfırdan jQuery Öğretecek 15 Kaynak

Bceksu — Sun, 11 Jan 2009 11:14:00 GMT

Belki tam bir jQuery uzmanısınız. Ya ne olacak canım, John Resig'in tam kendisisiniz belki de... Ya da Bildirgeç üzerinde "Prototip", "jQuery", ve "Mootools" gibi kelimeleri görüp "Bunlar da ne ola ki?" diye hayıflanıp duruyorsunuz... Şimdi tüm bunları öğrenmenin zamanı geldi.

Bu endüstride, -özellikle günümüzde daha önce hiç olmadığı kadar-, tasarımcılar kodculara, kodcular da tasarımcılara dönüşüyor... Bir geliştiricinin görevi SADECE ön ya da arkaplan işlerini yürüten kod yazmak olmaktan çıkıyor. jQuery işte bu aradaki mesafeyi kapatmaya yardımcı olan bir JavaScript kütüphanesi. JavaScript erişilemez bir yetenek değil. Daha önce yayımladığım size sıfırdan PHP öğretecek 25 kaynak yazısının site kullanıcıları tarafından çok tutulan bir yazı olduğunu gördükten sonra nettuts üzerindeki benzer bir yazıyı da jQuery dersleri için yayımlamayı uygun gördüm. Bu makalede daha önce hiç jQuery üzerinde çalışmamış geliştiricilere jQery kütüphanesini öğrenmelerine olanak sağlayacak 15 kaynağı listeleyecek ve ilgili kaynaklar hakkında bilgi vereceğim. Eğer bugüne kadar bu kütüphaneye herhangi bir nedenden ötürü korkup yaklaşmamışsanız, şimdi ona yaklaşmanın tam zamanı. Ne kadar kolay olduğuna inanamayacaksınız.

jQuery de ne ola ki?
jQuery.com'a göre jQuery hızlı ve öz bir JavaScript kütüphanesi olup HTML belgelerinizi olayları işleyebilecek, animasyonlar yürütebilecek ve web sayfalarınıza Ajax etkileşimleri dahil edebilmenizi kolaylaştırır. jQuery, bugüne kadar JavaScript yazma şeklinizi geliştirmek için tasarlanmıştır.

Daha basit anlamı ile jQuery, daha önce 10 satır yazdığınız JavaScript kodunu iki satırda yazmanıza olanak sağlayan bir kütüphane! Geriye kalan sekiz satırın en verimli şekilde başkaları tarafından halihazırda yazıldığını ve bu kodun da JavaScript çalıştırabilen tüm modern tarayıcılarda yürütülebildiğini düşünün. Daha jQuery'i derinlemesine öğrenmeden bile zengin formlardan Flash gibi menüler oluşturabileceksiniz. Bir başka iskeleti daha öğrenmek istemiyorum demeyin. Aşağıdaki kaynaklar size bu yolda adım adım rehberlik edeceklerdir.

Neden diğerlerini değil de bu kütüphaneyi kullanmalıyım?
Sonuç olarak bu sizin seçimiz. Her bir iskeletin (framework) kendine özgü avantajları vardır. Ancak jQuery'nin günümüzün en popüler JavaScript iskeleti olmasının ardında bazı nedenler yatıyor.

Birden fazla tarayıcı ile uyum. Her bir JavaScript ikmali sırasında web geliştiricilerinin önemli bir zamanını, geliştirdikleri betiğin farklı tarayıcılar üzerinde beklendiği gibi çalışıp çalışmadığını test etmesi beklenir. Ne şans ki jQuery kütüphanesi bu tarayıcı uyumsuzluklarını gideriyor ve geliştiricilere kendi kodları üzerinde daha fazla zaman harcayabilmelerine olanak sağlıyor.

CSS Seçicileri. CSS sözdizimlerini kullanarak, geliştiriciler halihazırda kullandıkları bilgilerini belgelerine kolayca dahil edebilirler. CSS 3 ve XPATH seçicilerinin de desteği ile, jQuery sayfanızdaki elementleri kullanmak için mükkemel bir mekanizma sunuyor.

Zincirleme. jQuery kendi metodları için "zincirleme" (chaining) adı verilen bir yöntem kullanır. Bir jQuery nesnesi üzerinde bu yöntemi çalıştırdığınız her zaman, ilgili yöntem aynı jQuery elementini çalıştırır. Bu nedenle de her bir yöntem için seçicilerinizi yeniden yazmanız gerekmez. Tıpkı ".NET" tarzındaki bir özelliği kullanarak daha küçük dosya boyutlarına sahip ve kolay okunabilen kodlar yazabilmenizi sağlar.

Eğer merakınız iyice arttıysa, çok güzel! Hemen başlayalım.

Adım 1: Kütüphaneyi İndirin
Bu yolculuktaki ilk durağınız kütüphaneyi bilgisayarınıza indirmek olacaktır. jQuery.com'u ziyaret edin ve "Download jQuery" bölümüne gidin. Listedeki bağlantılardan birine tıklayarak kütüphaneyi bilgisayarınıza indirin. Daha sonra indirdiğiniz .js dosyasını HTML belgenize dahil etmeniz gerekecek.

CSS-Tricks.com: jQuery'e Giriş: Bu jQuery eğitim videosunda, CSS-Tricks websitesinden Chris Coyier, jQuery'i web sayfanıza nasıl dahil edebileceğinizi ve birkaç özelliği nasıl yazabileceğinizi gösterecek.
Digital-Web.com: jQuery: Başlangıç Kursu: Kod yazmayı bilen web tasarımcıları için jQuery'e giriş kursu.
Slideshare.net: "30 Dakikada jQuery Öğrenmek": Eğer slayt gösterilerinden hoşlanıyorsanız, bu ders size jQuery kullanarak nasıl slayt gösterileri oluşturabileceğinizi ve aynı zamanda size jQuery öğretmeyi hedefliyor.

Adım 2: İlk Fonksiyonunuzu Oluşturun
jQuery'i öğrenme aşamanızın daha ilk birkaç dakikasında kendi fonksiyonlarınızı oluşturmaya başlayacaksınız. İlk durağınız John Resig'in giriş maklesi "jQuery Nasıl Çalışır?" olmalı. Resig, web uygulamalarınız üzerinde kullanacağız pek çok kolay anlaşılır yöntemi anlatacak. Anlatacakları arasında sınıf ekleme ve kaldırma, zincirleme ve "document.ready" yöntemini çağırmak yer alıyor.

jQuery.com: "jQuery Nasıl Çalışır?": Bu giriş makalesinde John Resig (jQuery'nin yaratıcısı) sizi animasyon oluşturmanın temellerine götürecek. Eğer jQuery'e yeniyseniz bu makaleyi kesinlikle okumanız önerilir.
15DaysOfJquery.com: 1. Gün: jQuery'nin tüm özelliklerini iki haftada kavramak gibi cesur bir girişimde bulunan "15 Days of jQuery" (jQuery ile 15 Gün) web sitesi her gün bir konuyu işliyor. Bu makalede "document.ready" yöntemini nasıl kullanmanız gerektiğini öğreneceksiniz.
VisualJquery.com: "jQuery Sözlüğünüz": VisualjQuery.com web sitenizi dijital sözlüğünüz olarak düşünün. Site, kullanılabilen her bir jQuery yönteminin sözdizimini ve açıklamasını içeriyor. Bu siteyi yer imlerinize eklemeyi unutmayın.

Adım 3: Elementlerinizi Canlandırın

Bu pek çok geliştirici için tartışmalı bir konudur. Birinci grupta "sıfır animasyon"da ısrar eden insanlar bulunur. Bunlar kullanıcının istediklerine mümkün olan en hızlı şekilde cevap verilmesine ve aradan çekilmesini tercih ederler. Onlara, bir sonraki uğraşı için bekleyen bir zombi gibi davranmayın. İkinci grupta da bazı insanlar vardır. Onlar, göze hoş görünen animasyonlar içeren bir siteye, kendi kullanıcıları için uygun bir site gibi bakarlar. Bu animasyonlar uygun kullanıldığında animasyonların kullanılırlığı önemli ölçüde arttırdığına inanırlar. Siz, hangi grupta olduğunuza karar vermelisiniz. Hangi grupta olursanız olun jQuery'nin sayfanızdaki elementleri hareket ettirebilme görevini mümkün olan en kolay şekilde yerine getirebildiğini unutmayın.

jQuery.com: "Animasyonlar jQuery'nin animasyon yeteneklerini öğrenirken burası uğramanız gereken ilk yer olmalı. Makale, bu yöntemi kullanırken ihtiyacınız olacak parametreleri detaylandırıyor.
Detached Designs: jQuery'nin Animasyon Yeteneklerini Öğrenmek: Konu animasyona geldiğinde hiç deneyiminiz yok mu? Bu makale özellikle animasyon konusunda hiç deneyimi olmayan kullanıcıları hedef alıyor. Makalenin içerdeği başlıklar arasında metin boyutunu değiştirmek, elementleri hareket ettirmek, animasyonları zincirlemek gibi her jQuery kullanan geliştiricilerin işine yarayacak konuları içeriyor.
Web Designer Wall: Tasarımcılar İçin jQuery Dersleri: Halen jQuery'nin gücü kafanızı mı karıştıryor? Bu site menülerden imaj değiştirmeye kadar 10 adet örneği detaylandırarak bu muhteşem kütüphanenin yetenekleri hakkında sizi bilgilendirmeyi hedefliyor.

Adım 4: Eklentiler
jQuery ile ilgili güzel olan bir şey var ki o da kütüphane geliştirilirken, John Resig ve ekibi kütüphanenin özelliklerini eklentiler kullanarak geliştirmenin sadece birkaç satır kod ekleyerek mümkün kılmak üzerine çalışmış olmaları. Kendinize özgü yöntemleri çok kısa süre içerisinde yazabileceksiniz! Bu eklentileri ana kütüphaneden ayrı tutarak (bu arada jQuery kütüphanesinin sadece 16KB olduğunu da hatırlatalım), bu özel eklentileri sadece gerektiği zaman sayfalarımıza dahil edebileceğiz. Bunun sonucunda JavaScript dosyalarınızın boyutu mümkün olan en küçük seviyede kalacaktır.

jQuery Corner Gallery
Elementlerinize yuvarlatılmış köşeler eklemek için CSS3'ün tüm tarayıcılar tarafından desteklenmesini beklemek istemiyor musunuz? O zaman jQuery kullanarak elementlerinize kolayca yuvarlatılmış köşeler ekleyebilirsiniz. Sadece yuvarlatılmış köşeler ile de sınırlı kalmayın, zira eklenti çeşit çeşit köşe tiplerini de bünyesinde barındırıyor. Bu eklenti araç kutunuzda kalıcı bir yer bulabilir.
Kullanıcı Deneyimini Geliştirin: 10 Kullanışlı jQuery Eklentisi Bu makalede James Padolsey, kendince en iyi jQuery eklentilerini listelemiş.
jQuery.com: "Eklentiler": Her zaman olduğu gibi jQuery.com değerli bir kaynak olmaya devam ediyor. Bu makale ilk eklentinizi oluşturmak için size adım adım rehberlik ediyor.

Adım 5: AJAX Özelliğini Dahil Etmek
Şu ana kadar öğrendiğiniz jQuery yetenekleri ile kendinizi güvende mi hissediyorsunuz? Yeteneklerinizi bir sonraki seviyeye yükseltmeye hazır mısınız? Neden betiklerinize biraz Ajax özelliği dahil ederek başlamıyorsunuz? Her ne kadar "load()" ve ".get()" yöntemlerinin kullanımı ile jQuery veri yüklemeyi inanılmaz derecede kolaylaştırıyor. Aşağıdaki kaynaklar eğitiminiz için hayati önem taşıyor.

Sitepoint.com: jQyery ile Kolay AJAX: Akash Mehta'nın Sitepoint için hazırladığı bu makalede web uygulamalarınıza AJAX eklemenin jQuery kullanılarak ne kadar da basit bir işlem olduğu anlatılıyor.
Tasarımcılar için jQuery: AJAX Kullanarak Form Doğrulama: Bu makalenin yazarı Remy, bizlere jQuery kütüphanesinin yanında AJAX kullanarak bizlere, web tabanlı formlara nasıl sunucu taraflı doğrulama özelliğini ekleyebileceğimizi gösteriyor.
Nettuts.com: jQuery Kullanarak İçerik Nasıl Yüklenilir ve Hareket Ettirilir?: jQuery dersleri ararken NETTUT'un "Javascript" kategorisine bir gözatmayı unutmayın. Bu derste NETTUTS ekibi jQuery kullanılarak bir verinin nasıl yüklenebileceğini ve ardından onu taşıyan elementin nasıl hareket ettirilebileceğini göstermiş.

Bu yazı Bceksu tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

SenCSs: Layout Dışındaki Herşey İçin CSS Framework'ü

Bceksu — Mon, 29 Dec 2008 08:00:00 GMT

SenCSS Logo

SenCSs bir CSS iskeleti olup anahat iskeleti ve ızgara sistemler dışında her şeyi kontrol altına almak isteyen kullanıcılar için geliştirilmiştir. İskeletin desteklediği öğeler arasında:

yaz tipleri ve boyutları
dolgular (padding)
marjlar (margin)
renkler
tablolar ve listeler
başlıklar, alıntı blokları (blockquote) ve geri kalan her şey yer alıyor.

SenCSs'nin formlar için de desteği bulunuyor. Bu sayede web tabanlı formlarınız daha güzel görünüyor. Framework'ün gelecek sürümlerinde daha iyi form desteği vaadediliyor.

İskelet bünyesinde ayrıca hata, uyarı ve doğrulama mesajları için de stil tanımlamaları yer alıyor. Bu tip mesajlar günümüzde standart web uygulamalarının birer parçası olarak kullanılıyor.

SenCSs her ne kadar yeni bir iskelet olup halen geliştirilme aşamasında olsa da, yeni web projelerine sıfırdan başlayıp kendi ihtiyacınıza göre şekillendirebileceğiniz başarılı bir temel olarak gösterilebilir.

Bu yazı Bceksu tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

BluePrint CSS Framework'ünü Kullanmak

Bceksu — Tue, 30 Dec 2008 06:46:00 GMT

Türkçe'ye CSS İskeleti olarak çevirebileceğimiz CSS frameworkleri, CSS tabanlı web siteleri hazırlarken bize zaman kazandıran en büyük yardımcımız. Blueprint CSS de en popüler CSS iskeletleri arasında yer alıyor ve geliştiricilere büyük kolaylıklar sunuyor. Ben de bu yazımda daha önce CSS iskeletleri ile çalışmamış kullanıcılara Blueprint CSS ile nasıl kolayca web sitesi oluşturulabileceğini anlatmaya çalışacağım.

Blueprint CSS iskeleti, HTML ve CSS içeren tüm projeler üzerinde çalışırken size zaman kazandıran bir proje. İster statik bir sayfa üzerinde çalışıyor olun, isterseniz Rails ya da PHP gibi sunucu tabanlı betikleri kullanın, BluePrint CSS iskeleti işinize oldukça yarayacaktır.

BluePrint CSS nedir?
Eğer siz de benim gibi bir tasarımcıdan ziyade geliştirici iseniz, o zaman yeni bir projeye başlarken CSS ile ne yapacağınıza karar verme sürecinin zorluklarından ve bu sürecin her yeni bir proje için tekrar ediyor oluşunun zorluğu ve sıkıntısından haberdarsınızdır. Proje ilerledikçe tasarımınız muhakkak değişecektir, ancak siz daha başlangıçtan iyi görünümlü bir tasarım istiyorsunuz. Siteniz için CSS yazmaya başladınız ve Firefox ile Safari üzerinde sorunsuz çalıştığını gördünüz, ama bir dakika, IE'yi unutmayalım. Ardından biraz HTML yazdınız ve tüm boşlukları doğru hesapladığınızdan emin olmak için kodunuzu tekrar tekrar kontrol ettiniz. Süper! Bitti! Üç gün sonra, projenin gereksinimleri değişti ve kendinizi site şablonunu yeniden kodlarken buldunuz. Hmm...

Şimdi, tüm CSS öğelerini yalamış yutmuş muhteşem bir tasarımcı olsanız, ya da bir PSD şablonu üzerinden çalıştığınız için tasarımın değişmeyeceğinden emin olsanız bile, bu öğrenebileceğiniz yeni şeylerin olmayacağı anlamına gelmiyor. İşte BluePrint tam bu noktada devreye giriyor ve size işinize yarayabilecek bir dizi aracı sunuyor.

Zamanınızı yenilikler için harcayın, tekrar etmek için değil

Bu slogan blueprintcss.org websitesinde yer alıyor ve Blueprint CSS iskeletini net bir şekilde özetliyor aslında. Blueprint, projelerinizi üzerine inşa edebileceğiniz muhteşem bir temel sunuyor ve bunu herkesin beğeneceği bazı standart stil şablonlarını, tipografi elementlerini, ızgara iskeletini, güzel görünümlü formları ve yazdırma stil şablonunu tüm popüler tarayıcılara uyguluyor. Gelin hep birlikte BluePrint'in bunu nasıl başardığına bakalım.

BluePrint Kaynak Dosyaları

reset.css Bu dosya tüm tarayıcıların varsayılan HTML element tanımlamalarını sıfırlar. Eminim hepiniz bir projeye başlamadan önce <body> elementine 'margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;' ya da bunun gibi stil elementlerini dahil ediyorsunuzdur. İşte reset.css'nin da yaptığı iş bu ve çok daha fazlası: Boşluklar, tablolar, yazıtipleri vb elementlerin css değerlerini sıfırlıyor ve size projenize başlamanız için temiz bir ortam sunuyor.
typography.css Bu dosya bazı varsayılan tipografi değerlerini tanımlıyor. Tüm stilleri burada açıklamayacağım ancak bu dosyanın BluePrint CSS iskeletinin en sevdiğim parçası olduğunu belirtmek isterim. Tahmin edersiniz ki projenizi bitirdikten sonra sayfanın bir köşesinden fırlayan 'Times New Roman' stilinde bir yazıya rastlamak hiç hoş olmayacaktır. BluePrint'in typography.css dosyası işte bunun önüne geçiyor ve yazıtipi boyutları, tablolar, satır aralıkları gibi elementler için stil kurallarını belirliyor.
grid.css bu dosya blueprint'in ızgara (grid) şablon kurallarından sorumlu. Bunu kullanan sınıflara (class) birazdan değineceğim. Izgara ile ilgill değinmem gereken önemli bir nokta blueprint'in varsayılan olarak 950px genişliğe sahip, her biri 30px genişliğinde ve aralarında 10px boşluk bulunan 24 sütun kullanıyor oluşu. Bu size biraz fazla katı gelebilir ancak BluePrint Izgara CSS Oluşturucusu'nu kullanarak her zaman kendi ızgara modellerinizi oluşturabilirsiniz. Eğer bu paragraf kafanızı karıştırdıysa panik yapmayın, yazımın devamında ızgara şablonu kullanarak site taslağımızı oluşturacağız. Ancak eğer CSS ızgara modellerine aşina değilseniz, Raj'ın Web Tasarımı İçin Hangi CSS Izgara İskeleti'ni Kullanmalıyım? makalesi sizin için iyi bir başlangıç olabilir.
ie.css BluePrint IE'yi destekliyor, işte bu sebeple IE'yi özel kılan o küçük detayları adresleyen kendi özel CSS dosyasına sahip :) İşin güzel yanı, BluePrint bunu sizler için hallediyor ve bu sebeple, iskeletin tüm ana elementleri tüm ana tarayıcılarda (IE 5 bile dahil) kullanılabiliyor.
print.css Bu dosya bazı varsayılan yazdırma stillerini tanımlıyor. Bu sayede ziyaretçileriniz web sitenizin yazıcıdan çıktısını aldığında normalden daha iyi görünmesini sağlıyor. print.css dosyasının bir diğer güzel özelliği de web sitenizin alan adını girebileceğiniz özel bir bölümü içeriyor olması. Bu sayede site içeriğinizde eğer herhangi bir bağlantı bulunuyorsa, yazıcı çıktısı alındığında o adres, bağlantı metninin hemen yanında parantez içerisinde görüntülenecektir. Bu alanı doldurmazsanız sadece harici sitelere olan bağlantılarınız doğru şekilde görüntülenecektir. daha detaylı bilgi için print.css dosyasının son kısmını inceleyin.
forms.css Bu dosya ise güzel görünümlü formlar ile uyarı mesajlarının kullanılabilmesini sağlıyor. Eğer Rails kullanıyorsanız flash uyarılarını bile görüntüleyebilirsiniz. Bu dosya, yazımın devamında değinmeyeceğim tek dosya olduğundan, aşağıdaki resim size bazı varsayılan form stilleri kullanılarak oluşturulmuş bir form örneğini gösteriyor.

BluePrint CSS form

bu altı farklı stilşablonunu eklemek zorunda mıyım?
Hayır. BluePrint CSS, HTML sayfalarınız için sıkıştırılmış üç adet CSS stilşablonunu içeriyor. screen.css yukarıdaki 1., 2., 3. ve 6. stil şablonlarını içeriyor. Bunun yanısıra print.css ve ie.css bulunuyor. İşin güzel yanı, blueprint css iskeletinin modüler yapısı sayesinde her bir css dosyasının birbirinden bağımsız işleyebiliyor oluşu. Bu sayede BluePrint'in sunduğu şablonlardan sadece istediğiniz şablonu kullanabilirsiniz. Örneğin BluePrint CSS Izgara modelini kullanmak istemiyor olabilir, ancak typography.css ve reset.css'nin nimetlerinden faydalanmak istiyor olabilirsiniz. Diğer bir deyişle diğer CSS elementlerinin işlemesi için BluePrint ızgara modelini kullanmak zorunda değilsiniz.

BluePrint kullanarak şablon oluşturalım

BluePrint CSS Şablonu

Yazımızın devamında, hobi amaçlı hikaye yazan kullanıcıların hikayelerini paylaşabileceği ve diğer kullanıcıların da hikayelere yorumlarını ekleyebileceği bir site oluşturcağız.

Aranızda eminim sıkı tasarımcılar bulunuyordur ve yukarıdaki resme baktığınızda bu ne biçim tasarım diyenleriniz olacaktır. Ancak burada ilginç olan şey, benim yukarıdaki tasarımı oluşturmak için tek satır CSS kodu yazmamış oluşum. Yukarıdaki tasarım varsayılan BluPrint CSS stil tanımlamalarını kullanıyor ve tasarım açısından türünün en iyi örneği değil elbette. Ancak yukarıda da bahsettiğim gibi yukarıdaki görünüme ulaşmak için tek bir satır kod yazmadım ve ayrıca hazırladığım bu şablon benim projem için güzel görünümlü ve kolayca değiştirilebilir olması açısından önemli. Tasarımım muhtemelen ilerleyen dönemlerde değişeceğinden, BluePrint benim bu değişiklikleri kolayca uygulayabilmemi sağlıyor.

Parçalara Ayıralım
Belgenin başlık (<head>) kısmı
Bildirgec kod örneklerini görüntülemede verimli bir ortam sunmadığından makalede yer alan kodları harici bir txt dosyası olarak yayımlamayı uygun gördüm. Yukarıdaki bağlantıya tıklayarak koda ulaşabilirsiniz.

İlgili kod örneği, tipik bir <head> etiketinin Blueprint kullanıldığında nasıl görüneceğine iyi bir örnek teşkil ediyor. İskeletin CSS dosyalarını dahil ederek işe başlamanız gerekiyor (bu dosyalar screen.css, print.css ve ie.css'den oluşuyor).

BluePrint ile ilgili en iyi şeylerden biri de salt CSS'den oluşması, bu sayede de tıpkı diğer tüm CSSlerde olduğu gibi modifiye edilebilir. İşte BluePrint eklentileri de bu şekilde çalışıyor. Örneğimde BluePrint fancy-type eklentisini kullandım. İlgill eklenti bazı güzel görünümlü tipografi öğelerini barındırıyor. Kod örneğinde de göreceğiniz üzere ilgili eklenti dosyasını blueprint css iskelet dosyalarını dahil ettikten sonra sayfama dahil ettim, bu sayede ilgili eklenti, blueprint css değerlerinin üzerine yazarak kendi değerlerini aktif hale getirebiliyor. Buraya kadar bazı BP eklentileri mevcut. İlgili eklentiler basitçe bazı öntanımlı BluePrint elementlerinin üzerine yazarak kendi değerlerini CSS iskeletine entegre ediyor.

Sayfa Başlığı

BluePrint Sayfa Başlığı

Kod Örneği İçin Buraya Tıklayınız
Bu kod ile ilgili en önemli nokta, ızgaranın 'container' sınıfına (class) dahil bir <div> ile çevrelenmesi gerekiyor oluşu. Eğer bunu uygulamazsanız içeriğiniz ızgaraya dahilinde görüntülenmez. <hr /> etiketleri BluePrint tarafından sayfanın bölümlerini dikey olarak ayırmak için kullanılıyor. 'alt' sınıfı ise fancy-type eklentisi tarafından kullanılıyor ve herhangi bir metin elementinin daha farklı görüntülenmesi için kullanılıyor.

Ana İçerik

BluePrint Ana İçerik

Kod örneği için buraya tıklayınız.

Bu kod örneğinde pek çok önemli detay bulunuyor. Gelin en üstteki <div class="span-17 colborder"> ile başlayalım. Bu etiket sayfa üzerindeki en geniş <div>'i simgeliyor. Bu bölüm, kod örneğinde göreceğiniz 'Featured Book' bölümünün yanısıra hemen altındaki daha küçük iki kutucuğu çevreliyor. 'span-17' sınıfı Blueprint ızgara şablonuna ait ve ilgili sınıfın kullanıldığı <div> etiketinin, sayfanın tamamındaki 24 sütunun 17'sinin genişliğinde olduğunu belirtiyor (17/24). Diğer bir sınıf 'colborder' ise column border (sütun sınırı) teriminin kısaltılmışı ve BluePrint'e, ilgili sınıfın kullanıldığı <div>'in sağına bir sınır eklemesi gerektiğini belirtiyor.

Önemli: 'colberder' sınıfı bir sütunun tamamını kullanıyor. Ana içerik kısmında 17 sütun (span-17) kullandığımızı hatırlıyorsunuzdur. Bu durumda yan çubuğun (sidebar) 7 sütun genişliğinde olduğunu düşünüyorsunuzdur (17+7=24). Ancak 'colborder' elementi bir sütunu işgal ettiğinden yan çubuk kısmının genişliği için elimizde 6 adet sütun kalmış durumda (17+1+6=24).

Yan çubuğa geçmeden önce 17 sütunluk kısım dahilinde bulunan iki kutucuğa dikkatinizi çekmek istiyorum ('Upload a book' ve 'Write a review' yazan kutucuklar). Aslında bu alan bir diğer BluePrint ızgarası içerisinde konumlandırılmış durumda. Bu dahil <div> 17 sütunluk bir <div> içerisine dahil edildiğinden, bu <>div>'in genişliği de tahmin edeceğiniz üzere 24 değil 17 sütundan oluşuyor.

Bu durumda ilk <div> 'span-8' ve 'colborder' sınıflarına dahil edilmiş. Bunun anlamı, ilk kutucuğun genişliği 8 sütundan oluşuyor ve sağ kısmında bir sınır bulunuyor. İkinci <div> ise yine 'span-8' sınıfının yanısıra 'last' sınıfına dahil edilmiş. Burası Blueprint ızgara iskeletinin önemli bir noktasına işaret ediyor. En sağdaki sütun mutlaka 'last' sınıfına dahil edilmeli. Bu sınıf, BluePrint'e, o sütunun sayfanın en sağındaki son sütun olduğunu belirtiyor ve bu sebeple onun sağına herhangi bir boşluk dahil etmemesi gerektiğini söylüyor. Son olarak iki adet kutucuğu içeren <div> için en fazla genişliğin 17 sütun olduğunu belirtmiştim. Kutucukların her birinin genişliğini 8 sütun (span-8) olarak tanımladık ve soldaki kutucuğu 'colborder' sınıfına dahil ettik. Bu durumda 17 sütunun tamamını kullanmış olduk (8+1+8=17).

Tamamdır, şimdi yan çubuğa geri dönelim. Bu yan çubuğun 'span-6' ve 'last' sınıflarına dahil edildiğini göreceksiniz. Bu yan çubuk, soldaki 17+1 sütunluk ana içerik kısmını tamamlıyor. Eğer fark etmediyseniz, 'span-#' sınıflarında # yerine 1 ila 24 arasında herhangi bir sayıyı yerleştirebilirsiniz. Daha fazla sütuna sahip bir ızgarayi tercih etmediğiniz sürece 'span-#' sınıfı herhangi bir numarayı içerebilir, yeter ki onu kapsayan (container) <div> etiketinin toplam ızgara sütun sayısından küçük olsun.

Aşağıdaki kod örneği ızgarayı örneklendirebilmek için oldukça basit bir şablonu kullanıyor. Kodu incelerseniz ızgara sisteminin nasıl çalıştığına dair bir fikriniz olacaktır.

Kod örneğine ulaşmak için tıklayınız.

Gelin bu CSS şablonunda kullandığımız diğer CSS sınıflarını inceleyelim.

'caps': Bu sınıf yan çubuk başlıkları için kullanılıyor. fancy-type eklentisi tarafından sunulan bu sınıf, tamamı büyük harflerden oluşan başlıklar oluşturabilmenizi sağlıyor.
'box': Bu sınıf özellikle listelerin görüntülenmesi için oldukça kullanışlı. Bu sınıfa dahil olan <div> etiketleri dahilindeki listelerin çevresinde bir boşluk bulunuyor ve yine ilgili kısım çevresinde bir sınır (border) bulunuyor.
'quiet': Bu CSS sınıfı, dahilindeki metnin rengini açık griye dönüştürüyor.
'prepend-top': Bu sınıf, yan çubuk dahilindeki 'Recent Reviews' bölümünde kullanılıyor. Bu sınıfa dahil olan elementin üst kısmına 1.5em'lik bir marj (margin) uyguluyor. Benzer bir sınıf olan 'append-bottom' ise aynı işlemi alt kısmına uyguluyor.
'prepend-5': Ben bu sınıfı küçük kutucuklardaki başlıkları sağa doğru itelemek için kullandım. Blueprint üzerinde aralıklar bırakmak için bir dizi sınıf bulunuyor: 'prepend', 'append', 'pull', ve 'push'. Prepend ve Append sınfları sırasıyla sola ve sağa dolgu (padding) eklemek için kullanılıyor. Pull ve Push sınıfları ise sırasıyla sola ve sağa marj (margin) eklemek için kullanılıyor. Tüm bu etiketler de ızgara modelini kullanıyor, bu sebeple ilgili sınıfın kullanıldığı <div> üzerinde kullanılabilecek en fazla sütun sayısından daha fazla bir sütun kullanmamanız gerekiyor (24 sütunluk bir ızgara modelinde 'prepend-25' sınıfını kullanmamanız gerektiği gibi).

BluePrint Footer Breakdown

Eğer CSS kutu modeli ile haşır neşir değilseniz ve padding ile margin arasındaki farkı bilmiyorsanız, hemen o konuda kısa bir ders verelim. CSS'de padding uygulanması durumunda, padding'in uygulandığı elementin sınırları dahilinde boşluk eklenir ve bu durum, ilgili elementin boyutunu arttırır. Örneğin, sınırları (border) olan bir tablo üzerinde çalışıyorsunuz ve bu tabloya padding eklemek istediniz. Bunun sonucunda tablonun sınırları tablonun kendisinden uzaklaşacaktır, zira padding elementi, tablonun sınırları dahilindeki içeriği etkiler. Öte yandan margin ise bunun tam tersidir ve boşluğu sınırların dışına etkiler ve uygulandığı elementin boyutlarını etkilemez. Bunun sonucunda margin uygulanan elementler, çevresindeki elementleri ya da elementin kendisini iteler. Aşağıdaki resim CSS kutu modelini çok net bir şekilde özetliyor.

CSS Box Model

BluePrint CSS ile hazırladığımız site

Özet
Bu rehber Blueprint CSS iskeleti sayesinde bir sonraki projenizinin ana şablonunu kolayca oluşturabilmenize nasıl katkı sağlayabileceğini ve CSS sıfırlamaları ve tipografi tanımlamaları ile sizin sırtınızdaki yükü nasıl hafifletebileceğini özetlemeye yönelik olarak hazırlandı. Ayrıca Blueprint'i Rails ile birlikte kullanıyorsanız Github üzerindeki şu kaynağı incelemenizi öneririm. İlgili kaynakta Blueprint'in Rails ile nasıl uyumlu çalışabileceğine dair pek çok örnek bulunuyor.

Blueprint'in en sevdiğim yanı sadece CSS'den oluşması. Tümüyle CSS. Eğer bu makalenin ardından Blueprint ile ilgileniyorsanız, gidin ve kaynak kodlarını inceleyin. Eğer biraz CSS bilginiz var ise sistemin nasıl çalıştığını kolayca kavrayacaksınızdır. Blueprint'in çok büyük bir kod tabanı yok, hatta pek çoğumuzun ortalama bir projede kullanacağından çok daha az CSS içeriyor. Eğer kaynak kodu okumak istiyorsanız Github üzerindeki Blueprint kaynağını inceleyebilirsinz.

Blueprint ile ilgili bilmeniz gereken birkaç kaynak:

BluePrint'in web sitesi blueprintcss.org. İskeleti indirmek için en iyi kaynak.
Varsayılan olarak Blueprint sabit şablonu kullanır. Eğer likit şablonlar ile ilgileniyorsanız, bu eklenti işinizi görecektir.
Burada da bir dizi işe yarar Blueprint eklentisi bulunuyor.

Bu yazı Bceksu tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Web Tasarımında Altın Oran

Bceksu — Sat, 03 Jan 2009 16:44:00 GMT

Matematik güzeldir. Kulağa garip mi geliyor? Ben de tasarım yapmaya ilk başladığımda aynısını düşünmüştüm. Matematik esnek değildir ve genellikle sıkıcıdır, en azından ben öyle düşünürdüm. Pek çok sanat eserinin, estetik olarak göze hoş gelen tasarımların, nesnelerin hatta bazı insanların ortak matematiksel değerleri paylaştığını duyunca şaşıracaksınız. Yunanca Φ (phi) harfinden esinlenen ve ilahi oran olarak da bilinen altın oran özellikle bunların başında geliyor. Bu rehber bir websitesinin anatomisini ve çatısını kapsıyor ve Alton Oran'ın buna olan etkisini inceliyor.

Web Sayfasının Anatomisi
Web sayfananın öğeleri organlar gibidir, estetik olarak göze hoş gelen ve düzgün işleyen bir web sayfası için hayati önem taşımaktadır.

Bunlar bir web sayfasının ana elementleridir. Bunları organize etmek için pek çok yöntem bulunmakla birlikte en sık kullanılan şablon budur.

Container (Kapsayıcı)

Tüm web sayfaları kapsayıcılar kullanır ve aynı amaca, sayfa elementlerini kapsama amacına hizmet etmek için de olsa kullanım şekli değişkendir. Örneğin body etiketi ya da div en sık kullanılan şeklidir. Geçmişte tablolar bile bu amaçla kullanılmıştır (siz tabloyu sayfanızda kapsayıcı olarak kullanmayın, bu yöntemin değeri kayboldu). Kapsayıcıları, yatak odanızın, mutfağınızn, salonunuzun ve oturmanızın içine döşendiği, evinizi kapsayan fazladan bir duvar olarak düşünün.

Kapsayıcı tipleri:

Likit (Liquid): Tarayıcı penceresini dolduracak şekilde genişler.
Sabit (Fixed): Seçtiğiniz genişliğe sahiptir ve tarayıcı pencere boyutuna göre değişkenlik göstermez.

Header (Başlık)
Başlıklar aslında bir elementi tanımlamalazlar ancak bazıları onu bu şekilde kullanabilir. Genellikle web sayfasınızın logosunu, navigasyonunu, sloganını vs. kapsayan bölüm için kullanılır. Pek çok kişi bu elementleri daha kolay sayfa stillemek, element bölümlemek ve/veya sınırlamak için bir div içerisinde taşırlar. Başlıklar da birer taşıyıcı olarak algılanabilecekleri için yukarıda anlatıldığı gibi Likit ya da Sabit formda kullanılabilir.

Logo
Logonuz kimliğiniz ve markanızdır. Logonuz için en uygun yer başlık içerisinde sol kısımdır. Soldan sağa ve yukarıdan aşağı doğru okuruz, bu sebeple logonuzun ziyaretçilerinizin bakacağı ilk nesne olması muhtemeldir.

Navigasyon
Sayfa navigasyonu en önemli elementlerden birisidir, ziyaretçilerinizin websitenizi kullanabilmesi için gereklidir. Kullanması ve bulunması kolay olmalıdır, ki bu sebeple genellikle başlık bölümünde ya da sayfanın üst kısmına yakın bir yerde konumlandırılır. Bazen yoğun içeriğe sahip websitelerinde her iki tip navigasyonun kullanıldığı görülür.

Navigasyon tipleri:

Yatay: Birbiri ardına dizilmiş ve genelde "navigasyon" diye tabir edilen bir dizi link.
Dikey: Alt alta dizilmiş ve genelde "menü" diye tabir edilen bir dizi link.

Main Content (Ana İçerik)
Herkesin bildiği (ya da bilmesi gerektiği) gibi içerik kraldır! İnsanlar sitenizi ziyaret ettiklerinde genel olarak bakacakları element budur. Web sayfasının ana odak noktası olmalı ki ziyaretçiler aradıklarını kolayca bulabilsinler.

Sidebar (Yan Bar)
Yan bar; reklam, site araması, abonelik bağlantıları (RSS, Twitter, Elektronik posta vs.), iletişim yöntemleri gibi öğeleri içerebilecek bir elementtir. Bu elementi kullanmak her ne kadar gerekli olmasa da pek çok websitesi bunu kullanır. Genellikle sağa dayalı olarak kullanılsa da bazen sola dayalı, ya da ana içeriğin her iki yanında da kullanıldığı görülür. Burada unutulmaması gereken ana içerikten daha baskın hale gelmemesi gerekliliğidir. Dikey VE yatay navigasyon kullanan websitelerinde yan bar genellikle dikey navigasyon elementi ile birlikte kullanılır.

Footer (Altlık)
Web sayfasının altı genellikle altlık elementini kullanır ve bu element ziyaretçilerinizin sayfanın tamamlandığını anlamasını sağlar. Tıpkı başlık elementinde olduğu gibi altlık elementi de kullanması zorunlu bir element olmamakla birlikte daha çok bir kapsayıcı elementtir. Altlık içerisinde telif bilgileri, yasal uyarılar ve iletişim bilgilerinin kullanıldığı sık görülür. Web sitenizin ana sayfası, iletişim bilgilerinin yer aldığı sayfa gibi önemli sayfalara birkaç bağlantı içermesi de tercih edilid. Bazı websiteleri bu alanı sayfanın içeriği ile ilişkili başka içeriklerden ya da diğer önemli içeriklerden bahsetmek amacı ile kullanırlar.

"Whitespace" (Boşluk)
Web sayfasının bu alanı tipografi ya da diğer içerikle doldurulmayan tüm alanlara verilen genel addır. Bazen her boşluğu doldurmak zorunda hissedebilirsiniz kendiniz ama bunun olmasına izin vermeyin. Boş alanlar iyi web tasarımının tıpkı içerik gibi önemli bir alanıdır. Bildirgeç websitesinde beyaz alanların kullanıcıların içerik arasında yolunu bulabilmeleri için zekice kullanıldığını, sayfa balansı oluşturduğunu ve içerik bölümlemesini sağladığını göreceksinizdir.

Altın Oran ve Izgara Kullanımı
Daha önce matematiğin güzel olduğunu söylediğimi hatırlıyor musunuz? Görsel zevki altın oran temelinde algılıyoruz. Binlerce yıldır sanatçılar, tasarımcılar, mimarlar vb. bilerek ya da bilmeyerek göze hoş gelen eserlerin ortak bir oran kullanarak oluşturdular. Peki bu sihirli numara nedir? 1.62 (aslında 1.618...) Bu numaranın kökenine değinmeyeceğim ancak nasıl kullanabileceğinizi göstereceğim.

Altın oranı kullanmak çok kolaydır. Diyelim ana içerik ve yan bar sütunlarınızın genişliğini buldunuz. İçerik alanınzın toplam genişliğini aldınız (örneğimizde 900px kullanacağız) ve onu 1.62'ye böldünüz. Yukarıdaki örnekte görüldüğü gibi 900px'i 1.62'ye bölerseniz 555.55px elde edersiniz. Sayının tam olmasına gerek yok, o yüzden biz 555px diyelim. Şimdi ana içerik elementinin 555px olacağın, yan barın da 345px olacağını biliyorsunuz. Ne kolay değil mi?

Ama durun! Eğlence burada sona ermiyor. Altın oranı elementin yükseliği ile oranlayarak da kullanabilirsiniz. Bu, Altın Oran orantıları ile estetik olarak göze hoş gelen elementlerin oluşması ile sonuçlanacaktır.

Izgara (Grid) Kullanmak

Eğer siz de diğer pek çok insan gibiyseniz, bu oranı kullanmak istediğiniz her zaman hesap makinesine koşturmayacaksınız. Bu işlemi basitleştirmek için ızgara kullanabiliriz. Tek yapmanız gereken genişliğinizi ve/veya yüksekliğinizi üçerli bölümler halinde ayrıştırmaktır.

Her bölüm kendi içerisinde de üçerli gruplara ayrılarak daha detaylı ızgaralar oluşturulabilir. Eğer daha önce yayımladığım BluePrint CSS Framework'ünü Kullanmak yazımı okuduysanız, BluePrint CSS iskeletinin detaylı bir ızgara sistemini kullandığını göreceksinizdir. Izgara sistemleri tasarımı kolaylaştırmak ve çabuklaştırmakla kalmaz, onları estetik olarak göze hoş gelen bir çatıya yerleştirir. Eğer halihazırda tasarımlarınızı yaparken ızgara sistemlerini kullanmıyorsanız, şimdi başlangıç için doğru zaman olabilir. Fireworks, Photshop ve daha fazlası için http://960.gs üzerinden ızgara modellerini indirebilersiniz. 960.gs, CSS ızgara modelini kullanan bir başka iskelet sistemidir.

Yukarıdaki resimden de görebileceğiniz üzere NetTuts Altın Oran'a iyi uyum sağlamış görünüyor. Sayfanın üst üçte birlik kısmı kendi arasında yine üçe ayrılmış durumda ve hatta buradan başlık alanının kendi içerisinde de gruplara ayrıldığını görebiliyorsunuz. Altın Oran'a oldukça yakın. NetTuts tasarımının göze neden hoş geldiğine şaşmamak gerek.

Eğer tasarım işinde yeniyseniz, sizi bazı popüler siteler bulmanızı, onların element yayılımını ve Altın Oran ile ızgara sistemleri ile olan ilişkisini incelemenizi şiddetle öneririm. Ardından biraz zaman ayırarak kendi elementleriniz üzerinde Altın Oran'ı uygulamaya ve sonucu ızgara üzerine yerleştirmeye çalışın.

Kaynak: NetTuts

Bu yazı Bceksu tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

ücretsiz online php editör - php anywhere

Bceksu — Sat, 29 Nov 2008 07:08:00 GMT

php anywhere - a free online php editor

php anywhere, php/html ile kodlanmış web site projelerinize, ftp sunucu bilgilerinizi girerek, herhangi bir yerden, istediğiniz bir web tarayıcı ile erişmenize, düzenlemenize ve geliştirmenize yardımcı olacak, ücretsiz online php editördür.

php anywhere sitesine gitmek için buraya, ücretsiz üyelik için buraya tıklayabilirsiniz.

Bu yazı Bceksu tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage