(X)HTML sayfalarında bir çok tag iç içe geçmiş durumda olabilir. Bir katmanda içeriği oluşturan paragraflar, paragrafların içinde bağlantılar vs. olabilir. Bütün bu durumlarda hiyerarşik seçicileri kullanarak sayfamız içinde belli bir bölümde yer alan (tags) etiketleri seçebiliriz. Bu video da 4 hiyerarşik seçiciyi anlatmaya çalıştım.

Bu bölümde neler var?

1. Çocuk Seçiciler
2. Gelişmiş Çocuk Seçiciler (ebeveyn > cocuk)
3. Gelişmiş Çocuk Seçiciler (önceki + sonraki)
4. Gelişmiş Çocuk Seçiciler (önceki ~ kardeşler)

Çalışmaya Hazır Default klasörü indir

Bu konuda yayınlanmış diğer videolar:

• jQuery Temel Seçiciler (2.Gün)
• jQuery Kurulum (1.Gün)

Yorumların benim için önemli, paylaşırsan sevinirim.

jQuery ile websitenizi şenlendirmek çok zor değil, jQuery’i tam olarak kullanmak için ise seçicileri iyi anlamakta fayda var. Bir (X)HTML içinde etiketler(tags) farklı sevilerde iç içe geçmiş durumda olabilir, her ne şekilde olursa olsun jQuery zengin seçici özellikleriyle bu karmaşık yapı içersinde bir elemanı seçmek için bir çok yöntem sunar. Bir paragraf etiketini seçmekten, belli bir ebeveyne sahip çocuk etiketleri seçmeye kadar birçok özellikli seçici mevcuttur. Seçiciler önemlidir; jQuery bir elemana bir özellik ataması yaparken mutlaka o elemanın seçili olması gerekir

Bu bölümde neler var?

1. XHTML Eleman (Tag) Seçicisi
2. Sınıf (Class) Seçicisi
3. Özellik (ID) Seçicisi
4. Tüm Elemanların (*) Seçicisi
5. Çoklu Sınıf (.class1.class2) Seçicisi
6. Çoklu Eleman (p,a,div) Seçicisi

Çalışmaya Hazır Default klasörü indir

Bu konuda yayınlanmış bir önceki video bağlantısı: jQuery Kurulum (1.Gün)

Yorumların benim için önemli, paylaşırsan sevinirim.

Çalışma Dosyaları:

1. default klasörü indir
2. Tamamlanmış bölüm dosyası indir

Yorumların benim için önemli, paylaşırsan sevinirim.

Web 2.0 teknolojilerinin hayatımıza girdiği günlerden beri web sitelerinin birbiri ile etkileşimleri artmakta, Web 2.0 felsefesi gereği facebook, friendfeed, digg, twitter gibi araçlardan verileri paylaşmak, bir araya getirmek çok revaçta, kendi sitelerine facebook, vimeo, twitter, digg gibi birçok Web 2.0 platformunda yayınladıklarını ekleyen birçok blog yazarı var. Bu anlamda twitter, friendfeed, bizim blogçularımız arasında en çok kullanılanlar sanırım. Ancak bu tür uygulamalar yazmak isteyen kodcular genelde PHP, JavaScript, RegExp, Asp, JSON, Ajax gibi birçok yapı hakkında bilgi sahibi olması gerekliği olduğu düşüncesiyle bu işi hazır kodlara bırakıyor, ben bugün yalnızca JQuery, JavaScript kullanarak Twitter etkinliklerimizi bloğumuza nasıl ekleriz ondan bahsetmek istiyorum. Bu yazı temelde Twitter uygulaması gibi gözükse de JSON verilerini okumayı, biçimlendirmeyi içeriyor. Hadi çok uzattım artık yazayım;

JSON Mantığını Anlamak!

AJAX uygulamalarında JSON JavaScriptler tarafından daha kolay okunabilen veri kaynakları olduğu için sıklıkla XML’ye tercih edilirler. Nispeten daha yalın bir görünüm sunduğu içinde anlaşılması gayet kolaydır. JSON hakkında daha fazla bilgi için http://www.json.org/json-tr.html adresine bakabilirsin.

Twitter bize XML ve JSON formatlarında veri kaynakları sunuyor. Bütün bu Twitter Api kaynaklarına buradan göz atabilirsin. Genellikle XML içerik bilgisi sunulmuş olsa da http://tiny.cc/rhRma bağlantısını kullanarak sonuçları JSON olarak görebilirsin. Şimdilik burada bir ara verelim.

JQuery Kullanarak JSON verilerini Okumak!

JQuery’nin zengin kütüphanesi içinde JSON biçimli verileri okumak için özel ve güzel bir fonksiyonumuz var.  JQuery.getJSON() bu fonksiyonu kullanarak AJAX işlemlerine hiç bulaşmadan JSON verilerini okuyabiliyoruz.

JQuery.getJSON(URL,[data],callback) şeklinde tanımlanan fonksiyonumuz ile URL parametresi olarak verilen sorgu sonucu geri dönen JSON verisini alıyoruz ve sonrasında bize bu verileri işlemek kalıyor.

Kullanımı:

$(document).ready(function(){
	var url = "http://twitter.com/status/user_timeline/bitlimakina.json?count=1&callback=?";
	$.getJSON(url, function(data){
		$.each(data, function(i,results){
			$("#icerik”).html(results.text);
 		});
  	});
});

Şimdi yukarıdaki kullanımdan kısaca bahsedelim;

URL kısmı; Bu sorgu sonucunda twitter.com’dan geriye bitlimakina kullanıcısına ait son durum bilgileri (ben twitter da ne paylaşmışsam o işte) JSON formatında geri gelecek. Gelen veriler function(data) içindeki data’ya aktarılmış olacak sonuçta. Data değişkeni bir array(dizi) dir. Daha sonra bir bu dizinin elemanları içinde $.each fonksiyonunu kullanarak geziniyoruz ve her elemanı da results diye bir değişkene kaydediyoruz ki içindeki verileri işleyebilelim.url değişkeninde verilen stringi http://tiny.cc/rhRma adresinde incelersen ne demek istediğimi daha iyi anlamış olacaksın. ?count=1 kısmı son twitter paylaşımımı ifade ediyor. 2-3-5, kaç tane istiyorsan buraya yazabilirsin.

URL de verdiğimiz sorgu sonucunu şimdi buraya yazalım.

Ben user sekmesine tıklamadım. Orada da bir sürü veri var aslında. Amacımız son twitimi almak bunun içinde $(“#icerik”).html(results.text); satırını kullanıyorum. Bu arada söylemeden geçmeyelim HTML sayfamda bir <div id=”icerik”></div> katmanı oluşturmuştum. Sonuç olarak HTML sayfamda bitlimakina kullanıcısının son twiti gözükmüş oldu.
Tek başına JQuery kullanarak JSON verilerini okumak bu kadar basit. Şimdi işleri biraz zorlaştıralım.
Önce sonuca bakalım.

Sonucu online olarak incelersen göreceksin ki linkler dahil her şey bir text ve linkler çalışmıyor. Şimdi bu sorunu çözmek için ihtiyacımız olan şey “Regular Expression” (düzenli ifadeler). Yazının başında demiştik ki her şey JavaScript ile olacak o zaman JavaScript kullanarak RegExp nasıl yaparız ona bakalım.

JavaScript ve RegExp Kavramlarını Harmanlamak!

RegExp işlemlerini gerçekleştirmek için aslında abarttığım kadar karmaşık bir şey yapmayacağız çünkü JavaScript bize her türlü imkanı vermiş. Biraz abartmazsak tadı çıkmaz dimi. JavaScript de metin içinde regexp kuralımıza uyan kısmı yenisi ile değiştirmek için replace () fonksiyonu kullanılıyor. Bundan da önce nasıl bir şeye ihtiyacımız var ona bakalım. Biz Twitter dan  verileri aldık öyleyse bu veri içindeki url leri düzenleyecek bir fonksiyona ihtiyacım var. Şöyle olsun;

function urldondur(metin){
//düzenli ifade tanımı yapayım,
//metin içinde bulayım,
//yerine <a href=”link”>link</a> yazayım
}

O zaman JQuery için yazalım;

var urldon = function(metin){
var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/g
var result = metin.replace(regexp, function(url){
return '<a href='+url+'>'+url+'</a>';
});
return result;
}

Yukarıda yazdığım var regexp tanımını anlamamış olabilirsin, Bunun için birçok araç var. Unutmadan yukarıdaki regexp ifadesini de ben yazmadım.  Google söyledi…  Kullandığım programı buradan indirebilir veya buradan buradan online kullanabilirsin.
Son Not; Eğer JSON içersinde user sekmesi içinden bir veri almak istersen results.text satırını results.user.neyseo olarak değiştirmen yeterli.
Şimdi Son uygulamanın kodlarını verelim.
Head tagları arasına

body tagları arasına bunu yazalım;

İstersen hiç yazma indir.
Yukarıda verdiğim kodlamanın yorumunu sizlere bırakıyorum. Kıymetli yorumlarını okumaktan keyif alacağım!

Kaynaklar:

RegExp : http://bit.ly/tsPhv
RegExp : http://bit.ly/J7R18
JSON : http://www.json.org/json-tr.html
Twitter Api : http://apiwiki.twitter.com/Twitter-API-Documentation
Free RegExp App: http://www.gskinner.com/RegExr/desktop/

Web tasarımla uğraşanlara arşivimde ve masaüstümde bir yerlere iliştirilmiş tasarım yardımcılarını bir araya topladım. Faydalı olmasınız dilerim.

CSS

1. CSS Cheat Sheet-1 indir.
2. CSS Cheat Sheet-2 indir.

HTML & XHTML

1. HTML Cheat Sheet-1 indir.
2. HTML Cheat Sheet-2 indir.
3. HTML Color Cheat Sheet indir.
4. RGB Hex Cheat Sheet indir.
5. HTML Entities Cheat Sheet indir.
6. XHTML 1.1 Cheat Sheet indir.

JavaScript & JQuery & MooTools & Prototype

1. JavaScript Cheat Sheet indir.
2. JQuery v1.3 Cheat Sheet indir.
3. Mootools Cheat Sheet-1 indir.
4. Mootools Cheat Sheet-2 indir.
5. Prototype Cheat Sheet indir.

PHP & WordPress & MySQL & RegExp

1. Erkin ERTAÇ’ın hazırlamış olduğu WordPress Cheat Sheet indir.
2. WordPress Cheat Sheet indir.
3. PHP Cheat Sheet indir.
4. MySQL Cheat Sheet indir.
5. Regular Expressions Cheat Sheet indir.
6. Apachi Mod Rewrite indir.

Photoshop CS4

1. Keyboard Shortcuts Sheet (MAC) indir.
2. Keyboard Shortcuts Sheet (PC) indir.

Bir süre önce görüntüsünü paylaştığım siyah tema artık paylaşılmaya hazır. Üzerinde bir takım değişiklikler oldu. Umarım beğenirsiniz. Temayı etkili kullanabilmek için birkaç eklentiye ihtiyacınız olacaktır.

Birincisi burada Recent Posts eklentisi.

İkincisi burada Recent Comments eklentisi.

Üçüncüsü ise burada Popular Posts eklentisi.

Eğer tema da karşılaştığınız bir problem olursa yorum bırakarak yardım isteyebilirsiniz.

Temanın büyük ekran görüntüsü da yerleştirelimde bitsin.

Son olarak temayı buradan indirebilirsiniz.(Download)

Baloncu eklentisi 4 renkte 2 yönde kulp içerirken, yaptığım güncelleme ile artık 4 yönde kulpa sahip oldu.

Daha önce yayınladığım. Tooltipi biraz daha geliştirerek ve güzelleştirerek tekrar hazırladım. Bu tooltip de iki farklı yönde ok ve dört farklı renk seçeneği var. Kodlamadan bahsetmiyecem fakat sayfaya nasıl eklenir tekrar hatırlatalım.

Sonucu görmek istiyorsan buraya gel
Sonucu görmek istiyorsan buraya gel
Sonucu görmek istiyorsan buraya gel
Sonucu görmek istiyorsan buraya gel
Sonucu görmek istiyorsan buraya gel
Sonucu görmek istiyorsan buraya gel
Sonucu görmek istiyorsan buraya gel
Sonucu görmek istiyorsan buraya gel

Yukarıda da gördüğünüz gibi baloncu.js ve style.css tanımlarının doğru şekilde yapılması gerekiyor. Sonra balon göstermek istediğiniz linklerde “rel” etiketi içinde 16 farklı tanım yapabilirsiniz ve title etiketinde verdiğiniz bilgiyi görüntüleyebilirsiniz.
B1L — Balon 1 sol işaretçi anlamına gelmektedir.
B harfinden sonraki sayı renk L, R, B, T harfi ise kulp yönünü belirtmektedir.
(Demo) Örnek sayfayı burada görebilirsiniz.
(Project File) Proje Dosyalarını indirmek ve kullanmak için buraya tıklaman yeterli.

Bir de yorum yaparsan bende güzel mi değilmi anlamış olurum. Hadi üşenme!

Bir süredir yazı yazacak pek vakit bulamıyorum ancak bu hafta yine gözüme çarpan siteleri paylaşabilirim heralde. O kadar çok site var ki biraz azaltarak listemizi yazmaya başlasak iyi olacak. Hemen listeye geçelim.

1. Tasarımlarınızda kullanmak için 40 resim deposunu instantshift toparlamış.
2. 45 tane ilham alınası duvar kağıdı burada verilmiş
3. İlham alınası 40 typography tasarımı burada.
4. İlham alınası illustrasyon burada görmelisin.
5. Klavye tıklamalarıyla hareketlenen Jquery animasyonu nasıl yapılır? Bence çok eğlenceli burada
6. Bir Jquery makalesi daha erişilebilir bir slideshow nasıl yapılır? Yine Six Revisions ‘dan.
7. Six Revisions’dan photoshop’da Web 2.0 tasarımı nasıl yapılır incelemek lazım..
8. Photoshop’da Adobe CS4 ikonu nasıl yapılır merak ediyorsan bu makaleyi okumalısın.
9. 25 en iyi eğitim sitesi burada bir araya gelmiş.
10. Font ihtiyacı olanlara burada 20 tane çok güzel sans-serif font var.
11. Kendi kendine grafik tasarımı öğrenmek istermisin gerekli kaynaklar burada toparlanmış.
12. Sitenin kritiğinin yapılmasını istermisin adresini gönder onlar yapsın.
13. İnternet Explorer 6.0′ı desteklemek istemiyorsan kullananları buraya yönlendir.
14. Çalışırken yapmanız gereken şeyler bazen aklınızdan uçup gidiyorbu o zaman buyrun size çok şirin bir to do list programı
15. Son olarak tasarımlarında kullanabileceğin 35 renk paleti burada.

Bu haftalık bu kadar yeter sanırım. Değerli yorumlarınızı merakla bekliyorum.

Henüz beş gün geçmesine rağmen yeni bir bu başlıktaki 2. yazıyı yayınlamanın zamanı geldi. Bu yazıyı bir seri yapmayı düşünmüyordum. Ne yapalım çok güzel işler gördüm bu hafta yine, hadi uzatmadan bir liste yazalım…

1. Typography adına mayıs ayında yazılmış makaleler biraraya toplanmış bakın neler varmış burada…
2. 5 adımda iyi typography nasıl yapılır? Nelere dikkat edilmelidir burada…
3. Düzenli bir CSS yapısına sahip olmak için neler yapılmalı burada özetlenmiş.
4. WebKut güzel bir adobeAir uygulamsı internet sayfasının ister belli bir kısmının, ister tamamının resmini çekin JPG, GIF, PNG ve hatta PDF olarak kaydedin. Bitmedi istersen flickr hesabına göndersin. Çok güzel bir masaüstü uygulaması burada…
5. PSDTut+ dan güzel bir makale bir web tasarım işi baştan sona nasıl yürür, sonuçta ortaya ne çıkar burada…
6. Web Tasarımcılarının ihtiyaç duyacağı 10 iPhone uygulaması burda… Bir tanede ben alabilsem..Ahh ahh.
7. 82 tane yaratıcı 404 Error sayfası tasarımı burada bir araya gelmiş..
8. Birbirinden güzel kartvizit tasarımı burada toplanmış. Birinden kendim için esinlensem ayıp olurmu?
9. Web siteniz için 80+ Texture burada bir araya gelmiş, gün gelir lazım olur…
10. Birde program verelim. Notpad++ için alternatif olabilir.  Desteler (bundles) menüsü altında sizi kod yazmaktan kurtaracak hazır yapılar var.. Ben denedim beğendim..Burada
11. Bir ilham kaynaağı birçok kategoride hemde ben çok beğendim. Burada…
12. Ben bu yazıyı yazdığımda 117.268 tane portfolio vardı sende ekle 117.269 olsun herkes ilham alsın… burada
13. Son olarak 22 yaratıcı Billboard tasarımı burda…
14. 600+ Doğa temalı photoshop fırçası burada….
15. 26 Font burada
16. 240 Retro Brush burada… 350+ tanede burada…

Ben çok sevdim bunları belki sende…

sansuresansur.org sitesinden alıntı

Yay! Hareketi, adı üstünde, yaymaktan geliyor. Sanal ortamda, gerçek hayatta, elimizden geldiğince tepkimizi yaymak anlamını içeriyor.

Bu doğrultuda, elimizde çeşitli malzemelerimiz ve yönetmen arkadaşımız İlkay Kopan’ın çektiği videolarımız var.
11 Mayıs itibariyle, videolarımızı, manifestomuzla beraber bloglarımızda yayınlayarak, ortak bir mesaj vermeyi hedefliyoruz. Aynı gün, aynı mesajla ortaya atılarak kamuoyunun dikkatini çekmeyi amaçlıyoruz.

Öte yandan, videolar ve banner’lar sanalda yayılırken, gerçek hayatta da boş durmuyoruz tabii ki. Tepkimizi internetten çıkarıp, dışarıda da göstermek için poster ve sticker gibi malzemelerimizden faydalanacağız. Amaç belli: Sansür, her yerde karşınıza çıkabilir. Malzemeler de bu doğrultuda hazırlandı, boşlukları malzemeyi kullandığınız yere göre yazabilirsiniz.
Örneğin, posteri bir restorana astınız, boşluğu “Bu restorana erişim engellenmiştir” şeklinde doldurabilirsiniz.

Bu fikirden hareketle aklınıza yeni bir malzeme fikri gelirse, atış serbest. Neler mi olabilir? Tribünlerde “bu tribüne erişim engellenmiştir” pankartı açmak olabilir, yine mecrasına uygun mesajlarla amerikan servis, tişört, bardak altlığı, föy, stensil gibi daha pek çok şey olabilir, bundan sonrası hepimizin hayal gücüne kalıyor aslında.

Sizden tek isteğimiz, bu malzemeleri kullandığınızda ya da gerçek hayatta karşınıza çıktığında, hemen bir fotoğrafını çekip, nerede olduğu bilgisiyle birlikte bize göndermeniz. Hareketin ne kadar yayıldığını görmek ve fotoğraflarla sitemizde sergilemek istiyoruz.

Kısıtlı sayıda malzeme elimizden bulunuyor. Bir süre için bize yazarak malzeme temin edebilirsiniz ya da doğrudan bu sayfadan indirip, kendiniz basabilirsiniz.