bildirgec.org - alkalin - beğendikleri

Size Sıfırdan Joomla Öğretecek 70 Kaynak

alkalin — Sat, 28 Feb 2009 15:29:00 GMT

Açık kaynaklı ve ücretsiz popüler bir içerik yönetim sistemi (cms) olan Joomla sayesinde her türdeki web sitesini yönetmek mümkün. Joomla, Mambo CMS'nin küllerinden doğan ve geçen zaman içerisinde kullanıcı sayısının da artmasına paralel olarak Joomla'yı hedefleyen kaynakların sayısı arttı; tıpkı diğer popüler açık kaynak çözümlerinde olduğu gibi. Bunun kullanıcılar ve geliştiriciler açısından anlamı, ilgili platforma yönelik pek çok kaynağın ve bilginin bulunuyor olması. Biz de bu yazımızda bu kaynakların en iyilerine değineceğiz.

1. Resmi Kaynaklar
Her ne kadar Joomla komünitesi sayısız kullanışlı kaynak oluşturmuş olsalar da, Joomla'yı geliştiren ekibin yayımladığı ve önem arzeden kaynaklar da bulunuyor.

Joomla Ana Sayfası: Joomla'nın resmi sitesi üzerinden sistem hakkında daha fazla bilgi alabilir ve dosyaları indirebilirsiniz.

Belgeler: Her bir Joomla kullanıcısı ya da geliştiricisinin yer imlerine eklemeleri gereken ve ilgili platformun her alanına yönelik sayısız belge barındıran bir kaynak.

Joomla Komünite Dergisi: Joomla'nın yeniliklerini takip edip güncel kalmak isteyen Joomla kullanıcıları ve geliştiricileri için mükemmel bir kaynak.

Ekip Blogları: Joomla komünitesinde çalışan her bir grubun kendine özgü bir blogu bulunuyor ve bu ekipler, Joomla komünitesinin diğer üyeleri ile iletişim kurmak için bu blogları kullanıyorlar.

Joomla Forumları: Eğer yardıma ihtiyacınız varsa ya da komüniteye herhangi bir soru sormak istiyorsanız, ziyaret etmeniz gereken yer burası.

2. Başlarken
Eğer Joomla'yı denemeye karar verdiyseniz size Joomla'ya giriş yapmanıza yardımcı olacak aşağıdaki kaynaklara bir göz atmayı deneyin.

Joomla'ya Giriş: Eğer daha önce hiç Joomla kullanmadıysanız bu sizin için iyi bir başlangıç noktası olacaktır.

Joomla 1.5 Kurulum Rehberi: Eğer Joomla'nın kurulumu hakkında yardıma ihtiyacınız varsa bu rehber size gerekli adımları gösteriyor.

Joomla'ya Yeni Başlayanlar İçin Rehber: Joomla'yı henüz kullanmaya başlamış kullanıcılar için hazırlanmış bu rehber, kurulum, yönetim seçenekleri, tema sistemi ve daha fazlası hakkında bilgileri içeriyor.

3. Dersler
Eğer Joomla ile geliştirilmiş web siteleri üzerinde nasıl çalışabileceğinizi, kendi şablonlarınızı nasıl oluşturabileceğinizi, eklentileri nasıl kullanabileceğinizi öğrenmek istiyorsanız, aşağıda farklı kategorilere yönelik dersleri bulabilirsiniz.

3.1 Şablonlarla Çalışmak

Joomla Şablon Dersi: Joomla şablonları ile nasıl çalışacağınızı öğrenin.

Şablonları Düzenlemek: Şablonların yönetici paneli üzerinden nasıl düzenlenebileceğini gösteriyor.

Joomla 1.5 Üzerinde Hangi Sayfada Olduğunuzu Anlamak: Joomla için şablon tasarlarken, sayfalarınızı farklı şekilde stillemek isteyebilirsiniz. Bu rehber size bu alanda yardımcı olacaktır.

CSS Dosyasını Düzenlemek: Joomla'nın CSS dosyası üzerinde temel değişikliklerin nasıl yapılabilebileceğini gösteren görsel bir rehber.

Joomla 1.5'te Çıktıları (Output) Anlamak: Joomla tarafından oluşturulan içeriği anlamak için tasarımcılara ve geliştiricilere yönelik oluşturulmuş bir rehber.

Joomla'da Sayfalamak: Joomla üzerinde içeriği sayfalara ayırmak isteyen geliştiricilere yönelik bir rehber.

Joomla 1.5'te Sayfa Başlıkları: Sayfa başlıklarını ve onları ihtiyacınıza göre nasıl şekillendirebileceğinizi inceleyen bir rehber.

Ana Sayfayı Farklı Bir Şekilde Tasarlamak: Bir Joomla web sitesinin ana sayfasına, sitenin geri kalan sayfalarından farklı bir stil atamanın yolları.

Özel 404 Hata Sayfaları: Joomla üzerinde kendinize özel 404 Hata sayfalarını oluşturabilmenin yolları.

3.2 Veritabanları İle Çalışmak

Joomla Veritabanını Dışa Aktamak: Veritabanınızı phpMyAdmin kullanarak nasıl dışa aktarabileceğinizi özetleyen bir rehber.

Joomla Kodlama Pratikleri: Tablolar ve Öncelikli Anahtarlar: Tabloları isimlendirmeye yönelik bazı kullanışlı bilgiler.

3.3 Website Yönetimi

Joomla 1.5 Üzerine Yönetici Temasını Değiştirmek: Yönetici arayüzünü ihtiyaçlarınıza göre nasıl şekillendirebileceğinizi öğrenin.

Joomla 1.5 Üzerinde Öntanımlı Görsel Klasörünü Değiştirmek: Bu makale, Joomla üzerinde görsellerin yüklendiği öntanımlı klasörün konumunu nasıl değiştirebileceğinizi gösteriyor.

WordPress Blogunuzu Joomla'ya Dahil Etmek: Eğer WordPress'ten Joomla'ya geçiş yapmayı planlıyorsanız, bu makale size bu alanda atmanız gereken adımları gösteriyor.

Joomla Kurulumunuzu Bilgisayar Korsanlarına ve Saldırılara Karşı Korumak: Web sitenizi daha güvenli hale getirmek için bazı öneriler.

.htaccess Dosyaları Kullanarak Yönetici Dizinini Güvence Altına Almak: Joomla websitenizi bilgisayar korsanlarına karşı .htaccess dosyalarını kullanarak korumak için yapılması gerekenler.

Joomla Web Sitelerini Taşımak: Web sunucunuzu ya da alan adınızı değiştirmek bazen sizi zorlayabilir. Bu makale bu işlemi bir Joomla web sitesi için nasıl sorunsuz bir şekilde yapabileceğinizi anlatıyor.

3.4 Beslemelerle Çalışmak

Joomla 1.5'te Beslemeleri Yönetmek: Joomla üzerinde beslemelerle nasıl çalışılabileceğine yönelik bir makale.

Joomla 1.5 Üzerindeki Herhangi Bir Sayfada RSS Kullanmanın Yolları: Herhangi bir sayfa üzerinden RSS beslemesi alabilmek için kısa bir ipucu.

Modüller, Eklentiler ve Bileşenler İle Çalışmak

Modül Yöneticisi: Joomla'nın Modül Yöneticisi hakkında sade bir rehber.

Bir Joomla Eklentisi Nasıl Oluşturulur?: Joomla'nın ana özelliklerini kendiniz ya da diğerleri için geliştirmek mi istiyorsanız? Bu makale bu konunun temellerine değiniyor.

Joomla 1.5'te İçeriğe Herhangi Bir Modülü Dahil Etmek: Joomla içeriğine AdSense, PayPal ve AdBrite dahil etmeye yönelik bir rehber.

Joomla Bileşen Geliştirimine Giriş: Bileşen geliştirimi hakkında temel bir yazı.

3.6 Diğer Rehberler

Süper Gizli Sitemap Hilesi: Herhangi bir uzantı yüklemeden site haritası oluşturun.

Joomla Performans Ayarları: Modül Önbellekleme: Modülleri önbelleğe alarak sitenizin performanısını nasıl arttırabileceğinizi öğrenin.

Joomla 1.5'te Bir Yazıya YouTube Videosu Dahil Etmek: Bu makale basit bir eklenti kullanarak sitenize nasıl kolayca YouTube videolarını ekleyebieceğinizi gösteriyor.

Joomla Arama Motoru Optimizasyonu: 5 adımda Joomla web sitesini arama motorları için optimize etmeye yönelik bir ders.

4. Joomla Şablonları (Temaları)

Joomla komünitesi halihazırda binlerce tema oluşturmuş durumda. Bazı premium tema üyelik kulüpleri içeren web sitelerinin yanısıra pek çok ücretsiz tema da bulunuyor. Bu kısımda ücretli ve ücretsiz en iyi Joomla şablonlarını bulabileceğiniz siteler yer alıyor.

JoomlaJunkie: JoomlaJunkie sitesi, kullanıcılara, tasarımcılara ve geliştiricilere yöelik ücretli ve yüksek kaliteli şabonları içeren üyelik paketlerinin yanısıra ücretsiz Joomla temalarını da sunuyor.

Best Of Joomla: Geliştiriciler kendi oluşturdukları temaları bu siteye gönderebilirler Best of Joomla ücretsiz şablonların yanısıra bazı kullanışlı bilgileri de içeriyor.

Joomla24: 1.500'ün üzerinde ücretsiz Joomla temasını bünyesinde barındırıyor.

Design for Joomla: Ücretsiz şablonların bulunduğu geniş bir kolleksiyon.

Funky Visions: Pek çok ücretsiz Joomla şablonunu içeriyor.

IbolDesign: IbolDesign sitesi de diğer şablon siteleri gibi bir dizi ücretsiz şablonu içeryor.

Rocket Theme: Bir diğer ücretli ve yüksek kaliteli şablon sunan site ayrıca dört adet ücretsiz tema da içeriyor.

Joomla Shack: Ücretli ve ücretsiz temaların bulunduğu bir site.

Joomla Jet: Üç farklı seviyede üyelik sunan ve premium temaları bünyesinde barındıran bir site.

Joomla Art: Bir diğer premium tema kulübü olan bu sitede ayrıca bazı dersler ve harici kaynaklar da yer alıyor.

Boş Joomla 1.5 Şablonu: Şablon oluşturmak için iyi bir başlangıç noktası.

DJoomla: Sitenin kullanıcıları tarafından gönderilen ücretsiz temaların yanısıra bazı diğer kaynaklar da bulunuyor.

SiteGround: Bu hosting şirketi Joomla kullanıcıları için bir dizi ücretsiz tema sunuyor.

OSSkins: Joomla, WordPress ve Drupal için ücretli ve ücretsiz şablonlar sunan bir site.

5. Uzantılar, Eklentiler

Tıpkı diğer açık kaynaklı CMSler gibi Joomla da ilk indirildiğinde bazı özellikleri bünyesinde barındırıyor ancak eklentiler ve uzantılar kullanarak Joomla sitenize yeni özellikler katmak mümkün. Tıpkı şablonlarda olduğu gibi bu eklentilerin de bir kısmı ücretsiz bir kısmı ücretli olarak sunuluyor. Yazının bu kısmında ihtiyacınız olan en doğru eklentiyi ve/veya uzantıyı bulabileceğiniz siteleri listeleyeceğiz.

Joomla Uzantıları Dizini: Uzantıların resmi dizini.

Joomla Eklentileri: Ücretsiz bileşenler, modüller ve eklentilerin yer aldığı mükemmel bir kolleksiyon. Ayrıca bazı yüksek kaliteli eklentilr de bu site üzerinden satışa sunuluyor.

JoomlaWorks: Site bünyesinde hem ücretli hem de ücretsiz eklentiler yer alıyor.

Joomla Bamboo: Joomla Bamboo ücretli uzantılar ve temaların yanısıra bazı ücretsiz kaynkaları da içeriyor.

VirtueMart Virtuemart, Joomla ve Mambo siteleri için ücretsiz ve açık kaynaklı bir e-ticaret çözümü.

DJoomla: Kullanıcılar tarafından gönderilen Joomla modülleri dizini.

iJoomla: Üçüncü parti uzantı dizini.

SiteGround: Bazıları ücretli bazıları ücretsiz Joomla eklentilerinin bir dizini.

UltiJoomla: Bir dizi ücretsiz uzantıyı da içeren bir blog.

6. İlham
Eğer diğer tasarımcıların ve geliştiricilerin Joomla ile neler başardıklarını görmek istiyorsanız şanslısınız zira İnternet üzerinde Joomla için ilham kaynaklarına yönelik pek çok web sitesi bulunuyor. Bazıları ise Joomla'nın yanısıra diğer içerik yönetim sistemlerini de bünyesine katmış.

Joomla Based: Joomla ile çalışan web sitelerinin geniş bir listesi.

Joomla Showcase: Joomla ile çalışan web sitelerinin tasarımlarını içeren bir galeri.

Joomla'nın En İyileri: Ücretsiz temaları da içeren ve ilham alınabilecek sitelere yönelik bir site.

Joomla Case: Sadece Joomla için diğer bir tasarım galerisi.

CMS Showcase site bünyesinde tanıtılan 40 adet Joomla ile çalışan web sitesi bulunuyor.

Joomla Showcase: Joomla forumları bünyesinde ayrıca özel Joomla şablonları ve diğer Joomla kullanıcılarının çalışmalarından ilham alabileceğiniz bölümler de bulunuyor.

Joomla Zone: Joomla Zone, web site sahiplerinin ve tasarımcılarının Joomla ile çalışan web sitelerini gönderebilecekleri Joomla Powered bölümünü içeriyor.

7. Diğer CMSler İle Karşılaştırma
Eğer Joomla'yı daha önce kullanmadıysanız, muhtemelen bu platformun diğer içerik yönetim sistemleri ile arasındaki farkı merak ediyorsanız. Aşağıdaki kaynaklar farklı kişilerin diğer CMSlerin karşısında Joomla'nın hangi özellikleri ile ayakta durabildiğini anlatıyor. Bu karşılaştırmaları okurken her bir içerik yönetim sisteminin artılarının ve eksilerinin bulunduğunu ve piyasadaki hiçbir içerik yönetim sisteminin tüm projeler için uygun olmasının mümkün olmadığını aklınızdan çıkarmayın.

Joomla vs. WordPress: SitePoint forumlarında Joomla ile WordPress'i karşılaştıran bir tartışma forumu.

Hangi CMS? Joomla vs. Drupal vs. WordPress: Bu video her biri açık kaynaklı olan bu üç seçeneği de birbirleri ile karşılaştırıyor.

WordPress vs. Joomla: İşe Yarar Rehber: YOUmoz üzerindeki bu yazı, her iki içerik yönetim sistemini de kullanılabilirlik, değişkenlik ve arama motoru optimizasyonu açısından inceliyor.

Neden Arkadaş Olamıyoruz? Joomla vs. Drupal: Her bir içerik yönetim sisteminin artılarını ve eksilerini inceleyen tarafsız bir yazı.

Joomla ve Drupal - Sizin İçin Hangisi Doğru?: Bu makale her ne kadar iki yıl eski olsa bile bu iki platformu da karşılaştırmak isteyenler için faydalı olabilir.

8. Geliştirici Kaynakları
Bu kaynaklar, yukarıdaki kategorilere pek uymamasına rağmen belirtmeye değecek kaynaklar olduğunu düşünüyorum. Kaynakların her biri, WordPress geliştiricilerinin farklı ihtiyaçlarını gidermeye odaklanıyor.

JoomlaCode: JoomlaCode.org Joomla üzerine inşa edilmiş açık kaynaklı projeler geliştirmek isteyen geliştiricilere yönelik bir kaynak.

Joomlancers: Joomla geliştiricileri için bağımsız çalışanlara (freelancer) yönelik bir iş bulma sitesi.

Joomla Geliştirici Kaynakları: Joomla için eklentiler ve bileşenler geliştiren ya da geliştirmek isteyenlere yönelik bir kaynak.

Kaynak: Smashing Magazine

Size Sıfırdan XX Öğrenetecek XX Kaynak Serisi

yazılarımı rss istemcisi üzerinden takip etmek için buraya tıklayın

Bu yazı alkalin 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

sıfırdan illustrator öğrenebileceğiniz dersler

alkalin — Thu, 14 Jan 2010 07:39:00 GMT

illustrator dersleri photoshop dersi kadar fazla olmasa da birçok kaynakta bulunabilir. Bu dersler ile illustrator bilginizi pekiştirebilir veya sıfırdan öğrenmeye başlayabilirsiniz. Seri yazıları takip ederek illustrator hakkında bilmediklerinizin sayısı azalabilir. Eğer daha profesyonelseniz yapılan çalışmaları inceleyerek kendinizi geliştirebilirsiniz. işte size sıfırdan illustrator öğretebilecek dersler;

Learn Illustrator CS3 in 30 Days
(30 günde Illustrator CS3'ü öğrenin)

Illustrator Beginner’s Series
(Acemiler için Illustrator Serisi)

Adobe Illustrator Guides and Tutorials
(Adobe Illustrator Rehberi ve Dersleri)

Beginner Adobe Illustrator Tutorials
(Acemiler için Adobe Illustrator Dersleri)

Illustrator CS4 Blob Brush
(Illustrator CS4'te Blob brush -brush : fırça-)

Illustrator CS4 Gradients
(Illustrator CS4'te Gradients)

Working with Illustrator Art Brushes
(Illustrator'de sanat fırçaları ile çalışmak)

Beginner Illustrator Tutorial – Create a Vector RSS Icon
(Acemiler için Illustrator Dersleri - Rss ikon oluturmak)

Illustrator’s Type Tool: A Comprehensive Introduction
(Illustrator'da Type Aracı : Kapsamlı)

Tips for Working with the Gradient Mesh Tool In Illustrator
(Illustrator'da Gradient Mesh aracı ile çalışma ipuçları)

Illustrator’s Pen Tool: The Comprehensive Guide
(Illustrator'da pen aracı : kapsamlı rehber)

Ayrıca Bakınız ;

angelsdemos: Blog | Twitter | Email | RSS

Kaynak ; spoongraphics

Bu yazı alkalin 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

Tarayıcı Sorunlarını Çözen jQuery Eklentileri

alkalin — Mon, 13 Apr 2009 06:47:00 GMT

Mümkün olduğu kadar CSS kullanılması gerektiğini öneriyoruz ve genellikle bunda da başarılı oluyoruz. Modern tarayıcıların CSS için çok iyi desteği bulunuyor, en azından anahattınızı ve sunumunuzu düzenlemek için CSS kullanmanıza yetecek kadar destek içeriyorlar. Ancak bazen bazı sayfa elementleri farklı tarayıcılar üzerinde farklı görünmektedirler. İşte bu yüzden biz de bugünkü yazımızda farklı tarayıcılarda görünen sorunları giderecek 15 jQuery çözümünün yanısıra size bazı güzel tarayıcı efektleri verecek jQuery eklentilerini listeleyeceğiz.

1. Internet Explorer'da DD_Roundies İle Yuvarlatılmış Köşeler Kullanabilmek

Ne yazık ki CSS3 border-radius şimdilik sadece Safari ve Firefox tarafından desteklenmekte olup, Internet Explorer gibi tarayıcılar üzerinde kare köşeler kullanmak zorunda kalıyoruz. DD_Roundies kütüphanesi yuvarlatılmış köşeleri Internet Explorer üzerinde sorunsuzca kulanabilmemizi sağlyor. DD_roundies, tıpkı jQuery gibi, seçicilerle birlikte çalışıyor ki bu sayede jQuery UI'nin CSS Çatı sınıflarını hedefleyerek DD_roundies'i jQuery UI üzerinde sadece birkaç satırlık kısa kodla uygulayablmemimizi sağlıyor.

Demo Burada

2. jQuery İle Eşit Yükseklikler Kullanabilmek

Eşit yüksekliğe sahip sütunların ya da içerik kutularının görsel efektini kullanabilmek her zaman zor olmuştur. Kullanılabilirlik ve performans açısından kullanılabilecek etkin bir çözüm, basit bir JavaScript kodu kullanmaktır. eQualHeights() fonksiyonu, bir kapsayıcı içerisindeki tüm elementlerin yüksekliklerini hesaplıyor ve ardından diğer her elementin minimum-height değerini uzunluğu en fazla olan değere eşitliyor. JavaScript etkisizleştirildiğinde ise kutular farklı boyutlarda görünmesine rağmen içerik ve sayfa tümüyle erişilebilir ve kullanılabilir kalmaya devam ediyor.

Demo Burada

3. Çapraz Tarayıcı Uyumlu text-shadow (metin gölgesi)

text-shadow güzel bir CSS3 (aslında CSS2) özelliği olup metinlerin ardında gölge görüntülememizi sağlıyor. Ancak bu özelliğin kötü bir tarafı var ki o da Internet Explorer üzerinde çalışmaması. Internet Explorer ile ilgili kullanışlı bir özellik var ki o da anlamadığı CSS tanımlamalarına erişim imkanı vermesi ki bu sayede biz de istediğimiz elemente text-shadow değerini uygulayıp ardından onu işletebiliyoruz. Bu betiğin Internet Explorer 5.5'ten Internet Explorer 8'e kadar olan tüm tarayıcılarda çalışması gerek.

Demo Burada

4. Yuvarlatılmış Köşeler

Bu jQuery eklentisi güzel görünümlü yuvarlatılmış köşeleri sorunsuzca oluşturabilmektedir. Herhangi bir görsel ya da yoğun kod kullanmanıza da gerek yok. padding desteği sayesinde JavaScript'in etkin olmadığı tarayıcılarda ise herhangi bir sorun yaşanmıyor.

5. Footer (Altlık) Pozisyonlama

Bu küçük eklenti, sayfanızın footer (altlık) kısmını tarayıcının görünen kısmının en altına yerleştirmenizi sağlar. Altlığın üzerindeki içerik yeteri kadar uzun olmadığı durumlarda bile betik, altlık kısmını başarılı bir şekilde pozisyonlamaktadır.

Demo Burada

6. Bağlantı Kontrolü

Bu küçük eklenti sayesinde son kullanıcıya bağlantıları yeni pencerede açmak isteyip istemediklerini seçebilmelerini sağlayabilirsiniz.

Demo Burada

7. Sayfa Kıvrımı

Günümüzde pek çok web sitesinde kullanılan ve sayfanın herhangi bir köşesinde beliren kıvrım efektinin altından reklam ya da herhangi bir duyuru gösterebilmenizi sağlayabileceğiniz bir jQuery eklentisi.

Demo burada

8. (Uzun) Web Sayfalarında Görsellerin Yüklenmesini Geciktirmek

Lazy Loader bir jQuery eklentisi olup (uzun) web sayfalarında görsellerin yüklenmesini geciktirmek için kullanılabilir. Bir web sayfasının görünen kısmının dışında kalan görseller, kullanıcı tarayıcının kaydırma çubuklarını kullanarak o alanı görüntülemediği sürece o alandaki görseller yüklenmeyecektir. Bu eklenti özellikle çok fazla sayıda görsel içeren uzun sayfaların yüklenmesini önemli ölçüde hızlandıracaktır. Tarayıcı, görünen kısımdaki görseller yüklendikten sonra diğer görsellerin yüklenmesi için hazır durumda bekleyecektir. Bazı durumlarda bu betiğin kullanımı, sunucuya bindirilen yükün de hafiflemesine yol açacaktır.

Demo Burada

9. jQuery İle Görselleri Sırayla Önceden Yüklemek

Bu küçük kod parçacığı bağlantıların üzerine fare imleci getirildiğinde görsellerin yüklenmeye başlamasını sağlar. Tüm sayfa elementlerinin yüklenmesinin tamamlanmasını bekleyebilmek için $(window).bind('load',function(){...}) kullanmaktadır. Bu, tüm görselleri kapsar.

10. BGIframe

Internet Explorer'in z-index sorunları ile baş edebilmek için kullanabileceğiniz bir eklenti.

11. IE Overflow Problemini Gidermek

Internet Explorer, Firefox ve Safari ile karşılaştırıldığında overflow elementini farklı bir şekilde yorumlamaktadır. Özellikle Firefox, bir elementin sınırlarını zorladığınızda, o elementin dışına yatay bir kaydırma çubuğu yerleştirmektedir. Ancak içerik yatay olarak sınırı geçtiği için, IE üzerinde, bir yatay kaydırma çubuğu belirdiğinde, içerik dikey olarak görüntülenememektedir.

Dikey overflow daima elementin içerisinde yer aldığından aşağıdakileri sadece IE için uygulamanız gerekmektedir.

İçeriği yatay olarak sınırlar dışına taşan tüm elementleri bulun.
Elementimizin altına 20 piksellk padding ekleyin.
Dikey kaydırma çubuğunu atın.

(function ($) {
$.fn.fixOverflow = function () {
if ($.browser.msie) {
return this.each(function () {
if (this.scrollWidth > this.offsetWidth) {
$(this).css({ 'padding-bottom' : '20px', 'overflow-y' : 'hidden' });
}
});
} else {
return this;
}
};
})(jQuery);

// kullanım
$('pre').fixOverflow().doOtherPlugin();

Yukarıdaki kod uygulandığında IE üzerinde yatay kaydırma çubuğu elementin altında görünmektedir.

Demo Burada

12. JavaScript Kullanarak CSS Hilelerinden Kaçınmak

Eğer sırf kodunuzu istediğiniz ya da olması gerektiği gibi göstermeyen o çirkin CSS hilelerini uygulamak istemiyorsanız, o zaman bu ipucunu kullanabilirsiniz. "Tarayıcı seçicileri". Bu sayede stilinizin önüne .msie, .mozilla, .opera, .safari ya da hedeflemek istediğiniz .diğer tarayıcı sınıflarını kolayca dahil edebilirsiniz.

Demo Burada

13. Tıklanabilir Alanın Boyutunu Arttırmak

Tüm içerik bloğunu tıklanabilir hale getirerek artık o sıkıcı "Devamını Oku" bağlantılarına bir son verin.

Demo Burada

14. Elementi Dikey Olarak Ortalamak

Bu video kılavuzunda CSS ve jQuery'nin gücünü kullanarak tarayıcı penceresinin görünen alanı üzerinde bir elementi nasıl dikey olarak ortalayabileceğinizi öğreneceksiniz.

15. jSizes - CSS Özellikleri İçin jQuery Eklentisi

JSizes, jQuery'e min-width, min-height, max-width, max-height, border-*-width, margin ve padding özelliklerini ekleyen bir eklentidir. Bunun yanısıra bir elementin görünürlüğünü belirleyebileceğiniz bir metod daha içermektedir. Toplamda jQuery API'sine 6 yeni metod eklemektedir.

Bu metodların nasıl kullanılabileceğine birkaç örnek:

jQuery(function($) {
var myDiv = $('#myDiv');

// margin-top özelliğinin değerini 100px ve margin-bottom özelliğinin değerini 10em yap
myDiv.margin({top: 100, bottom: '10em'});

// üst sınırın boyutunu piksel değerinde gösterir
alert(myDiv.border().top);

// element görünür ise doğru, diğer durumlarda yanlış değerini verir
alert(myDiv.isVisible());

// zincirleme kullanarak padding-right özelliğinin değerini 10px ve margin-left değerinin özelliğini 15px yap
myDiv.padding({right: 10}).margin({left: 15});
});

Aşağıdaki Yazıyı da Okumak İsteyebilirsiniz

Çapraz Tarayıcı Uyumluluğu İçin Altın Değerinde İpuçları

Bu yazı alkalin 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

CSS Sprite kullanmak artık daha kolay!

alkalin — Thu, 19 Mar 2009 11:48:00 GMT

Daha önce CSS Sprite tekniğinden "css sprite'ların kullanış alanları" başlıklı yazımda bahsetmiştim. Eğer bu yazıyı okumadıysanız bu tekniğin yararını kavrayabilmeniz için okumanızı tavsiye ederim. Bu yazıda ise bu tekniği satırlarca kod yazmadan nasıl uygulayabileceğimizi anlatacağım.

1. adım: Kullanılacak Resmin Yaratılması
Matt Varone'un yapmış olduğu CSS Navigation Bar Code Generator uygulamasına önceden yaptığımız sprite dosyamızı yüklüyoruz. Ben rehberde örnek olarak aşağıdaki butonları kullanacağım.

örnek sprite

2. Adım: Ayarlamalar
Resmi yükleyip ikinci adıma geçiyoruz. Bu sayfa Menü tasarımı için yapıldığından dolayı uygulama sizden menünün ismini yazmanızı ve horizontal (yatay) ya da vertical (dikey) özelliklerinden birini seçmenizi istiyor. Bu seçimi yapıp bir sonraki adımda menümüzün sayfa yüklendiği anda gösterilecek halini seçmemiz isteniyor.

3. Adım: Ana Katmanı Seçmek
Bu adımda yatay menü yapıyorsanız yatay, dikey olarak tasarladıysanız dikey olarak menünün ilk elemanlarını seçmeniz gerekmekte. Eğer uygun bir seçim yaparsanız uygulama size onay mesajı göstererek bir sonraki adıma geçmenize izin veriyor.

Ana Katman

4. Adım: Ana Katmanı Bölümlere Ayırmak
Bu adımda Seçtiğiniz Ana katman size gösterilir. Butonları tek tek belirlemeniz isteniyor. İlk butonu belirledikten sonra Confirm tuşuna basarsanız bir sonraki tuşu seçmeniz sağlanıyor. Tüm tuşları bu şekilde seçtiğinizde uygulama otomatik olarak son adıma geçiyor.

Tuşların Seçimi

5. Adım: Kontrol ve Download
Buraya kadar tüm işlemleri doğru gerçekleştirebildiyseniz sistem size demo sayfasını gösterecek ve onaylamanız halinde zip'li dosya içinde kodunuzu indirmeye sunacak.

Notlar
Bu uygulama CSS Sprite'lar sayesinde Menüler oluşturmaya yarar. Bu yüzden liste koduyla uygulama yazılmıştır. CSS bilginiz yeterli seviyedeyse ufak bir düzenleme sonucunda değişik amaçlarla da kullanmanız mümkündür.

Bu yazı alkalin 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

CSS ile şekil çizmek çok kolay!

alkalin — Mon, 13 Apr 2009 19:16:00 GMT

Tasarımlarımızı XHTML ve CSS’e geçirirken bazen çok basit şekilleri bile kimi zaman resim olarak kaydederek tasarımlarımıza ekliyoruz. Oysa bu davranış bize ekstra bir “http isteği” olarak dönmüş oluyor. Daha önce CSS Sprite'ların kullanım alanları yazımda bu istekleri azaltarak performansı nasıl yükselttiğimiz konusuna az da olsa değinmiştim. Bu yazıda ise minik ve basit resim dosyalarından kurtularak http isteklerini minimum düzeye çekecek ve sitelerimizin performansını arttıracak. Pingdom ile performansınızı ölçmeniz mümkün.

Dertlere derman css border
Başlıktan da anlayabileceğiniz gibi bu şekilleri çizmek için elimizdeki en önemli özellik border olacak. İstediğiniz şekli çizmek için border’ları solid yapmalı ve genişliklerini ayarlamalıyız.
Şimdi ufak bir örnekle border’ları nasıl ayarlamamız gerektiğini görelim.

.cisim{
    width:0;
    height:0;
    line-height:0;
    border-top: 50px solid magenta;
    border-right: 100px solid green;
    border-bottom: 100px solid red;
    border-left: 50px solid yellow;
}

<span class="cisim"></span>

farklı renkteki border'lar

Burada rahatlıkla görebilmeniz için border değerlerini çeşitli renklerde tanımladım. Boyutsuz olan span elemanının etrafında üçgensel olarak 4 farklı bölge oluşuyor. İşte bu bölgeleri kullanarak çeşitli dörtgenler, içbükey çokgenler ve üçgenler çizerek tasarımlarımızı tamamlayacağız.

Konuşma balonu örneği
Tasarımlarda artık sıkça karşılaşılan elemanlardan biri de konuşma balonları. Genelde Blog sitelerinin yorumlar bölümünde, twitter kullanan kişilerin kişisel sitelerinde sıklıkla karşımıza çıkıyor konuşma balonları. Tasarımların olmazsa olmaz elemanı olan bu konuşma balonlarının yazı yazılan kısmını yapmak genelde imaj dosyası gerektirmeyen bir şekilde yapılabiliyor. Lakin balonun ucundaki oklar CSS şekilleri tekniğini çözene kadar imaj dosyası ile yapılmaktaydı. Artık bu imaj dosyasını kullanmadan maksimum iki satırlık bir css stili ile hem bandwith’ten hem de performanstan kazanç sağlayacağız.

ilk adım

Gördüğünüz gibi konuşma balonumuz hazır. Balonumuzu dizayn ettikten sonra bu balonu 2 parçaya ayırarak çalışmamıza devam edeceğiz.

ikinci adım

Okun biçimlendirilmesi
İki parçaya bölünen elemanda en çok okun biçimlendirilmesi konusuna yoğunlaşacağız. Çünkü diğer eleman basit bir div biçimlendirilmesi ile oluşturulabiliyor. Önce okun değerlerini belirleyelim:

üçüncü adım

Gördüğünüz gibi 25 e 25 piksellik bir ok tasarladım. Arkaplan olarak ben bildirgeçte arka plan resmi olmadığından beyaz kullandım.

Kodlamaya giriş
Öncelikle oku oluşturmak için bir span elemanı yaratıyoruz.

<span class="ok"></span>

Şimdi bu oku biçimlendirmek için head etiketleri içinde stilimizi tanımlıyoruz.

 <style> .ok{ width:0; height:0; line-height:0; border-top: 25px solid #999999; border-right: 25px solid white; border-bottom: none; border-left: none; } </style>

Yarattığımız span’ın genişlik, yükseklik ve satır genişliği yüksekliğini 0 belirterek bu şekilleri oluşturabilmemiz mümkün oluyor. Daha sonra border-top tanımlaması ile okumuzun yükseklik değerini ve hangi renkde olacağını belirtiyoruz. Border-right ile de genişlik değerini ve okun arka planında bulunan renk değerini giriyoruz. Eğer arka planda resim kullandıysanız bu değeri transparent olarak girmelisiniz.

Gördüğünüz gibi okumuz oluştu. Şimdi yapmamız gereken ise ana kutucuğun altına bunu iliştirmek. Bunun için ben 300px genişliğinde bir p tanımladım. Ve bunu balon’umun içine koydum. Sonra da okumu bu p elemanından sonra yerleştirdim.

 <div class="balon"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p><span class="ok"></span></div>

Okumuzda da bazı düzenlemeler yaparak balonumuzu son haline sokuyoruz:

 <style>
.balon{ width:340px;}

.balon p{ width:300px; line-height:20px; background:#999; color:#fff; font-size:20px; padding:20px; margin:0; float:left; }

.ok{ width:0; height:0; line-height:0; border-top: 25px solid #999; border-left: none; border-bottom: none; border-right: 25px solid white; float:left; margin: 0 0 0 250px; }

</style>

İşte bu kadar basit! Artık basitçe şekiller üretebilir ve tasarımlarınızda kullanabilirsiniz. Benim kullandığım birkaç başka şekil de var. Bunları da inceleyelim.

tüm şekillerin çizimi

Şekil 1
Basit bir üçgendir. Tüm border değerlerine eşit ölçülü sayılarda atama yapacağız fakat border-top hariç hepsi renksiz olacaktır. Border-top ise bizim şeklimizin rengini verecektir.

 <span class="cisim"></span>
<style>
.cisim{
            width:0;
            height:0;
            line-height:0;
            border-top: 50px solid #999;
            border-left: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-right: 50px solid transparent;
        }
</style>

Şekil 2
Her ölçüsü değişik olan bir üçgendir. Border değerlerinin tümü farklı ölçülerdedir. Border-top cismin rengini belirler, diğerleri ise arkaplan rengini belirler.

 <span class="cisim"></span>
<style>
.cisim{
            width:0;
            height:0;
            line-height:0;
            border-top: 50px solid #999;
            border-left: 20px solid transparent;
            border-bottom: 50px solid transparent;
            border-right: 100px solid transparent;
        }
</style>

Şekil 3
Bayrak gibi bir görüntüsü olan bu şekil nerede işinize yarar bilinmez ama çokgenlerin oluşturulması konusunda bir örnek olsun.

 <span class="cisim"></span>
<style>
.cisim{
            width:0;
            height:0;
            line-height:0;
            border-top: 50px solid #999;
            border-left: 50px solid #999;
            border-bottom: 50px solid #999;
            border-right: 50px solid white;        
}
</style>

Şekil 4
Bu şekil gördüğünüz gibi şekil 1’in tam tersi. Bu yüzden şekil 1’de border-top değerini cismin rengi olarak göstermişken burada border-bottom’da cismin rengini belirliyoruz.

 <span class="cisim"></span>
<style>
.cisim{
            width:0;
            height:0;
            line-height:0;
            border-top: 50px solid white;
            border-left: 50px solid white;
            border-bottom: 50px solid #999;
            border-right: 50px solid white;    
}
</style>

CSS ile basit şekilleri bu şekilde çizebilmek mümkün. Biraz yaratıcılık biraz da CSS hakimiyeti ile daha karışık şekiller de çizmek tabi ki mümkün.

Bakmadan geçmeyin:

Web Tasarımında sıkça karşılaşılan hatalar

[mb]Siteleriniz IE8'e uyumlu mu?

CSS Sprite kullanmak artık daha kolay!

CSS Sprite'ların kullanış alanları

yeni html5 tag'leri ve kullanım şekilleri

Twitter ile takip
Friendfeed ile takip

Bu yazı alkalin 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

CSS Sprite'ların kullanış alanları

alkalin — Sun, 22 Jun 2008 11:33:00 GMT

Birçok resim tek bir resim dosyasında

CSS Sprite'ları konusunda daha önce bir yazıyla karşılaştınız mı? Sprite'ın bir içecektan olmaktan başka web tasarımından nasıl bir terim olduğunu biliyor musunuz? Eğer bilmiyorsanız Sprite nedir hep beraber öğrenelim...

Sprite nedir?
Sprite bir imaj dosyasıdır. Ama bu imaj dosyanın diğerlerinden tek bir farkı vardır o da birçok imaj dosyasını içinde bulundurmasıdır. Örneğin ülke bayraklarının herbirini tek tek kaydetmek yerine düzgün bir biçimde 1 imaj dosyasının içine kaydedebilirsiniz. Daha sonra css kodlarında bazı derlemeler yaparak her ülkenin bayrağını tek tek o dosyanın içinden ayırabilir ve sitenize ekleyebilirsiniz.

Performans Kazancı
Daha büyük bir imaj dosyasının daha çok hacim kaplayacağı doğrudur fakat tek tek kaydedilen her imajda aslında büyük dosyalardakine oranla daha çok bandwith kaybı vardır. Ayrıca sadece 1 imaj dosyası sunucudan ükleneceği için http request'lerinin sayısı azalarak sayfamız daha çabuk kullanıcıya sunulur.

Nasıl kullanılır?

#nav li a {background:none no-repeat left center} #nav li a.item1 {background-image:url('../img/image1.gif')} #nav li a:hover.item1 {background-image:url('../img/image1_over.gif')} #nav li a.item2 {background-image:url('../img/image2.gif')} #nav li a:hover.item2 {background-image:url('../img/image2_over.gif')}

Örneğin yukarıdaki gibi bir css kodumuz olsun. Gördüğünüz gibi her linkin arkaplanına bir resim yerleştirilmiş. Bu resimler toplam 20.5 kb yer kaplamakta ve 10 http-request'i ile sayfaya çağrılmakta.

#nav li a {background-image:url('../img/image_nav.gif')} #nav li a.item1 {background-position:0px 0px} #nav li a:hover.item1 {background-position:0px -72px} #nav li a.item2 {background-position:0px -143px;} #nav li a:hover.item2 {background-position:0px -215px;}

Üstteki örnekte ise her imaj toplam 13 kb yer kaplayan bir imaj dosyasının için konulmuş ve CSS dosyası sayesinde bunların tek tek konumları belirlenerek linklenmiş. Bu sayede 1 http-request'i ile sayfalar daha da hızlandırılmış.

Gördüğünüz gibi sitelerin hem hızlanmasını hem de daha az bandwidth kullanmasını sağlayan Sprite'lar sitelerin üstündeki yükü bir nebze olsun azaltmakta. Eğer kolayca Sprite yapmak isterseniz Sprite Generator adlı siteyi kullanabilirsiniz.

Ayrıca konuya örnek olarak gösterilebilecek olan Tek bir resim dosyası ile yuvarlak köşeli kutular yapmak yazısı eburhan tarafından yazılmış.

Not: Bu bildiri Css-Tricks kaynağındaki bu yazıdan yararlanılarak yazılmıştır.

Bu yazı alkalin 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