@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 = 'bezopasnyje-zony-socialnyh-setej';
6
+ const title = 'Social Safe Zones: симулятор видео для 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: 'RUB' },
83
+ inLanguage: 'ru',
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 Creator Portal: оптимизация видео и безопасные зоны',
96
+ url: 'https://www.tiktok.com/creators/creator-portal/en-us/foundation/video-optimization/',
97
+ },
98
+ {
99
+ name: 'Instagram Business: рекомендации для 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> оставляйте последние 250 пикселей свободными, чтобы избежать перекрытия текстом описания и именем пользователя.</li><li><strong>Правый отступ:</strong> избегайте размещения текста в пределах 100 пикселей от правого края.</li><li><strong>Верх:</strong> кнопки «Подписки» и «Рекомендации» занимают верхнюю центральную полосу.</li></ul>',
134
+ },
135
+ {
136
+ type: 'card',
137
+ title: 'IG Reels: фактор ленты',
138
+ html: '<p>В отличие от TikTok, Instagram Reels обрезает видео до формата 4:5 при просмотре из основной ленты. Это означает, что если вы разместите важную информацию в верхних или нижних 15% своего видео 9:16, она исчезнет в ленте.</p><ul><li><strong>Правило 4:5:</strong> держите заголовки и ключевые элементы в центральной зоне для видимости в ленте.</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> оставляйте последние 150 пикселей свободными, чтобы избежать перекрытия текстом описания и именем пользователя.',
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 кадрах в секунду. Избегайте 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>. Если пользователю приходится изо всех сил пытаться прочитать текст, потому что иконки платформы закрывают его, он просто перелистнет к следующему видео. Удержание (Watch Time) резко падает при наличии визуального дискомфорта.',
199
+ },
200
+ {
201
+ type: 'paragraph',
202
+ html: 'В YouTube Shorts, например, интерфейс асимметричен. Кнопка подписаться очень заметна. Используя этот симулятор, вы можете настроить непрозрачность, чтобы понять, как ваша цветовая палитра взаимодействует с нативными цветами пользовательского интерфейса.',
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
+ };
@@ -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 = 'sociala-sakra-zoner';
6
+ const title = 'Social Safe Zones: Videosimulator för TikTok, Reels & Shorts';
7
+ const description =
8
+ 'Förhandsgranska dina bilder och videor med det riktiga gränssnittet för sociala medier. Säkerställ att ditt innehåll alltid är synligt och undvik oavsiktlig beskärning.';
9
+
10
+ const faqData = [
11
+ {
12
+ question: "Vad är 'Safe Zones' på sociala medier?",
13
+ answer:
14
+ "Det är de områden på skärmen där innehållet är synligt utan risk för att täckas av gränssnittselement, såsom användarnamn, beskrivning, interaktionsknappar (gilla, dela) eller automatisk beskärning som tillämpas av vissa enheter.",
15
+ },
16
+ {
17
+ question: 'Varför ser min TikTok-video beskuren ut upptill och nertill?',
18
+ answer:
19
+ 'TikTok använder bildförhållandet 9:16. Om din video är bredare kommer appen att zooma för att fylla skärmen, vilket orsakar beskärning. Dessutom täcker det nedre gränssnittet en del av videon, så viktiga element bör centreras.',
20
+ },
21
+ {
22
+ question: 'Är den säkra zonen densamma för Instagram Reels och YouTube Shorts?',
23
+ answer:
24
+ 'De är mycket lika men inte identiska. YouTube Shorts-knappar är placerade annorlunda än Reels. Vårt verktyg låter dig växla mellan plattformar för att verifiera din design på alla.',
25
+ },
26
+ {
27
+ question: 'Vad händer om jag placerar text i det nedre högra hörnet?',
28
+ answer:
29
+ 'Den kommer sannolikt att vara osynlig eller mycket svår att läsa, eftersom det är där ikonerna för profil, hjärta och kommentarer finns. Helst bör du hålla texter och ansikten i det centrala-övre området (Safe Zone).',
30
+ },
31
+ ];
32
+
33
+ const howToData = [
34
+ {
35
+ name: 'Ladda upp din bild eller video',
36
+ text: 'Ladda upp filen du vill förhandsgranska. Bearbetningen sker lokalt och privat – inget laddas upp till internet.',
37
+ },
38
+ {
39
+ name: 'Välj plattform',
40
+ text: 'Välj mellan TikTok, Instagram Reels eller YouTube Shorts för att aktivera motsvarande gränssnittsöverlagring.',
41
+ },
42
+ {
43
+ name: 'Kontrollera läsbarheten',
44
+ text: 'Verifiera om texter, undertexter eller viktiga varumärkeselement täcks av det sociala nätverkets ikoner.',
45
+ },
46
+ {
47
+ name: 'Justera och exportera',
48
+ text: 'Om något är dolt, flytta elementet i din ursprungliga videoredigerare och testa igen tills det passar perfekt.',
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: 'SEK' },
83
+ inLanguage: 'sv',
84
+ };
85
+
86
+ export const content: ToolLocaleContent<SafeZonesUI> = {
87
+ slug,
88
+ title,
89
+ description,
90
+ faqTitle: 'Vanliga frågor',
91
+ faq: faqData,
92
+ bibliographyTitle: 'Officiell plattformsdokumentation',
93
+ bibliography: [
94
+ {
95
+ name: 'TikTok Creator Portal: Videooptimering och säkra zoner',
96
+ url: 'https://www.tiktok.com/creators/creator-portal/en-us/foundation/video-optimization/',
97
+ },
98
+ {
99
+ name: 'Instagram Business: Best practices för Reels',
100
+ url: 'https://business.instagram.com/creators/reels-best-practices',
101
+ },
102
+ {
103
+ name: 'YouTube Help: Skapa YouTube Shorts',
104
+ url: 'https://support.google.com/youtube/answer/10343433',
105
+ },
106
+ {
107
+ name: 'Meta for Creators: Säkra zoner och bildförhållanden för video',
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: 'Mästarguide till Safe Zones: Optimera dina Reels, TikToks och Shorts',
117
+ level: 2,
118
+ },
119
+ {
120
+ type: 'paragraph',
121
+ html: 'I den mättade världen av vertikalt innehåll är det första intrycket tekniskt. Det största misstaget skapare gör är att ignorera hur deras <strong>video eller bild</strong> interagerar med plattformens inbyggda gränssnitt. Varje socialt nätverk (TikTok, Instagram Reels och YouTube Shorts) lägger på lager av knappar, text och profiler som kan omintetgöra det visuella intrycket av din komposition.',
122
+ },
123
+ {
124
+ type: 'paragraph',
125
+ html: 'Detta verktyg låter dig ladda dina mediefiler och förhandsgranska exakt vilka delar av din bildruta som kommer att täckas av gränssnittet. Det handlar inte bara om <strong>undertexter</strong>; det handlar om att säkerställa att ansikten, produkter eller huvudaktioner i din video inte begravs under en "Gilla"-knapp eller en lång beskrivning.',
126
+ },
127
+ {
128
+ type: 'grid',
129
+ columns: [
130
+ {
131
+ type: 'card',
132
+ title: 'TikTok: Det mest påträngande gränssnittet',
133
+ html: '<p>TikTok har det tätaste gränssnittet. På höger sida finns en kolumn med ikoner som upptar cirka 15 % av bredden. Längst ner kan beskrivningen sträcka sig över 4 eller 5 rader och täcka nästan en tredjedel av skärmen nerifrån.</p><ul><li><strong>Bottenmarginal:</strong> Lämna de sista 250px fria för att undvika beskrivningstexten och användarnamnet.</li><li><strong>Högermarginal:</strong> Undvik att placera text inom 100px från högerkanten.</li><li><strong>Topp:</strong> Knapparna "Följer" och "För dig" upptar det övre centrala fältet.</li></ul>',
134
+ },
135
+ {
136
+ type: 'card',
137
+ title: 'IG Reels Feed faktorn',
138
+ html: '<p>Till skillnad från TikTok beskär Instagram Reels videon till ett 4:5-format när den visas i huvudflödet. Detta innebär att om du placerar viktig information i de översta eller nedersta 15 % av din 9:16-video, kommer den att försvinna i flödet.</p><ul><li><strong>4:5-regeln:</strong> Håll titlar och nyckelelement inom den centrala zonen för synlighet i flödet.</li><li><strong>Gränssnitt:</strong> Reels-ikonerna är mer subtila än TikToks, vilket tillåter lite mer marginal på sidorna.</li><li><strong>Ljudknapp:</strong> Placerad längst ner till höger, täcker den vanligtvis mycket mindre än TikToks snurrande skiva.</li></ul>',
139
+ },
140
+ ],
141
+ },
142
+ {
143
+ type: 'title',
144
+ text: 'YouTube Shorts: Håll koll på högersidan',
145
+ level: 3,
146
+ },
147
+ {
148
+ type: 'paragraph',
149
+ html: 'YouTube Shorts har ett asymmetriskt gränssnitt. Prenumerationsknappen är mycket framträdande och enfärgad (oftast svart eller vit), vilket skapar en viktig visuell död vinkel i det nedre högra hörnet.',
150
+ },
151
+ {
152
+ type: 'list',
153
+ items: [
154
+ '<strong>Högermarginal:</strong> Undvik att placera text eller viktiga element i de nedre högra 20 %.',
155
+ '<strong>Bottenmarginal:</strong> Lämna de sista 150px fria för att undvika beskrivningstexten och användarnamnet.',
156
+ '<strong>Topp:</strong> Knapparna för prenumeration och annat upptar det övre centrala fältet.',
157
+ ],
158
+ },
159
+ {
160
+ type: 'title',
161
+ text: 'Kritiska frågor om vertikal design',
162
+ level: 2,
163
+ },
164
+ {
165
+ type: 'title',
166
+ text: 'Var ska man placera nyckelelement (ansikten, text, produkt)?',
167
+ level: 3,
168
+ },
169
+ {
170
+ type: 'paragraph',
171
+ html: '"Den gyllene zonen" för huvudaktionen är den centrala tredjedelen av videon. Om du filmar en person, se till att deras ögon och mun befinner sig inom denna zon. Viktiga grafiska element bör flyttas något uppåt från det geometriska centrumet för att undvika den nedre beskrivningen.',
172
+ },
173
+ {
174
+ type: 'title',
175
+ text: 'Varför ser min video suddig ut när den har laddats upp?',
176
+ level: 3,
177
+ },
178
+ {
179
+ type: 'paragraph',
180
+ html: 'Det är ofta inte kvaliteten utan skalningen. Spela alltid in i 1080x1920 vid 30 eller 60 fps. Undvik 4K om du använder många tunga effekter, eftersom plattformar komprimerar stora filer aggressivt.',
181
+ },
182
+ {
183
+ type: 'title',
184
+ text: 'Vad sägs om telefonens kanter?',
185
+ level: 3,
186
+ },
187
+ {
188
+ type: 'paragraph',
189
+ html: 'Kom ihåg att moderna telefoner har flärpar (notches) eller kamerahål i skärmen. Detta verktyg inkluderar en övre säkerhetsmarginal så att ditt innehåll inte krockar med klockan eller systemikonerna (batteri, signal).',
190
+ },
191
+ {
192
+ type: 'title',
193
+ text: 'Anatomi av en viral video',
194
+ level: 2,
195
+ },
196
+ {
197
+ type: 'paragraph',
198
+ html: 'Att designa för sociala medier handlar inte bara om estetik – det handlar om <strong>användbarhet</strong>. Om en användare måste kämpa för att läsa text för att plattformens ikoner täcker den, kommer de helt enkelt att svepa vidare till nästa video. Behållningen (Watch Time) sjunker kraftigt när det finns visuell friktion.',
199
+ },
200
+ {
201
+ type: 'paragraph',
202
+ html: 'På YouTube Shorts, till exempel, är gränssnittet asymmetriskt. Prenumerationsknappen är mycket tydlig. Genom att använda denna simulator kan du justera opaciteten för att förstå hur din färgpalett interagerar med de inbyggda UI-färgerna.',
203
+ },
204
+ {
205
+ type: 'tip',
206
+ title: 'Kreativt verktyg för kvalitetskontroll',
207
+ html: '<p>Designad för skapare som inte lämnar något åt slumpen.</p>',
208
+ },
209
+ ],
210
+ ui: {
211
+ labelConfig: 'Inställningar',
212
+ labelPlatform: 'Målplattform',
213
+ labelUpload: 'Ladda upp innehåll',
214
+ uploadPrompt: 'Välj bild eller video',
215
+ uploadLink: 'Eller använd ett exempel',
216
+ loadContent: 'Ladda ditt innehåll',
217
+ labelOpacity: 'Gränssnittsrelief',
218
+ labelMask: 'Gråa ut kritiska zoner',
219
+ labelGrid: 'Tredjedelsregeln',
220
+ btnReset: 'Återställ canvas',
221
+ bannerTiktok: 'Simulerar TikTok 9:16',
222
+ bannerReels: 'Simulerar Instagram Reels 9:16',
223
+ bannerShorts: 'Simulerar YouTube Shorts 9:16',
224
+ nameTiktok: 'TikTok',
225
+ nameReels: 'IG Reels',
226
+ nameShorts: 'YT Shorts',
227
+ ttFollowing: 'Följer',
228
+ ttForYou: 'För dig',
229
+ ttDescription: 'Riktig gränssnittskonstruktion för innehållsskapare. #uxdesign #socialmedia',
230
+ ttAudio: 'jjlmoya - Originalljud',
231
+ ttNavHome: 'Hem',
232
+ ttNavFriends: 'Vänner',
233
+ ttNavInbox: 'Inkorg',
234
+ ttNavProfile: 'Profil',
235
+ reelsFollow: 'Följ',
236
+ reelsDescription: 'Detta gränssnitt är identiskt med det riktiga. #reels #ux #simulator',
237
+ reelsAudio: 'Trending Music - Originalljud',
238
+ shortsSubscribe: 'PRENUMERERA',
239
+ shortsDislike: 'Ogilla',
240
+ shortsShare: 'Dela',
241
+ shortsRemix: 'Remixa',
242
+ shortsDescription: 'Simulerar riktiga gränssnitt för Shorts! #youtube #shorts',
243
+ },
244
+ };