jQuery ile oluşturulan hazır tab menü kullandığım sitede, Internet Explorer’un bu scripti daha yavaş yorumlamasından dolayı küçük bir sorun oluştuğunu farkettim, bu sabah. Küçük de olsa kurumsal bir site için hiç de hoş durmayacak bir sorundu. Ben de scripti değiştirip bütün tab menü çalışmasına en baştan başlamak istemememden dolayı, soruna bir çözüm bulmaya karar verdim ve buldum:) Ayrıca bulduğum çözümü sizin de uygulamanız için hiç bir şekilde jQuery bilmenize gerek yok.

Buradan indirdiğim jQuery tab menü eklentisini, yukarıdaki resimde bulunan soldaki menüye benzer bir şekilde kullanmak üzere görsel (CSS) düzenlemesini yaparak siteye ekledim. Herşey başlangıçta sorunsuz görünüyordu. Ancak başka bir sayfadan bu tab menüde bulunan her hangi bir tab’a direkt link verince, Internet Explorer’ın bütün versiyonlarında (IE 8 de dahil) rahatsız eden anlık bir görüntü oluştuğunu farkettim. Neyseki sorunun neden kaynaklandığını kısa sürede farkettim ve hatayı çok zaman kaybetmeden düzeltebildim.

Neyse çok uzattım…Şimdi gelelim, kullandığım jQuery tab menünün Internet Explorer’daki sorununa ve nasıl çözüleceğine.  Ama öncelikle, yaşadığım sorunu sizin de daha iyi anlamanız için kullandığım Jquery eklentisine aşağıdaki resme veya bir üst paragrafta verdiğim linke tıklayarak göz atmanızda fayda var.

Jquery Tab menüdeki Internet Explorer sorunu: hide metodu

Tab menü için yazılan scripte göre, sayfa ilk yüklendiğinde tamamı açık gelen tab içerikleri, hide metodu ile gizleniyor ve daha sonra ilk taba (veya dışarıdan link verdiğim taba) class ataması yapılarak sadece o tabın içeriği görünür hale getiriliyor. Script aynen bu şekilde çalışıyor. Aşağıda da nasıl yazıldığını görebilirsiniz. Internet Explorer’da tab’lardan birine dışardan verdiğim linke tıkladığımda açılan sayfada, 1 saniyenin yarısı kadar kısa bir süreliğine de olsa bütün tablar açık geliyor ve tarayıcı ancak scriptteki hide metodunu okuduğunda gizlenmesi gereken tab’lar gizlendikten sonra sayfa düzgün görünümüne kavuşuyordu. Çok kısa bir süre için de olsa, sayfada rahatsız edici bir hareket gözleniyordu. Bunun sebebi, dediğim gibi Internet Explorer’ın bu scripti diğer tarayıcılara göre daha yavaş yorumlaması.

Tab menü scripti

$(document).ready(function() {
 
	$(".tab_content").hide();
	$("ul.tabs li:first").addClass("active").show();
	$(".tab_content:first").show();
 
	$("ul.tabs li").click(function() {
 
		$("ul.tabs li").removeClass("active");
		$(this).addClass("active");
		$(".tab_content").hide(); 
 
		var activeTab = $(this).find("a").attr("href");
		$(activeTab).fadeIn();
		return false;
	});
 
});

Çözüm

Bu sorunu çözmenin en kolay yolu; sayfa yüklenirken tabların hide metodu ile değil de, CSS yardımıyla gizli gelmesini sağlamak. Eklentiyi bu şekilde düzenlemek için yapmanız gereken şey script’teki ilk satırı yani $(“.tab_content”).hide(); satırını silmek ve CSS dosyasındaki .tab_content class’ına display:none özelliğini eklemek. Böylelikle, bütün tab’lar başlangıçta gizleneceği için, Internet Explorer tab’ları gizlemek için scriptin yüklenmesini beklemeyecektir. Bununla bitmiyor tabii. Aktif olan tabın görünmesini sağlamak için .active class’ına da display:block özelliğini eklemek gerekiyor.

Bu şekilde basit bir düzenleme ile Jquery tab menüyü Internet Explorer’da da sorunsuz çalışır hale getirebilirsiniz. Eğer siz de bu eklentiyi kullandıysanız ve aynı sorunla karşılaştıysanız sorunu bu şekilde çözebilesiniz diye bu yazıyı hazırlamak istedim. Umarım işinize yarar.

Web Tasarım Kaynakları #16

Hazır Html e-mail şablonları (PSD dosyaları ile)

Bugünkü yazıda ise, bu prosedürlerle uğraşmak istemeyenlerin veya zamanı kısıtlı olanların çok işine yarayacak ücretsiz bir kaynağı paylaşıyorum. Aynı tasarıma ait farklı kolon yapılarıyla yeniden hazırlanan şablonları da sayarsak, toplam 30 adet html kodlaması hazır html e-mail şablonunu aşağıda bulabilirsiniz. Şablonlarla birlikte indireceğiniz PSD dosyaları sayesinde tasarımlarında da istediğiniz değişikliği yapma imkanınız var. Şimdi ihtiyacınız olmasa da mutlaka arşivinize katmanız gereken bir kaynak. Siz bulmasanız da, bir gün mutlaka html e-mail tasarlatmak isteyen bir müşteri sizi bulacaktır. Tercübeyle sabittir:)

Yazı Tipi: Ripe

Yazı Tipi: Kilogram

Yazı Tipi: Franchise Bold

Yazı Tipi: HVD Poster

10+ Piktogram Sembol Yazı Tipleri

Sosyal Medya İkon seti: Buddycons

Sosyal Medya İkon Seti: Social Light

Sembol İkon Seti: National Park Service

Web Tasarım İkon Seti: Sketchup

İkon Seti: Lovely Website Icon Pack

25 Photoshop Fırçası: Abstract Smoke Brushes

Photoshop Fırça Setleri: Splatter Brushes

Seamless Pattern Seti: Tiles Pattern (.ai, .jpg)

Seamless Pattern Seti: Imperial Leaf Patterns (.ai, .png)

Web Arabirim Seti: Web Designer Toolkit (.PSD)

Web Arabirim Seti: Flex Darkskin (.PSD)

Ülke Bayrakları PSD Dosyası: Flag Creator

Photoshop Gradient Seti: Clean Gradients

Photoshop Gradient Seti: Dooffy Gradients

Photoshop Action Seti: Cross Processing ATN

PSD Website Şablonu: vCard Minisite

Magento teması: Polaroid

Wordpress teması: Modernist

Bu blogu açarken tek amacım, web tasarım ve freelance çalışma hayatıyla ilgili kişisel birikimlerimi yazıya dökmek ve takip ettiğim onlarca kaynaktan derlediğim ücretsiz kaynakları paylaşmaktı. Bu nedenle ben de hazır bir tema alarak bir an önce blogumu açmak istedim ve hayata geçirdim. Açıkçası blog fikri aklımdayken bu kadar takip edileceğini tahmin etmiyordum. Bir de baktım ki 6 ay geçmiş:) OZD Tasarım‘ı takip edenlerin sayısı her geçen gün arttıkça, benim de motivasyonum ve hevesim olumlu yönde etkilenmeye devam ediyor. Zaman zaman işlerimin yoğunluğundan dolayı aksamalar olsa, blog çalışmalarıma eskisinden daha ciddi yaklaşıyorum. Bir aksilik çıkmadığı sürece de böyle devam edeceğinden emin olabilirsiniz. Şimdi gelelim asıl konumuza…

Blogun ziyaretçi sayısı hatrı sayılır derecede arttığı için haliyle hazır tema kullanmamla ilgili olumlu-olumsuz yorumlar almaya başladım. Bazıları bu temayı çok beğendiklerinden söz ederken, bazıları da hazır tema kullanmamın profesyonelliğime gölge düşürdüğünü savunuyor. Her iki tarafında haklı olduğu noktalar var elbette. Şunu bilmenizi isterim ki, ben de ömür boyu hazır tema kullanma taraftarı değilim. Bir an önce açmak için kullanmaya başladığım bu temayı, ilk fırsatta kendi hazırladığım tema ile değiştirmek her zaman aklımda. Kendi tema tasarımım için çalışmalarım da bir süredir, az da olsa zaman buldukça devam ediyor zaten. Ancak dediğim gibi bunun için boş zamana ihtiyacım var:) Günde 5-6 saate düşürdüğüm uykumdan daha fazla ödün vermek istemediğim için de, bu boş zamanı bulmakta biraz zorlanıyorum şu sıralar. Ama fırsat buldukça kendime ait tema tasarımını tamamlamak için çalışıyorum. Umarım yakın zamanda bitirip, yüklemeyi başarırım.

OZD Tasarım bir süre daha aynı temayla devam edecek. Kendi tasarımım bittiğinde ise fikirlerinizi ve eleştirilerinizi duymak isterim. Blogumu takip edenlere ve destekleyenlere teşekkürler. Beni okumaya devam edin ve okuduktan sonra olumlu ya da olumsuz yorum yazmayı unutmayın:) Görüşürüz…

Resmi Twitter butonu nasıl eklenir?

Mobil web uyumlu Wordpress temaları

Bu temalar sayesinde Wordpress blogunuz ve siteniz artık cep telefonlarından da sorunsuz görünecek.

iPhonsta

iPhonsta, temel olarak iPhone uyumlu geliştirilen bir Wordpress teması olsa da, diğer cep telefonlarında da sorunsuz görünüyor. Çünkü iPhonsta, web tasarımda fluid layout dediğimiz yapısı ile ekranın ölçülerine göre genişliğini otomatik olarak ayarlıyor.  SEO dostu ve Wordpress 3.0′ı desteklemesi de temayı daha çekici hale getiren önemli etkenler.

WordPress Mobile Pack

Özellikle Nokia için geliştirilen bu Wordpress tema paketi aynı zamanda Android, iPhone ve Palm cihazlarında da sorunsuz olarak çalışıyor. Wordpress bileşenlerini destekleme, Percent Mobile ile mobil internet trafiğini takip edebilme, farklı renk seçenekleri ve mobil admin paneline sahip olması, tema paketinin önemli özelliklerini oluşturuyor. Bütün özelliklerine temanın sitesinden göz atabilirsiniz.

WordPress Mobile Theme

Bütün mobil cihazlarla uyumlu bu tema, sade ve şık tasarımıyla tam bir mobil internet dostu. Blog yazılarında otomatik küçük resim (thumbnail) oluşturma özelliği ve farklı renk seçenekleri temayı kullanılabilir yapıyor.

Möbius

Bütün mobil cihazlarla ve tarayıcılarla uyumlu olarak çalışan Möbius, bileşenleri destekleme, 3 farklı tema seçeneği, Jquery ve @font-face desteği, W3C ve SEO uyumluluğu gibi çok önemli özellikleri ile profesyonel bir mobil web uyumlu Wordpress teması.

News Press Mobile

News Press teması, arama motoru, kategori yapısı, etiketler ve üye girişi gibi  Wordpress’in bilindik bütün özellikleriyle birlikte geliyor. Özellikle iPhone için geliştirilmiş bu temanın bütün özelliklerine mutlaka göz atmalısınız.

Carrington Mobile

iPhone, Android, Blackberry gibi ünlü mobil cihazları destekleyen Carrington, kendisine özel geliştirilmiş bir çok Wordpress eklentisine ve tema seçeneğine sahip.

İster Javascript ile birlikte, ister iframe içinde, isterseniz de kendinize göre geliştirerek farklı şekillerde kullanabileceğiniz bu butonun, yatay, dikey ve sayaçsız olmak üzere 3 farklı görünümü mevcut.

Dikey twitter butonu

Twitter butonunu dikey görünümüyle kullanmak için sayfanıza eklemeniz gereken kod:

<a class="twitter-share-button" href="http://twitter.com/share">Tweet</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"><!--mce:0--></script>

Yatay twitter butonu

Twitter butonunu yatay görünümüyle kullanmak için sayfanıza eklemeniz gereken kod:

<a class="twitter-share-button" href="http://twitter.com/share">Tweet</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"><!--mce:1--></script>

Sayaçsız twitter butonu

Son olarak Twitter butonunu sayaçsız kullanmak için sayfanıza eklemeniz gereken kod:

<a class="twitter-share-button" href="http://twitter.com/share">Tweet</a><script src="http://platform.twitter.com/widgets.js" type="text/javascript"><!--mce:2--></script>

Uygulamanın diğer bütün özelliklerini incelemek isterseniz, aşağıdaki linki kullanabilirsiniz.

http://dev.twitter.com/pages/tweet_button

Flash tabanlı siteler için içerik yönetim sistemi: FlashMoto

Yeni, ücretsiz ve kaliteli fontlar

Ücretsiz 10+ Kurumsal CSS & XHTML hazır site şablonları

Türkçe freelance iş ilanları siteleri

Yeni iş alıp müşteri portföyünü genişletmek isteyenler için portfolyo sitesi ve blog yeterli olmayabilir. Daha fazla iş almak istiyorsanız, müşterinin sizi bulmasını beklemek yerine, siz müşteriyi bulmalısınız. Bu nedenle de freelance iş ilanları sitelerini aktif olarak kullanmanızı tavsiye ederim. Her iş ilanına teklif vermeseniz de aşağıda bahsedeceğim sitelerde hizmet verdiğiniz isimle yer almak, bu sektörde insanların size aşina olmasını da sağlayacaktır. Ayrıca elbette bu sitelerin asıl amacı olan “teklif vererek iş almak” sizin için ilk sırada olmalı.

Şimdi gelelim freelance iş ilanları sitelerine… Sıralamayı önem sırasına göre yapmadığımı da belirmek istiyorum.

Açık İş: www.acikis.com/

Proje Kurdu: www.projekurdu.com/

Yazdıralım: www.yazdiralim.com/

Ek olarak,

Bilisim.ws: http://bilisim.ws/

Bilişim.ws aslında tam olarak teklif yoluyla çalışan bir Freelance iş sitesi değil. Ama Sadece Bilişim sektörüne hizmet veren ve freelance iş ilanlarının da bulunduğu bir ortam olduğu için eklemek istedim.

Sizin de bildiğiniz Türkçe freelance iş ilanları siteleri varsa yorum bırakarak belirtebilirsiniz.