Bu sayfa, Cloud Translation API ile çevrilmiştir.

Daha önce hiç kimsenin bağlantı kurmadığı yerlerde kalın bağlantı oluşturun: Metin Parçaları

Metin parçaları, URL parçasında bir metin snippet'i belirtmenize olanak tanır. Tarayıcı, bu tür bir metin parçası içeren bir URL'ye gidildiğinde metni vurgulayabilir ve/veya kullanıcının dikkatine sunabilir.

Thomas Steiner

Parça Tanımlayıcılar

Chrome 80 önemli bir sürümdü. Web Çalışanlarında ECMAScript Modülleri, boş birleştirme, isteğe bağlı zincirleme gibi çok beklenen özelliklerin yanı sıra daha birçok özellik bu sürümde kullanıma sunuldu. Bu sürüm her zamanki gibi Chromium blogundaki bir blog yayınıyla duyuruldu. Aşağıdaki ekran görüntüsünde blog yayınının bir alıntısını görebilirsiniz.

`id` özelliğine sahip öğelerin etrafında kırmızı kutular bulunan Chromium blog yayını.

Muhtemelen tüm kırmızı kutuların ne anlama geldiğini merak ediyorsunuzdur. Bunlar, DevTools'ta aşağıdaki snippet'in çalıştırılmasının sonucudur. id özelliğine sahip tüm öğeleri vurgular.

document.querySelectorAll('[id]').forEach((el) => {
  el.style.border = 'solid 2px red';
});

Sayfanın URL'sinin karmasında kullandığım parça tanımlayıcısı sayesinde, kırmızı kutuyla vurgulanan tüm öğelere derin bağlantı yerleştirebilirim. Kenardaki Ürün forumlarımızda geri bildirim verin kutusuna derin bağlantı vermek istediğimi varsayalım. Bu işlemi, URL'yi manuel olarak oluşturarak yapabilirimhttps://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1. Geliştirici Araçları'nın Öğeler panelinde görebileceğiniz gibi, söz konusu öğe HTML1 değerine sahip bir id özelliğine sahip.

Bir öğenin `id` özelliğini gösteren Geliştirici Araçları.

Bu URL'yi JavaScript'in URL() kurucusuyla ayrıştırırsam farklı bileşenler ortaya çıkar. #HTML1 değerine sahip hash özelliğine dikkat edin.

new URL('https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1');
/* Creates a new `URL` object
URL {
  hash: "#HTML1"
  host: "blog.chromium.org"
  hostname: "blog.chromium.org"
  href: "https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1"
  origin: "https://blog.chromium.org"
  password: ""
  pathname: "/2019/12/chrome-80-content-indexing-es-modules.html"
  port: ""
  protocol: "https:"
  search: ""
  searchParams: URLSearchParams {}
  username: ""
}
*/

Bir öğenin id değerini bulmak için Geliştirici Araçları'nı açmak zorunda kalmam, sayfanın bu belirli bölümünün blog yayınının yazarı tarafından bağlantı verilecek olması olasılığı hakkında çok şey söylüyor.

id olmadan bir şeye bağlantı vermek istersem ne olur? Web Çalışanlarında ECMAScript Modülleri başlığına bağlantı vermek istediğimi varsayalım. Aşağıdaki ekran görüntüsünde görebileceğiniz gibi söz konusu <h1>, id özelliğine sahip değil. Bu nedenle bu başlığa bağlamam mümkün değil. Bu, Metin Parçalarının çözdüğü sorundur.

`id` içermeyen bir başlık gösteren Geliştirici Araçları.

Metin Parçaları

Metin Parçaları önerisi, URL karmasında bir metin snippet'i belirtme desteği ekler. Kullanıcı aracısı, böyle bir metin parçasına sahip bir URL'ye gidildiğinde bunu vurgulayabilir ve/veya kullanıcının dikkatini çekebilir.

Tarayıcı uyumluluğu

Tarayıcı desteği

Kaynak

Güvenlik nedeniyle, bu özellik için bağlantıların noopener bağlamında açılması gerekir. Bu nedenle, <a> sabit işaretlemenize rel="noopener" öğesini eklemeyi veya Window.open() pencere işlevi özellikleri listenize noopener özelliğini eklemeyi unutmayın.

`start`

Metin parçalarının en basit söz dizimi şu şekildedir: Karma sembolü #, ardından :~:text= ve son olarak start. Bu semboller, bağlamak istediğim yüzde kodlanmış metni temsil eder.

#:~:text=start

Örneğin, Chrome 80'deki özellikleri duyuran blog yayınındaki Web İşleyiciler'deki ECMAScript Modülleri başlığına bağlantı vermek istediğimizi varsayalım. Bu durumda URL şu şekilde olur:

https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers

Metin parçası böyle vurgulanır. Bağlantıyı Chrome gibi destekleyen bir tarayıcıda tıklarsanız metin parçası vurgulanır ve görünüme doğru kaydırılır:

Metin parçası görünümün içine kaydırılmış ve vurgulanmış.

`start` ve `end`

Peki, Web İşleyicilerindeki ECMAScript Modülleri başlıklı bölümün tamamını değil de yalnızca başlığını bağlamak istersem ne yapmalıyım? Bölümün metninin tamamının yüzde kodlaması yapılması, ortaya çıkan URL'yi pratik olmayan bir şekilde uzun hale getirir.

Neyse ki daha iyi bir yol var. Metnin tamamı yerine, start,end söz dizimini kullanarak istenen metni çerçeveleyebilirim. Bu nedenle, istenen metnin başına ve sonuna virgülle ayrılmış birkaç yüzde kodlu kelime , eklerim.

Bu durum şöyle görünür:

https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules%20in%20Web%20Workers,ES%20Modules%20in%20Web%20Workers..

start için ECMAScript%20Modules%20in%20Web%20Workers, ardından virgül , ve end olarak ES%20Modules%20in%20Web%20Workers. var. Chrome gibi desteklenen bir tarayıcıda tıkladığınızda bölümün tamamı vurgulanır ve ekrana kaydırılır:

Metin parçası ekrana kaydırılıp vurgulandı.

start ve end seçeneklerini neden tercih ettiğimi merak edebilirsiniz. Aslında, her bir tarafında yalnızca iki kelime bulunan biraz daha kısa olan https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers. URL de kullanılabilirdi. start ve end değerlerini önceki değerlerle karşılaştırın.

Bir adım daha ileri gider ve hem start hem de end için tek bir kelime kullanırsam başımın belada olduğunu görebilirsiniz. https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript,Workers. URL'si artık daha da kısa ancak vurgulanan metin parçası artık başlangıçta istenen parça değil. Vurgu, Workers. kelimesinin ilk geçtiği yerde durur. Bu doğrudur ancak vurgulamak istediğim yer değildir. Sorun, istenen bölümün mevcut tek kelimelik start ve end değerleriyle benzersiz şekilde tanımlanmamasıdır:

İstenmeyen metin parçası ekrana kaydırılıp vurgulandı.

`prefix-` ve `-suffix`

Benzersiz bir bağlantı elde etmenin bir yolu, start ve end için yeterince uzun değerler kullanmaktır. Ancak bazı durumlarda bu mümkün değildir. Örnek olarak neden Chrome 80 sürümünü yayınlama konulu blog yayınını seçtim? Bunun nedeni, bu sürümde metin parçalarının kullanıma sunulmuş olmasıdır:

Blog yayını metni: Metin URL'si Parçaları. Kullanıcılar veya yazarlar artık bir URL'de sağlanan metin parçasını kullanarak bir sayfanın belirli bir bölümüne bağlantı verebilir. Sayfa yüklendiğinde tarayıcı metni vurgular ve parçayı görüntüye getirir. Örneğin, aşağıdaki URL, "Cat" için bir wiki sayfası yükler ve "text" parametresinde listelenen içeriğe gider. — Metin Kırpıntıları duyurusu blog yayını alıntısı.

Yukarıdaki ekran görüntüsünde "metin" kelimesinin dört kez nasıl göründüğüne dikkat edin. Dördüncü kullanım yeşil kod yazı tipiyle yazılmıştır. Bu kelimeye bağlantı vermek isteseydim start değerini text olarak ayarlardım. "Metin" kelimesi olduğu için yalnızca tek bir kelime olduğundan end olamaz. Şimdi ne yapmalıyım? https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text URL'si, başlıkta bulunan "Metin" kelimesinin ilk oluşumunda eşleşir:

"Metin"in ilk oluşumunda eşleşen metin parçası.

Neyse ki bunun bir çözümü var. Bu gibi durumlarda bir prefix- ve bir -suffix belirtebilirim. Yeşil kod yazı tipinden "metin"den önceki kelime "the", sonraki kelime ise "parameter"dir. "metin" kelimesinin diğer üç örneğinde de aynı çevreleyen kelimeler yoktur. Bu bilgiden yararlanarak önceki URL'yi düzenleyebilir ve prefix- ile -suffix değerlerini ekleyebilirim. Diğer parametreler gibi bu parametrelerin de yüzde kodlu olması gerekir ve birden fazla kelime içerebilirler. https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=the-,text,-parameter seçeneğine dokunun. Ayrıştırıcının prefix- ve -suffix öğelerini açıkça tanımlamasını sağlamak için bunların start ve isteğe bağlı end değerlerinden tire - ile ayrılması gerekir.

"metin"in istenen yerde eşleşen metin parçası.

Tam söz dizimi

Metin Kırıntıları'nın tam söz dizimi aşağıda gösterilmiştir. (Köşeli parantezler, isteğe bağlı parametreyi belirtir.) Tüm parametrelerin değerlerinin yüzde kodlaması yapılmış olması gerekir. Bu, özellikle kısa çizgi -, & & ve virgül , karakterleri için önemlidir. Bu karakterler, metin yönergesi söz dizesinin bir parçası olarak yorumlanmamalıdır.

#:~:text=[prefix-,]start[,end][,-suffix]

prefix-, start, end ve -suffix'in her biri yalnızca tek bir blok düzeyinde öğe içindeki metinle eşleşir ancak tam start,end aralıkları birden fazla bloku kapsayabilir. Örneğin, "The quick" başlangıç dizesi tek bir kesintisiz blok düzeyinde öğe içinde görünmediği için aşağıdaki örnekte :~:text=The quick,lazy dog eşleşmez:

<div>
  The
  <div></div>
  quick brown fox
</div>
<div>jumped over the lazy dog</div>

Ancak bu örnekte eşleşir:

<div>The quick brown fox</div>
<div>jumped over the lazy dog</div>

Tarayıcı uzantısı ile metin parçası URL'leri oluşturma

Metin parçası URL'lerini manuel olarak oluşturmak, özellikle de benzersiz olduklarından emin olmak söz konusu olduğunda zahmetli bir işlemdir. Gerçekten isterseniz, spesifikasyonda bazı ipuçları ve Metin Parçası URL'leri oluşturmaya yönelik adımları tam olarak listeledik. Metin Parçasına Bağlantı adlı açık kaynak tarayıcı uzantısı sunuyoruz. Bu uzantı, istediğiniz metni seçip bağlam menüsünde "Seçilen Metne Kopyala"yı tıklayarak metinle bağlantı oluşturmanıza olanak tanır. Bu uzantı aşağıdaki tarayıcılarda kullanılabilir:

Link to Text Fragment tarayıcı uzantısı.

Tek bir URL'de birden fazla metin parçası

Bir URL'de birden fazla metin parçasının görünebileceğini unutmayın. Belirli metin parçalarının "ve" karakteriyle (&) ayrılması gerekir. Üç metin parçası içeren örnek bir bağlantıyı aşağıda bulabilirsiniz: https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&text=text,-parameter&text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet.

Öğe ile metin parçalarını karıştırma

Geleneksel öğe parçaları, metin parçalarıyla birleştirilebilir. Her ikisinin de aynı URL'de olmasında herhangi bir sakınca yoktur. Örneğin, sayfadaki orijinal metin değişirse ve metin parçası artık eşleşmezse anlamlı bir yedek sağlamak için bu yöntemi kullanabilirsiniz. Ürün Forumlarımızda bize geri bildirim verin bölümüne bağlanan URL https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums. hem bir öğe parçasını (HTML1) hem de bir metin parçasını (text=Give%20us%20feedback%20in%20our%20Product%20Forums.) içerir:

Hem öğe parçası hem de metin parçasıyla bağlantı oluşturma.

Parça yönergesi

Söz diziminde henüz açıklamadığım bir öğe var: :~: parça yönü. Yukarıda gösterildiği gibi mevcut URL öğesi parçalarıyla uyumluluk sorunlarını önlemek için Metin Parçaları spesifikasyonu, parça yönergesini kullanıma sunar. Parça yönergesi, URL parçasının :~: kod sırasıyla ayrılmış bir bölümüdür. text= gibi kullanıcı aracısı talimatları için ayrılmıştır ve yazar komut dosyalarının doğrudan etkileşime geçememesi için yükleme sırasında URL'den çıkarılır. Kullanıcı aracısı talimatları yönergeler olarak da adlandırılır. Bu durumda text=, metin direktifi olarak adlandırılır.

Özellik algılama

Desteği algılamak için document üzerinde salt okuma fragmentDirective mülkünü test edin. Parça yönergesi, URL'lerin belge yerine tarayıcıya yönelik talimatlar belirtmesini sağlayan bir mekanizmadır. Yazar komut dosyasıyla doğrudan etkileşimi önlemek için kullanılır. Böylece, mevcut içerikte önemli değişiklikler yapma korkusu olmadan gelecekteki kullanıcı aracısı talimatları eklenebilir. Gelecekte eklenebilecek bu tür özelliklerden biri çeviri ipuçları olabilir.

if ('fragmentDirective' in document) {
  // Text Fragments is supported.
}

Not: Chrome 80 ile Chrome 85 arasında fragmentDirective mülkü Location.prototype üzerinde tanımlandı. Bu değişiklikle ilgili ayrıntılar için WICG/scroll-to-text-fragment#130 sayfasına göz atın.

Özellik algılama, metin parçaları bağlantılarının bunları desteklemeyen tarayıcılara sunulmasını önlemek için bağlantıların dinamik olarak oluşturulduğu (ör. arama motorları tarafından) durumlarda kullanılır.

Metin parçalarına stil uygulama

Tarayıcılar, varsayılan olarak metin parçalarına mark'a (genellikle mark için CSS sistem renkleri olan sarı zemin üzerine siyah) aynı şekilde stil uygular. Kullanıcı aracısı stil sayfası, aşağıdaki gibi görünen CSS içerir:

:root::target-text {
  color: MarkText;
  background: Mark;
}

Gördüğünüz gibi tarayıcı, uygulanan vurguyu özelleştirmek için kullanabileceğiniz bir sözde seçici ::target-text gösterir. Örneğin, metin parçalarınızı kırmızı arka plan üzerinde siyah metin olacak şekilde tasarlayabilirsiniz. Her zaman olduğu gibi, geçersiz kılma stilinizin erişilebilirlik sorunlarına neden olmaması için renk kontrastını kontrol edin ve vurgulamanın görsel olarak içeriğin geri kalanından öne çıktığından emin olun.

:root::target-text {
  color: black;
  background-color: red;
}

Çoklu doldurulabilirlik

Metin Kırıntıları özelliği, belirli ölçüde polyfill ile doldurulabilir. İşlevin JavaScript'de uygulandığı metin parçaları için yerleşik destek sağlamayan tarayıcılarda, uzantı tarafından dahili olarak kullanılan bir çoklu dolgu sağlarız.

Programatik metin parçası bağlantısı oluşturma

Polifill, içe aktarıp metin parçası bağlantıları oluşturmak için kullanabileceğiniz bir dosyafragment-generation-utils.js içerir. Bu, aşağıdaki kod örneğinde özetlenmiştir:

const { generateFragment } = await import('https://unpkg.com/text-fragments-polyfill/dist/fragment-generation-utils.js');
const result = generateFragment(window.getSelection());
if (result.status === 0) {
  let url = `${location.origin}${location.pathname}${location.search}`;
  const fragment = result.fragment;
  const prefix = fragment.prefix ?
    `${encodeURIComponent(fragment.prefix)}-,` :
    '';
  const suffix = fragment.suffix ?
    `,-${encodeURIComponent(fragment.suffix)}` :
    '';
  const start = encodeURIComponent(fragment.textStart);
  const end = fragment.textEnd ?
    `,${encodeURIComponent(fragment.textEnd)}` :
    '';
  url += `#:~:text=${prefix}${start}${end}${suffix}`;
  console.log(url);
}

Analiz amacıyla Metin Parçaları Edinme

Birçok site yönlendirme için parçayı kullanır. Bu nedenle tarayıcılar, bu sayfaların bozulmaması için metin parçalarını kaldırır. Örneğin, analiz amacıyla Metin Parçaları bağlantılarının sayfalara gösterilmesi gerektiği kabul edilir ancak önerilen çözüm henüz uygulanmamıştır. Şimdilik geçici bir çözüm olarak, istediğiniz bilgileri ayıklamak için aşağıdaki kodu kullanabilirsiniz.

new URL(performance.getEntries().find(({ type }) => type === 'navigate').name).hash;

Güvenlik

Metin parçası yönergeleri yalnızca kullanıcı etkinleştirmesinin sonucu olan tam (aynı sayfa olmayan) gezinmelerde çağrılır. Ayrıca, hedeften farklı bir kaynaktan gelen gezinmelerin, gezinmenin noopener bağlamında gerçekleşmesini gerektirmesi gerekir. Bu bağlamda, hedef sayfanın yeterince izole edildiği bilinir. Metin parçası yönergeleri yalnızca ana çerçeveye uygulanır. Bu, metnin iframe'lerde aranmayacağı ve iframe gezinmesinin bir metin parçası çağırmayacağı anlamına gelir.

Gizlilik

Metin Fragmentleri spesifikasyonunun uygulamalarında, bir sayfada metin fragmenti bulunup bulunmadığının sızdırılmaması önemlidir. Öğe parçaları tamamen orijinal sayfa yazarının kontrolünde olsa da metin parçaları herkes tarafından oluşturulabilir. Yukarıdaki örneğimde, <h1> öğesinde id olmadığı için Web İşleyicilerindeki ECMAScript Modülleri başlığına bağlantı vermenin mümkün olmadığını, ancak benim de dahil olduğum herkes, metin parçasını dikkatlice oluşturarak herhangi bir yere bağlantı verebileceğini hatırlıyor musunuz?

Kötü bir reklam ağı evil-ads.example.com yönettiğimi varsayalım. Ayrıca, reklam iFrame'lerimden birinde, kullanıcı reklamla etkileşime geçtiğinde dating.example.com için dinamik olarak gizli bir kaynakta çapraz iFrame oluşturduğumu ve bu iFrame'de bir TextFragment URL'si dating.example.com#:~:text=Log%20Out kullandığımı varsayalım. "Oturumu Kapat" metni bulunursa kurbanın şu anda dating.example.com'te oturum açtığını bilirim. Bu bilgiyi kullanıcı profilleme için kullanabilirim. Basit bir TextFragments uygulaması, başarılı bir eşleşmenin odak değişimine neden olması gerektiğine karar verebileceğinden, evil-ads.example.com üzerinde blur etkinliğini dinleyerek eşleşmenin ne zaman gerçekleştiğini öğrenebilirim. Chrome'da, Metin Parçalarını yukarıdaki senaryonun gerçekleşmeyeceği şekilde uyguladık.

Diğer bir saldırı, kaydırma konumuna göre ağ trafiğini kötüye kullanmak olabilir. Bir şirket intranet'inin yöneticisi olarak kurbanımın ağ trafiği günlüklerine erişebildiğimi varsayalım. Şimdi, Şu Durumlardan Biri Olursa Ne Yapmalısınız? başlıklı uzun bir insan kaynakları belgesi ve tükenmişlik, anksiyete gibi durumların yer aldığı bir liste olduğunu hayal edin. Listedeki her öğenin yanına bir izleme pikseli yerleştirebilirim. Ardından, dokümanın yüklenmesinin, tükenmişlik öğesinin yanındaki izleme pikselinin yüklenmesiyle zamansal olarak aynı anda gerçekleştiğini belirlersem intranet yöneticisi olarak bir çalışanın, gizli olduğunu ve hiç kimse tarafından görülemeyeceğini düşündüğü bir :~:text=burn%20out içeren metin parçası bağlantısını tıkladığını belirleyebilirim. Bu örnek başlangıçta biraz yapay olduğundan ve istismarının çok belirli ön koşulların karşılanması gerektiğinden Chrome güvenlik ekibi, gezinme sırasında kaydırma özelliğini uygulama riskini yönetilebilir olarak değerlendirdi. Diğer kullanıcı aracıları bunun yerine manuel kaydırma kullanıcı arayüzü öğesi göstermeye karar verebilir.

Kapsam dışında kalmayı tercih eden siteler için Chromium, kullanıcı aracılarının metin parçası URL'lerini işlememesi amacıyla gönderebilecekleri bir Belge Politikası üstbilgi değerini destekler.

Document-Policy: force-load-at-top

Metin parçalarını devre dışı bırakma

Bu özelliği devre dışı bırakmanın en kolay yolu, HTTP yanıt üstbilgileri ekleyebilen bir uzantı kullanmaktır. Örneğin, ModHeader (Google ürünü değildir) uzantısı, aşağıdaki gibi bir yanıt (istek değil) üstbilgisi eklemek için kullanılabilir:

Document-Policy: force-load-at-top

Kapsam dışında kalmayı tercih etmenin daha ayrıntılı bir yolu da kurumsal ayarı ScrollToTextFragmentEnabled kullanmaktır. Bu işlemi macOS'te yapmak için aşağıdaki komutu terminale yapıştırın.

defaults write com.google.Chrome ScrollToTextFragmentEnabled -bool false

Windows'ta, Google Chrome Enterprise Yardım destek sitesindeki dokümanları uygulayın.

Web aramasındaki metin parçaları

Google arama motoru, bazı aramalar için ilgili web sitesinden içerik snippet'i ile hızlı bir yanıt veya özet sağlar. Bu öne çıkan snippet'lerin soru biçiminde yapılan aramalarda görünme olasılığı daha yüksektir. Öne çıkan snippet'i tıklamak kullanıcıyı, doğrudan kaynak web sayfasındaki öne çıkan snippet metnine yönlendirir. Bu, otomatik olarak oluşturulan Metin Parçaları URL'leri sayesinde çalışır.

Tıkladıktan sonra sayfanın ilgili bölümü kaydırılarak görüntülenir.

Sonuç

Metin Parçaları URL'si, web sayfalarında rastgele metinlere bağlantı vermek için güçlü bir özelliktir. Akademik topluluk, çok doğru alıntı veya referans bağlantıları sağlamak için bu özelliği kullanabilir. Arama motorları, sayfalardaki metin sonuçlarına derin bağlantı oluşturmak için bu özelliği kullanabilir. Sosyal ağ siteleri, kullanıcıların erişilemeyen ekran görüntüleri yerine web sayfasının belirli bölümlerini paylaşmasına olanak tanımak için bu özelliği kullanabilir. Metin parçası URL'lerini kullanmaya başlayacağınızı ve benim kadar faydalı bulacağınızı umuyoruz. Metin parçası bağlantısı tarayıcı uzantısını yüklemeyi unutmayın.

İlgili bağlantılar

Teşekkür ederiz

Metin Parçaları, Grant Wang'ın katkılarıyla Nick Burris ve David Bokan tarafından uygulanmış ve belirtilmiştir. Bu makaleyi ayrıntılı bir şekilde inceleyen Joe Medley'e teşekkür ederiz. Unsplash'taki Greg Rakozy tarafından oluşturulan hero resim.