Script Kodlarının Çakışması

Merhaba, bu  yazımda aynı sayfadaki scriptlerin çakışmasını önlemenin yollarını öğreneceğiz.

1) var $x = jQuery.noConflict();kodunun kullanımı.Kullandığımız scriptler genelde $ işareti ile kodları döndürürler.Bizde bunlara farklı farklı isimler vererek çakışmalarını önleyebiliriz.

<script>
var $x = jQuery.noConflict();
$x(function() {
$x( “#datepicker” ).datepicker();
$x( “#format” ).change(function() {
$x( “#datepicker” ).datepicker( “option”, “dateFormat”, $x( this ).val() );
});
});
</script>

2) Jquery kütüphanelerinin çekildiği kodlar.Çektiğimiz bir kütüphaneyi tekrar çekmememiz gerekir.Örneğin (<script type='text/javascript' src='scripts/jquery-1.6.1.min.js'></script>) kütüphanesini sayfa içerisinde sadece bir kere çekmemiz gerekir.

3)Kullanılan scriptlerin sırası.Kullandığımız scriptleri gruplandırıp sıraya koyarak çalıştırmamız ,scriptlerimizin sağlıklı bir şekilde çalışmasını sağlıycaktır.

<script type=’text/javascript’ src=’scripts/jquery-1.6.1.min.js’></script>
<script type=’text/javascript’ src=’scripts/jquery.dataTables.min.js’></script>
<script type=’text/javascript’ src=’scripts/jquery.dataTables.columnFilter.js’></script>
<script type=’text/javascript’ src=’scripts/jquery.dataTables.pagination.js’></script>

<link type=”text/css” href=”css/ui-lightness/jquery-ui-1.8.17.custom.css” rel=”stylesheet” />
<script type=”text/javascript” src=”js/jquery-1.7.1.min.js”></script>
<script type=”text/javascript” src=”js/jquery-ui-1.8.17.custom.min.js”></script>
<script type=”text/javascript”>
var $n = jQuery.noConflict();
$n(function(){
$n(‘#dialog’).dialog({
autoOpen: false,
width: 600,

});
// Dialog Link
$n(‘#dialog_link’).click(function(){
$n(‘#dialog’).dialog(‘open’);
return false;
});
});
</script>
<script type=”text/javascript” src=”jqueryformvalidation/jquery.validate.js”></script>
<script>
var $x = jQuery.noConflict();
$x(document).ready(function(){
$x(“#commentForm”).validate();
});
</script>

 

 

Sıkça Karşılaşılan W3C – XHTML Hataları ve Çözümleri

Biliyoruz ki sitelerimizin W3C standartlarına uygun olması arama motorları tarafından sitemizin sevilmesini sağlıyor. Sitelerimizi W3C standartlarına uygun yaparsak sitemize büyük fayda sağlayacaktır. Sitelerimizi XHTML web biçimleme diliyle W3C standartlarına uygun yapabiliriz. XHTML web biçimleme dili W3C standartları tavsiyesidir. XHTML web biçimleme dilini biraz açalım. XHTML açılımı: EXtensible HyperText Markup Language (Genişleyebilir Hiper Metin Anlamlandırma Dili). XHTML, HTML dili yerine kurulmuş ve onun yerine kullanılmaktadır. Temiz, düzenli ve gereksiz kodlardan arınmış HTML yazımını sağlar. Aşağıda W3C uyumluluk sorununu ve çözümlerini maddeler halinde verdim.

Etiketleri İç İçe Kapatın

HTML ile etiketleri iç içe kapatma diye bir şey yok. Ama XHTML ile etiketleri ve parametreleri iç içe kapatma zorunluluğumuz var. Bu işlemi siteniz üzerinde gerçekleştirmediğiniz zaman sitenizin W3C standartları uyumluluğunu sorgulattırırken daima hata verir.

Hatalı Kod: <b><i> Etiketleri İç İçe Kapatmak </b></i>
Doğru Kod: <b><i> Etiketleri İç İçe Kapatmak </i></b>

Etiket ve Parametre İsimlerini Küçük Harflerle Yazın

HTML ile etiket ve parametre isimlerini küçük-büyük harflerle yazsak birşey olmuyordu. XHTML ile etiket ve parametre isimlerini küçük harflerle girmek zorundayız.

Hatalı Kod: <SPAN title="Açıklama"><B> Etiketleri ve Parametreleri Küçük Harflerle Yazmalıyız </b></SPAN>
Doğru Kod: ><span title="Açıklama"><b> Etiketleri ve Parametreleri Küçük Harflerle Yazmalıyız </b></span>

XHTML Etiketlerini Kapatın

HTML ile aşağıdaki hatalı kodda gördüğünüz gibi yapıyorduk. Ama XHTML web biçimleme dili ile TÜM etiketleri kapatmak zorundayız. Örneğini aşağıdaki Doğru Kodda görebilirsiniz.

Hatalı Kod: <img src="resim.gif" alt="açıklama">
Doğru Kod: <img src="resim.gif" alt="açıklama" />

XHTML ve W3C Uyumlu Bağlantılar

Sitesinde bağlantı verip W3C uyumluluk sorunu yaşayan bir çok arkadaşımız var. Aşağıda vereceğim bağlantılar tamamen XHTML ve W3C uyumlusudur. Sorun yaşayan arkadaşlarımız sitelerindeki bağlantıları aşağıdaki gibi yaparlarsa hiçbir sorunla karşılaşmayacaklarını göreceklerdir.

<a href="http://www.seoteknikleri.com">SEO Teknikleri</a>
veya
<a href="http://www.seoteknikleri.com" title="SEO Teknikleri">SEO Teknikleri</a>

XHTML ve W3C Uyumlu Resim Kodları

En çok hata alınan etiketlerden birisi img etiketidir. Sitenize resim eklerken aşağıdaki XHTML ve W3C tam uyumlusu olan kodları kullanabilirsiniz.

<img src="seoteknikleri.jpg" alt="SEO Teknikleri" />

DOCTYPE’ı Büyük Harflerle Yazın

DOCTYPE tanımlamasını büyük harfle yazın aksine W3C uyumluluğu olmaz.

Hatalı Kod: <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd" >
Doğru Kod: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Özellik Değerlerini Tırnaklar İçersinde Girin

Mesela bir td değerine yüksekliği HTML ile tırnaksız girebiliyoruz ama XHTML ile tırnaklar ile girmek zorundayız.

Hatalı Kod: <td height=100%>
Doğru Kod: <td height="100%">

Özellik Değerlerini Ayrı Ayrı Girmeyin

Sitenizde artık etiketlere özel widht yada height vs. gibi attribute kesinlikle girmeyeceksin. Girerseniz hata alırsınız. Bu iki özelliği css dosyasından çağırarak yapacaksınız.

Hatalı Kod: <td widht="100%" height="100%">
Doğru Kod: <td>

Not: Arkadaşlar HTML ile XHTML karıştırmayalım lütfen. Sitelerinizin W3C XHTML uyumlusu olup olmadığını XHTML Validator aracıyla görebilirsiniz.

İbrahim Çakıcı

Kaynak:http://www.seoteknikleri.com

SEO nedir ?

SEO NEDİR?  Bugün dünyada milyonlarca internet kullanıcısı arama motorlarını kullanıyor.Hatta çoğu kullanıcının açılış sayfası “Google” dır.Google, bildiğimiz gibi dünyanın en popüler ve en kaliteli arama motorudur.Hergün milyonlarca insanın Google’dan faydalanarak aradığını bulması site sahipleri yani webmasterlar için en önemli kapı haline gelmiştir.Google burada bir aracı görevini üstlenmektedir. Webmasterlar hedef kitlenin kendilerine ulaşmasını ister.Kullanıcılar da işini görebilecek bir site bulmak ister.Kullanıcıların bu arayışı fazla uzun sürmez %90 ihtimalle aradığı siteye Google veya diğer arama motorlarından ulaşır.Ama webmasterların işi tam da burda başlar.Bir webmaster kendisiyle rakip olan sitelerden daha üstte çıkabilmek için müthiş bir çaba harcamalıdır.Biz bu çabaların tamamına “SEO” yani “SEARCH ENGİNE OPTİMİZATION” türkçesiyle, “ARAMA MOTORU OPTİMİZASYONU” diyoruz. Backlink alırken sitemizin konusu ve en çok kullandığımız, aynı zamanda aranma potansiyeli en yüksek kelimeleri seçmemiz gerekir.Bir sitenin konusu “programlama” olsun. Bu site uzun bir süre reklam yaptırdığı her siteden “programlama” , “programlama dilleri” ve benzeri link alırsa artık arama motorları o sitenin başka siteler tarafından “programlama” konusundan tavsiye edildiğini ve bu sitenin gerçekten iyi bir site olabileceği kanısına ulaşırlar.Özellikle de yine aynı konu üzerinde optimize edilmiş bir siteden link aldığınızda gerçekten “seo” adına önemli bir adım atmış olursunuz.Bu tür adımlar aynı zamanda pagerankınızı da etkileyen en önemli adımlar olarak gösterilmektedir.Seo ve Pagerankın birbiriyle ilişkisini buradan anlıyoruz.Aslında buradan şu sonucu çıkartabiliriz: “Pagerank, seo nun bir parçası ve sonucudur” evet bu kanı pek de yanlış olmaz herhalde. Elbette Seo nun başka faktörleri de vardır.Sitenizin konusu yine “programlama” olsun.Sizin css yeteneklerinize de bağlı olarak sitenizin tasarımına da uyum sağlayabilecek türden kelimeler ve linkler yerleştirmek oldukça faydalıdır.Başlık resmine tıklandığında anasayfanın açılması, sitenin footer(en alt) bölümünde çok fazla olmamak ve “kelimeleri gizleyerek spam yapmamak” şartıyla anahtar kelimelere yer verilmesi de doğru bir yöntemdir. Özellikle bu tür durumlarda kelimelere içerikleriyle ilgili sayfalarınıza veya anasayfanıza link vermeniz daha da etkin olmasını sağlayacaktır.Bazı site sahipleri çok büyük bir hata yapmaktadır.Yerleştirdiği kelimelere link vermediği gibi arkaplan rengiyle yazı rengini aynı yapıp kelimelerin arkaplanda gizlenmesini sağlamaktadırlar.Bu uygulama sonucunda arama motorlarını kandırdıklarını zannedebilirler ama aslında arama motorları buna kanmayacakları gibi bu tür uygulamalar yapan siteleri cezalandırmaktadır.Örneğin Google, spam yaptığını anladığı siteleri indexinden silerek sandbox adı verilen cezalılar listesine konulmaktadır. Bunun yanısıra bir diğer eylem olarak sayfa içeriğinde(content) yeri geldiğince anahtar kelimelere yer verilmelidir.Örneğin: anasayfanızda yine programlama dilleri ile ilgili bir konu işliyorsunuz.JAVA diye de bir sayfanız mevcut.Önce anasayfada “java” kelimesine yer verecek şekilde kısa bir açıklamanın ardından yine “java” kelimesinin de içinde geçtiğin bir link ile “java” sayfasına bağlamak çok çok faydalı olur.Böylece “java” diye arayınca hem anasayfanız hem de “java” isimli sayfanız sonuçlarda yer alacaktır. Son olarak kendi sitenizle aynı alanlarda optimize olmuş ve benzer diyebileceğiniz sitelerden konuyla ilgili kelimeleri içeren linkler almanız yine optimizasyon faaliyetlerinize müthiş bir katkı sağlayacaktır.Yine benzer şekilde benzer sitelere kendi sitenizden link vermenizin de katkıları vardır elbet.

SEO Teknikleri

itenizin google aramalarında arzu edilen ön sıralara çıkmasını diliyorsanız, sitenizin SEO gücünü artıracak aşağıdaki tebbirleri uygulamanızı öneririm.

1. Stratejik anahtar kelimeler(keyword) seçin.

2. Stratejik anahtar kelimelere web sitenizin önemli kısımlarına yerleştirin.

3. web sitesinize anahtar kelimeleriyle ilintili bol miktarda HTML sayfası şeklinde içerik oluşturun.

4. Görsel (image) site haritası linklerinden kaçının. Çünkü arama motorları bu tür linkleri takip edemez. Bunun yerine HTML hiperlinkleri tercih edin.

5. Frame (çerçeve) sayfa yapılarından kaçının. Çünkü arama motorları bu frame sayfa yapılarını takip edemezler.

6. Dinamik sayfa yapılarından kaçının. Şayet web siteniz CGI veya database-delivery şeklinde oluşturulmuşsa bu durumda bazı arama motorları tarafından indekslemesinin imkanının kalktığı tecrübe edilmiştir. Mümkünse statik yani durağan yapıdaki sayfa kurulumunu tercih edin. URL adreslerinde ingilizce karakterler haricinde kelimeler kullanmayın. URL adreslerinizin permalinki yazı şeklinde olsun. Yazılar arasında kullandığınız semboller arama motorları tarafından hiç sevilmez. Bunun yüzünden tüm adres permalinki değerlendirme dışı kalır.

7. Yazılarınıza Meta Tag yani meta etiketler eklemeyi alışkanlık haline getirin. (aynı şey resim ve videolar için de geçerlidir)

8. Başka sitelere link vermekten ve link almaktan çekinmeyin .Bunu yaparken çapraz linkleşme metodunu kullanın. Yani A, B, C adında üç değişik site birbiriyle linkleşecekse A dan B ye; B den C ye; C den A ya olacak şekilde link verin. İki sitenin birbirine karşılıklı link vermesi arama motorları tarafından anlaşmalı link değişimi olarak değerlendirilir ve değerlendirme dışı bırakılır.

9. Site indeksinizi ve site haritanızı HTML formatında hazırlayın. HTML formatı google örümceklerinin en sevdiği formattır.

10. Sitenizi arama motorlarına ister el yordamıyla isterse paralı programlarla kaydettirin. ama bunu yaparken aynı arama motoruna defalarca kayıt etmekten imtina edin. Çünkü bu durumda SEO gücünüzü artırmaktan ziyade spam site olarak algılanmanıza sebep olacaktır.

11. Yayına geçtikten en az 5-6 ay sonra DMOZ, Yahoo gibi belli başlı web directory lerine sitenizi kayıt için başvurun. Bunun yanında sitenizin konusuyla alakalı niche tabir edilen küçük direktory’lere başvurmayı da ihmal etmeyin.

12. Otomatik yönlendirme, IP yönlendirme, meta-refresh, otomatik başvuru programları kullanımı, Cloak edilmiş sayfalar gibi hileli metodlara fazla bulaşmayın. Google sizi yakalarsa hazin sonunuz kaçınılmaz olur.

13. Sabırlı olmayı huy edinin. Web aleminde başarılar bir gecede gelmez. Çoğu kendini ispatlamış site en az 1-2 yıllık çabaların sonucunda bulundukları yerlere varmışlardır. Eğer yeterli sabır alametlerini taşımıyorsanız webmaster işlerine bulaşmayın. Sevdiklerinizle zaman geçirin, kız arkadaş edinin, şiir yazın bulmaca çözün ama site sahibi olmayın.

14. Şayet internette ciddi bir ticari hamle yapmayı düşünüyorsanız bu içle amatörce uğraşmak yerine kurumsal SEO çözümleri sunan firmalara SEO optimizasyonu işlerinizi havale edin.

15. Heading yani Sayfa başlıklarının formatını h1, h2 şeklinde tercih edin. Arama motorları H1 den başlayarak H6 ya kadar önem derecesi verirler. Yani H1 H2 başlıklarını daha fazla dikkate alırlar.

16. Sİtenizde önemli gördüğünüz yerlerde bold yani siyah harf kullanın.

17. Resimlerin hemen altına kısa açıklamalar yapın. Resimlerin ayrıca kayıt isimlerini de resmin konusuyla alakalı bir biçimde seçin. Unutmayın ki google amca görsel aramaları da resimlerin kayıt isimlerine göre oluşturuyor.

18. Sİtenizi LYNX ağ tarayıcısını(web browserini) kullanarak değerlendirmeye tutun. LYNX browseri explorer gibi bir ağ tarayıcısıdır. Ancak LYNX, Internet explorer, firefox, safari gibi tarayıcılardan farklı olarak dinamik sayfaları ve resimleri değerlendirmeye almaz. Yani diğer bir deyişle google botları sitenizi nasıl görüyorsa size de sitenizi öyle gösterir.

19. Sitenizde oluşturduğunuz içeriği digg.com, technorati, mixx.com gibi social bookmark sitelerine kaydettirin. ayrıca wordpress sistemi kullanıyorsanız feedburner pluginini mutlaka indirip aktive edin. Link referral tipi kaliteli toplistlere sitenizi kaydettirin. Siteniz ne kadar çok yerde arama motorlarının karşısına çıkarsa, arama motorlarının gözünde o kadar çok trustrank dediğimiz güvenilirlik olayını kazanır

20. Sitenizin meta discription ve meta Title kısımlarını asla boş bırakmayın. Buradaki boşluklar arama motorları tarafından özensiz hazırlanmış site olarak değerlendirilebilir ve sitenizin Trust rankı düşebilir.

Bu yukarıda saydıklarım sitenizin özellikle Google SEO sunu iyi duruma getirecektir.

Photoshopta saç rengini değiştirme

1) İlk önce güzel bir resim seçiyoruz.

 

 

 

 

 

 

 

 

 

 

 

 

2) Pen Tool ile saçın, istediğimiz alanını seçiyoruz. Sonra ( Ctrl+Enter) ‘ a tıklıyoruz.

 

 

 

 

 

 

 

 

 

 

 

 

3) Yeni layer ekliyoruz   (Ctl +Shift + N) ve seçili alanı yapıştırıyoruz (Ctl+ V).

 

 

 

 

 

 

 

 

 

 

 

 

İmage sekmesinden ,İmage >Adjustments>Variations> ve buradan değerlerle oynarak istediğimiz rengi elde ediyoruz.

Photoshopta göz rengi değiştirme

 

 

 

 

 

 

 

1.  Lasso Tool aracını seçiyoruz.

 

 

 

 

 

 

 

2. Dikkatli bir şekilde , Lasso Tool aracı ile bir gözü seçiyoruz.

3. İkici gözü seçmek için ise , elimizi shift tuşunda tutarak aynı işlemi yapıyoruz.

 

 

 

 

 

 

 

4. İki gözüde seçtikten sonra , İmage sekmesinden (Image>Adjustments>Hue/Saturation) 

 

 

 

 

 

 

 

 

 

5. Bu penceredeki değerlerle oynayarak istediğimiz göz rengini elde edebiliriz.

 

Photoshopta Yeni Sayfa Açmak

Uyarı:Bu sayfadaki ders http://birderindeniz.blogcu.com ‘ dan alıntıdır.

 

 

 

 

 

 

 

 

 

 

 

Photoshop’ta da bir çok programda olduğu gibi “FILE” sekmesenden “NEW” seçeneğini işaretleyerek ya da    ”ctrl+N”ye tıklayarak yeni bir dökuman açabiliriz. Bu işlemlerden birini yaptığımızda karşımıza şu pencere çıkar.

 

 

 

 

 

 

Name kısmında dökumanınıza bir ad yazabilirsiniz.

Preset dökumanınızın ölçüleri ile ilgili olan kısımdır. Size kullanbileceğiniz standart ölçüler verilir burada. Custom seçiliyken siz kendi ölçülerinizi belirleme şansına sahip olursunuz. Ben burada uluslarası standart kağıt ölçülerinden A4 (210×297) kullandım örnek olarak. Buradan yola çıkarak:

Size kağıdınızın ölçülendirmesi ile ilgili standartın belirtildiği kısımdır. Burada A4… Eğer preset kısmında “custom” seçili olsaydı, herhangi bir standart ölçü orada bulunmayacak ve “size” pasif olacaktı.

Width dökumanımızın genişliği; height yüksekliği ile ilgili ölçü değerlerini verir. Ölçü birimleri bu değerlerin hemen yanında yer alır. Uluslararası standart kağıt ölçülerinin birimi mm olduğu için burada mm’yi kendisi otomatik olarak atadı Photoshop. İstersek bunu pixel, cm vs. gibi ölçülerle değerlendirme şansımız da var. Yine bu dökumanda custom seçili olsaydı, en son hangi dosyayı açtıysak, ya da bir görsel kaydı yaptıysak otomatik olarak o ölçüler karşımıza çıkacaktı. Mesala print screen’e basıp ctrl+N ye bastığınızda ekran çözünürlülüğünüzde bir dosya açılacaktı. Mesala 1024×768 pixel; 72 dpi.

Resolution: Dökumanımızda geçerli olan çözünürlük değeri. Şimdilik sadece eğer dijital ortam için bir çalışma yapıyorsak 72 pixel/inch; baskıya yönelik çalışıyorsak, 300 pixel/inch çalışmanız yeterli diyor kısa kesiyorum. Tahminler doğru başka bir başlık evet

Color Mod: Eğer dijital ortam için çalışıyorsanız RGB, baskıya yönelik bir çalışma is CMYK seçili olmalı. 8 Bit her iki renk modu için de güvenebileceğiniz bir seçimdir.Yine ayrı bir başlıkta renklere bakacağız.

Background Contents: Dökumanımızdaki arka planın renk seçimiyle ilgilidir. White seçiliyken arka planımız beyazdır. Background Color seçiliyken hemen sol tarafta gördüğünüz renk paletinin alt penceresinde hangi renk varsa ona dönüşür. Transparent seçiliyken arka fonda beyaz – gri karecikler oluşur. Bunlar aslında bir rengi ifade etmez. Oranın şeffaf olduğu anlamına gelir. Aynı layerlar gibi. Dikkatinizi çektiyse layer pancerelerinde de bu gri beyaz kareler vardır, bu layerların şeffaf olduğunu gösterir.

Seçimlerimizi tamamladık, dökumanımızın özellikleri belli. OK’ e basın dökumanınız açıldı bile!