bildirgec.org - prozzula - beğendikleri

Size Sıfırdan AJAX Öğretecek 20 Mükemmel Kaynak

prozzula — Mon, 16 Feb 2009 07:45:00 GMT

Ajax (Asenkronize JavaScript ve XML) yüksek seviyede interaktif ve karşılık veren tarayıcı tabanlı uygulamalar geliştirebilmenize olanak sağlayan bir teknolojidir. XMLHttpRequest nesnesine yüklenerek suncu ile sorunsuz bir bağlantı sağlanabilir ve bu sayede yumuşak ve dinamik bir kullanıcı deneyimine kavuşulur.

Eğer daha önce AJAX öğrenmek istediyseniz, AJAX'ı ve onu çevreleyen teknolojileri "yalayıp yutmanızı" sağayacak pek çok kaynak bulunmaktadır. Yazımızın devamında AJAX konusunu kapsayan en iyi 20 web sitesini incelemeye çalıştık.

1. Ajax resource center (developerWorks)

IBM'in geliştiricilere ve BT profesyonellerine yönelik olarak hazırladığı bir kaynak merkezi olan developerWorks üzerinde bu konuya adanmış bir AJAX kaynak merkezi bulunmaktadır. İlgili sayfada AJAX'a yönelik pek çok rehber yer alıyor. developerWorks'ün rehberleri derinlemesine ve oldukça uzundur ve bunlar üzerinden jQuery ve AJAX ile RIA uygulamaları oluşturmak, AJAX güvenlik araçlarını öğrenmek ve AJAX tabanlı sohbet sistemi geliştirmek gibi farklı alanlarda pek çok çeşitli bilgiye ulaşabilirsiniz.

2. Mozilla Developer Center (AJAX)

Mozilla Developer Center üzerinde bulunan AJAX bölümü özellikle giriş seviyesindeki geliştiriciler içn mükemmel bir başlangıç noktası olarak gösterilebilir. MDN üzerindeki başlangıç rehberi özellikle AJAX'ın temel konseptlerini öğrenmek için mükemmel bir başlangıç noktasıdır. İlginizi çekebilecek bir diğer yazı ise XMLHttpRequest üzerinde yer alan yazıdır. Bu yöntem tipik AJAX örneklerinde sunucu tabanlı betiklerle iletişime dair kullanılması gereken ana elementtir.

3. AJAX Today

Üyelerinin AJAX hakkında web site bağlantılarını paylaşarak oluşturdukları bir içeriğe sahip olan AJAX Today web sitesi gönderilen bağlantıları AJAX Dersleri ve AJAX Podcastları gibi kullanışlı kategoriler altına yerleştiriyor. Dilediğiniz kategorilerin RSS beslemelerine abone olarak üyeler tarafından yeni bir bağlantı gönderildiğinde siteyi ziytaret etmenize gerek kalmadan doğrudan RSS beslemesi üzerinden takip edebilirsiniz.

4. ajax.solutoire.com

ajax.solutoire.com, Yazılım Mühendisi Bas Wenneker tarafından oluşturulan ve çevrimiçi AJAX kaynaklarını tek bir sayfa üzerinde listeleyen bir dizin sitesidir. ajax.solutoire.com üzerindeki kategoriler, AJAX Haberleri ve AJAX/JavaScript Güvenliği gibi çeşitli kategorilere ayrılmıştır. Bas Wenneker ayrıca JavaScript ve mooTools gibi web geliştirme konularında bildirimler yayımladığı Solutoire.com blogunu da yönetmektedir.

5. SitePoint: JavaScript & AJAX Tutorials

Web profesyonellerine kullanışlı ve işe yarar bilgileri sunan bir web yayımı olan SitePoint üzerinde bulunan JavaScript & AJAX Rehberleri bölümü özellikle halihazırda çalışan örnekler üzerinden AJAX öğrenmek isteyen geliştiriciler için mükemmel bir kaynaktır. "Elektronik Posta Listenizi Geliştirmek İçin AJAX ve PHP Kullanın" ve "AJAX İle Kontrolü Ele Geçirn" gibi rehberleri takip edebilir ve AJAX bilginizi ilerletebilirsiniz.

6. Encosia

Encosia, özellikle ASP.Net ve AJAX konuları başta olmak üzere web geliştirme konusunda bildiriler yayımlayan Dace Ward'a ait bir blog. Site bünyesinde veri güncellemelerini gerçek zamanlı olarak görüntülemek ve interaktif veri araması için jQuery nasıl kullanılır gibi konuları irdeleyen pek çok rehberi içeren Encosia özellikle ASP.Net üzerinde çalışan web geliştiricileri için mükemmel bir kaynaktır zira site üzerinde "Sık yapılan bu 3 ASP.Net AJAX hatasını yapıyor musunuz?" gibi makaleler de okuyabilirsiniz.

7. AJAX Technology Center

Adobe Developer Connection'un bir parçası olan AJAX Technology Center web tasarımcılarına ve geliştiricilerine yönelik bir kaynak. AJAX Technology Center AJAX geliştiricileri için Adobe Air ve Dreamweaver projelerine AJAX bileşenleri eklemek gibi konularda makaleler ve rehberler içermektedir.

8. AJAX Blog

AJAX Blog, AJAX hakkında bir blogdur. AJAX Blog üzerinde aradığınız bilgiye ulaşmanıza yardımcı olacak pek çok kategori bulunmaktadır. Eğer AJAX rehberleri ve örnekleri arıyorsanız, hiç beklemeden AJAX Rehberleri ve AJAX Örnekleri kategorilerini ziyaret edebilirsiniz.

9. AJAX Matters

AJAX teknolojisi hakkında bildiriler sunan bir blog olan AJAX Matters 2004 yılında yayım hayatına başlamış olup bu konuya adanmış ilk bloglardan biridir. Site bünyesinde AJAX ve PHP'ye başlangıç ya da Google Web Toolkit'i öğrenebileceğiniz pek çok yardımcı rehber bulunmaktadır.

10. Ajaxonomy

Amacı AJAX hakkındaki bilgileri paylaşmak olan bir grup web geliştiricisinin hazırladığı bir blog olan Ajaxonomy özellikle AJAX Rehberleri hakkında bilgi sahibi olmak isteyenlerin işine yarayacak pek çok makaleyi içeriyor. Bunun yanısıra PHP'de sunucu tabanlı caching gibi diğer AJAX teknolojilerine ait bilgiler ve web üzerindeki diğer AJAX rehberlerinin incelemeleri de yer alıyor.

11. Ajaxian

AJAX üzerindeki yeniliklere yönelik lider bir blog olan Ajaxian, AJAX ile ilgili ipuçlarını ve dersleri barındıran Rehber başlığı gibi düzenli olarak güncellenen AJAX konularını ele alıyor. Web geliştirme alanında ün yapmış web profesyonellerini içeren bir ekibe sahip olan Ajaxian, özellikle AJAX'a yönelik kaynaklar ve haberler için ilk uğranılması gereken sitelerden.

12. Ajaxlines

Ajaxlines, ziyaretçilerine AJAX haberlerini, kaynaklarını ve derslerini sunmayı hedefliyor. Pek çok farklı kaynaktan derlediği haberleri ve bilgileri bir araya getiren site sayesinde kullanıcılar tüm bu makalelere tek bir site üzerinden ulaşabiliyor.

13. AJAX Magazine

PHP Magazine Network'un bir ağı olan AJAX Magazine AJAX konusunda bir web dergisi. Site bünyesinde işe yarar AJAX derslerine yönelik AJAX dersleri ve AJAX ve .NET kategorisi gibi daha özel alanlara yönelik ilginizi çekebilecek bilgileri içeren pek çok farklı kategoriye ulaşabilmenizi sağlıyor.

14. InsideRIA

InsideRIA, kısa adı RIA olan Rich Internet Applications (Zengin İnternet Uygulamaları) hakkında bir komünite websitesi. Site bünyesinde ilk YUI uygulamanızı yazmak (YUI, Yahoo!'nun JavaScript kütüphanesidir) ve yüksek trafiğe sahip web siteleri için AJAX çatıları gibi makalelerle yüksek seviyede interaktif web uygulamaları yazabilmenize yardımcı olan kaynaklar yer alıyor. AJAX etiketine sahip makaleleri ziyaret ederek sadece AJAX hakkındaki içeriğe ulaşabilirsiniz.

15. AJAX Impact

AJAX Impact, AJAX hakkında bilgileri ziyaretçileri ile paylaşmaya kendini adamış bir web sitesi. AJAX'a yönelik derslerin bir listesine ulaşmak için AJAX Dersleri bölümünü ziyaret edin. Eğer örnek web sitelerini merak ediyorsanız AJAX Kullanan Siteler bölümünü ziyaret etmeyi unutmayın.

16. AJAXwith.com

AJAXwith.com, "AJAX with (ile) [buraya istediğinizi girin]" (örneğin "AJAX ile PHP") hakkında kaynakları paylaşabileceğiniz komünite tarafından geliştirilen bir web sitesidir. 4.000 üyeye yakın AJAX forumu özel bir konuda yardıma ihtiyacınız olduğunda kullanışlı olabilir.

17. David Walsh Blog

Web geliştiricisi David Walsh, kendi kişisel blogu David Walsh Blog üzerinden her seviyedeki web tasarımcısı ve geliştiricisi ile işe yarar ipuçlarını paylaşıyor. Web geliştirimine yönelik pek çok konuda yazı yazan yazarın AJAX başlığı, AJAX hakkındaki makalelere çabucak ulaşabilmenizi sağlıyor. Kendisine ait olan AJAX dersleri arasında "mooTools 1.2 kullanarak AJAX kullanıcı adı uygunluğu kontrolü" ve "mooTools 1.2 kullanarak periyodik AJAX istekleri" yer alıyor.

18. AJAX Projeleri

AJAX Projects, AJAX web projelerine yönelik dizin tarzında bir liste sitesi. Site bünyesinde yer alan AJAX Dersleri bölümünde yer alan "jQuery kullanarak PHP AJAX giriş formu", "Google Analytics: AJAX ve Flash'ı İzlemek" ve "JavaScript Kodunuzu Nasıl Tasarlamalısınız?" gibi çeşitli kaynaklardan alınmış AJAX ile ilgili pek çok rehber ile mükemmel bir kaynak.

19. Agile AJAX

Pathfinder Development (bir yazılım geliştirme ve UX tasarım şirketi) üzerinde bir bölüm olan Agile AJAX, AJAX hakkında bilgileri paylaşıyor. Agile AJAX üzerinde göreceğiniz yazılardan bazıları "Uygulama Güvenliği: Kuruluş Çizelgesini Atın" ve "Scriptaculous: Seçimden Sonra Hover'ı Düzeltmek" yer alıyor.

20. AJAX Patterns

AJAX hakkında bilgileri içeren Wiki tarzında ve bir komünite tarafından geliştirilen bir site olan AJAX Patterns sitesi üzerinde yer alan örnekler kısmı özellikle sık kullanılan AJAX tasarım örneklerini görmek istiyorsanız ziyaret edilmesi gereken bir bölüm.

Kaynak: Six Revisions

İlgilenebileceğiniz Diğer Yazılarım

Bu yazı prozzula 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'de uzman olmanızı sağlayacak 20 css dersi

prozzula — Sat, 14 Feb 2009 15:25:00 GMT

CSS'yi kodlamak kolay olabilir ancak buna rağmen her kodcuyu delirtebilecek bazı konseptleri de bulunmaktadır. Bu yazımızda kimilerine göre zor olan ancak anlaması oldukça kolay olan CSS derslerini bir araya getirerek CSS bilginizi bir adım daha ileriye taşımanıza yardımcı olacak dersleri inceledik.

1. CSS Sekmeler ve Navigasyon

1.1. Genişleyebilen CSS Sekmeleri Dersi
Genişleyebilir CSS sekmelerinin anlamı, sekmenin içerisindeki metnin uzunluğuna göre genişleyebilen sekme başlıklarıdır. Kodun özünde start.gif ve end.gif adında iki adet görsel bulunuyor. start.gif görseli boyutu genişletmek için kullanılırken end.gif görseli değişmeden kalıyor.

1.2. Gelişmiş CSS Menüsü
Bu rehberde Photoshop'taki watercolor efektini nasıl tasarlayabileceğiniz anlatılmış. Bu rehber size adım adım bir menü tasarımını nasıl kırpabileceğinizi ve ardından CSS kullanılarak nasıl onları bir araya getirebileceğinizi gösteriyor. Pek çoğunuz muhtemelen dikey ya da yatay menünün CSS ile nasıl kodlanacağını bilyorsunuzdur. Gelin şimdi bunu bir sonraki seviyeye taşıyarak CSS'nin position özelliğini kullanan gelişmiş bir menü tasarlayalım.

1.3. CSS Tabanlı Navigasyon
Bu rehberin amacı fare imleci bir menü öğesi üzerine getirildiğinde ilgili öğenin ön plana çıkarılması ile sonuçlanan CSS tabanlı bir menü oluşturmak.

1.4. Şık CSS Menüsü
Bu makalede bazı sevimli Javascript efektleri kullanılarak oluşturulmuş özel bir navigasyon çubuğunun oluşturulma aşamalarını öğreneceksiniz. Mootools kütüphanesinin işlevselliği sayesinde bu efekt sadece 1.5 KB'a sığdırılmış durumda. Bununla da kalmıyor ve ilgili menü hem çapraz tarayıcı desteğini bünyesinde barındırıyor hem de erişilebilir olduğu için arama motoru optimizasyonunu dikkate alanların gönlünü fethediyor.

1.5. Kayan Kapılar
CSS ile kayan kapılar tekniğinin nasıl kullanılabileceğine yönelik güzel bir makale.

1.6. Tanıtım Metni İçeren CSS Dikey Navigasyon
Navigasyon elementlerine tanıtım metni eklemenin yanısıra bu teknik sayfanız üzerindeki herhangi bir elemente açıklama eklenecek şekilde modifiye edilebilir. Örneğin profil adlarına, soru-cevap tarzındaki SSS sayfalarına, navigasyon elementlerine ya da diğer uygulamalara açıklama mesajları ekleyebilirsiniz.

1.7. CSS'de Sekmeli İçeriğin Üzerine Bindirme
Bu makalede Javascript kullanmadan ve çapraz-tarayıcı desteği bulunan, CSS ile hazırlanmış, bindirme desteği bulunan bir CSS sekmeli navigasyonun nasıl oluşturulabileceği anlatılmış.

2. CSS İle Yuvarlatılmış Köşeler

2.1. Box - Hepsi İçin Yuvarlatılmış Köşeler
Bu egzersizin amacı görsel olarak göze hoş gelen ve semantik olarak yazılmış en az miktarda kod kullanarak yuvarlatılmış köşeler oluşturmak. Ayrıca bu kutuların boyutu gerektiğinde değiştirilebilmeli de. İlk kutu için gerekli olan XHTML ve CSS kutunun hemen alt kısmında yer alıyor.

2.2. CSS'de Yuvarlatılmış Köşeler
CSS'de yuvarlatılmış köşeler oluşturmaktan bahsediyorduk ve arkadaşıma kendi yöntemimi gösterdim. Bunu gerçekleştirebilmek için diğer yöntemlerin de olduğunu biliyorum ancak bu yöntemlerin pek çoğı karmaşık HTML ve CSS kullanımını gerektiriyor. İç içe girmiş DIV'lerin tablo kullanmaktan çok daha iyi olmadığının farkına vardım. Bu sebeple benim yöntemim HTML ve CSS açısından fazla bir kod gerektirmiyor.

pinkfloyd'un notu: Her ne kadar burada arkadaşımız tablo kullanma yoluna gitmiş ancak siz sakın zorunda olmadıkça bu yöntemi denemeyin. Tabloları sitenizin anahat elementlerini oluşturmak için kullanmak yanlıştır.

3. CSS Fotoğraf Galerisi

3.1. Hoverbox Görsel Galerisi
Efekt için anchor bağlantısı kullanılmış zira IE'de :hover ast sınfının tek desteklendiği element bu. Her ne kadar kullandığım bu örnekteki tüm bağlantılarda # bağlantısını kullanmış olsam da siz görsellerin tam boyutlu sürümlerine bağlantı verebilirsiniz.

3.2. Çapraz Tarayıcı ve Çoklu Sayfa Destekli Fotoğraf Galerisi
Suckerfish HoverLightbox'dan esinlenmesine rağmen bu örnekte benim geliştirdiğim, metin yerine görsel kullanan çoklu sayfa anahat sistemini kullandım.

Suckerfish HoverLightbox'un aksine bu sürüm JavaScript'e ihtiyaç duymuyor ve sadece CSS kullanılmasına rağmen IE üzerinde sorunsuz çalışıyor.

3.3. Kayan Fotoğraf Galerileri
Bu galeri benim bugüne kadar geliştirdiğim en sade galeri. Dikey olarak 8:1 oranında sıkıştırılmış görselleri sırasız liste üzerinde kullanıyorum. Bu görsellerden birinin üzerine fare imlecinizi getirdiğinizde sıkıştırılan bu görseller tam boyutuna genişliyor. Kayan menü sistemimi temel aldığım bu örnekte metin yerine görsel kullandım. Herhangi bir küçük resim kullanmaya gerek yok ve tüm görsel önceden yükleniyor. Bu yöntem hem dikey hem de gösterildiği gibi yataay olarak kullanılabilir.

4. CSS Gölgeler

4.1. CSS Gölge Efekleri: Fuzzy Shadows
Bu makalede:

IE harici tarayıcılarda bir stil şablonunu nasıl gizleyebileceğimizi ve bu sayede ilgili belgenin doğrulanmasını engellememeyi,
IE5.5 ve IE6'da PNG saydamlığının nasıl doğru olarak görüntülenebileceğini,
Yukarıdakileri kullanarak nasıl gölge efekti oluşturabileceğimizi öğreneceğiz.

4.2. CSS Gölgeler
Bu makalede bir başka tekniği inceleyeceğiz. Diğer tekniklerin pek çoğu negatif marj kullanırken bu örnekte bağıl pozisyonlama kullanılarak nasıl gölge efekti oluşturabileceğimizi göreceğiz.

5. Diğer CSS İpuçları ve Hileleri

5.1. IE Çift Yüzen Marj Hatası
Eminim bununla pek çoğumuz boğuşmuşuzdur, zira en sık kullanılan css "hilelerinden" birisi de budur. eğer bu hata ile daha önce karşılaşmadıysanız hemen özetleyelim: ie6'da üzerine 'margin' uygulanmış yüzen (float) bir element kullanıyorsanız, bunun ilgili tarayıcı üzerinde doğru pozisyonlanmadığını göreceksiniz. ne şans ki ie6'nın bu hatasını gidermek çok basit.

5.2. CSS Çapraz Tarayıcı Saydamlığı
İster inanın ister inanmayın tüm tarayıcılar üzerinde CSS'nin saydamlık elementini doğru bir şekilde kullanmak mümkün. Bu teknikle IE, Firefox, Safari, Opera ve Netscape Navigator gibi eski tarayıcıları bile kapsayabiliriz.

5.3. Kapanır Tablolar: Bir Örnek
Aşağıdaki tabloların her bili "footcollapse" adı verilen bir sında dahiller. Bu sayede kullanılan betik ok görselini altlığa yerleştiriyor ve üzerine tıkladığında tablonun kapanıp açılabilmesini sağlıyor.

5.4. CSS İle İçerik Üzerine İçerik
Kapsayıcı üzerine fare imlecini getirdiğinizde halihazırda var olan içeriğin üzerinde yeni bir kapsayıcı belirecektir. Bu teknik position:relative tekniğini kullanarak statik içeriğin mutlak olarak pozisyonlanmış içeriğin üzerinde görüntülenebilmesini sağlıyor.

5.5. CSS Yakınlaştırma
Son zamanlarda metni yeniden boyutlandırabilme özelliğini barındıran bir web sitesinin yeniden tasarlanmasında çalışıyorum. Sitenin hitab ettiği kesimin yaş ortalaması biraz yüksek, bu sebeple büyük boyutlu metin kullanmak onlar için önem taşıyor. Ve siz insanların tarayıcılarında halihazırda bulunan bu özelliği kullanmaları gerektiğini söyleyip üzerime yürümeye başlamadan önce pek çok ziyaretçinin bu tip özelliklerin farkında olmadığını ve benzer özelliğin sitenin içine gömülmesinden memnun olduğnu hatırlatmak isterim.

5.6. CSS İle Oluşturulan ve Sonradan Beliren Görsel Açıklamaları
Bu örnekte ise görsel açıklaması ve tanıtım tekniğini bir arada kullandım. Görselin açıklamasını bir bağlantı içerisine dahil ettim. Yapmak istediğim şey ise ilgili açıklamayı kullanıcı görsel üzerine fare imlecini getirene kadar gizlemek.

Kaynak: DWS mg

CSS Üzerine Yazdığım Diğer Yazılar

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

960 css çatısına yakından bakış

prozzula — Sun, 15 Feb 2009 13:13:00 GMT

CSS çatılarının (framework) sayısı her geçen gün biraz daha artıyor. CSS çatıları özellikle CSS ile kod yazmak konusunda henüz kendisini yeteri kadar geliştirmemiş olanlar için kimi zaman oldukça kullanışlı bir hal alabiliyor. Ancak bazı CSS profesyonellerine ve diğer dillerin programcılarına göre CSS, üzerine bir çatı geliştirilmesi gerekecek kadar zor bir dil değil.

Eğer herhangi bir CSS çatısı üzerine bir rehber okuduysanız, ilgili rehberlere bırakılan pek çok yorum yukarıdakilerle aşağı yukarı aynıdır. Benim görüşüm bu tip yorumların büyük çoğunluğunun bir miktar tatminsizliğe bağlı olduğu yönünde. 960 üzerinde biraz zaman geçirdikten sonra, web uygulamalarınızı geliştirirken size ne kadar zaman kazandırabileceğine inanamayacaksınız. Hiç olmazsa ilgili çatıyı sadece bir 10 dakikalığına inceleyin. Her zaman klavyenizin delete düğmesine basabilirsiniz ancak bunu yapacağınızdan şüpheliyim.

Artıları

Geliştirme zamanını önemli ölçüde kısaltıyor.
Temiz ızgara yapısına sahip.
Farklı tarayıcılar üzerinde problemlerle karşılaşma ihtimaliniz çok düşük. Bulduklarınızı da kolayca düzeltebilirsiniz.
Pek çok kişinin söylediğinin aksine "abartılmış" değil. Burada 3-4 KB'den bahsediyoruz arkadaşlar! Bu tip stillemelerinin pek çoğunu zaten neredeyse tüm web uygulamalarında kullanıyorsunuz.
Karmaşık anahatları kolayca oluşturun.

Eksileri

Adının "960" olmasının bir nedeni var. Web siteniz için başka bir genişliği kullanmak istiyorsanız, o zaman diğer çatılara göz atmanızı öneririm.
Diğer tüm "çatılarda" olduğu gibi bazı kısıtlamalarınız yok değil.
Onu siz yapmadınız. Kodun %100'ünün size ait olmasının verdiği his bir başkadır.

Kullanım
12 sütuna sahip bir altyapı üzerinde aşağıda gördüğünüz gibi oldukça sade bir anahat hazırlmak istediğinizi hayal edin. İlk olarak "container_12" adındaki bir sınıfa sahip bir kapsayıcı bir div oluşturmamız gerekiyor. 12'ye dikkat edin.

<div id="container" class="container_12">  
...içerik buraya  
</div>

Burada bir ID tanımlamanızın kesinlikle gereği yok ancak ben özellikle divin ne amaçla kullanıldığını daha sonra kolayca anlayabilmek adına divlerime genellikle bir ID atarım. 960'ın kötü yanlarından birisi de sınıfların elementin ne amaçla kullanıldığını belirtecek herhangi bir tanım içermiyor oluşu. Bu sebeple DIV'e bir ID ekleyerek bu kavram sorununu kolayca gidermiş oluyoruz.

Izgaralar

Şimdi de basit bir başlık ve iki sütunlu bir altyapı oluşturmak istiyoruz. Başlamadan önce tanıtıma bakarak ne kadar genişlikte bir ızgara kullanmak istediğinize karar verebilirsiniz.

Başlık genişliği olarak 940px seçeceğim (+20 px de marjlar için = 960), yan çubuk genişliği için 220px ve ana içerik kısmı için de 700 px seçeceğim.

Her bir div elementini bir sınıfa dahil etmelisiniz. Çatının kurallarına göre sınıf isimleri "grid_" öneki ile başlamak ve devamında istenen sütun sayısını girmeniz gerekli. Bizim durumumuzda "grid_12", "grid_3" ve "grid_9" sınıflarını kullanacağız.

<div id="container" class="container_12">  
  <div id="header" class="grid_12">  
    içerik buraya  
  </div>  

  <div id="sidebar" class="grid_3">  
    içerik buraya
  </div>  

  <div id="mainContent" class="grid_9">  
    içerik buraya  
  </div>  
</div

Çatının sunduğu stillerin üzerine her bir div için arkaplan rengi ve minimum genişlik ekledim. Bunu koda eklemedim zira sadece sütunları tanıtımda daha belirgin yapmak için ilgili stilleri kullandım.

Marjlar, yüzen divler ya da IE hileleri ile boğuşmadan bu anahattı inanılmaz derecede çabuk bir şekilde hazırladık. 960'ın gerçek gücü özellikle karmaşık gazete-benzeri arabirimler geliştirmek istediğinizde ortaya çıkıyor. Bu konuda daha fazla bilgi almak istiyorsanız buradaki screencast'ı izleyebilirsiniz.

960 GS İle İlgili İlginizi Çekebilecek Diğer Kaynaklar

960 CSS Çatısı İle Prototip Oluşturma
Grid 960 bir CSS çatısı olup geliştiricilerin hızlıca prototip tasarımlar oluşturabilmelerini sağlıyor. Şablonlar oluşturabilmek için inanılmaz araçlar bulunuyor? Neden mi? Çünkü hepsi sizin daha hızlı sonuçlar alabilmeniz için işin zor kısmını sırtınızdan alabilmenizi sağlıyor.

Makaleyi Ziyaret Edin

WP_Query ve 960 CSS Çatısı İle Gazete Teması Oluşturun
WP_Query oldukça güçlü bir araçtır. Bugün ilgili aracı kullanarak nasıl 3 sütunlu gazete şablonu oluşturabileceğinizi göstereceğim. Ana sütunda tüm blog girdileriniz yer alırken, yanlara ilerledikçe belirli kategorilere ait blogları listeleyeceğiz. Temel anahattımız ve temamızı sıfırlamak için 960 CSS çatısını kullanacağız ki bu sayede, işin büyük bir kısmı tamamlanmış olacak.

Makaleyi Ziyaret Edin

Web Tasarımı İçin Hangi CSS Çatısını Kullanmalısınız?
WordPress ve diğer platformlar için o güzel "magazin" temalarının nasıl oluşturulduğunu hiç merak ettiniz mi? Hepsi olmasa da pek çoğu, CSS Izgara Çatıları kullanılarak geliştirilmiştir. Bu yüzden siz de halihazırda sunulan CSS çatılarını kullanarak kendi magazin temanızı oluşturabilirsiniz. Karmaşık web sayfası anahatlarını çatı kullanmadan oluşturmak mümkün olsa da bunun günümüzde mazoşist bir tutumun bir ürünü olduğunu söylemek yanlış olmaz. Bu makalede günümüzde sunulan çatılara genel bir bakış atacak ve hangisini kullanmanız gerektiğine birlikte karar vereceğiz.

Makaleyi Ziyaret Edin

Kaynak: NETTUTS

CSS Çatıları Hakkında Yazdığım Diğer Yazılar

Bu yazı prozzula 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 message box örneği

prozzula — Sun, 08 Feb 2009 15:49:00 GMT

css message box

Css ile (message box) mesaj kutularını bilmeyen yoktur , bu örnekte mesaj kutularını biçimlendirmeyi öğreneceksiniz.
kodlar hakkında kısa bir bilgi;

Clean message box (mesaj kutusunu temizlemek için bir tuş oluşturalım )

...bir DIV layer içerisinde bir kaç text kodu ile birlikte aşağıdaki gibi CSS kodları kullanılır:

.clean-gray{
border:solid 1px #DEDEDE;
background:#EFEFEF;
color:#222222;
padding:4px;
text-align:center;
}

Mesaj kutularımızı oluşturduktan sonra onları iconlaştırabiliriz, nasıl mı? Öncelikle küçük iconlara ihtiyacımız var, icon packleri buradan indirebilirsiniz. Bu küçük hoş iconlar mesaj kutularımızın sol köşelerine yerleştirilecek.

css message box icons

css dosyamızda iconları yerleştirmek için kullanacağımız kodlar:

mesaj iconları

.icon-heart{
border:solid 1px #DEDEDE;
background:#FFFFCC url(img/icon-heart.png) 8px 6px no-repeat;
color:#222222;
padding:4px;
text-align:center;
}

yukarıdaki gibi olacaktır... Backround için şeffaf renkler seçebilirsiniz. bir kaç css hilesi ile cursor mesaj kutunuzun üzerine geldiğinde iconların değişerek ortaya hoş bir tasarımın çıktığını göreceksiniz. Yazıyı sizler için türkçeleştirerek sunmaya çalıştım, detaylar için örneğin kaynağına bakabilrisiniz. Örnek kodlarını buradan indirebilirsiniz.

42 css hilesi ve örnekleri

Benzer 42 Css Hilesi ve Örnekleri için buraya göz atmanızı tavsiye ederim.

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

Okuyarak değil seyrederek öğren

prozzula — Mon, 26 Jan 2009 14:18:00 GMT

Sizlere, ücretsiz görüntülü ders hizmeti veren Birkaç websitesinden bahsedeceğim. Bu sitelerde istediğiniz herhangi bir programlama dilini arkanıza yaslanıp seyrederek öğrenebilirsiniz.

http://www.webhocam.net/images/logo.gif

EgitimOfis: bu konuda tanıtacağımız ilk websitemiz. Ücretsiz ve üyelik gerekmeden seyredebileceğiniz bu güzel dersleri, tecrübeli, işi bilen kişilerce anlatılıyor. Benim favorim php dersleri, toplam 55 adet php dersi bulunuyor sitede. Tabi siz ilgi alanınıza göre asp dersleri, delphi dersleri, html dersleri vb... seyrdebilirsiniz.

WebHocam: türkçe görüntülü ders hizmeti sunan kaliteli bir başka site. Bu da tamamen ücretsiz ve üye olmaksızın dersleri takip edebilirsiniz. Burada da yine html, asp, visual basic.net, fireworks vb. dersleri izleyicilerini bekliyor. Hepsine aynı sayfadan göz atabilirsiniz. Üstelik istediğiniz dersi bilgisayarınıza da indirebilirsiniz.

webhocam logo

BilgiPortal: Görüntülü dersleri kullanıcıların istifadesine sunan başka bir site daha. Yukarıdaki sitelerenden farklı olarak bu sitede programlamadan ziyade “nasıl yapılır?” sorusuna derman olmak için tasarlanmış. Örneğin gmail hesabının outlook ile entagrasyonu, windowsu hazırda bekletmeye almak vs.. muhtelif konulara ait ufak çözümler görüntülerle anlatılıyor.

VideoDersler: Sen ne yaptın abi ya, ben bu sene öss ye gireceğim. Zamanımı php'ye asp'ye veremem. Ders çalışmam lazım benim, diyenler için oluşturulmuş başka görsel bir site. Türkçe, matematik,fizik, kimya, biyoloji vs. buradan takip edilebilir.

UzmanWeb: burada programlama dersleri yok ama kafanıza takılan sorular işin uzmanları tarafından görüntülü olarak cevaplandırılıyor. IPTV nedir, LCD ile Plazma arasındaki fark, fotoğraf makinesinde filtre ne işe yarar, gibi.

UzmanTV: işleyişi, bir yukarıda anlattığımız sitenin aynısı. Hatta daha kallavisi. Daha profesyoneli. Tıklayınız.

uzmantv

Türkçe Siteler böyleydi, Birkaç tane de yanabcı kaynğımız var:

VideoJug: yukarıda bahsettiğimiz son iki sitenin internasyonel hali ve onların esin kaynağı. İngilizce yayın yapıyor.

videojug

Video-Tutes: flash, 3dmax, illustrator gibi tasarım programlarına dayalı online video dersleri sitesi. Tıklayınız.

Bunların dışında benzer görev gören ingilizce siteler de şunlar: tutorialVid, sutree, video-animation

Birkaç ay önce de şöyle bir bildirim olmuş konuyla alakalı:

okuyarak değil animasyonla öğren

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

En İyi 65 mooTools Eklentisi

prozzula — Mon, 26 Jan 2009 18:55:00 GMT

Hazır sözü 2008'in En İyi JavaScript Kaynakları'ndan açmışken jQuery'nin pratikliği karşısında dimdik duran ve kimilerine göre jQuery'nin pabucunu yakında dama attıracak olan bir başka JavaScript kütphanesi mooTools'dan bahsetmeden olmaz.

Bu yazımda, bugüne kadar yayımlanan en iyi 65 mooTools eklentisini sizlerle paylaşmak istiyorum. Listede olmayan ve sizin de beğenerek kullandığınız mooTools eklentileri varsa paylaşmaktan çekinmeyin.

SmoothScroll

SmoothScroll kullanıcıyı sayfanın belirli bir bölgesine yumuşakça yönlendiriyor. Normalde bu tip bağlantılar kullanıldığında tarayıcı herhangi bir efekt olmadan sayfayı doğrudan istenen bölgeye taşır. SmoothScroll işte bu eylemi yavaşlatarak kullanıcının gözüne daha hoş gelecek şekilde yeniden tanımlıyor.

MultipleSelect

MultipleSelect HTML çoklu seçim kutucuklarına özel stil eklemenizi sağlıyor. Üstelik birden fazla öğe seçmek için CTRL tuşuna basılı tutmanız da gerekmiyor.

Typewriter Effect

MooTools kullanılarak oluşturulmuş güzel görünümlü bir daktilo efekti.

MooColumns

MooColumns bir MooTools 1.2 sınıfı olup içeriği birden fazla sütuna kolayca ve çabucak bölümlendirebilmenizi sağlıyor.

Yatay kaydırmalı haber bandı

Bu haber bandı çok basit olup web projelerine entegre edilmesi çok kolay. Newsvine Live panel'den esinlenen bu eklentinin göze oldukça hoş gelen bir efekti mevcut.

MooScroll

MooScroll bir MooTools 1.2 sınıfı olup kaydırılabilir divler üzerindeki kaydırma çubuğunun görünümünü özelleştirebilmenizi sağlıyor.

Giriş Panelini Göster/Gizle

Sayfanın üst kısmından aşağı yumuşakça kayan güzel bir giriş paneli.

Kroppr

Kroppr güçlü bir betik olup ziyaretçilerine imaj kırpma desteği sunmak isteyen tüm site sahiplerinin işini kolaylaştıracak nitelikte. Diğer betiklerin aksine Kroppr resimleri döndürebilir, yakınlaştırabilir ve flash ya da java gibi herhangi harici bir eklenti kullanmadan imajları taşıyabilir. Kırpma işlemi kullanıcı seçiminden memnun olduktan sonra gerçekleştirildiğinden hem sunucuya bindirilen yük hem de kullanıcının işlem süresi azaltılmış oluyor. Kesinlikle önerilir.

Sayaç Eklentisi

Internet üzerinde ziyaretçinin bir işlemin sonucunu alabilmesi için bir süre beklemesini gerektiren ve bu esnada ekranda sayaç gösteren pek çok web sitesi bulunuyor, örneğin RapidShare. MooTools kullanılarak oluşturulan bu eklenti, sitenize benzer bir özelliği kolayca entegre edebilmenizi sağlıyor.

Twitter Emulation

Dünyanın her bir köşesindeki insanlar, Twitter'ı kullanımı çok kolay olduğu için seviyorlar, zira site üzerinde tek yapmanız gereken mesajınızı yazıp "Güncelle" düğmesine basmaktan ibaret. Pek çok kişinin bilmediği şey ise Twitter'ın işlevselliğini sitenize entegre edebilmenin aslında ne kadar kolay olduğu. PHP, MySQL ve MooTools JavaScript kullanılarak Twitter benzeri bir durum paylaşım sistemini sitenize kısa sürede entegre edebilirsiniz.

Fancy Navigation

Navigasyon menüleri genellikle sıkıcıdır, öyle değil mi? Çoğu zaman navigasyon menüsünün üzerine fare ile gelindiğinde bir imaj belirir. Peki bunun orijinalliği nerede? Bu makalenin yazarı MooTools kullanarak güzel görünümlü bir navigasyon menüsü oluşturmuş. Menünün üzerine fare imleci götürüldüğünde zincir efekti oluşuyor.

Select Box Factory 1.0

Alternatif bir çoklu seçim kutusu örneği. Arama kutusuna birkaç harf girerek, site üzerindeki öğelerden birini aramayı deneyin. Listenin hemen yanında benzer bir liste, açılır liste olarak belirecektir (bu geçişi sağlamak yaklaşık 5 saniye kadar sürüyor).

AutoCompleter

MooTools için hazırlanan bu otomatik tamamlama betiği metin önerme ve tamamlama özelliklerini bir arada sunuyor. Yerel, JSON ya da XML gibi farklı veri kaynaklarını desteklediği gibi farklı kullanıcı etkileşimleri, özel biçimlendirme, çoklu seçim, animasyon ve çok daha fazlası için desteği de bünyesinde barındırıyor.

mooSocialize

mooSocialize düğmesine tıkladıktan sonra, beğendiğiniz sosyal ağı seçebileceğiniz bir pencere beliriyor. Her bir sosyal ağ servis isminin yanında bulunan küçük resim, kullanıcının aradığı servisi kolayca bulabilmesini sağlıyor. Ama hepsi bu değil - bağlantılara tıkladığınızda bulunduğunuz sayfadan başka bir sayfaya yönlendirilmiyorsunuz, aksine seçilen sosyal ağ site üzerinde bir kutu içerisinde açılıyor. Kullanışlı ve kolay. Kutu üzerinde bulunan düğme aracılığı ile kutuyu gizlemek de mümkün.

SlideItMoo

SlideItMoo, imajlar için bir MooTools 1.2 kaydırıcısı. Pek çok tarayıcı üzerinde sorunsuz çalışan bu eklenti, JavaScript'in etkin olmadığı zamanlarda bile görünümü ve işlevselliğini bozmuyor. Tüm CSS stillemesi harici olarak yapılmış. Kaydırma işlemi hem ileri ve geri düğmeleri ile hem de fare üzerinde bulunan tekerlek aracılığı ile yapılabilir. Betik hem bir galerinin küçük resimlerini hem de reklam bannerlarını döndürmek için kullanılabilir. Betiği kullanım amacınızı değiştirmek de çok kolay, tek yapmanız gereken betiği sayfanıza eklerken kullanmak istediğiniz sınıfı belirlemek.

mooTools ile Yansıma (Reflection) Efekti

Bir ara popüler olan reflection.js'nin mooTools JavaScript çatısı için yeniden yazılmış sürmü. 2KB'dan küçük olan bu eklenti sayesinde sitenizdeki imajlar üzerinde herhangi bir oynama yapmadan onlara yansıma efekti ekleyebilmeniz mümkün hale geliyor.

MooTools Etkinlik Takvimi

Resmi olmayan MooTools Etkinlik Takvimi eklentisinin resmi sürümü. Halihazırda kullanılan web projelerine entegre edilebilen bu takvim, mooTools JavaScript çatısını kullanıyor. Şimdilik halen geliştirilme aşamasında olan bu betiğin şu anki hali bile pek çok kullanıcının işini görecektir.

AJAX Kullanıcı Adı Kontrol Mekanizması

Sitenize kayıt olmak üzere olan bir kullanıcının seçtiği kullanıcı adının sitede daha önce bir başkası tarafından alınmış olup olmadığını kontrol etmek için neden kullanıcıyı formu göndermek zorunda bırakasınız? AJAX ve MooTools 1.2 kullanılarak kullanıcı adı girildiği anda kontrol işleminin nasıl yapılabileceğini öğrenin.

Cam efektine sahip işlevsel navigasyon çubuğu

Ana menü üzerindeki bir sekmeye fare imlecinizi götürürken seçili olan sekmeye ait alt menü öğeleri görüntüleniyor. O sırada navigasyon çubuğunun sağ kısmında alt menüleri gizleyebileceğiniz 'Gizle' bağlantısı yer alıyor. Bağlantıya tıklandığında alt menü öğeleri güzel bir efektle gizleniyor ya da yeniden tıklandığında görüntüleniyor.

HTML Form İpuçları

Twitter benzeri bir karakter sayacı olan bu eklenti MooTools ile hazırlanmış. Giriş kutusuna karakter girdikçe, daha önceden tanımlayacağınız en yüksek karakter sayısı girilen karakter miktarına göre gittikçe azalıyor.

mooFlickr

Eğer Flickr istatistiklerinizi blogunuzda ya da web sayfanızda göstermek istiyorsanız bu küçük eklentiye ihtiyacınız olacaktır. Eklenti Flickr üzerinde gönderdiğiniz resimleri, sık kullandığınız etiketleri ve katıldığınız kullanıcı gruplarının bir listesini alabiliyor.

Göster / Gizle efektine sahip CSS dikey menü

Göster / Gizle efekti kullanılarak hazırlanmış ve göster/gizle efekti bulunan bir CSS dikey menüsü. Menünün ana öğeleri üzerine tıklandığında alt menü öğeleri bir efektle beliriyor.

mooSlide

mooSlide ile web siteniz üzerinde birkaç kaydırıcı elementini birden çağırabilirsiniz. Tek yapmanız gereken kaydırıcıyı bir sınıfa dahil etmek ve ardından betiğe o sınıfı tanıtmak.

MooFlow

Özünde bir resim galerisi olan bu eklenti, görünümü ile kendini benzerlerinden ayırıyor. iTunes'un CoverFlow özelliğinin web sitenizdeki resimlere entegre edebilmeniz için mükemmel bir eklenti.

AJAX MooTools Güvenli İletişim Formu
MooTools 1.1 çatısını kullanan bu iletişim formu form alanlarını kontrol ederek kullanıcıya eş zamanlı olarak girilen verinin doğru olup olmadığını bildiriyor. Örneğin İsim alanı sadece normal karakterleri, elektronik posta alanı girilen adresin bir elektronik posta adresinin karakterlerini içerip içermediğini ve mesaj alanı üzerinde de web sitesi adresinin girilmesini engelleyerek spam mesajların önüne geçilmesini sağlıyor.

Facebook Kaydırıcıları

Yumuşak bir kaydırma efekti.

Fotoğraf Galerisi

Büyüleyici bir interaktif fotoğraf galerisi (Demo burada)

Noob Slide

Güzel görünümlü bir başka resim galerisi.

Simple 3D Carousel

Gelişmiş bir 3B karusel.

Kaydırıcı

Yatay ve dikey çubuk ve kaydırıcısı.

Arkaplanı tıklayarak değiştirmek

Dinamik renk seçicisi - renk değiştiricisi. Renkler üzerine tıklandığında arkaplan değişiyor.

Pamoorama

Sayfa ilk yüklendiğinde resmin bir bölümünü gösteriyor. Ardından üzerine fare imleci götürülüp sürüklenerek imajın geri kalan kısımları görüntülenebiliyor. MooTools kullanarak panaromik efekt oluşturmak isteyenlere.

MooTools ile ipuçları

Güzel görünümlü bir ipucu tanıtımı.

JavaScript Resim Galerisi

Basit ama kullanışlı bir resim galerisi.

Basit bir Navigasyon Çubuğu

Basit ve kullanımı kolay bir navigasyon çubuğu.

Slidinglist

Ağaç dosya sistemi benzeri kayan bir navigasyon sistemi.

Multibox

Resim, Flash, Video, MP3 ve HTML destekleyen bir lightbox örneği.

Resim Menüsü

Üzerine fare imleci getirildiğinde imajın geri kalanını gösteren yatay bir menü.

Window Growl

Farklı bir ipucu eklentisi.

ReMooz

SqueezeBox'tan daha sade ve kolay olan bir eklenti. Resmin üzerine tıkladığınızda resmin orijinal boyutunu görebiliyorsunuz.

Accordions

Güzel görünümlü ve yumuşak geçiş efektleri olan bir navigasyon eklentisi.

Slideshow

En fazla özelliğe sahip olan en iyi resim galerisi / slayt gösterisi uygulamalarından birisi. Çok iyi bir eklenti.

mooSlide (lightbox'un yerine)

mooSlideBox, AJAX tabanlı küçük ve sade bir uzantı. Özellikle lightbox kullanmak istemeyenlerin ihtiyaçlarını karşılayacak türden.

Sayfa Yükleyicisi

Bir başka sayfadaki div'i geçerli sayfadaki div içerisine yükleyebilirsiniz.

textarea'yı genişlet

Sadece bir form oluşturmanız yeterli. Betik, textarea form alanının boyutunun kullanıcı tarafından değiştirilebilmesini mümkün kılıyor.

JavaScript Zaman Seçicisi

Çok kolay sürükle-bırak arayüzünü kullanan ilk zaman seçicisi.

JavaScript İle Hazırlanmış Seksi Yan Çubuk Kayan Menü Sistemi

Yumuşak ve evet, SEKSİ yan çubuk menüsü.

Slayt Gösterisi

Resimler arasında yumuşak geçiş efekti.

AJAX İle Hazırlanmış Giriş Formu

Kullanımı kolay bir giriş formu.

FancyUpload

Güzel görünümlü dosya gönderimleri için SWF AJAX ile birleşti.

Doğrulama

Sade bir form doğrulama mekanizması.

Dizilebilir Tablo

Tabloları dizin ve filtreleyin.

MooTabs - MooTools İçin Basit Sekme Sınıfı

MooTabs gerçekten çok küçük (3KB) ve adından da anlaşılabileceği gibi basit sekmeli navigasyon sistemi hazırlamak isteyenler için düşünülmüş. jQuery, MooTools gibi üçüncü parti JavaScript kütüphanelerini kullanmadan sekmeli içerik oluşturmak isteyenler için bir de bu var.

Sıralanabilir Liste Örneği

Sürükle-bırak desteğine sahip sıralanabilir liste. İşe yarar olabilir.

Takvim

Calendar (Takvim) bir JavaScript sınıfı olup form elementlerine erişilebilir ve kullanımı kolay tarih seçicileri ekler.

MooTools İle Yuvarlatılmış Köşeler

Sitenizde halihazırda bulunan divler üzerine yuvarlatılmış köşeler ekler.

Mediabox

Mediabox, "lightbox" tarzında bir pencere üzerinde flash, video ve html içeriğini görüntüleyebilmenizi sağlar.

Form Kontrolü
Formlar üzerinde farklı testler uygular ve hataları vurgular.

mooRainbow

mooTools çatısı altında inşa edilmiş bir renk seçicisi (color picker).

Lightbox

Geçerli sayfanın üzerinde beliren satıriçi resim penceresi.

SmoothGallery

Bu JavaScript galerisi ve slayt gösterisi sistemi sitenize sade ve yumuşak geçiş efektleri bulunan resim galerileri, slayt gösterileri, vitrinler gibi kullanışlı öğeler ekleyebilmenizi sağlar.

Popmenu

Arkaplan imajı yavaşça belirerek karaktersiz menülerinize canlılık katar.

MooWheel

Bu betiğin amacı JavaScript ve tuval nesnesi kullanılarak verinin görselleştirilebilmesine dair özgün ve kullanışlı bir örnek oluşturmak. Bu tip görselleştirmeler özellikle farklı nesneler arasındaki bağlantıları göstermek için kullanılabilir.

moo.rd

Bu bir dizi örnek uygulama moo.rd'nin nasıl çalıştığını ve sizin moo.rd ile nasıl çalışabileceğinizi gösteriyor. MooTools'un gücüne güç katmak için eşsiz bir uzantı.

Mootools Mocha UI

Mocha bir web uygulama arabirim kütüphanesi olup doğrudan MooToools JavaScript kütüphanesi üzerine inşa edilmiştir. Mocha grafiksel kullanıcı arabirim bileşenleri tuval etiket grafikleri ile oluşturulmuş çok gelişmiş bir kütüphane.

Kaynak: speckyboy

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

öğrenilmesi gereken 15 css hilesi

prozzula — Tue, 27 Jan 2009 09:25:00 GMT

Web tasarımcıları ve geliştiricileri olarak zamanla, anahat hedeflerimize ulaşmamıza yardımcı olması için pek çok CSS hilesini ve ipucunu öğreniriz. Bu tekniklerin bir listesini yapmaya kalksanız, projenizin yoğunluğuna göre yüzlerce hileyi bir arada toplamanız gerekebilir. Ancak bu yazıda bulacağınız 15 önemli css hilesi, web geliştiricilerinin karşılaştığı sorunların pek çoğunu giderebilecek kalitededir.

1. Bağıl (relative) pozisyonlanan element içerisinde mutlak (absolute) pozisyonlama
Mutlak pozisyonlanan bir elementi bağıl pozisyonlanan bir element içerisine yerleştirdiğinizde, onun pozisyonu kendisine en yakın olan üst elementin pozisyona göre belirlenecektir. Bu, özellikle bir elementi sayfanızda belirleyeceğiniz bir noktaya sabitlemek istediğinizde oldukça kullanışlı bir hiledir, örneğin başlık (header) damgaları (badge) gibi.

Pozisyonlama hakkında daha fazla bilgi alabileceğiniz siteler:

2. Z-index ve pozisyonlama
z-index kimi zaman geliştiriciler arasında çözümü zor olan bir bulmacaya dönüşebilir. Genellikle bir div elementini diğer bir elementin üzerine yerleştirmek için çok yüksek z-index değerleri atayan tasarımcılarla karşılaşırsınız. Burada unutmamamız gereken, z-index elementinin "position" değeri atanmamış bir element üzerinde çalışmayacak oluşudur. Eğer siz de uyguladığınız z-index kuralının işlevsel olmadığını düşünüyorsanız, kuralı uyguladığınız elemente 'position: relative' ya da 'position: absolute' değerlerini ekleyin.

Z-index hakkında daha fazla bilgi alabileceğiniz siteler:

3. Margin Auto
Bir şablon üzerinde 'margin: auto' değerini kullanmak, o elementin tarayıcı üzerindeki pozisyonunu, tarayıcının kullanıldığı sistemin ekran çözünürlüğüne bakılmaksızın ortalamak için mükemmel bir yöntemdir. Ancak 'margin: auto' değeri uygulandığı elementin 'width' değeri belirlenmediği sürece çalışmaz. Bu ayrıca satıriçi (inline) elementlerde 'margin: auto' değerinin 'display: block' kullanılmadan işlevsel olmayacağı anlamına da gelir.

Margin Auto hakkında daha fazla bilgi alabileceğiniz siteler:

4. Padding Elementini Dikkatlice Ve Doğru Bir Şekilde Kullanın
CSS ile çalışmaya başladığımda genellikle yaptığım hatalardan birisi de onun tüm efektlerini ve CSS Kutu Modeli'ni gözardı etmektir. Kutu modeline göre 'padding' değerinin uygulandığı elementinin genel genişliğini etkilediğini aklınızdan çıkarmayın. Bunu gözardı ettiğinizde elementlerin olması gerektiği yerde olmadığını göreceksinizdir. Örneğin:

#div {
width:200px;
padding: 30px;
border:2px solid #000;
}

Bunun toplam genişliği 264px olacaktır (200 + 30 + 2 + 2). Bunun yanısıra 'padding' özelliğinin 'margin'in aksine negatif değerler içeremeyeceğini unutmayın.

Padding hakkında daha fazla bilgi alabileceğiniz siteler:

W3 Padding Properties

text-indent kullanarak bir metni gizlemek
Sitenizde logo olarak bir resim kullandığınızı varsayalım. Bu resmin H1 etiketi içerisinde olması SEO açısından önemlidir, ancak H1 tagı içerisinde, arama motorlarının okuyabilmesi için bir metin olmasını da isteriz. Bazıları 'display: none' kullanmak isteyebilir ancak bu yöntemi kullanırsak logo resmini h1 etiketinden ayırmamız gerekecektir. 'text-indent' ve negatif değerler kullanarak ziyaretçiler için bir resim, arama motorları için de okunabilecek bir metin kullanmak mümkündür.

h1 {
text-indent:-9999px;/*Metni gizle, SEO için tut*/
margin:0 auto;
width:948px;
background:transparent url("images/header.jpg") no-repeat scroll;
}

Bu kod sayesinde kullanılan metnin herhangi bir çözünürlükte görünmeyeceğinden ancak onun yerine bir resmin görüntüleneceğinden emin olabiliriz. Bu yöntem ayrıca ekran okuyucularının ilgili metni görebilmesini sağlayacaktır, ancak "display: none" için bu geçerli değildir.

text-indent kullanarak metin gizleme yöntemleri hakkında daha fazla bilgi alabileceğiniz siteler

SitePoint - Using text-indent

6. IE Double Float Margin Hatası
Eminim bununla pek çoğumuz boğuşmuşuzdur, zira en sık kullanılan CSS "hilelerinden" birisi de budur. Eğer bu hata ile daha önce karşılaşmadıysanız hemen özetleyelim: IE6'da üzerine 'margin' uygulanmış yüzen (float) bir element kullanıyorsanız, bunun ilgili tarayıcı üzerinde doğru pozisyonlanmadığını göreceksiniz. Ne şans ki IE6'nın bu hatasını gidermek çok basit. Tek yapmanız gereken 'display' özelliğinin diğerini aşağıda gösterildiği şekilde 'inline' olarak belirlemek.

.yourClass {
float: left;
width: 350px;
margin: 20px 0 15px 100px;
display: inline;
}

Bu değişikliğin diğer tarayıcılara hiçbir etkisi olmayacaktır, zira elementin kendisi zaten yüzen bir element olduğundan satır içi görüntülenir, ancak her nedense bu teknikle IE6'daki bu sorun giderilmektedir.

IE'nin marj hatası hakkında daha fazla bilgi alabileceğiniz siteler:

Double Margin Causes and Fixes

7. CSS Kullanarak SPAM'a Karşı Savaşın
Şablon açıklamınızı iyileştirecek güzel bir teknik. CSS-Globe.com sitesinden Alen Grakalic CSS kullanarak nasıl CAPTCHA benzeri bir korumayı sitenize entegre edebileceğinizi anlatmış. İlgili tekniğin uygulandığı bir form şu şekilde olsun:

<label for=”Name”>Ad:</label>
<input type=”text” name=”name” />
<label class=”captcha” for=”captcha”>Cevabınız?</label>
<input type=”text” name=”captcha” id=”captcha” />

'captcha' ID'si için CSS ile bir arkaplan resmi kullanıyoruz. Bu tekniği çözebilmek için spam betiklerinin öncelikle HTML elementini bulması, CSS'nizi taraması, seçicileri karşılaştırması ve ardından doğru seçici ile ona bağlı olan arkaplan imajını bulmasının ardından ilgili imajı okuması gerekir. Bu yöntem oldukça güvenlidir zira pek çok spam betiği bunu başarabilecek kapasitede değildir. Bu yöntemin bir kötü özelliği CSS'nin etkinleştirilmediği tarayıcılarda kullanıcı ne yapacağını bilemez.

Spam'a karşı CSS İle Savaş Açmak hakkında daha fazla bilgi alabileceğiniz siteler:

Fighting spam with CSS

8. IE6 Üzerindeki Saydam PNG Sorununu Gidermek
Hepimizin IE6 üzerindeki saydam PNG sorununun can sıkıcı olduğu konusunda hemfikir olduğuna eminim. Buna yönelik Internet üzerinde pek çok çözüm bulunmaktadır ve bunlar karmaşık JavaScript kodlarından Microsoft'un kendi filtrelerini kullanmaya kadar değişiklik göstermektedir. Unutmayın ki bu tekniklerin pek çoğu Microsoft'un AlphaImageLoader özelliğine dayanmaktadır.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);

IE6'nın PNG saydamlık sorunu hakkında daha fazla bilgi alabileceğiniz siteler:

9. CSS Çoklu Tarayıcı Saydamlığı
İster inanın ister inanmayın tüm tarayıcılar üzerinde CSS'nin saydamlık elementini doğru bir şekilde kullanmak mümkün. Bu teknikle IE, Firefox, Safari, Opera ve Netscape Navigator gibi eski tarayıcıları bile kapsayabiliriz. Chris Coyler'in bu konuda yazılmış mükemmel bir makalesi bulunuyor.

.yourClass {
filter:alpha(opacity=50);/*IE İçin Gerekli*/
-moz-opacity:0.5;/*NN gibi eski Mozilla tarayıcıları*/
-khtml-opacity: 0.5;/*Safari'nin Eski Sürümleri ve "KHTML" tarama motorları*/
opacity: 0.5;/*FF, Safari ve Opera*/
}

Bu kod doğrulanmayacaktır ancak bu özelliği kullanmak isteyen kullanıcılar için bu pek bir sorun teşkil etmez.

CSS Opacity hakkında daha fazla bilgi alabileceğiniz siteler.

10. CSS Konumlandırlabilir Görseller (CSS Image Sprites) Kullanın
CSS Konumlandırılabilir Görseller birden fazla CSS görselinizi tek bir seferde yükleyebilmeniz için mükemmel bir yöntemdir. Bu yöntemle hem sunucuya bindirilen yük azalır hem de şablonunuzun dosya boyutunda önemli bir düşüş gözlenir.

CSS Konumlandırılabilir Görseller birden fazla görsel elementin tek bir görsel üzerinde depolanması ile oluşturulur. Ardından CSS kullanılarak arkaplan pozisyonu, genişliği ve yüksekliği gibi CSS değerleri ile görüntülemek istediğimiz görseli seçeriz.

Konumlandırılabilir Görseller hakkında daha fazla bilgi alabileceğiniz siteler:

11. IE6'yı desteklemek için Koşullu Yorumlar (Conditional Comments) Kullanın
Web geliştiricileri IE'nin bazı özel sürümlerini desteklemek için yeni CSS kuralları ve komutları oluştururlar. Eğer koşullu yorumlar hakkında bilginiz yoksa, aşağıdaki kod içerisinde yer alan stil şablonu, sadece IE 7 ve altındaki tarayıcılarda çalışacaktır.

<!--[if lte IE 7]>
<link rel="stylesheet" media="screen" href="styleIE.css" />
<![endif]-->

Bu kod HTML dosyanızın HEAD kısmına yerleştirilir. Eğer CSS IE'de çalışmıyor görünüyorsa, CSS seçimlerinizde daha doğrudan hedefleyen CSS komutlarını kullanmayı deneyin.

12. CSS Özgüllüğü
Yukarıda da belirtildiği üzere CSS stilleri belirli özgül sırasını takip eder ve hangi değerin hangisinin üzerine yazacağını belirlemek ,için puanlama kullanır. Nettuts'ta yayımlanan bu makalede CSS için puanlama değerleri açıklanmış. Değerler aşağıdaki gibidir.

Elementler: 1 puan
Sınıflar: 10 puan
Belirleyiciler: 100 puan
Satıriçi Stilleme: 1000 puan
Şüpheye düştüğünüzde stil tanımlamalarınızda daha keskin olmaya çalışın. Ayrıca gerektiğinde hata düzeltme işlemleri için !important değerini de kullanabilirsiniz.

CSS Özgüllüğü hakkında daha fazla bilgi alabileceğiniz siteler:

13. Tüm tarayıcılarda minimum yükseklik değerini kullanabilmek
Bir arabirim üzerinde çalışırken genellikle bir element için en düşük yükseklik değerini belirleme ihtiyacı hissederiz ve ardından ilgili yüksekliği, dahilindeki içerik sığmadığında otomatik olarak arttırabilmek isteriz. Ne yazık ki her zaman olduğu gibi IE min-height değerini doğru bir şekilde yorumlamamaktadır. Ancak min-height hızlı hilesi adı verilen bir çözümümüz var. Kod şu şekilde:

#yourId {
min-height:300px;
height:auto !important;
height:300px;/*Needs to match the min height pixels above*/
}

Sade, işlevsel ve doğrulanabilir bir kod. Bu örnek ayrıca '!important' özelliğinin kullanışlı olduğu sayılı örneklerden birini teşkil ediyor.

min-height hilesi hakkında daha fazla bilgi alabileceğiniz siteler:

Using the min height fast hack

14. * HTML hilesi
Eğer IE'ye özgü stil şablonlarına bağlantı vermek istemiyorsanız, o zaman * html hilesini kullanabilirsiniz. Kusursuz bir dünyada HTML elementi daime ana elementtir, bu sebeple HTML'den önce herhangi bir element bulunamaz. Buna rağmen IE, bunun mümkün olduğunu iddia eder. Bu sebeple eğer IE üzerinde bir elementi hedeflemek istersek onu bu şekilde gerçekleştiririz:

* html body div#sideBar {
display:inline;
}

html hilesi hakkında daha fazla bilgi alabileceğiniz siteler:

15. Kayan Kapılar Tekniği
Navigasyon düğmeleri için görsel kullanmanın oluşturduğu önemli problemlerden birisi de istemcinin metninin olması gerektiğinden uzun olma ihtimali ve bunun da düğmenin sınırlarını aşması ya da sınırları dahiline sığmamasıdır. İki görsel ve CSS kayan kapılar tekniği kullanarak içerisindeki metnin uzunluğuna göre genişleyip kısalabilecek düğmeler oluşturabiliriz. Bu tekniğin ardında yatan fikir, her düğme için iki adet görsel kullanmak ve ardından bu görselleri CSS'nin arkaplan tanımlamma özelliği ile düğmelere entegre etmektir. Örneğin:

HTML Dizisi
Başlık Metni

CSS
a.myButton { background: transparent url('right.png') no-repeat scroll top right; display: block; float: left; height: 32px; /* Görsel Yüksekliği */ margin-right: 6px; padding-right: 20px;/*Görsel Genişliği*/ /*Other Styles*/ } a.myButton span { background: transparent url('button_left.png') no-repeat; display: block; line-height: 22px; /* Görsel Yükseliği */ padding: /*İstediğiniz değer ile değiştirin*/ }

Kayan kapılar tekniği hakkında daha fazla bilgi alabileceğiniz siteler:

Ve işte size şablon hazırlarken yardımcı olabilecek 15 CSS tekniğinin de sonuna geldik. CSS tasarımcılar için mükemmel bir araçtır zira kodumuzla daha yaratıcı olabilmemizi ve kendi tekniklerimizi oluşturabilmemize olanak sağlar. Sizin de sık kullandığınız CSS teknikleri var mı? Listeye eklemek istediğiniz teknikler neler olabilir? Yorumlarınızla paylaşın.

Kaynak: ThemeForest

CSS Hileleri ve İpuçları İle İlgili Yazdığım Diğer Yazılar

Bu yazı prozzula 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 e-kitap indirebileceğiniz en iyi 20 site

prozzula — Tue, 27 Jan 2009 16:24:00 GMT

günümüzde giderek daha da yaygınlaşan e-kitaplar (e-book), orjinal bir kitabın ele alınıp okunması kadar keyif vermese de, bazı zamanlarda orjinalinden daha kullanışlı olabiliyor.

kullanışlılığını arttıran önemli bir etmen de bu online kitaplara ücretsiz olarak ulaşabilmemiz olacaktır.
işte bu bildiride, rahatlıkla ulaşabileceğiniz ve ücretsiz olarak indirebileceğiniz e-kitapları barındıran en iyi 20 e-book sitesine yer vereceğiz.

1- free-ebooks

siteden, ücretsiz e-kitapların yanında e-dergiler de indirebiliyor, dilerseniz sizde bulunanları paylaşabiliyorsunuz. ayrıca site ücretsiz üyelikle kendi kütüphanenizi oluşturmanızı da sağlıyor.

2- Scribd

Scribd; Word, Excel, PowerPoint, PDF ve diğer popüler formatların desteklediği online dökümanların paylaşıldığı bir site. bu dökümanları ücretsiz olarak indirebilir dilerseniz de sitenizde yayınlayabilirsiniz.

3- 4eBooks

bilgisayar programcılığı üzerine yazılmış online kitaplardan oluşan geniş bir kaynak.

4- ManyBooks

bu siteden PDA, iPod ya da eBook okuyucunuz için ücretsiz ekitaplar indirebilirsiniz. sitede 22 bin kadar online kitap bulunmakta ve hepsi de ücretsiz.

5- FreeBookSpot

üyelik istemeyen site, 96 kategoriden oluşan yaklaşık 5 bin e-kitaplık arşivinde, arama yapmanıza da olanak sağlıyor.

6- AskSam Ebooks

Shakespeare, Lewis Carroll, Charles Dickens, Edgar Allen Poe ve Jane Austen gibi yazarların ücretsiz e kitaplarına yer veren sitede ayrıca politika, yasalar ve hükümet raporları ile ilgili kitaplar da bulunmakta.

7- FreeTechBooks

bilgisayar bilimi, mühendislik ve programcılık kitapları, test kitapları ve konferans notlarını ücretsiz ve legal olarak indirebileceğiniz bir site.

8- GetFreeEBooks

yasal olarak ücretsiz e-book indirebileceğiniz geniş bir kaynak.

9- FreeComputerBooks
bilgisayar, programcılık, matematik ve mesleki e-kitapların yanında konferans notlarının ve çeşitli derslerin de bulunduğu oldukça geniş ve güzel bir kaynak.

10- KnowFree

kullanıcıların ücretsiz olarak e-kitapları değiştirebildikleri, eğitici video ve diğer materyallerin de bulunduğu

11- OnlineFreeEBooks

çoğunlukla pdf formatlı ekitapların bulunduğu geniş bir site. sitede şu 9 categori bulunmakta: Automotive Ebooks, Business Ebooks, Engineering Ebooks, Gadget Ebooks, Hardware Ebooks, Health & Medical Ebooks, Hobbies Ebooks, Programming & Technology Ebooks, Sport & Martial Art Ebooks.

12- MemoWare

binlerce dökümanın bulunduğu eşşiz bir kaynak. ayrıca sitede, PalmOS device, Pocket PC, Windows CE, EPOC ve Symbian'a kolaylıkla ekleyebileceğiniz özel formatlar da bulunmakta.

13- BluePortal

14- OnlineComputerBooks

bilgi teknolojisi, bilgisayar bilimi, Internet, iş, pazarlama, matematik ve fizik ile ilgili sayısız online kitap.

15- SnipFiles

16- The Online Books Page

30 binin üzerinde, ücretsiz elektronik kitabların listelendiği bir site.

17- Globusz

kolay ve kullanışlı bir e-book kaynağı.

18- Baen Free Library

downloadable science fiction novels

ücretsiz indirilebilir bilimkurgu romanlarına yer veren muhteşem bir online kütüphane.

19- eBookLobby

iş, sanat, hesaplama ve eğitim kategorilerinde ebookların bulunduğu bir kaynak.

20- BookYards

The Library To The World

ücresiz e kitapların ve eğitim materyallerinin bulunduğu bir site.

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

SEO Uzmanları İçin Popüler Firefox Eklentileri

prozzula — Wed, 21 Jan 2009 17:16:00 GMT

Firefox, eğer ihtiyacınız olan çalışma ortamı için gerekli eklentileri kurduğunuzda gerçekten çok güçlü bir araca dönüşmektedir.

Numaralarla, istatistiklerle, sayfa puanlarıyle ve, elbette, SEO ile oldukça haşır neşir olduğumu kendimden biliyorum.

Günümüzde bilinen 4 önemli puanlama aracı vardır - Google Pagerank, Compete Site Analizi, Alexa Puanı ve Quancast.

Bu yazımda sizinle, web üzerinde gezinirken çalışma verimliliğinizi arttıracak en önemli FireFox araçlarını paylaşmak istiyorum.

1. Compete Tarayıcı Uzantısı
Benim kişisel tercihim olan bu uzantı web sitelerinin ne kadar hızlı büyüdüğü, sitenin ne kadar popüler olduğu (insan bazında) ve sitenin Compete puanını gösteriyor. Uzantı, özellikle istatistiklerin kontrolü için çok kullanışlı.

2. Search Status

Ziyaret ettiğiniz her bir sitede SearchStatus eklentisi, Google Pagerank, Alexa popülerlik puanı, Compete puanı, Alexa'nın alakalı bağlantıları, Google, MSN ve Yahoo!'dan alınan geribağlantılar gibi bilgileri alabilirsiniz.

Bir eklenti üzerinde pek çok özellik bir araya toplanmış ve ortaya güzel bir araç çıkmış. Siz ne dersiniz?

3. Firefox İçin SEO

SEO ile ilgilenen herkesin kullanması gereken muhteşem bir eklenti. Eğer Google, Yahoo!, Alexa, Technorati ve daha pek çok kaynaktan alınan istatistiki verilerle ilgileniyorsanız, bu eklentiye bayılacaksınız.

4. Wizz RSS Haber Okuyucusu

Wizz RSS Haber Okuyucusu oldukça güçlü ve kolay kullanımlı bir RSS ve Atom okuyucusu / alıcısı olup Mozilla Firefox üzerinde çalışmaktadır.

5. Kgen

Bu eklenti bir web sitesi üzerinde kullanılan anahtar kelimelerin ne sıklıkta kullanıldığını ve sayfanın geneline oranla ne kadar güçlü olduğunu belirtiyor. SEO için bir sayfada hedeflediğiniz anahtar kelimelerin tekrar edilme oranı ve bunun etkin bir biçimde sayfa geneline yayılması çok önemlidir. Bu eklenti sayesinde sitenizin sayfalarında o sayfa için hedeflediğiniz anahtar kelimelerin etkin bir şekilde kullanılıp kullanılmadığını anlayabilirsiniz.

6. SEOMoz Rank Checker | Tarayıcı Düğmesi

Mükemmel bir araç - web sitenizin farklı kaynaklardan aldığı puanları depolamanıza yardımcı oluyor. Bu puanları doğrudan tarayıcı üzerinden görüntüleyebiliyorsunuz. İlgili servis Google, Yahoo!, MSN ve Ask arama motorlarını destekliyor.

Bu eklentiyi kullanabilmeniz için site üzerinden kayıt olmanız gerekmektedir.

7. SeoQuake

Seoquake, web sitenizin SEO sonuçlarını analiz edebileceğiniz en güçlü araçlardan birisidir. Eklenti üzerinden PageRank puanınızı ve Yahoo! ile Alexa'nın sunduğu benzer puanları alabiliyorsunuz.

Mozilla ana sayfasında eklentinin yetenekleri hakkında detaylı bilgi bulunuyor.

8. Google Araççubuğu

Eğer bazı Google araçlarını kullanıyorsanız kesinlikle sahibi olmanız gereken bir tarayıcı uzantısı.

Firefox halihazırda Google Aramasını bütünleşik olarak içeriyor, o zaman neden bu araççubuğunu kurmanız gerekli?

Çünkü bu eklenti tüm Google araçlarına tek bir fare tıklaması ile ulaşabilmenizi sağlıyor. Araççubuğu ayrıca geribağlantılarınızı, Pagerank değerini de kontrol etmenizi sağlıyor.

9. Time Tracker

Internet üzerinde çok uzun zaman harcayıp bir türlü işlerini tamamlayamayanlardan mısınız?

Bu eklentiyi kullanarak zamanınızı organize edebilir, Firefox üzerinde ne kadar zaman harcadığınızı kontrol ederek, Internet bağımlılığınızı analiz edebilirsiniz.

10. Read It Later

Bu eklenti de benim en sevdiğim eklentiler arasında yer alıyor. Read It Later'ı kullanarak ilgilendiğiniz sayfaları tarayıcınıza kaydedip daha sonra onları dilediğiniz zaman okuyabilmenizi sağlıyor... Özellikle yer imlerine eklemek istemediğiniz ancak siteyi gördüğünüz an okumaya vaktinizin olmadığı anlarda bu eklenti oldukça kullanışlı hale geliyor.

Kaynak: 1st Web Designer

SEO ile ilgili yazdığım diğer yazılar

SEO Araçları Listesi

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

jQuery UI'yi Kullanarak Metin Boyutunu Kontrol Etmek

prozzula — Thu, 22 Jan 2009 12:22:00 GMT

jQuery UI'si (Kullanıcı Arabirimi) bir web sayfasına çok şey katabilir. Bu kullanıcı arabiriminin sunduğu pek çok widget bulunmaktadır. Bu makalede bahsedeceğim element, gittikçe popülerleşen "kaydırıcı" (slider). Bu dersimizde metin boyutunu kontrol etmek için slider kullanmak üzerine duracak ve bunun nasıl web sayfalarına entegre edilebileceğini örneklendirmeye çalışacağız. Bu özellik sayesinde ziyaretçileriniz, web sitenizdeki metin boyutunu kendi zevklerine göre değiştirebilecekler. Ayrıca bu özellik bir web sayfası üzerinde de oldukça çekici duruyor.

Davranış

Kaydırıcı sürüklendirildiğinde bir baloncuk belirecek ve geçerli metin boyutunu gösterecektir. "Geçerli metin boyutu" metni de numaranın hemen başında yer alacaktır. Ayrıca kaydırıcının sağında ve solunda bulunan artı ve eksi düğmelerine tıklanarak metin boyutu birer piksel arttırılabilecek ya da azaltılabilecektir.

Buradan İndirin
Örneği İnceleyin

Kaynak: devSnippets

jQuery İle İlgili Yazdığım Diğer Yazılar

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