bildirgec.org - orhanveli firik - beğendikleri

jQuery Yazı Efektleri

orhanveli firik — Sat, 28 Nov 2009 08:48:00 GMT

jQuery ile yapılan birçok uygulama bulunmakta. Artık jQuery ile yazılarınız ilede oynayabilirsiniz! Büyütme, küçültme, renk değiştirme, yer değiştirme vb. gibi uygulamarın tamamını yapabilirsiniz.

Mouse Hareketine Göre Değişen Yazı Efekti | demo - ders

Mouse'nuzu yazıların üstüne getirdiğinizde büyürler, yer, renk veya şekil değişitirmesini sağlayan jQuery uygulaması.

IE'de gölgeli yazı efekti | demo - ders

Yanlızca IE'de (internet explorer) çalışan gölgeli jQuery yazı efekti uygulaması. Yazılarınızı dahada vurgulu yapabilirsiniz.

jQuery ile Yazıların Renklerini Değiştirme | demo - ders

Bu jQuery uygulaması ile isterseniz seçtiğiniz iki renk arasındaki tüm renkleri kapsayarak yazınızı şekillendirebilir ya da

herhangi bir butonu tıkladığınızda yazınız renklenebilir. Bu sayede ziyaretçilerinizin dikkatini çekebilirsiniz.

jQuery ile Yazı Arka Plan Efekti | demo - ders
Ziyaretçileriniz yazının üstüne tıkladığında arka plan sizin seçtiğiniz renk veya renklere dönüşüyor.

jQuery ile Yazı Tipi Büyütme | Demo - Ders

Birçok web sitenin üstünde gördüğünüz A-, A, A+ butonları ile yazı tipini büyütebilmektesiniz. Uygulamanın aynısı üstelik jQuery ile yapılmış.

jQuery ile Yazınızı Hareket Ettirin | demo - ders

Yazıdaki tüm harflerin sırayla biri yazıyormuş gibi yazılmasını. Tümümün yer değiştirmesini bu jQuery uygulaması ile sağlayabilirsiniz.

Kaynak ; windomplug

Bu yazı orhanveli firik 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

20 mükemmel bedava online zengin metin editörü (Bölüm-1)

orhanveli firik — Tue, 30 Dec 2008 13:47:00 GMT

Online zengin metin editörleri olarak bildiğimiz metin editörlerinin, bir web tarayıcısının içerisinde kullanmayı düşünenlere 20 mükemmel bedava online zengin metin editörü.

1. TinyMCE
Tinymce GNU Lisans'ı altında zengin metin düzenleyicisidir. Dağıtımı Moxiecode tarafından sürdürülmektedir ve kullanım olarak son derece özelleştirebilirdir. (Önizleme)

TinyMCE

2. FCK Editör
Fckeditor en popüler açık kaynak online zengin metin editörlerinden biridir. En iyi HTML düzenleyiciye sahiptir ve kullanıcılar için kolay düzenleme imkânları sunmaktadır. (Önizleme)

FCK Editör

3. NicEdit
Nicedit, kullanıcılarına basitliği vurgulayan bir platform sunan zengin metin editörüdür. (Önizleme)

NicEdit

4. BXE
BXE, tam bir web sayfasını değiştirmek için müsait, XML tabanlı WYSIWYG açık kaynak metin düzenleyicisidir. (Önizleme)

BXE

5. MarkItUp!
MarkItUp bir JavaScript tabanlı metin düzenleyicisidir ve jQuery kütüphanesi üstüne kuruludur. Kullanımı kolaydır ve klavye kısayollarını desteklemektedir. (Önizleme)

MarkItUp!

6. WidgEditor
WidgEditor, GNU Genel Ortak Lisans'ı altında Cameron Adems'ın bir Açık Kaynak Projesidir. (Önizleme)

WidgEditor

7. EditArea
Editarea, bir ücretsiz JavaScript kaynak kod düzenleyicisidir. Kendi kodlarıyla katkıda bulunmak isteyen geliştiricilere ve kod biçimi eklemek isteyenlere müsaade eder. (Önizleme)

EditArea

8. Cross Browser Rich Text Editor (RTE)
Cross Browser zengin metin editörü, Creative Commons Attribution 2,5 lisansına sahiptir. Tasarım olarak Internet Explorer 5 ve Mozilla Zengin Metin kurgusundadır. (Önizleme)

Cross Browser Rich Text Editor (RTE)

9. YUI Library Rich Text Editor
YUI kütüphaneli Zengin Metin Düzenleyicisi, yahoo sunucuları altında olan ve mükemmel mobil aygıt desteğine sahip olabileceğiniz bir editördür. (Önizleme)

YUI Library Rich Text Editor

10. FreeTextBox
Web profesyonellerine NET Framework'u kullanan ASP.NET destekleyen, son derecede popüler zengin metin düzenleyicisi. Özelleştirme için birçok yararlı JavaScript API'sinin yanında, yerleşik bir resim galerisine de sahiptir. (Önizleme)

FreeTextBox

Bu yazı orhanveli firik 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

orhanveli firik — 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ı orhanveli firik 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

Yaratıcılık ve Psikiyatrik Bozukluklar Arasındaki Bağlantı

orhanveli firik — Fri, 26 Dec 2008 10:21:00 GMT

Yaratıcılık ve Psikiyatrik Bozukluklar Arasındaki Bağlantı Antik çağlardan beri insanlar yaratıcılık ve psikiyatrik bozukluklar arasında bir bağlantı olabileceğini düşünmüştür. Peki gerçekten "deli profesörler" en acaip buluşları yapar, "şizofren ressamlar" en soyut sanat eserlerini üretir? ya da yenilikçi bir tasarım yapmak için biraz kaçık olmak mı gerekir?

Psikopatolojik ve nörolojik bozukluklarla yaratıcılığın karakteristik özellikleri arasında benzerlikler bulunmaktadır. Bipolar bozukluk,demans,dikkat kaybı bozuklukları, epilepsi ve şizofreni ayrı ayrı yaratıcılık ile karakteristik anlamda benzerlikler gösterse de, bu ilişkiyi kesin olarak kanıtlayabilecek bilimsel bir kanıt yoktur. Acaba bu ilişki bir neden-sonuç ilişkisi mi yoksa gerçekten direkt bir ilişki var mı?

1.bipolar bozukluk ve yaratıcılık kaynak:http://serendip.brynmawr.edu/exchange/node/1768

1949'da alman sanatçılar ve aileleri üzerine yapılan bir araştırmaya göre bipolar bozukluk ve yaratıcılık arasında tanımlanabilir bir ilişki vardır. bunun nedeni hem bipolar bozukluğun hem de yaratıcılığın genetik olarak nesilden nesile geçmesi olarak gösterilmiştir. bu ailelerde, genetik izolasyon nedeniyle gelecek nesillerde hem yaratıcı olup hem de bipolar bozukluk taşıma oranı yükselmektedir. yazarlar üzerinde yapılan başka bir araştırmaya göre, yazarların yüzde 80'i ciddi duygu-durum bozukluğu yaşamaktayken bu oran genel olarak topluma bakıldığında yüzde 30'da kalmaktadır. bir diğer çalışmada manik-depresif kişilerin yaratıcılık üzerine yapılan testlerde kontrol grubuna göre daha başarılı olduğu tespit edilmiştir.

van gogh, bipolar bozukluk hastasıydı

bilgi işlemede bozukluk yaşanması belki de yaratıcılığı arttırmaktadır. ayrıca bu bozuklukları taşıyan kişilerin beyin taramalarında normal insanlara göre daha aktif bölgeler tespit edilmiştir ve belki bu bölgeler yaratıcılığı besleyen noktalardır.

2.demans (akıl bulanıklığı) ve yaratıcılık
kaynak: Dr.Bruce Miller, ön temporal lob atropisi olan resim yeteneği yüksek hastalar üzerinde çalışmalar yapmıştır. beynin sol kısmı sözel, sağ kısmı ise görsel konularla ilgilidir. miller'ın hastalarının çoğunun beyinlerinin sol kısmında dejenerasyon tespit edilmiş fakat sağ kısımların normal olduğu görülmüştür. belki de sol kısımdaki aktivite düşüklüğü, sağ kısmın çalışmasıyla alakalı olası müdahale ve çakışmaları önlemekte ve sonuç olarak sağ kısım daha üstün çalışmaktadır. fakat doktorlar bazı hastaların sol temporal loblarını aldıklarında ve ameliyat sonrası yaratıcılıklarındaki artışı ölçtüklerinde belirgin bir artış tespit edememiştir. bu her ne kadar direkt olarak hipotezi çürütmese bile, kesin bir ilişki olduğunun da kanıtlanamadığı anlamına gelmektedir.

3. dikkat kaybı bozuklukları ve yaratıcılık kaynak:http://borntoexplore.org/adhd.htm nikola tesla, edison, ve mozart bu hastalığa sahipti. dikkat kaybı bozukluğu bulunanlar ile yaratıcı kişiler arasında ciddi benzerlikler vardır. gündüz düşleri, akademik başarısızlık, konsantre olamama, ani mod değişiklikleri, sosyal bozukluklar, başladıklarını bitirmede güçlük, dikkatsizlik, hiperaktivite, heyecan, vb. (önemli not: ben çok yaratıcıyım sen bana asosyal mi diyorsun şeklinde yorumlar yapmadan önce belirtmek isterim ki, burada listelenen özellikler istatistiki olarak anlamlı bulunan özelliklerdir, her örnekte birebir olacak anlamına gelmemektedir.) araştırmalar göstermektedir ki, hem dikkat kaybı bozukluğu çekenler hem de yaratıcı kişilerin zayıf bir düşünsel frenleme sistemi vardır. bu durum akıllarına gelen şeylerin üstüste düşmesine ve birikmesine yol açmakta ve yaratıcılığı tetiklemektedir. ayrıca araştırmalar göstermektedir ki, ön beynin ciddi olmayan oranda zarar görmesi hem dikkat kaybı bozukluğuna hem de yaratıcılıkta yükselmeye neden olmaktadır.

4. epilepsi ve yaratıcılık kaynak:heilman, kenneth m. creativity and the brain. new york: psychology press, 2005.

dostoyevsky, edgar allen poe, flaubert. araştırmalar gösteriyor ki yoğun epilepsi nöbeti geçiren hastalar çok daha sık not almakta ve duygularını çok daha derin ifade edebilmektedir.

bu durumun da dolaylı olarak yaratıcılığı arttırdığı düşünülmektedir. fakat hastalarda bu durumun oluşmasının nedeni bilinmediği için direk bir bağlantı olduğu da kanıtlanamamıştır.

5. şizofreni ve yaratıcılık kaynak:http://www.biltek.tubitak.gov.tr/gelisim/psikoloji/klinik.htm şizofreni hastaları duygusal karmaşalar, sosyal hayata uyumsuzluk gösteriyor ve duygusal tepkileri içinde bulundukları durumla çelişebiliyor. ayrıca çeşitli ses ve görüntü halüsinasyonarı ve sanrıları yaşanabiliyor. yaptığı kedi tasvirleri ile ünlü olan louis wain'ın ö hayatının son on beş yılında şizofreni hastalığına yakalandığı bilinmektedir. hastalığının başlangıcından ölümüne dek kedi tasvirlerindeki değişim net olarak görülmekte.

bu durum gerçeklikten kopan algıların ve yanılsamaların gerçekmiş gibi tasvir edilmesini doğurur. yaratıcı kişilerin de normal dışı bir anlatıma sahip olması gerektiğini düşünürsek, şizofren bir sanatçının yaratıcı olarak algılanmasını anlayabiliriz.

sonuç olarak, psikiyatrik bozukluklar ile yaratıcılık arasında bilimsel olarak kanıtlanmış direkt bir bağlantı bulunmamaktadır denebilir. fakat tersi de kanıtlanamadığı için siz yine de bunalımda olduğunuzu hissettiğinizde bişiler yazıp-çizebilir veya işi deliliğe vurup çekinmeden deli saçması şeyler tasarlayabilirsiniz.

belki de çok yaratıcı olmanız gereken bir gün çareyi ön beyninize biraz zarar vermekte bulabilirsiniz ki bunun yöntemlerini burda tartışmak hem t.c. yasalarına aykırı ve suça özendirici olur hem de yaratıcı olayım derken sağlığınıza zarar vermenize yol açabilir.

Bu yazı orhanveli firik 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

archlinux: sade, hızlı ve güzel

orhanveli firik — Thu, 30 Oct 2008 21:25:00 GMT

pacman pacman...

Son bir iki yılda en popüler linux dağıtımları arasında yerini alan archlinux bilgisayarına sade bir linux kurmayı hedefleyenler için ideal bir dağıtım. Kişisel deneyimlerime dayanarak gentoo'nun "USE flag" kavramıyla bu olayda daha ön sırada yer aldığını söyleyebilirim. Ancak bitmek bilmeyen derleme süreleri ve optimizasyonunun zor olması gentoo'yu sabırlı ve profesyonel kullanıcılar için bir dağıtım olarak ön plana çıkarıyor. Gerçi arch'ın da bu konuda Arch build system (ABS) denilen bir sistemi var; hatta bu sistemle kendi paketlerinizi oluşturabiliyorsunuz. Ancak gentoo burada işi daha çok kullanıcıya bırakıyor.

Aslında konumuza dönersek arch'ın iddialı olduğu nokta sadelik. Mesela internetten kolayca bulup okuyabileceğiniz dökümanları paketlerden çıkarması daha az indirmeye ve harddiskte daha az yer kaplamasını sağlıyor.
Bir diğer yan ise archlinux'un dökümantasyonu. çok sağlam bir wiki' ye sahipler.

En önemli noktalardan biri de güçlü komünitesi ve bunun sonucu güncel paketler de diyebiliriz. Paketlerin aşırı derecede güncel olması işletim sisteminin kararlı olmasını zorlasa da sade bir kurulum çok sorun çıkarmıyor.

Açılış ve kapanış sürelerinde archlinux' un performansı inanılmaz.

arch üzerine xfce4

Özellikle archlinux üzerine masaüstü ortamı olarak Xfce4 kurulumu performans avcıları tarafından ekseri tercih ediliyor. Xfce4 kararlı olması ve daha az sistem kaynağı tüketmesi gibi özellikleriyle işletim sisteminden performans bekleyen ve aynı zamanda bir masaüstü ortamının taşı ve bırak, vs. gibi özelliklerinden de faydalanmak isteyen kullanıcıların gözdesi durumunda.

tabii bütün bu seçimlerde arch kullanıcıları özgür bırakıyor. ubuntu'dan terfi etmek isteyen linux meraklılarına duyurulur.

Bu yazı orhanveli firik 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

Gom Encoder: İnanılmaz Hızlı Dönüşütrücü

orhanveli firik — Fri, 03 Oct 2008 12:21:00 GMT

gom encoder: kullandığım en iyi converter. daha yakından

Bir çoğumuzun elinde muhakkak bir video oynatan telefon ya da ipod benzeri bir video oynatıcı, ve dolayısıyla da bir çoğumuzun bilgisayarında en az bir adet dönüştürücü vardır. Ya da çoğumuz bir kaç tane video dönüştürücü programı kurup beğenmeden kaldırmışızdır. (Bunlardan en iyileri denilebilecek bazıları Allok ve Free iPod Video Converter'dır). çünkü kimi ücretli ve kısıtlıdır, örneğin ilk 5 dakikadan sonra dönüşüme imkan vermez ya da kimisi işini çok ağırdan alır, filmi dönüştüreyim derken izlemekten daha fazla zaman kaybedersiniz. bu yüzden çoğumuz ya crackleri gibi illegal yollardan bu dönüştürücü programlardan bir tane bilgisayarımıza kurarız ya da "free" olanların yavaşlığına mahkum oluruz ve yahut çoğumuz bu eziyete dayanamayıp video çalarında video izlemekten vazgeçer..

Bundan önce anlattıklarım da, bundan sonra anlatıcaklarım da reklam değildir, ve sadece bildirgeç'e yazılmıştır.

işte tam da burada film aşığı bir çoklarının yakından bildiği Gom yardımımıza yetişip ve yine film aşıklarının yakınen bildiği 'codecs'leri çözmedeki hünerini bu kez video dönüştürerek ortaya koydu. gom labaratuarlarında üretilen bu porgram diğerlerine nazaran 7 kata kadar hıza(belki daha fazla) ulaşmakta hiç de zorlanmadığı gibi kullanımında da müthiş kolaylıklar sağlıyor. kısaca sayabileceğim bazı özellikleri şunlar;

arayüzündeki sadelik ve kullanımındaki kolaylık ilk olarak sayılabilir.
gom playerda oynatabileceğiniz herhangi bir programı dönüştürebilirsiniz.
filme gömülü altyazı (oynatıcınız desteklemese bile altyazı ile film izleyebilirsiniz. **yapmanız gereken tek şey alt yazı dosyasını video dosyanız ile aynı isimde ve aynı klasörde bulundurmak**)
Hemen her formatı desteklediğinden ipod, psp, ya da cep telefonları gibi bütün cihazlar için (MP4/3GP/SKM) veya blogunuzda ya da sayfalarınızda yayınlamak üzere (flash video flv yada wmv ve diğerleri) video dönüştürmenize imkan sağlar
Hızlıdır. diğerlerine göre inanılmaz hızlıdır. (benim bilgisayarım vasatın altında olmasına rağmen gayet hızlı çalışıyor. örneğin ipod için bir filmi, standart kalitede, 2.5-3X hızla film izliyor gibi dönüştürüyor. Mesela 45dakikalık bir prison break bölümü aşağı yukarı 15dk'da ipod'da çalınmaya hazır hale geliyor. (dönüştürücü programı kullananlar bunun ne kadar hızlı olduğunu tahmin edebilirler). buna rağmen hiç yer kaplamaz. üstelik kalitesi sizi şaşırtmaya yeter de artar bile.
videonun belli bir bölümünü de çevirebilirsiniz.
kaliteyi yahut bitrate'i kendisi önceden belirlenmiş tercihlere göre ayarlayabileceği gibi tamamen sizin değiştirmenize olanak verir. (isterseniz bitrate'i azaltarak daha hızlı dönüştürebilmeyi sağlar örneğin 45dakikalık diziyi 10 dakikada dönüştürürsünüz.)

* bu arada hiç bir şeye yaramasa bile videonuzu bu programa eklediğinizde videonuz hakkında istediğniz bilgiye ulaşabilirsiniz.

programın eksik yanları şunlardır;

türkçe dil desteği birlikte gelmez. ama yamasını şu adresten indirebilirsiniz
programı kullanmak için ilkin internete bağlı olmanız gerekir.
ve son olarak ücretsiz sürümünde ilk 10saniye Gom Encoder filigranı

bulunur ki bu benim böyle bir program için az bile dediğim bir husustur. kısacası bu durum sizi rahatsız etmez.

son olarak programı kullanmak için türkçe bir kaynak isteyenler için google aracılığıyla şu adresi buldum. isteyenler faydalanabilirler.

Bu yazı orhanveli firik 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

multimedya dönüştürücü

orhanveli firik — Mon, 07 Jul 2008 09:21:00 GMT

bilgisayarımızda arşivlediğimiz multimedya dosyalarımızı dönüştürebilmek için aramaktan yorulduğumuz dönüştürme proglamlarında bulduklarımız ya deneme süreli ya da kısıtlı programlar oluyor. ama şimdi öyle bir program var ki ücretsiz (freeware) ve video, ses, resim, mobil araçlar(iphone/ipod), psp, formatlarını desteklediği gibi dvd ripleme işini yapabiliyor. desteklediği dosyalarla tam bir format fabrikası.

bilgisayarınızdaki vazgeçemeyeceğiniz programlardan biri olacağını tahmin ettiğim formatoz sitesindeki bu program sade bir arayüze sahip. video, audio, picture, mobil device, rom device kategorilerinden farklı dosya biçimlerini dönüştürme işlemlerini tamamen bedava olarak yapabilirsiniz.

Bu yazı orhanveli firik 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ımcıları için 28 adet kopya kağıdı

orhanveli firik — Tue, 09 Sep 2008 06:01:00 GMT

(Cheat Sheets) kopya kağıtları sayesinde hafızanızı tazeler ve zamandan tasarruf sağlarsınız. öğrenmek istediğiniz araç/yapı hakkında başlangıç için hızlıca bilgi almak ya da karşılaştırma yapmak için de kullanabilirsiniz.

genelde programcılar ve programlar için kopya kağıtları hazırlarnır. bildirgecte arama yaparak bunlara ulaşabilirsiniz.

sixrevisions sitesi ise web tasarımcıları için 9 bölümden oluşan 28 maddelik bir kopya kağıtları listesi oluşturmuş.

Photoshop

1. Photoshop CS3 Keyboard Shortcuts Cheat Sheet

Yükle: PDF (Windows) , PDF (Mac)

2. Keys for using the Layers palette (HTML)

3. Photoshop Toolbox Reference (HTML)

4. Photoshop Lasso Tool Cheatsheet

Yükle: PDF

5. Photoshop Brush Tool Cheatsheet

Yükle: PDF

Renkler

1. RGB Hex Colour Chart

Yükle: PDF, PNG

2. Color Reference Guide (PDF)

3. Web Designer Color Reference Hexagon Mouse Pad

Yükle: GIF

4. Web Safe Color Chart (HTML)

5. Hexidecimal Color Chart (HTML)

6. The Browser Safe Colors (HTML)

Yazı tipleri

1. VisiBone Font Card

Yükle: GIF

2. Common fonts to all versions of Windows & Mac equivalents (HTML)

3. Mixing Typefaces (PDF)

Yazı tipleri ile ilgili başka bir kolaylık için bu yazıya ve @gooz arkadaşın paylaştığı siteye de bakmanızı tavsiye ederim.

Ölçü birimleri/hesaplama

1. Approximate Conversion from Points to Pixels (HTML)

2. Megapixels Chart

Yükle: GIF

CSS/CSS Frameworks

1. Blueprint CSS Cheat Sheet

Yükle: PDF

2. YUI Library: CSS Reset, Base, Fonts, and Grids (PDF)

3. CSS Shorthand Cheat Sheet (PDF)

4. Apple’s CSS Cheat Sheet Widget (Mac Dashboard Widget)

HTML/XHTML

1. HTML & XHTML Tag Quick Reference (PDF)

2. HTML/XHTML Character Entities

3. XHTML Character Entity Reference (HTML)