Web Sayfası Sekmesi Başlığının Değiştirilmesi: Detaylı Açıklama

• 18 Haziran 2024
• Blog Web Tasarım Wordpress

Web geliştirme dünyasında, kullanıcı deneyimini artırmak ve dikkat çekmek için birçok teknik kullanılır. Bu yazıda, iki farklı JavaScript kod örneği üzerinden, web sayfasının sekme başlığının (title) nasıl değiştirileceğini ve bu değişikliklerin kullanıcı etkileşimiyle nasıl ilişkilendirileceğini inceleyeceğiz.

1. Kullanıcı Sekmeden Ayrıldığında ve Geri Geldiğinde Başlığın Değiştirilmesi

İlk kod örneğinde, kullanıcı sekmeden ayrıldığında (blur olayı) ve geri geldiğinde (focus olayı) sekme başlığını değiştiren bir yapı kurulmuştur. Ayrıca, kullanıcının kaç kere sekmeden ayrıldığını sayarak, belirli sayıda ayrılma durumunda farklı başlıklar gösterilmiştir.

$(function () {

    var pageTitle = $("title").text(); // Orijinal başlığı saklar
    var kacKere = 0; // Sekmeden ayrılma sayısını tutar

    $(window).blur(function () {
        kacKere++; // Kullanıcı sekmeden ayrıldığında sayaç artar

        // Ayrılma sayısına göre başlık değişikliği
        if (kacKere == 1)
            $("title").text("Niye gittin..");
        else if (kacKere == 2)
            $("title").text("Geri gel :(");
        else if (kacKere == 3)
            $("title").text("Gelsene :(");
        else if (kacKere == 4)
            $("title").text("Küserim bak :(");
        else if (kacKere > 4)
            $("title").text("Küstüm -_-");
    });

    $(window).focus(function () {
        $("title").text(pageTitle); // Kullanıcı geri geldiğinde orijinal başlık geri yüklenir

        // Eğer kullanıcı beşten fazla kez ayrıldıysa, geri döndüğünde özel başlık gösterilir
        if (kacKere > 4)
            $("title").text(":))) " + pageTitle);
    });
});

Kodun Detaylı Açıklaması:

• Başlangıç Değişkenleri:
  • pageTitle: Sayfanın orijinal başlığını saklamak için kullanılır.
  • kacKere: Kullanıcının sekmeden kaç kere ayrıldığını tutar.
• blur Olayı:
  • Kullanıcı sekmeden ayrıldığında tetiklenir.
  • kacKere değişkeni her blur olayında 1 artar.
  • Ayrılma sayısına göre title elemanının metni değiştirilir.
• focus Olayı:
  • Kullanıcı sekmeye geri döndüğünde tetiklenir.
  • Sayfanın başlığı orijinal pageTitle ile geri yüklenir.
  • kacKere sayısı 4’ü geçtiğinde özel bir başlık eklenir.

2. Kullanıcı Sekmeden Ayrıldığında ve Geri Geldiğinde Basit Başlık Değiştirme

İkinci kod örneği daha basit bir yapı sunar. Kullanıcı sekmeden ayrıldığında belirli bir başlık gösterilir ve geri döndüğünde orijinal başlık geri yüklenir.

<script type="text/javascript">
var title = document.title; // Orijinal başlığı saklar
var alttitle = "Buraya gelir misin lütfen"; // Sekmeden ayrıldığında gösterilecek başlık
window.onblur = function () { document.title = alttitle; }; // blur olayında başlık değiştirilir
window.onfocus = function () { document.title = title; }; // focus olayında başlık geri yüklenir
</script>

Kodun Detaylı Açıklaması:

• Başlangıç Değişkenleri:
  • title: Sayfanın orijinal başlığını saklamak için kullanılır.
  • alttitle: Kullanıcı sekmeden ayrıldığında gösterilecek başlık.
• blur Olayı:
  • Kullanıcı sekmeden ayrıldığında (onblur), title elemanının metni alttitle olarak değiştirilir.
• focus Olayı:
  • Kullanıcı sekmeye geri döndüğünde (onfocus), title elemanının metni orijinal title değeri ile geri yüklenir.

Kullanım Durumları ve Uygulamalar

Bu tür başlık değiştirme teknikleri, özellikle kullanıcı dikkatini çekmek için kullanışlıdır. Örneğin:

• E-ticaret Siteleri:
  • Kullanıcı alışveriş yaparken sekmeden ayrıldığında, geri dönmesi için teşvik edici mesajlar gösterilebilir.
• Blog ve İçerik Siteleri:
  • Kullanıcıya ilgi çekici başlıklar göstererek sayfada daha fazla vakit geçirmesi sağlanabilir.
• Eğitim ve Kurs Siteleri:
  • Öğrencilerin dikkatini derse veya eğitime geri çekmek için kullanılabilir.

Bu teknikler, jQuery veya saf JavaScript kullanarak kolayca uygulanabilir. Kullanıcı deneyimini artırmak ve etkileşimi artırmak için küçük ama etkili bir yöntemdir.

• başlık değiştirmefreelance web tasarımhazır kodhostingerJavascriptsite açuxuzaktan web site kuruzmanwebweb site kurweb tasarımwordpress