Adı “bilişim” mi olsun, “web” mi olsun, “tasarım” mı olsu ona daha karar veremedim. Ama yaşadığım çevreyi hedefleyeceğim kesin. Neden yaşadığım çevre? Çünkü hedefimi gerçekçi belirlemek istiyorum.

Google arama motoru olarak değil artık internete çıkış kapımız olarak görev yapıyor. Ve çok nadir de olsa google sunucuları anlık yanıt veremediklerinde, “aaa Ayten baak! İnternerneeet gittiii…” gibi gereksiz yorumlar oluyor. Ya da misafirliğe gidildiğinde, ev sahibi eğer açılış sayfasına konusunda ketumsa, “Ahmet abi, senin makinede internete girilmiyo herhal, baksana beyaz bi’sayfa görünüyo!..” gibi bir durumla da karşılaşılabilir. Şimdi, bu sayfada okuyuculara internetin çalışma prensibinden bahsedecek kadar yazlık modda değilim.

Benim üzerinde duracağım, SEO konusunda (Türkçe meali; google başta olmak üzere internet arama motorlarında ön sıralarda yer alma sanatı) başarılı olmak. Arama motorlarına kendinizi sevdirmenin yolunu anlatan o kadar çok “seo” anahtar kelimeli blog, site, vs. var ki! SEO konusu ile ilgilinenler bunların birçoğunu zaten ezbere biliyordur.

Yerel hedefler belirlemek: Kendi girişim düşüncemden yola çıkarak, sadece bulunduğunuz coğrafyayı, kenti hedefleyin. “Web tasarımı” cümlesini ilk sıralarda çıkarmak gibi bir ütopyam olamaz –ki sizin de olmasın! – , “İzmir Web Tasarımı” denemesi yapsam da bunun için kısmen google amcaya reklam vermem gerektiğini ve aylarca çok çalışmam gerektiğini bilirim. Ama bulunduğum ilçeyi hedef aldığımda; “Çiğli Web Tasarım” rakiplerimi de azatlım sonunda. Birkaç aylık, günde 15-20 dakikamı ayırarak ilk onda görünmem muhtemel. Tabi klasik SEO taktiklerinin de birçoğunu uygulamalısınız.

Google amcanın raporlarını kullanın: Google Adwords kullanıcıları tarafından ulaşılabilen Raporlar ve Araçlar menüsünden Anahtar Kelime Aracı gerçekten mucizevî. Kelime ya da kelime gruplarının tahmini kaç kez arandığını, diğer benzer kelime kombinasyonlarını gösteren bir rapor sunuyor, “meta keywords” için ufukları yakın ediyor.

Muhtemelen, önümüzdeki 10 günlük sürede alan adının ne olacağına karar vereceğim ve onun üzerine iki ay emek sarf edeceğim. Bu arada merak edenler için, web sitesi rakip sayım 5. İki ay içinde umuyorum google amcada en kötü ihtimalle 6.sırada yer alacağım.

Sanalduvar’ın da PageRank değeri derecesi 6 olmuş. Tekrar tebrik ediyorum, Veysel bey belki benim minik girişimimde backlink verir, ne dersiniz?

Oluşturacağınız araç çubuğuna sitenizin ikonunu site bağlantınız ile birlikte ekleyebilmenizin yanında sosyal ağ devleri olan Facebook ve Twitter sayfalarınızada bağlantı verebilir aynı zaman da RSS beğlemesinde rastgele başlıklar(dinamik başlıklar) çubukta görüntüleyebilirsiniz.

En çok hoşuma giden ise çubuğa ekleyeceğiniz arama kutusu sayesinde (mesela Google‘ı seçerseniz) sitenizin içeriğindeki sonuçları Google sayfasında görebiliyorsunuz. Bunu tıpkı Google sayfası sitili ile yapıyor.

Ayrıca istediğiniz sayfanın direkt bağlantısını da bu araca yerleştirebilirsiniz. Özellikle önemli gördüğünüz içeriğin. Aslında bunun yerine, ziyaretçi kitlesi sağlam isteler bunu reklam aracı olarak da kullanabilirler. Yani düşünsenize bir site gelip sizden araç çubuğunuzda yer edinmek istiyor. Bence güzel bir araç olabilir. Unutmadan şimdilik sadece Firefox ve Internet Explorer için geçerli!

SanalDuvar için yapmış olduğum örneği görmek için SanalDuvar Alexa Toolbarı deneyebilirsiniz.

Neyse lafı fazla uzatmadan, eğer side test edip kullanmak istiyorsanız aşağıdaki bağlantıyı takip etmeniz yeterli olacaktır. Şimdiden kolay gelsin!

Alexa Toolbar Creator

Üye olduktan sonra hemen giriş yapıp Tools menüsünden ToonDoo Maker öğesi tıklandığında internet hızınıza bağlı olarak yavaş ya da hızlı biçimde bir flash ara yüz yüklenecek. Araçların hemen hepsi ara yüzün üst kısmında. Tamamen İngilizce olması bir yandan da İngilizce eğitimine önem veren aileler/öğretmenler için değerli bir nitelik olsa gerek. Kısa karikatür çizimlerinin yanı sıra komple kitap biçiminde çizgi romanlar da hazırlanabiliyor.

Bir İngilizce öğretmeni arkadaşımdan öğrendiğim bu internet sitesi umarım size de katkı sağlar. Basit bir internet sitesi değil elbette, çok farklı seçenekler sunuyor, tüm bunları keşfetmek zaman alıyor, o nedenle detaylarına ben de inmedim.

Ama SanalDuvar için küçük bir deneme yaptık ben ve 5 yaşındaki kızım, bakalım beğenecek misiniz?

Mutlu günler.

İyi bir sunumun hangi nitelikleri sahip olması gerektiğini anlatmayacağım, alternatif bir sunum geliştirme ortamını tanıtmak isterim. 2 ay kadar oldu benim de keşfim. Hatta bir iki örnek yaptım ama paylaşacak kadar iyi olmadı.

Adı prezi. Sitesi de www.prezi.com. Masaüstü yazılımını 30 gün deneyebiliyorsunuz. Ancak web tabanlı olarak site üzerinden üye olup istediğiniz kadar sunum hazırlayabiliyorsunuz. Hatta davet edeceğiniz arkadaşlarınızla aynı sunum üzerinde çalışabiliyor ya da sadece gösterim yapabiliyorsunuz. Bilgisayarınıza indirerek kayıt edebiliyorsunuz. Kendi tanıtım sunumu aşağıda, kabul edin iyi iş:)

Prezi nedir? (Video)

Yeni başlayan bir prezi kullanıcısı iseniz, karşılama ekranı ile hemen birkaç uygulama izleyip doğrudan sunum tasarımına başlayabiliyorsunuz.

Prezi, klasik slayt sıralaması mantığı ile çalışmıyor. Birbirine bağlanan nesnelerin, belirli bir hareket sırası verilerek oynatılması ile canlanıveriyor. Uzaklaşan ve aniden yakınlaşan yazılar, birbiri ile çakışan geometrik nesneler ile capcanlı sunumlar. Youtube videoları “embed” yapılabiliyor, bilgisayarımızdan video veya görsel yükleyebiliyoruz.

Prezi ile çalışmaktan kendi adıma keyif aldım. Çok hızlı öğrenilebiliyor, birkaç özelliğini bilerek bile çarpıcı sunumlar gerçekleştirmek mümkün.

Şimdilik ilk onluyu sizlerle paylaşıyorum. Dikkat edin bunlar sadece sosyal medya için olanlar! Site tasarımında kullanılacak diğer ikonlar için ayrıca bir paket hazırlamayı düşünüyorum.

1- Free Vector Social Bookmark Icons

2- Extreme Grunge Social Media Garmant Icons

3- Transparent Glass Social Bookmarking Icons

4- Nurture Social Icon Set

5a- Free 3D Social Media Icon set #1

5b- Free 3D Social Media Icon set #2

6- 3d Glossy Blue Orbs Social Media Icons

7- Freebie! 30+ New Social Media Icons

8- Sleek! Free Tab Style Social Icons

9- Splatter Social Media Icons

10- Starry Site! NEW 16 Social Media Icons + PSD!

Bilgi vermeden önce size bu çalışmanın demosunu görmenizi tavsiye edeceğim, o zaman neden bahsettiğimi anlayacaksınız.

Zoomer Gallery Demo

Zoomer Gallery İndir

Evet, şimdi kaynağımızı indirmiş arkadaşlar için kurulumu anlatmaya başlayalım.

İndirdiğimiz dosyada resimler ve bunlarında yanında 3 adet dosya var. Bunlar zoomer.html , zoomer.css ve zoomer.js dosyaları.

Zoomer.HTML

Bu dosyadaki kodların açıklamaları şu şekildedir.

$.fn.Zoomer=function(b){

var c=$.extend({

speedView:200,    //Resimlerim büyüme zamanı

speedRemove:400,  //Üzerine gelip büyüttüğünüz resmin küçülme zamanı

altAnim:false,  //Başlığın gösterilip gösterilmeyeceği (false:göstermez, true: gösterir)

speedTitle:400, //Başlığın kayma süresi

debug:false},b);  //Yapılan ayarları onaylama seçeneği(gibi birşey)

var d=$.extend(c,b);

Zoomer.CSS

Stil dosyası ile resimlerin çerçevesini ve arka planında değişiklik yapabilirsiniz.

ul.thumb li img {

width: 100px;

height: 100px;

border: 1px solid #ddd;

padding: 5px;

background: #f0f0f0;

position: absolute;left: 0; top: 0;

-ms-interpolation-mode: bicubic;

}

ul.thumb li img.hover

{

margin-top:15px;

background:url(thumb_bg.png) no-repeat center center;

border: none;

}

Şimdi gelelim sayfamızda çalışmayı çağırmaya geldi.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="zoomer.js"></script>
<script type="text/javascript">
$(document).ready(function(){
     $(’ul.thumb li’).Zoomer({speedView:200,speedRemove:400,altAnim:true,speedTitle:400,debug:false});
});
</script>

Resimlerimizi sayfaya yerleştirmek için aşağıdaki kodları kullanmamız gerekiyor.

<ul class="thumb">
                <li><a href="#"><img src="image1.jpg" alt="Title 1" /></a></li>
                <li><a href="#"><img src="image2.jpg" alt="Title 2/></a></li>
                <li><a href="#"><img src="image3.jpg" alt="Title 3" /></a></li>

</ul>

Kısaca anlatmaya çalıştım. İngilizce kaynak için burayı ziyaret edebilirsiniz.

Sözü daha fazla uzatmadan karşılaştığım ve beğenmiş olduğum tooltiplere geçelim.

1. Dynamic tooltip

2. Coda Popup Bubble

3. TipTip

4. jQuery Ajax Tooltip

5. Awesomeness

6. (mb)Tooltip

7. jGrowl

8. tipsy

9. Easiest jQuery Tooltip Ever

10. Create a Simple CSS + Javascript Tooltip with jQuery

]]> http://www.sanalduvar.com/10-adet-jquery-tooltip-eklentisi-jquery-ile-balon-icinde-aciklama-ornekleri-1052.html/feed 4 http://www.sanalduvar.com/drag-to-share-eklentileri-ve-meebo-1039.html http://www.sanalduvar.com/drag-to-share-eklentileri-ve-meebo-1039.html#comments Thu, 27 May 2010 18:48:51 +0000 Veysel http://www.sanalduvar.com/?p=1039 Bahsedeceğim eklenti yakın zamanda blogcular tarafından popüler hale gelecek. Çünkü sosyal medya artık blogcuların yazılarının daha fazla okura ulaşması için çok iyi bir araç haline geldiler. Bu ekletiye yeni yazılarım için kaynak ararken rastladım. Gayet hoşuma gitti! Çünkü bende yazılarımı yayınladıktan sonra ilk işim en çok kullandığım sosyal ağ sitelerinde bağlantı vermek. Böylelikle RSS ile takip etmeyip facebook grubuna katılanların veya twitter’dan takip edenlerin hemen önüne düşüyor. Eğer ilgisini çeken bir konu ise zaten geri dönüşü oluyor.

Öncelikele “Drag to Share” ne demek? Türkçesi “Paylaşmak İçin Sürükleyin” demek oluyor. Yazılarda paylaşılan resimleri fareniz ile üzerine bir kez tıklayıp çektiğinizde resmin ait olduğu bağlantıyı paylaşmak istediğiniz mevcut sosyal ağ siteleri çıkıyor ve bunlarından herhangi birinin üzerine bıraktığınızda paylaşım işlemi için yeni sayfanız açılıyor ve onaylıyorsunuz.

Eklentinin ilk karşılaştığım versiyonu Meebo‘nun aracı olanı idi. Fakat böyle bir aracın kesinlikle WordPress’e has versiyonu hazırlanmıştır deyip araştırmaya devam ettim. Benzer şekilde başka iki adet eklenti ile daha karşılaştım. Ancak Meebo zaten WordPress kullanıcıları içinde  bir eklenti hazırlayıp kullanıma sunmuş. Meebo ayrıca sadece “Drag to Share” aracı ile bırakmamış ayrıca blogunuzun alt kısmında çeşitli araçlar bulundurabileceğiniz bir “araç çubuğu(tool bar)” oluşturuyor.

Benim hoşuma giden Meebo’nun eklentisi oldu. Aşağıda belirteceğim eklentilerin birini de kısa bir süre denedim.

Meebo “Drag to Share”

Bu eklentiyi edinmek için bar.meebo adresinden ulaşabilirsiniz. Unutmadan sitenize bu eklenti sayesinde sohbet özelliği de katabilirsiniz. Paylaşımlar hakkında istatistiksel bilgide edinebilirsiniz.

Drag to Share eXtended

İkinci olarak benim kısa bir süre kullanmış olduğum bir eklenti. Gayet iyi idi fakat Google Buzz olmaması ondan vazgeçmeme sebep olan unsurlardan biri oldu. Belki ilerde Google Buzz’u ben ekler ve yeni versiyonunu yayınlarım. Eklentiye buradan ulaşabilirsiniz.

Drag To Share

Son olarak bu eklentiyi sizlerle paylaşayım. Bu eklenti benim için başta kaybetti! Çünkü kullanılan sosyal ağ sitesi miktarı çok az! :S Eklentinin kendisine buradan demo sayfasını buradan ziyaret edebilirsiniz.

Şimdilik bu kadar bir sonraki yazımda görüşmek üzere!

Alexa değerini arttırmak için yapmam gereken işlemleri araştırmanın ardından zaman kaybetmeden uygulamaya geçtim. Bunlardan en önemlisi Alexa Toolbar idi. Genelde Google Chrome kullandığım için Alexa sitesini ziyaret ettiğimde sanırım şimdilik olsa gerek, bana “We’re sorry, but we don’t have a toolbar for your browser” yani “Üzgünüz, ancak tarayıcınız için bir toolbarımız mevcut değil” uyarısı verdi.

Bunun ardından eski bir Firefox kullanıcısı olarak Alexa’nın Firefox eklentisi indirdim ve kurdum. İşte olay bundan sonra başlıyor.

Alexa özellikle kendi arama motorunun sonuçlarını önemsemekte. Yani Alexa Toolbar ile kendi blogunuz için yaptığınız arama size artı olarak geri dönecek. Bu sebeple şöyle bir yol izlemek mantıklı geldi. Şimdi bahsedeceğim yolu aslında webmasterlerın kendi siteleri için hep yaptığını söylenir (Alexa Toolbar’ı konu almış bazı yazılarda).

Firefox‘u açıp Alexa Toolbar ile aramanızı yapın. Bu arama sonucunda kendi sitenizin olduğu sayfayı (mesela ben “sanalduvar” olarak arama yaptığımda doğal olarak ilk sırada çıkıyorum, sizde hangi kelimede üst sıralarda çıkmak istiyorsanız onu seçebilirsiniz), Araçlar menüsünden Seçenekler sekmesi ile açılış sayfası olarak ayarlayın. Böylelikle Firefox uygulamasını her başlattığınızda Alexa araması ile kendi blogunuzu ziyaret etmiş olacaksınız.

Bunu gözlemleyin yaklaşık olarak 20 gün olsun bu süre içerisinde yeni yazılarınız ile blogunuzun güncelliğini koruyun. Unutmadan Alexa için en önemli diğer bir konuda; ziyaretçileri blogunuzda süre geçirmesini sağlayın. Bunun için makaleleriniz de diğer makalelerinize bağlantı verin. Video içeriğin ile bu süreyi uzatabilirsiniz bu konu ile alakalı wordpress eklentilerine buradan ulaşabilirsiniz.

Sonucunuzu burada yorumunuzla paylaşırsanız sevinirim.

Benim de şuan için deneme kullanımı yaptığım ücretsiz, fakat ihtiyaç halinde üst seviyeye geçebilirim. Gelelim ben bu sistemle nasıl tanıştığıma! Çok ilginçtir fakat bu temayı(sanalduvar3) geliştirme çabalarım bitmek üzere iken beni Twitter aracı ile takibe alan bir yabancı arkadaşın blogunu ziyaretim ile haberdar oldum ve kendisi ile bu sistem sayesinde sohbet etme fırsatı yakaladım.

Peki geçelim sistemi derinlemesine incelemeye. Öncelikle Olark ismi nereden geliyor? Olark, Lark isimli bir kuştan türetilmiş. Kuş hakkındaki ayrıntılı bilgiyi wikipedi’nin buradaki açıklamasından edinebilirsiniz. Sistem Rackspace Cloud Computing adı altında 5 kişi tarafından hayata geçirilmiş. Ve dünyanın görmüş olduğu en çok satan ve en iyi destek sistemi olarak değerlendiriyorlar. Aslında sitelerini incelediğinizde bile gerçekten internet ve yazılım sistemleri üzerine ilerlemiş şirketlerden biri olarak görünüyor. Olark’da bu şirketin hayata geçirmiş olduğu araçlardan biri.

Kullanması oldukça kolay olan Olark sistemi için sitesine giriş yapın. Eğer isterseniz denemesini ana sayfadan bile yapabilirsiniz ya da kullanmaya karar verdiğiniz de üye olmanız yeterli. Üyelik işlemini tamamladıktan sonra kendinize ait bir yönetici paneli oluyor ve buradan gerekli kodları alıp temanıza yerleştirebiliyorsunuz. Tavsiyem footer.php dosyasının içine yerleştirmeniz. Bu işlemleri yaparken size bir de sohbeti üzerinden gerçekleştireceğiniz sohbet sistemi soracak. Nasıl yani? Şöyle oluyor. Sistemin çalışması bir sohbet sistemi seçmelisiniz. Bu sayede ziyaretçileriniz siteniz üzerinden sohbet ederken sizde kendi sisteminizi kullanacaksınız. Mesela ben Google Talk sistemini üzerinden ziyaretçilerim ile görüşme yapıyorum. Onlar bana blogum üzerinden yazarken ben onlara Google Talk üzerinden yazıyorum.

Gelelim sistemin Türkçe destek verip vermediğine. Sistem başta İngilizce olarak geliyor. Yani siz temanıza ilk yüklediğiniz de İngilizce görüntülenecek. Fakat Olark’daki üye panelinden “Customize” menüsünden gerekli alanları Türkçeleştirmesini yapıp kaydettiğinizde sistem otomatik olarak temanızdaki sohbet bölümünü Türkçeleştirmiş oluyor. Bu sayede tekrar kodları temaya yerleştirme gereği kalmıyor.

Henüz Türkçe bloglarda bir örneğine rastlamadım. Fakat incelemenizi tavsiye ediyorum.