Yayınlama ve embed

Paylaş › Bağlantı ve embed bölümü iki iş yapar: öğeyi yayına alır ve
sitene yapıştıracağın kodu verir. Bölüm açılınca önce "Yayın durumu
yükleniyor…" görürsün, sonra Embed türü seçici gelir.

Üç embed türü

Her türün altında kısa bir açıklama yazar:

• İnteraktif: "Editör-birebir (interaktif) — stilli tooltip + animasyon. Değişikliklerin sitene yansıması için Yeniden yayınla; kodu yeniden yapıştırman gerekmez. Çoğu sitede sıfır işlem; katı CSP'li sitelerde host'un frame-src'ine tuvelia.com eklenmeli. Koddaki küçük betik kutuyu telefonda uzatır; siten betikleri siliyorsa gömme yine çalışır, yalnız kutu sabit oranda kalır."
• Inline (SEO): "Bot-dostu, her yerde çalışır. Self-contained SVG doğrudan yapıştırılır; CSP/izin gerektirmez, arama motoru ve AI botları veriyi okur. Statik: veri değişince tekrar yapıştır."
• Otomatik: "Otomatik (e.js) — script enjekte; katı CSP'li sitelerde çalışmaz. Onun yerine İnteraktif ya da Inline tercih et. Değişiklikler Yeniden yayınla ile yansır."

Kararı iki soru belirler. Sayfan grafiğin güncel kalmasını mı istiyor,
yoksa bir kez basılıp durmasını mı? Güncel kalacaksa İnteraktif ya da
Otomatik; sabit kalacaksa Inline. Ve sayfanın sahibi dış iframe/betik
yüklemeye izin veriyor mu? Vermiyorsa Inline tek seçenektir.

Inline (SEO) yayın istemez: "Inline SVG kodu" alanı grafiğin o anki
hâlini hazır getirir ("SVG hazırlanıyor…" kısa bir bekleyiştir),
Inline SVG'yi kopyala ile alırsın. Kopyaladığın şey grafiğin fotoğrafı
değil, kendisidir; okuyucunun tarayıcısı Tuvelia'ya hiç istek atmaz.

Yayına alma

İnteraktif ya da Otomatik seçtiğinde ve öğe yayında değilse bölüm şunu söyler:
"Bu tür için önce yayınlamak gerekir — herkese açık bir /embed/… adresi
oluşur." Yayınla düğmesi (daha önce yayınlayıp kaldırdıysan
Yeniden yayınla) öğenin o anki görüntüsünü ve verisini yayına alır.

Yayından sonra:

• Kod alanı dolar ("iframe kodu" ya da "e.js kodu"), Kopyala ile alırsın;
  düğme kısa süre "Kopyalandı" yazar.
• Altında yayındaki adres tıklanabilir görünür. İnteraktif türde bu adres
  canlı sayfadır (/embed/…/live), Otomatik türde statik sayfa (/embed/…).
• Pencere başlığındaki durum "Yayında · /embed/…" olur.

Yayındaki adres gerçek bir sayfadır ve tek başına açılabilir, ama arama
motorlarına kapalıdır — aynı içerik hem senin sayfanda hem burada
indekslenip birbiriyle yarışmasın diye.

Gömme dili

Grafiğin ya da haritanın metinlerini öteki dile çevirdiysen
(aynı öğede iki dil), paylaşım penceresinin
sol menüsünün altında Dil seçicisi çıkar. Seçim bütün bölümler için geçerlidir
(görsel, PDF ve video da o dilde üretilir); bu bölümde İnteraktif kodun
adresine yazılır:

İki dilde yayınlamak için iki kodu iki sayfaya yapıştırırsın; yayın tektir,
Yeniden yayınla iki dili birlikte günceller. Okuyucunun tarayıcısına ya da
bulunduğu ülkeye göre dil seçilmez — dili kodu alan sen seçersin.

Inline ve Otomatik kodlar yayına alınırken çekilen hazır görseli taşır;
o görsel yalnız ana dildedir. Öteki dil seçiliyken bu iki türde uyarı çıkar.

Adresi WordPress gibi oEmbed kullanan bir yere yapıştırırsan dilli adres
(…/live/en) de çalışır; başlık o dilin çevirisiyle gelir.

Veri değişince ne olur

Öğe yayındayken editörde yaptığın değişiklik yayındaki kopyaya kendiliğinden
geçmez. Sitende görünen, en son yayınladığın sürümdür. Değişiklik sitene hazır
olduğunda Yeniden yayınla'ya basarsın (ipucu: "Snapshot'ı şimdi yenile").
Yayındaki sürüm editördekinin gerisindeyse bölüm bunu "Yayındaki sürüm geride"
uyarısıyla söyler.

• İnteraktif ve Otomatik embed'lerde kodu yeniden kopyalaman gerekmez:
  kod aynı kalır, yeniden yayınladığın an yeni sürümü gösterir.
• Inline SVG yapıştırdığın anda donmuştur; güncellemek için bölüme dönüp
  yeniden kopyalayıp yapıştırırsın.

Bu bilinçli bir tercih: yarım kalmış bir düzenleme okuyucuna yanlışlıkla
yansımasın diye yayın senin onayınla olur.

Yayından kaldırma

Yayından kaldır düğmesinin ipucu sonucu söyler: "Public adres anında 404
döner; geri alınabilir." Yani sitene gömdüğün iframe ve otomatik embed'ler o
anda boş kalır; inline SVG'ler etkilenmez (onlar zaten senin sayfandadır).
Yeniden yayınla dersen aynı adres yeniden çalışır — adres değişmez.

Yayındaki bir öğe silinemez; önce yayından kaldırman gerekir. Kural
öğeler sayfasında.

Kodun içinde ne var

• iframe kodu: genişliği %100, en-boy oranı grafiğin ölçüsünden gelir;
  zaman imleci olan bir grafik ya da haritada kod, kaydırıcı şeridi için
  biraz daha uzun bir boy taşır (statik görselde şerit olmadığı için o boy
  yalnız iframe'e eklenir). Grafik ve haritada kodun ikinci satırı Tuvelia'nın
  küçük betiğidir (e.js): kutuyu telefonda uzatır (aşağıda). Anlatı çizelgesi
  ve karşılaştırma kodu bu satırı taşımaz.
• Inline SVG kodu: grafiğin genişliğiyle sınırlı, ortalanmış bir kap ve
  içinde duyarlı (responsive) SVG.
• e.js kodu: kimliği taşıyan bir kap, betik çalışmazsa görünecek bir
  yedek görsel bağlantısı ve Tuvelia'nın betiği.

Telefonda nasıl görünür

İnteraktif embed, sitene yapıştırdığın kutunun genişliğine göre yeniden çizilir;
kod aynı kalır, senin bir şey yapman gerekmez.

Kutu telefonda uzar (grafik ve harita). Koddaki betik kutunun genişliğine
bakar: 480 piksel ve daha dar ekranda kutu en az kare olur (375 piksellik bir
telefonda 375×234 yerine 375×375), 800 piksel ve daha genişte senin grafiğinin
oranında kalır, arada yavaşça geçer. Telefonu yan çevirince kutu yeniden
ölçülür. Kazanılan yer çizime gider; başlık, lejant ve künye aynı boyda kalır.

• Siten betikleri siliyorsa (bazı içerik yönetim sistemleri) gömme yine çalışır;
  kutu yalnız uzamaz, grafiğin oranında kalır.

• Daha önce yapıştırdığın kod uzamaz, ama çalışmaya devam eder. Uzamasını
  istiyorsan kodu buradan bir kez yeniden kopyalayıp eskisinin yerine yapıştır.

• Aynı sayfada birden çok gömme varsa betik satırı her kodda yinelenir; bu
  zararsızdır, betik her kutuyu bir kez ele alır.

• Harita: dar kutuda başlık, lejant ve künye haritanın üstüne binmez; kendi
  şeritlerine iner. Ayrıntısı harita paylaşma sayfasında.

• Grafik: kutuyu boydan boya doldurur. Editörde verdiğin sabit genişlik ve
  yükseklik interaktif embed'de yok sayılır — kutu ne kadarsa grafik o kadardır
  (sabit ölçü indirilen görselde ve inline SVG'de geçerliliğini korur).

• Dar kutuda başlık ve alt başlık orantılı küçülür (800 piksel ve üstünde senin
  seçtiğin boyda kalır), kenar boşluğu daralır.

• Dar kutuda eksen yazıları ve çubuk üstündeki değerler birbirine binecekse
  seyreltilir: her ikincisi ya da üçüncüsü yazılır. Gizlenen çubuğun adını ve
  değerini okuyucu üstüne gelince (telefonda dokununca) ipucunda görür.
  Alt eksendeki adların hepsinin yazılmasını istiyorsan grafiğin
  X etiketleri ayarını Otomatik yap: adlar sığmadığında
  eğik ya da dikey yazılır ve hiçbiri gizlenmez.

• Lejant dar kutuda da düşmez; sığmayan uzun seri adı "…" ile kısalır, tam
  hâli üstüne gelince görünür.

İnteraktif embed'de künyedeki "Made with Tuvelia" yazısının Tuvelia
sözcüğü tıklanabilir ve tuvelia.com'u yeni sekmede açar; okuyucu senin
sayfandan ayrılmaz. Otomatik embed'de ve görselde bu yazı düz metindir —
sayfana yerleşen bir görselde bağlantı olsaydı tıklayan okuyucu senin sayfandan
çıkıp gidebilirdi. Yazıyı grafikte de haritada da künye ayarlarından
kapatabilirsin.

Sık karşılaşılanlar

"Önizleme henüz hazır değil, tekrar deneyin."

Grafik tuvali daha çizilmeden Yayınla'ya basıldı. Bir an bekleyip yeniden
bas.

"Yayınlama başarısız. Tekrar deneyin." · "Yayından kaldırma başarısız. Tekrar deneyin."

Sunucu isteği reddetti ve kendi mesajını vermediyse bu genel metni görürsün.
Bağlantını kontrol edip yeniden dene; sürerse sayfayı yenile.

Embed sitemde görünmüyor

İnteraktif ya da Otomatik türü seçtiysen ve site katı bir içerik güvenlik
politikası uyguluyorsa (bölüm açıklamalarındaki CSP notu) embed engellenir.
Inline (SEO) türü izin gerektirmez; onu dene.