@jjlmoya/utils-social 1.2.0 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (120) hide show
  1. package/package.json +59 -58
  2. package/src/category/i18n/de.ts +23 -0
  3. package/src/category/i18n/id.ts +23 -0
  4. package/src/category/i18n/it.ts +23 -0
  5. package/src/category/i18n/ja.ts +23 -0
  6. package/src/category/i18n/ko.ts +23 -0
  7. package/src/category/i18n/nl.ts +23 -0
  8. package/src/category/i18n/pl.ts +23 -0
  9. package/src/category/i18n/pt.ts +23 -0
  10. package/src/category/i18n/ru.ts +23 -0
  11. package/src/category/i18n/sv.ts +23 -0
  12. package/src/category/i18n/tr.ts +23 -0
  13. package/src/category/i18n/zh.ts +23 -0
  14. package/src/category/index.ts +12 -0
  15. package/src/index.ts +8 -0
  16. package/src/tests/i18n_coverage.test.ts +36 -0
  17. package/src/tests/locale_completeness.test.ts +1 -1
  18. package/src/tests/schemas_fulfillment.test.ts +23 -0
  19. package/src/tests/slug_uniqueness.test.ts +81 -0
  20. package/src/tests/title_quality.test.ts +55 -0
  21. package/src/tool/redditFormatter/i18n/de.ts +193 -0
  22. package/src/tool/redditFormatter/i18n/en.ts +1 -1
  23. package/src/tool/redditFormatter/i18n/es.ts +1 -1
  24. package/src/tool/redditFormatter/i18n/fr.ts +1 -1
  25. package/src/tool/redditFormatter/i18n/id.ts +193 -0
  26. package/src/tool/redditFormatter/i18n/it.ts +193 -0
  27. package/src/tool/redditFormatter/i18n/ja.ts +193 -0
  28. package/src/tool/redditFormatter/i18n/ko.ts +193 -0
  29. package/src/tool/redditFormatter/i18n/nl.ts +193 -0
  30. package/src/tool/redditFormatter/i18n/pl.ts +193 -0
  31. package/src/tool/redditFormatter/i18n/pt.ts +193 -0
  32. package/src/tool/redditFormatter/i18n/ru.ts +193 -0
  33. package/src/tool/redditFormatter/i18n/sv.ts +193 -0
  34. package/src/tool/redditFormatter/i18n/tr.ts +193 -0
  35. package/src/tool/redditFormatter/i18n/zh.ts +193 -0
  36. package/src/tool/redditFormatter/index.ts +15 -7
  37. package/src/tool/safeZones/i18n/de.ts +244 -0
  38. package/src/tool/safeZones/i18n/id.ts +244 -0
  39. package/src/tool/safeZones/i18n/it.ts +244 -0
  40. package/src/tool/safeZones/i18n/ja.ts +244 -0
  41. package/src/tool/safeZones/i18n/ko.ts +244 -0
  42. package/src/tool/safeZones/i18n/nl.ts +244 -0
  43. package/src/tool/safeZones/i18n/pl.ts +244 -0
  44. package/src/tool/safeZones/i18n/pt.ts +244 -0
  45. package/src/tool/safeZones/i18n/ru.ts +244 -0
  46. package/src/tool/safeZones/i18n/sv.ts +244 -0
  47. package/src/tool/safeZones/i18n/tr.ts +244 -0
  48. package/src/tool/safeZones/i18n/zh.ts +244 -0
  49. package/src/tool/safeZones/index.ts +17 -9
  50. package/src/tool/socialImageResizer/i18n/de.ts +211 -0
  51. package/src/tool/socialImageResizer/i18n/en.ts +1 -1
  52. package/src/tool/socialImageResizer/i18n/id.ts +211 -0
  53. package/src/tool/socialImageResizer/i18n/it.ts +211 -0
  54. package/src/tool/socialImageResizer/i18n/ja.ts +211 -0
  55. package/src/tool/socialImageResizer/i18n/ko.ts +211 -0
  56. package/src/tool/socialImageResizer/i18n/nl.ts +211 -0
  57. package/src/tool/socialImageResizer/i18n/pl.ts +211 -0
  58. package/src/tool/socialImageResizer/i18n/pt.ts +211 -0
  59. package/src/tool/socialImageResizer/i18n/ru.ts +211 -0
  60. package/src/tool/socialImageResizer/i18n/sv.ts +211 -0
  61. package/src/tool/socialImageResizer/i18n/tr.ts +211 -0
  62. package/src/tool/socialImageResizer/i18n/zh.ts +211 -0
  63. package/src/tool/socialImageResizer/index.ts +16 -8
  64. package/src/tool/socialValueCalculator/i18n/de.ts +306 -0
  65. package/src/tool/socialValueCalculator/i18n/es.ts +1 -1
  66. package/src/tool/socialValueCalculator/i18n/fr.ts +1 -1
  67. package/src/tool/socialValueCalculator/i18n/id.ts +306 -0
  68. package/src/tool/socialValueCalculator/i18n/it.ts +306 -0
  69. package/src/tool/socialValueCalculator/i18n/ja.ts +306 -0
  70. package/src/tool/socialValueCalculator/i18n/ko.ts +306 -0
  71. package/src/tool/socialValueCalculator/i18n/nl.ts +306 -0
  72. package/src/tool/socialValueCalculator/i18n/pl.ts +306 -0
  73. package/src/tool/socialValueCalculator/i18n/pt.ts +306 -0
  74. package/src/tool/socialValueCalculator/i18n/ru.ts +306 -0
  75. package/src/tool/socialValueCalculator/i18n/sv.ts +306 -0
  76. package/src/tool/socialValueCalculator/i18n/tr.ts +306 -0
  77. package/src/tool/socialValueCalculator/i18n/zh.ts +306 -0
  78. package/src/tool/socialValueCalculator/index.ts +17 -9
  79. package/src/tool/tinderPhotoOptimizer/i18n/de.ts +272 -0
  80. package/src/tool/tinderPhotoOptimizer/i18n/id.ts +272 -0
  81. package/src/tool/tinderPhotoOptimizer/i18n/it.ts +272 -0
  82. package/src/tool/tinderPhotoOptimizer/i18n/ja.ts +272 -0
  83. package/src/tool/tinderPhotoOptimizer/i18n/ko.ts +272 -0
  84. package/src/tool/tinderPhotoOptimizer/i18n/nl.ts +272 -0
  85. package/src/tool/tinderPhotoOptimizer/i18n/pl.ts +272 -0
  86. package/src/tool/tinderPhotoOptimizer/i18n/pt.ts +272 -0
  87. package/src/tool/tinderPhotoOptimizer/i18n/ru.ts +272 -0
  88. package/src/tool/tinderPhotoOptimizer/i18n/sv.ts +272 -0
  89. package/src/tool/tinderPhotoOptimizer/i18n/tr.ts +272 -0
  90. package/src/tool/tinderPhotoOptimizer/i18n/zh.ts +272 -0
  91. package/src/tool/tinderPhotoOptimizer/index.ts +17 -9
  92. package/src/tool/youtubeThumbnail/i18n/de.ts +207 -0
  93. package/src/tool/youtubeThumbnail/i18n/id.ts +207 -0
  94. package/src/tool/youtubeThumbnail/i18n/it.ts +207 -0
  95. package/src/tool/youtubeThumbnail/i18n/ja.ts +207 -0
  96. package/src/tool/youtubeThumbnail/i18n/ko.ts +207 -0
  97. package/src/tool/youtubeThumbnail/i18n/nl.ts +207 -0
  98. package/src/tool/youtubeThumbnail/i18n/pl.ts +207 -0
  99. package/src/tool/youtubeThumbnail/i18n/pt.ts +207 -0
  100. package/src/tool/youtubeThumbnail/i18n/ru.ts +207 -0
  101. package/src/tool/youtubeThumbnail/i18n/sv.ts +207 -0
  102. package/src/tool/youtubeThumbnail/i18n/tr.ts +207 -0
  103. package/src/tool/youtubeThumbnail/i18n/zh.ts +207 -0
  104. package/src/tool/youtubeThumbnail/index.ts +17 -9
  105. package/src/tool/youtubeThumbnailPreviewer/i18n/de.ts +321 -0
  106. package/src/tool/youtubeThumbnailPreviewer/i18n/en.ts +1 -1
  107. package/src/tool/youtubeThumbnailPreviewer/i18n/es.ts +1 -1
  108. package/src/tool/youtubeThumbnailPreviewer/i18n/fr.ts +2 -2
  109. package/src/tool/youtubeThumbnailPreviewer/i18n/id.ts +321 -0
  110. package/src/tool/youtubeThumbnailPreviewer/i18n/it.ts +321 -0
  111. package/src/tool/youtubeThumbnailPreviewer/i18n/ja.ts +321 -0
  112. package/src/tool/youtubeThumbnailPreviewer/i18n/ko.ts +321 -0
  113. package/src/tool/youtubeThumbnailPreviewer/i18n/nl.ts +321 -0
  114. package/src/tool/youtubeThumbnailPreviewer/i18n/pl.ts +321 -0
  115. package/src/tool/youtubeThumbnailPreviewer/i18n/pt.ts +321 -0
  116. package/src/tool/youtubeThumbnailPreviewer/i18n/ru.ts +321 -0
  117. package/src/tool/youtubeThumbnailPreviewer/i18n/sv.ts +321 -0
  118. package/src/tool/youtubeThumbnailPreviewer/i18n/tr.ts +321 -0
  119. package/src/tool/youtubeThumbnailPreviewer/i18n/zh.ts +321 -0
  120. package/src/tool/youtubeThumbnailPreviewer/index.ts +24 -0
@@ -0,0 +1,244 @@
1
+ import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
2
+ import type { ToolLocaleContent } from '../../../types';
3
+ import type { SafeZonesUI } from '../ui';
4
+
5
+ const slug = 'sosyal-guvenli-bolgeler';
6
+ const title = 'Sosyal Güvenli Bölgeler: TikTok, Reels ve Shorts İçin Video Simülatörü';
7
+ const description =
8
+ 'Görsellerinizi ve videolarınızı gerçek sosyal medya arayüzü ile önizleyin. İçeriğinizin her zaman görünür olduğundan emin olun ve yanlışlıkla kırpılmasını önleyin.';
9
+
10
+ const faqData = [
11
+ {
12
+ question: "Sosyal medyada 'Güvenli Bölgeler' nedir?",
13
+ answer:
14
+ "Kullanıcı adı, açıklama, etkileşim düğmeleri (beğen, paylaş) gibi arayüz öğeleri tarafından kapatılma veya bazı cihazlar tarafından uygulanan otomatik kırpılma riski olmadan içeriğin görünür olduğu ekran alanlarıdır.",
15
+ },
16
+ {
17
+ question: 'TikTok videom neden üstten ve alttan kırpılmış görünüyor?',
18
+ answer:
19
+ "TikTok 9:16 en boy oranını kullanır. Videonuz daha genişse uygulama ekranı doldurmak için yakınlaştırma yapar ve bu da kırpılmaya neden olur. Ayrıca alt arayüz videonun bir kısmını kaplar, bu nedenle önemli öğeler merkeze yerleştirilmelidir.",
20
+ },
21
+ {
22
+ question: 'Güvenli bölge Instagram Reels ve YouTube Shorts için aynı mı?',
23
+ answer:
24
+ "Çok benzerdirler ancak özdeş değildirler. YouTube Shorts düğmeleri Reels'tan farklı konumlandırılmıştır. Aracımız, tasarımınızı her birinde doğrulamak için platformlar arasında geçiş yapmanıza olanak tanır.",
25
+ },
26
+ {
27
+ question: 'Sağ alt köşeye metin koyarsam ne olur?',
28
+ answer:
29
+ "Muhtemelen görünmez olur veya okunması çok zorlaşır, çünkü profil, kalp ve yorum simgeleri orada bulunur. İdeal olarak, metinleri ve yüzleri merkez-üst alanda (Güvenli Bölge) tutun.",
30
+ },
31
+ ];
32
+
33
+ const howToData = [
34
+ {
35
+ name: 'Görselinizi veya videonuzu yükleyin',
36
+ text: "Önizlemek istediğiniz dosyayı yükleyin. İşleme yerel ve gizlidir; internete hiçbir şey yüklenmez.",
37
+ },
38
+ {
39
+ name: 'Platformu seçin',
40
+ text: "İlgili arayüz katmanını etkinleştirmek için TikTok, Instagram Reels veya YouTube Shorts arasında seçim yapın.",
41
+ },
42
+ {
43
+ name: 'Okunabilirliği kontrol edin',
44
+ text: "Metinlerin, altyazıların veya ana marka öğelerinin sosyal ağın simgeleri tarafından kapatılıp kapatılmadığını doğrulayın.",
45
+ },
46
+ {
47
+ name: 'Ayarlayın ve dışa aktarın',
48
+ text: "Bir şey gizlenmişse orijinal video düzenleyicinizde öğeyi taşıyın ve mükemmel şekilde oturana kadar tekrar test edin.",
49
+ },
50
+ ];
51
+
52
+ const faqSchema: WithContext<FAQPage> = {
53
+ '@context': 'https://schema.org',
54
+ '@type': 'FAQPage',
55
+ mainEntity: faqData.map((item) => ({
56
+ '@type': 'Question',
57
+ name: item.question,
58
+ acceptedAnswer: { '@type': 'Answer', text: item.answer },
59
+ })),
60
+ };
61
+
62
+ const howToSchema: WithContext<HowToThing> = {
63
+ '@context': 'https://schema.org',
64
+ '@type': 'HowTo',
65
+ name: title,
66
+ description,
67
+ step: howToData.map((step, i) => ({
68
+ '@type': 'HowToStep',
69
+ position: i + 1,
70
+ name: step.name,
71
+ text: step.text,
72
+ })),
73
+ };
74
+
75
+ const appSchema: WithContext<SoftwareApplication> = {
76
+ '@context': 'https://schema.org',
77
+ '@type': 'SoftwareApplication',
78
+ name: title,
79
+ description,
80
+ applicationCategory: 'UtilityApplication',
81
+ operatingSystem: 'All',
82
+ offers: { '@type': 'Offer', price: '0', priceCurrency: 'TRY' },
83
+ inLanguage: 'tr',
84
+ };
85
+
86
+ export const content: ToolLocaleContent<SafeZonesUI> = {
87
+ slug,
88
+ title,
89
+ description,
90
+ faqTitle: 'Sıkça Sorulan Sorular',
91
+ faq: faqData,
92
+ bibliographyTitle: 'Resmi Platform Dokümantasyonu',
93
+ bibliography: [
94
+ {
95
+ name: 'TikTok İçerik Üretici Portalı: Video optimizasyonu ve güvenli bölgeler',
96
+ url: 'https://www.tiktok.com/creators/creator-portal/en-us/foundation/video-optimization/',
97
+ },
98
+ {
99
+ name: 'Instagram Business: Reels için en iyi uygulamalar',
100
+ url: 'https://business.instagram.com/creators/reels-best-practices',
101
+ },
102
+ {
103
+ name: 'YouTube Yardımı: YouTube Shorts oluşturma',
104
+ url: 'https://support.google.com/youtube/answer/10343433',
105
+ },
106
+ {
107
+ name: 'Meta for Creators: Videolar için güvenli bölgeler ve en boy oranları',
108
+ url: 'https://www.facebook.com/business/help/103816146375741',
109
+ },
110
+ ],
111
+ howTo: howToData,
112
+ schemas: [faqSchema, howToSchema, appSchema],
113
+ seo: [
114
+ {
115
+ type: 'title',
116
+ text: 'Güvenli Bölgeler Ana Kılavuzu: Reels, TikTok ve Shorts\'unuzu Optimize Edin',
117
+ level: 2,
118
+ },
119
+ {
120
+ type: 'paragraph',
121
+ html: "Dikey içeriğin doygun olduğu dünyada ilk izlenim tekniktir. İçerik üreticilerinin yaptığı en büyük hata, <strong>videolarının veya görsellerinin</strong> platformun yerel arayüzüyle nasıl etkileşime girdiğini görmezden gelmektir. Her sosyal ağ (TikTok, Instagram Reels ve YouTube Shorts), kompozisyonunuzun görsel etkisini yok edebilecek düğme, metin ve profil katmanlarını videonun üzerine yerleştirir.",
122
+ },
123
+ {
124
+ type: 'paragraph',
125
+ html: "Bu araç, medya dosyalarınızı yüklemenize ve karenizin tam olarak hangi kısımlarının arayüz tarafından kapatılacağını önizlemenize olanak tanır. Bu sadece <strong>altyazılarla</strong> ilgili değildir; videonuzdaki yüzlerin, ürünlerin veya ana eylemlerin bir \"Beğen\" düğmesinin veya uzun bir açıklamanın altında kalmamasını sağlamakla ilgilidir.",
126
+ },
127
+ {
128
+ type: 'grid',
129
+ columns: [
130
+ {
131
+ type: 'card',
132
+ title: 'TikTok: En istilacı arayüz',
133
+ html: "<p>TikTok en yoğun arayüze sahiptir. Sağ tarafta, genişliğin yaklaşık %15'ini kaplayan bir simge sütunu vardır. Alt kısımda açıklama 4 veya 5 satıra kadar uzayabilir ve ekranın neredeyse üçte birini alttan kapatabilir.</p><ul><li><strong>Alt kenar boşluğu:</strong> Açıklama metni ve kullanıcı adından kaçınmak için son 250 pikseli boş bırakın.</li><li><strong>Sağ kenar boşluğu:</strong> Sağ kenardan 100 piksel mesafe içine metin yerleştirmekten kaçının.</li><li><strong>Üst:</strong> \"Takip Edilenler\" ve \"Sizin İçin\" düğmeleri üst orta şeridi kaplar.</li></ul>",
134
+ },
135
+ {
136
+ type: 'card',
137
+ title: 'IG Reels: Akış faktörü',
138
+ html: "<p>TikTok'un aksine Instagram Reels, ana akıştan görüntülendiğinde videoyu 4:5 formatına kırpar. Bu, 9:16 videonuzun üst veya alt %15'lik kısmına hayati bilgiler yerleştirirseniz bunların akışta kaybolacağı anlamına gelir.</p><ul><li><strong>4:5 kuralı:</strong> Akış görünürlüğü için başlıkları ve anahtar öğeleri merkezi bölgede tutun.</li><li><strong>Arayüz:</strong> Reels simgeleri TikTok'unkinden daha incedir ve biraz daha fazla yanal kenar boşluğuna izin verir.</li><li><strong>Ses simgesi:</strong> Sağ altta bulunur, genellikle TikTok'un dönen diskinden çok daha az yer kaplar.</li></ul>",
139
+ },
140
+ ],
141
+ },
142
+ {
143
+ type: 'title',
144
+ text: 'YouTube Shorts: Sağ tarafa dikkat',
145
+ level: 3,
146
+ },
147
+ {
148
+ type: 'paragraph',
149
+ html: "YouTube Shorts asimetrik bir arayüze sahiptir. Abone ol düğmesi çok belirgindir ve düz renklidir (genellikle siyah veya beyaz), bu da sağ altta önemli bir görsel kör nokta oluşturur.",
150
+ },
151
+ {
152
+ type: 'list',
153
+ items: [
154
+ '<strong>Sağ kenar boşluğu:</strong> Sağ alt %20\'lik alana metin veya önemli öğeler yerleştirmekten kaçının.',
155
+ '<strong>Alt kenar boşluğu:</strong> Açıklama metni ve kullanıcı adından kaçınmak için son 150 pikseli boş bırakın.',
156
+ '<strong>Üst:</strong> Abone ol ve diğer düğmeler üst orta şeridi kaplar.',
157
+ ],
158
+ },
159
+ {
160
+ type: 'title',
161
+ text: 'Dikey Tasarım Hakkında Kritik Sorular',
162
+ level: 2,
163
+ },
164
+ {
165
+ type: 'title',
166
+ text: 'Anahtar öğeler (yüzler, metin, ürün) nereye yerleştirilmeli?',
167
+ level: 3,
168
+ },
169
+ {
170
+ type: 'paragraph',
171
+ html: "Ana eylem için \"Altın Bölge\" videonun orta üçte birlik kısmıdır. Bir kişiyi filme alıyorsanız gözlerinin ve ağzının bu bölge içinde olduğundan emin olun. Önemli grafik öğeleri, alt açıklamadan kaçınmak için geometrik merkezden hafifçe yukarı kaydırılmalıdır.",
172
+ },
173
+ {
174
+ type: 'title',
175
+ text: 'Videom yüklendikten sonra neden bulanık görünüyor?',
176
+ level: 3,
177
+ },
178
+ {
179
+ type: 'paragraph',
180
+ html: "Çoğu zaman sorun kalite değil, ölçeklemedir. Her zaman 30 veya 60 fps'de 1080x1920 olarak kaydedin. Platformlar büyük dosyaları agresif bir şekilde sıkıştırdığından, çok fazla ağır efekt uyguluyorsanız 4K'dan kaçının.",
181
+ },
182
+ {
183
+ type: 'title',
184
+ text: 'Telefon çerçeveleri ne olacak?',
185
+ level: 3,
186
+ },
187
+ {
188
+ type: 'paragraph',
189
+ html: "Modern telefonların ekranında çentikler veya kamera delikleri olduğunu unutmayın. Bu araç, içeriğinizin saat veya sistem simgeleriyle (pil, sinyal) çakışmaması için bir üst güvenlik payı içerir.",
190
+ },
191
+ {
192
+ type: 'title',
193
+ text: 'Viral Videonun Anatomisi',
194
+ level: 2,
195
+ },
196
+ {
197
+ type: 'paragraph',
198
+ html: "Sosyal medya için tasarım yapmak sadece estetik değil, bir <strong>kullanılabilirlik</strong> meselesidir. Bir kullanıcı platformun simgeleri kapattığı için metni okumakta zorlanırsa, hemen bir sonraki videoya kaydıracaktır. Görsel bir engel olduğunda izlenme süresi (Watch Time) keskin bir şekilde düşer.",
199
+ },
200
+ {
201
+ type: 'paragraph',
202
+ html: "Örneğin YouTube Shorts'ta arayüz asimetriktir. Abone ol düğmesi çok belirgindir. Bu simülatörü kullanarak, renk paletinizin yerel kullanıcı arayüzü renkleriyle nasıl etkileşime girdiğini anlamak için opaklığı ayarlayabilirsiniz.",
203
+ },
204
+ {
205
+ type: 'tip',
206
+ title: 'Yaratıcı Kalite Kontrol Aracı',
207
+ html: '<p>Hiçbir şeyi şansa bırakmayan içerik üreticileri için tasarlandı.</p>',
208
+ },
209
+ ],
210
+ ui: {
211
+ labelConfig: 'Ayarlar',
212
+ labelPlatform: 'Hedef Platform',
213
+ labelUpload: 'İçerik Yükle',
214
+ uploadPrompt: 'Görsel veya video seçin',
215
+ uploadLink: 'Veya bir örnek kullanın',
216
+ loadContent: 'İçeriğinizi yükleyin',
217
+ labelOpacity: 'Arayüz Belirginliği',
218
+ labelMask: 'Kritik Bölgeleri Karart',
219
+ labelGrid: 'Üçler Kuralı',
220
+ btnReset: 'Tuvali Sıfırla',
221
+ bannerTiktok: 'TikTok 9:16 Simüle Ediliyor',
222
+ bannerReels: 'Instagram Reels 9:16 Simüle Ediliyor',
223
+ bannerShorts: 'YouTube Shorts 9:16 Simüle Ediliyor',
224
+ nameTiktok: 'TikTok',
225
+ nameReels: 'IG Reels',
226
+ nameShorts: 'YT Shorts',
227
+ ttFollowing: 'Takip Edilenler',
228
+ ttForYou: 'Sizin İçin',
229
+ ttDescription: 'İçerik üreticileri için gerçek arayüz tasarımı. #uxdesign #socialmedia',
230
+ ttAudio: 'jjlmoya - Orijinal Ses',
231
+ ttNavHome: 'Ana Sayfa',
232
+ ttNavFriends: 'Arkadaşlar',
233
+ ttNavInbox: 'Gelen Kutusu',
234
+ ttNavProfile: 'Profil',
235
+ reelsFollow: 'Takip Et',
236
+ reelsDescription: 'Bu arayüz gerçek olanla birebir aynıdır. #reels #ux #simulator',
237
+ reelsAudio: 'Trending Music - Orijinal Ses',
238
+ shortsSubscribe: 'ABONE OL',
239
+ shortsDislike: 'Beğenmedim',
240
+ shortsShare: 'Paylaş',
241
+ shortsRemix: 'Remix',
242
+ shortsDescription: 'Shorts için gerçek arayüzleri simüle etme! #youtube #shorts',
243
+ },
244
+ };
@@ -0,0 +1,244 @@
1
+ import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
2
+ import type { ToolLocaleContent } from '../../../types';
3
+ import type { SafeZonesUI } from '../ui';
4
+
5
+ const slug = 'social-safe-zones';
6
+ const title = '社交安全区域:TikTok、Reels 和 Shorts 视频模拟器';
7
+ const description =
8
+ '使用真实的社交媒体界面预览您的图片和视频。确保您的内容始终可见,避免意外裁剪。';
9
+
10
+ const faqData = [
11
+ {
12
+ question: '什么是社交媒体上的“安全区域”?',
13
+ answer:
14
+ '安全区域是指屏幕上内容可见且不会被界面元素(如用户名、描述、交互按钮(点赞、分享))或某些设备应用的自动裁剪所遮挡的区域。',
15
+ },
16
+ {
17
+ question: '为什么我的 TikTok 视频顶部和底部看起来被裁剪了?',
18
+ answer:
19
+ 'TikTok 使用 9:16 的纵横比。如果您的视频较宽,应用程序会缩放以填充屏幕,从而导致裁剪。此外,底部界面会遮挡部分视频,因此重要元素应放置在中心位置。',
20
+ },
21
+ {
22
+ question: 'Instagram Reels 和 YouTube Shorts 的安全区域是一样的吗?',
23
+ answer:
24
+ '非常相似但并不完全相同。YouTube Shorts 的按钮位置与 Reels 不同。我们的工具允许您在不同平台之间切换,以验证您在所有平台上的设计。',
25
+ },
26
+ {
27
+ question: '如果我把文字放在右下角会发生什么?',
28
+ answer:
29
+ '文字可能会不可见或非常难以阅读,因为那是个人资料、爱心和评论图标所在的位置。理想情况下,应将文字和面部保持在中央上部区域(安全区域)。',
30
+ },
31
+ ];
32
+
33
+ const howToData = [
34
+ {
35
+ name: '加载您的图片或视频',
36
+ text: '上传您想要预览的文件。处理在本地私密进行,不会上传到互联网。',
37
+ },
38
+ {
39
+ name: '选择平台',
40
+ text: '在 TikTok、Instagram Reels 或 YouTube Shorts 之间进行选择,以激活相应的界面叠加层。',
41
+ },
42
+ {
43
+ name: '检查可读性',
44
+ text: '验证文字、字幕或关键品牌元素是否被社交网络的图标遮挡。',
45
+ },
46
+ {
47
+ name: '调整并导出',
48
+ text: '如果有内容被遮挡,请在原始视频编辑器中移动该元素,并再次测试,直到完美拟合。',
49
+ },
50
+ ];
51
+
52
+ const faqSchema: WithContext<FAQPage> = {
53
+ '@context': 'https://schema.org',
54
+ '@type': 'FAQPage',
55
+ mainEntity: faqData.map((item) => ({
56
+ '@type': 'Question',
57
+ name: item.question,
58
+ acceptedAnswer: { '@type': 'Answer', text: item.answer },
59
+ })),
60
+ };
61
+
62
+ const howToSchema: WithContext<HowToThing> = {
63
+ '@context': 'https://schema.org',
64
+ '@type': 'HowTo',
65
+ name: title,
66
+ description,
67
+ step: howToData.map((step, i) => ({
68
+ '@type': 'HowToStep',
69
+ position: i + 1,
70
+ name: step.name,
71
+ text: step.text,
72
+ })),
73
+ };
74
+
75
+ const appSchema: WithContext<SoftwareApplication> = {
76
+ '@context': 'https://schema.org',
77
+ '@type': 'SoftwareApplication',
78
+ name: title,
79
+ description,
80
+ applicationCategory: 'UtilityApplication',
81
+ operatingSystem: 'All',
82
+ offers: { '@type': 'Offer', price: '0', priceCurrency: 'CNY' },
83
+ inLanguage: 'zh',
84
+ };
85
+
86
+ export const content: ToolLocaleContent<SafeZonesUI> = {
87
+ slug,
88
+ title,
89
+ description,
90
+ faqTitle: '常见问题',
91
+ faq: faqData,
92
+ bibliographyTitle: '官方平台文档',
93
+ bibliography: [
94
+ {
95
+ name: 'TikTok 创作者门户:视频优化和安全区域',
96
+ url: 'https://www.tiktok.com/creators/creator-portal/en-us/foundation/video-optimization/',
97
+ },
98
+ {
99
+ name: 'Instagram 业务:Reels 最佳实践',
100
+ url: 'https://business.instagram.com/creators/reels-best-practices',
101
+ },
102
+ {
103
+ name: 'YouTube 帮助:创建 YouTube Shorts',
104
+ url: 'https://support.google.com/youtube/answer/10343433',
105
+ },
106
+ {
107
+ name: 'Meta for Creators:视频安全区域和纵横比',
108
+ url: 'https://www.facebook.com/business/help/103816146375741',
109
+ },
110
+ ],
111
+ howTo: howToData,
112
+ schemas: [faqSchema, howToSchema, appSchema],
113
+ seo: [
114
+ {
115
+ type: 'title',
116
+ text: '安全区域大师指南:优化您的 Reels、TikTok 和 Shorts',
117
+ level: 2,
118
+ },
119
+ {
120
+ type: 'paragraph',
121
+ html: '在垂直内容饱和的世界里,第一印象是技术性的。创作者犯的最大错误是忽略了他们的<strong>视频或图片</strong>如何与平台的原生界面交互。每个社交网络(TikTok、Instagram Reels 和 YouTube Shorts)都会在视频上方叠加按钮、文字和个人资料层,这可能会抵消构图的视觉冲击力。',
122
+ },
123
+ {
124
+ type: 'paragraph',
125
+ html: '此工具允许您加载媒体文件,并准确预览画面的哪些部分会被界面遮挡。这不仅仅关乎<strong>字幕</strong>;它还关乎确保视频中的脸部、产品或主要动作不会被嵌入“点赞”按钮或冗长的描述之下。',
126
+ },
127
+ {
128
+ type: 'grid',
129
+ columns: [
130
+ {
131
+ type: 'card',
132
+ title: 'TikTok:最具侵入性的界面',
133
+ html: '<p>TikTok 的界面最为密集。在右侧,有一列图标占据了约 15% 的宽度。在底部,描述可以扩展到 4 或 5 行,从下方遮挡了近三分之一的屏幕。</p><ul><li><strong>底部边距:</strong>保留最后 250px 的自由空间,以避开描述文字和用户名。</li><li><strong>右侧边距:</strong>避免在距离右边缘 100px 范围内放置文字。</li><li><strong>顶部:</strong>“关注”和“推荐”按钮占据了顶部中央条案。</li></ul>',
134
+ },
135
+ {
136
+ type: 'card',
137
+ title: 'IG Reels:Feed 流因素',
138
+ html: '<p>与 TikTok 不同,从主 Feed 流查看时,Instagram Reels 会将视频裁剪为 4:5 格式。这意味着如果您在该 9:16 视频顶部或底部 15% 的位置放置关键信息,它将在 Feed 流中消失。</p><ul><li><strong>4:5 规则:</strong>将标题和关键元素保持在中央区域,以便在 Feed 流中可见。</li><li><strong>界面:</strong>Reels 的图标比 TikTok 的更精细,允许更多的侧边边距。</li><li><strong>音频按钮:</strong>位于右下角,通常比 TikTok 的旋转光盘遮挡得少得多。</li></ul>',
139
+ },
140
+ ],
141
+ },
142
+ {
143
+ type: 'title',
144
+ text: 'YouTube Shorts:注意右侧',
145
+ level: 3,
146
+ },
147
+ {
148
+ type: 'paragraph',
149
+ html: 'YouTube Shorts 具有不对称界面。订阅按钮非常突出且为纯色(通常为黑色或白色),在右下角形成了一个重要的视觉盲点。',
150
+ },
151
+ {
152
+ type: 'list',
153
+ items: [
154
+ '<strong>右侧边距:</strong>避免在右下方 20% 的区域放置文字或重要元素。',
155
+ '<strong>底部边距:</strong>保留最后 150px 的自由空间,以避开描述文字和用户名。',
156
+ '<strong>顶部:</strong>订阅和其他按钮占据了顶部中央条案。',
157
+ ],
158
+ },
159
+ {
160
+ type: 'title',
161
+ text: '垂直设计的关键问题',
162
+ level: 2,
163
+ },
164
+ {
165
+ type: 'title',
166
+ text: '关键元素(脸部、文字、产品)应该放在哪里?',
167
+ level: 3,
168
+ },
169
+ {
170
+ type: 'paragraph',
171
+ html: '主要动作的“黄金区域”是视频的中央三分之一。如果您正在拍摄人物,请确保他们的眼睛和嘴巴在这个区域内。重要的图形元素应从几何中心略微向上移动,以避开底部的描述。',
172
+ },
173
+ {
174
+ type: 'title',
175
+ text: '为什么我的视频在上传后看起来很模糊?',
176
+ level: 3,
177
+ },
178
+ {
179
+ type: 'paragraph',
180
+ html: '这通常不是质量问题,而是缩放问题。请始终以 1080x1920、30 或 60 fps 进行录制。如果您应用了许多重度效果,请避免使用 4K,因为平台会激进地压缩大文件。',
181
+ },
182
+ {
183
+ type: 'title',
184
+ text: '手机边框怎么办?',
185
+ level: 3,
186
+ },
187
+ {
188
+ type: 'paragraph',
189
+ html: '请记住,现代手机在屏幕上有刘海或摄像头孔位。此工具包含顶部安全边距,因此您的内容不会与时钟或系统图标(电池、信号)发生冲突。',
190
+ },
191
+ {
192
+ type: 'title',
193
+ text: '热门视频剖析',
194
+ level: 2,
195
+ },
196
+ {
197
+ type: 'paragraph',
198
+ html: '为社交媒体设计不仅仅是关于美学,更是关于<strong>可用性</strong>。如果用户因为平台图标遮挡而不得不费力阅读文字,他们会直接滑到下一个视频。当存在视觉摩擦时,留存率(观看时间)会大幅下降。',
199
+ },
200
+ {
201
+ type: 'paragraph',
202
+ html: '以 YouTube Shorts 为例,它的界面是不对称的。订阅按钮非常清晰。通过使用此模拟器,您可以调整不透明度,以了解您的调色板如何与原生 UI 颜色交互。',
203
+ },
204
+ {
205
+ type: 'tip',
206
+ title: '创意品质控制工具',
207
+ html: '<p>专为不放过任何细节的创作者设计。</p>',
208
+ },
209
+ ],
210
+ ui: {
211
+ labelConfig: '设置',
212
+ labelPlatform: '目标平台',
213
+ labelUpload: '上传内容',
214
+ uploadPrompt: '选择图片或视频',
215
+ uploadLink: '或使用示例',
216
+ loadContent: '加载您的内容',
217
+ labelOpacity: '界面浮现度',
218
+ labelMask: '灰置关键区域',
219
+ labelGrid: '三分法网格',
220
+ btnReset: '重置画布',
221
+ bannerTiktok: '正在模拟 TikTok 9:16',
222
+ bannerReels: '正在模拟 Instagram Reels 9:16',
223
+ bannerShorts: '正在模拟 YouTube Shorts 9:16',
224
+ nameTiktok: 'TikTok',
225
+ nameReels: 'IG Reels',
226
+ nameShorts: 'YT Shorts',
227
+ ttFollowing: '关注',
228
+ ttForYou: '推荐',
229
+ ttDescription: '为内容创作者设计的真实界面设计。 #uxdesign #socialmedia',
230
+ ttAudio: 'jjlmoya - 原声音效',
231
+ ttNavHome: '首页',
232
+ ttNavFriends: '朋友',
233
+ ttNavInbox: '收件箱',
234
+ ttNavProfile: '个人主页',
235
+ reelsFollow: '关注',
236
+ reelsDescription: '此界面与真实的完全一致。 #reels #ux #simulator',
237
+ reelsAudio: 'Trending Music - 原声音乐',
238
+ shortsSubscribe: '订阅',
239
+ shortsDislike: '不喜欢',
240
+ shortsShare: '分享',
241
+ shortsRemix: '重混',
242
+ shortsDescription: '模拟真实的 Shorts 界面! #youtube #shorts',
243
+ },
244
+ };
@@ -7,20 +7,28 @@ import type { SafeZonesUI } from './ui';
7
7
 
8
8
  export type SafeZonesLocaleContent = ToolLocaleContent<SafeZonesUI>;
9
9
 
10
- import { content as es } from './i18n/es';
11
- import { content as en } from './i18n/en';
12
- import { content as fr } from './i18n/fr';
13
-
14
10
  export const safeZones: SocialToolEntry<SafeZonesUI> = {
15
11
  id: 'safe-zones',
16
12
  icons: {
17
- bg: 'mdi:cellphone',
18
- fg: 'mdi:crop-free',
13
+ bg: 'mdi:video-outline',
14
+ fg: 'mdi:aspect-ratio',
19
15
  },
20
16
  i18n: {
21
- es: async () => es,
22
- en: async () => en,
23
- fr: async () => fr,
17
+ es: () => import('./i18n/es').then((m) => m.content),
18
+ en: () => import('./i18n/en').then((m) => m.content),
19
+ fr: () => import('./i18n/fr').then((m) => m.content),
20
+ de: () => import('./i18n/de').then((m) => m.content),
21
+ id: () => import('./i18n/id').then((m) => m.content),
22
+ it: () => import('./i18n/it').then((m) => m.content),
23
+ ja: () => import('./i18n/ja').then((m) => m.content),
24
+ ko: () => import('./i18n/ko').then((m) => m.content),
25
+ nl: () => import('./i18n/nl').then((m) => m.content),
26
+ pl: () => import('./i18n/pl').then((m) => m.content),
27
+ pt: () => import('./i18n/pt').then((m) => m.content),
28
+ ru: () => import('./i18n/ru').then((m) => m.content),
29
+ sv: () => import('./i18n/sv').then((m) => m.content),
30
+ tr: () => import('./i18n/tr').then((m) => m.content),
31
+ zh: () => import('./i18n/zh').then((m) => m.content),
24
32
  },
25
33
  };
26
34