@jjlmoya/utils-developer 1.29.1 → 1.31.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.
- package/package.json +70 -70
- package/src/category/seo.astro +1 -1
- package/src/components/PreviewNavSidebar.astro +1 -1
- package/src/components/PreviewToolbar.astro +1 -1
- package/src/data.ts +1 -1
- package/src/env.d.ts +1 -1
- package/src/layouts/PreviewLayout.astro +1 -1
- package/src/pages/[locale]/[slug].astro +162 -162
- package/src/pages/index.astro +1 -1
- package/src/tests/entry_contract.test.ts +8 -2
- package/src/tests/faq_count.test.ts +1 -1
- package/src/tests/i18n_coverage.test.ts +2 -6
- package/src/tests/inverted_punctuation.test.ts +113 -113
- package/src/tests/mocks/astro_mock.js +1 -1
- package/src/tests/no_h1_in_components.test.ts +1 -1
- package/src/tests/promote_this_website_i18n.test.ts +33 -0
- package/src/tests/slug_language_code_format.test.ts +25 -25
- package/src/tests/slug_uniqueness.test.ts +86 -86
- package/src/tests/tool_validation.test.ts +15 -15
- package/src/tool/aspectRatio/i18n/de.ts +164 -164
- package/src/tool/aspectRatio/i18n/ja.ts +1 -1
- package/src/tool/aspectRatio/i18n/ko.ts +1 -1
- package/src/tool/aspectRatio/i18n/pl.ts +164 -164
- package/src/tool/aspectRatio/i18n/ru.ts +164 -164
- package/src/tool/aspectRatio/i18n/zh.ts +165 -165
- package/src/tool/aspectRatio/seo.astro +15 -15
- package/src/tool/calculadoraTiempoDatos/i18n/de.ts +143 -143
- package/src/tool/calculadoraTiempoDatos/i18n/ja.ts +1 -1
- package/src/tool/calculadoraTiempoDatos/i18n/ko.ts +1 -1
- package/src/tool/calculadoraTiempoDatos/i18n/pl.ts +143 -143
- package/src/tool/calculadoraTiempoDatos/i18n/ru.ts +144 -144
- package/src/tool/calculadoraTiempoDatos/i18n/sv.ts +143 -143
- package/src/tool/calculadoraTiempoDatos/i18n/zh.ts +144 -144
- package/src/tool/calculadoraTiempoDatos/seo.astro +15 -15
- package/src/tool/colorConverter/i18n/de.ts +120 -120
- package/src/tool/colorConverter/i18n/ja.ts +1 -1
- package/src/tool/colorConverter/i18n/ko.ts +1 -1
- package/src/tool/colorConverter/i18n/ru.ts +120 -120
- package/src/tool/colorConverter/i18n/zh.ts +1 -1
- package/src/tool/colorConverter/seo.astro +15 -15
- package/src/tool/conversorExcelCsvHtml/i18n/ja.ts +1 -1
- package/src/tool/conversorExcelCsvHtml/i18n/ko.ts +1 -1
- package/src/tool/conversorExcelCsvHtml/i18n/pl.ts +124 -124
- package/src/tool/conversorExcelCsvHtml/i18n/ru.ts +124 -124
- package/src/tool/conversorExcelCsvHtml/i18n/zh.ts +125 -125
- package/src/tool/conversorExcelCsvHtml/seo.astro +15 -15
- package/src/tool/cronGenerator/i18n/ja.ts +1 -1
- package/src/tool/cronGenerator/i18n/ko.ts +1 -1
- package/src/tool/cronGenerator/i18n/zh.ts +183 -183
- package/src/tool/cronGenerator/seo.astro +15 -15
- package/src/tool/cssSpecificityCalculator/i18n/ja.ts +1 -1
- package/src/tool/cssSpecificityCalculator/i18n/ko.ts +1 -1
- package/src/tool/cssSpecificityCalculator/i18n/zh.ts +1 -1
- package/src/tool/cssSpecificityCalculator/seo.astro +15 -15
- package/src/tool/cssToInlineConverter/i18n/ja.ts +1 -1
- package/src/tool/cssToInlineConverter/i18n/ko.ts +1 -1
- package/src/tool/cssToInlineConverter/i18n/zh.ts +1 -1
- package/src/tool/cssToInlineConverter/seo.astro +15 -15
- package/src/tool/duplicateCssRemover/i18n/ja.ts +1 -1
- package/src/tool/duplicateCssRemover/i18n/ko.ts +1 -1
- package/src/tool/duplicateCssRemover/i18n/zh.ts +1 -1
- package/src/tool/duplicateCssRemover/seo.astro +15 -15
- package/src/tool/generadorSecurityTxt/i18n/ja.ts +1 -1
- package/src/tool/generadorSecurityTxt/i18n/ko.ts +1 -1
- package/src/tool/generadorSecurityTxt/i18n/zh.ts +1 -1
- package/src/tool/generadorSecurityTxt/seo.astro +15 -15
- package/src/tool/hashGenerator/i18n/ja.ts +1 -1
- package/src/tool/hashGenerator/i18n/ko.ts +1 -1
- package/src/tool/hashGenerator/seo.astro +15 -15
- package/src/tool/inspectorCertificadosSsl/i18n/ja.ts +1 -1
- package/src/tool/inspectorCertificadosSsl/i18n/ko.ts +1 -1
- package/src/tool/inspectorCertificadosSsl/i18n/zh.ts +1 -1
- package/src/tool/inspectorCertificadosSsl/seo.astro +15 -15
- package/src/tool/jsonFormatter/seo.astro +15 -15
- package/src/tool/jwtDecoder/i18n/es.ts +248 -248
- package/src/tool/jwtDecoder/i18n/fr.ts +248 -248
- package/src/tool/jwtDecoder/i18n/tr.ts +248 -248
- package/src/tool/keycode/seo.astro +15 -15
- package/src/tool/llmCostCalculator/i18n/fr.ts +149 -149
- package/src/tool/llmCostCalculator/i18n/ja.ts +1 -1
- package/src/tool/llmCostCalculator/i18n/ko.ts +1 -1
- package/src/tool/llmCostCalculator/seo.astro +15 -15
- package/src/tool/mobileMockupGenerator/i18n/ja.ts +1 -1
- package/src/tool/mobileMockupGenerator/i18n/ko.ts +1 -1
- package/src/tool/mobileMockupGenerator/i18n/zh.ts +1 -1
- package/src/tool/mobileMockupGenerator/seo.astro +15 -15
- package/src/tool/musicalTypography/i18n/ja.ts +1 -1
- package/src/tool/musicalTypography/i18n/ko.ts +1 -1
- package/src/tool/musicalTypography/i18n/zh.ts +1 -1
- package/src/tool/musicalTypography/seo.astro +15 -15
- package/src/tool/placeholderGenerator/i18n/ja.ts +1 -1
- package/src/tool/placeholderGenerator/i18n/ko.ts +1 -1
- package/src/tool/placeholderGenerator/i18n/zh.ts +1 -1
- package/src/tool/placeholderGenerator/seo.astro +15 -15
- package/src/tool/promoteThisWebsite/entry.ts +13 -0
- package/src/tool/promoteThisWebsite/i18n/de.ts +95 -0
- package/src/tool/promoteThisWebsite/i18n/fr.ts +95 -0
- package/src/tool/promoteThisWebsite/i18n/id.ts +95 -0
- package/src/tool/promoteThisWebsite/i18n/it.ts +95 -0
- package/src/tool/promoteThisWebsite/i18n/ja.ts +95 -0
- package/src/tool/promoteThisWebsite/i18n/ko.ts +95 -0
- package/src/tool/promoteThisWebsite/i18n/nl.ts +95 -0
- package/src/tool/promoteThisWebsite/i18n/pl.ts +95 -0
- package/src/tool/promoteThisWebsite/i18n/pt.ts +95 -0
- package/src/tool/promoteThisWebsite/i18n/ru.ts +95 -0
- package/src/tool/promoteThisWebsite/i18n/sv.ts +95 -0
- package/src/tool/promoteThisWebsite/i18n/tr.ts +95 -0
- package/src/tool/promoteThisWebsite/i18n/zh.ts +95 -0
- package/src/tool/promptLibrary/i18n/ja.ts +1 -1
- package/src/tool/promptLibrary/i18n/ko.ts +1 -1
- package/src/tool/promptLibrary/i18n/zh.ts +1 -1
- package/src/tool/promptLibrary/seo.astro +15 -15
- package/src/tool/readabilityCalculator/i18n/ja.ts +1 -1
- package/src/tool/readabilityCalculator/i18n/ko.ts +1 -1
- package/src/tool/readabilityCalculator/i18n/zh.ts +1 -1
- package/src/tool/readabilityCalculator/seo.astro +15 -15
- package/src/tool/serpPixelSimulator/entry.ts +30 -30
- package/src/tool/serpPixelSimulator/i18n/en.ts +211 -211
- package/src/tool/serpPixelSimulator/i18n/fr.ts +214 -214
- package/src/tool/serpPixelSimulator/i18n/ru.ts +214 -214
- package/src/tool/serpPixelSimulator/logic.ts +18 -18
- package/src/tool/serpPixelSimulator/serp-pixel-simulator.css +195 -195
- package/src/tool/svgSanitizer/i18n/ja.ts +1 -1
- package/src/tool/svgSanitizer/i18n/ko.ts +1 -1
- package/src/tool/svgSanitizer/seo.astro +15 -15
- package/src/tool/svgToCss/i18n/ja.ts +1 -1
- package/src/tool/svgToCss/i18n/ko.ts +1 -1
- package/src/tool/svgToCss/seo.astro +15 -15
- package/src/tool/urlCleaner/i18n/ja.ts +1 -1
- package/src/tool/urlCleaner/i18n/ko.ts +1 -1
- package/src/tool/urlCleaner/i18n/zh.ts +1 -1
- package/src/tool/urlCleaner/seo.astro +15 -15
- package/src/tool/urlEncoderDecoder/i18n/es.ts +146 -146
- package/src/tool/urlEncoderDecoder/i18n/ko.ts +1 -1
- package/src/tool/urlEncoderDecoder/seo.astro +15 -15
- package/src/tool/utmGenerator/i18n/ja.ts +1 -1
- package/src/tool/utmGenerator/i18n/ko.ts +1 -1
- package/src/tool/utmGenerator/i18n/zh.ts +1 -1
- package/src/tool/utmGenerator/seo.astro +15 -15
- package/src/types.ts +1 -1
|
@@ -1,147 +1,147 @@
|
|
|
1
1
|
import { bibliography } from '../bibliography';
|
|
2
|
-
import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
|
|
3
|
-
import type { ToolLocaleContent } from '../../../types';
|
|
4
|
-
import type { CalculadoraTiempoDatosUI } from '../ui';
|
|
5
|
-
|
|
6
|
-
const slug = 'data-time-calculator-web-speed-impact';
|
|
7
|
-
const title = '数据时间计算器:网页速度的影响';
|
|
8
|
-
const description = '了解您的用户在 3G、4G 和 5G 连接下等待网站加载时损失了多少寿命。计算网站权重的真实影响。';
|
|
9
|
-
|
|
10
|
-
const faqData = [
|
|
11
|
-
{
|
|
12
|
-
question: '为什么了解网站加载时间很重要?',
|
|
13
|
-
answer: '因为它直接影响用户体验、SEO 和转化率。Google 的记录显示,每一秒的延迟都会使转化率降低 7%。此外,53% 的移动端访问者会放弃加载时间超过 3 秒的页面。',
|
|
14
|
-
},
|
|
15
|
-
{
|
|
16
|
-
question: '寿命损失的那些微小百分比代表什么?',
|
|
17
|
-
answer: '它们代表了一个人总寿命(约 80 年或 25 亿秒)中用于等待页面加载的时间百分比。虽然单个数值看起来很小,但乘以数百万用户,就代表了巨大的、被浪费的人力时间。',
|
|
18
|
-
},
|
|
19
|
-
{
|
|
20
|
-
question: '全球平均连接速度是多少?',
|
|
21
|
-
answer: '4G 是发达国家的标准。然而,发展中国家的数百万用户仍然依赖 3G。这就是为什么针对所有连接速度优化网站至关重要的原因。',
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
question: '网站的权重应该是多少?',
|
|
25
|
-
answer: 'Google 建议首页在典型的 4G 连接下,加载时间应少于 3 秒。为此,网站的权重理想情况下应在 1-2 MB 之间。然而,全球平均水平接近 2-3 MB。',
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
question: '如何减轻网站权重?',
|
|
29
|
-
answer: '主要策略:优化图像(占权重的 50-80%)、压缩 CSS 和 JavaScript、使用延迟加载(lazy loading)、实施浏览器缓存以及使用 CDN。图像优化通常是影响最大的因素。',
|
|
30
|
-
},
|
|
31
|
-
{
|
|
32
|
-
question: '加载速度会影响 Google 排名吗?',
|
|
33
|
-
answer: '是的,绝对会。Google 将 Core Web Vitals 视为重要的排名因素。加载缓慢的网站排名会低于加载较快的网站,即使内容相似也是如此。',
|
|
34
|
-
},
|
|
35
|
-
];
|
|
36
|
-
|
|
37
|
-
const howToData = [
|
|
38
|
-
{ name: '输入您的网站权重', text: '使用浏览器开发者工具或 WebPageTest 获取页面权重。以 MB 为单位输入该值。' },
|
|
39
|
-
{ name: '观察加载时间', text: '计算器显示网站在 3G、4G 和 5G 下加载所需的秒数。现实中的时间通常更高。' },
|
|
40
|
-
{ name: '了解对寿命的影响', text: '"寿命"百分比显示了一个人有多少生命花在了等待上。以此作为优化的动力。' },
|
|
41
|
-
{ name: '优化并重新计算', text: '优化后,再次测量并重新计算。观察微小的改进如何产生重大影响。' },
|
|
42
|
-
];
|
|
43
|
-
|
|
44
|
-
const faqSchema: WithContext<FAQPage> = {
|
|
45
|
-
'@context': 'https://schema.org',
|
|
46
|
-
'@type': 'FAQPage',
|
|
47
|
-
mainEntity: faqData.map((item) => ({
|
|
48
|
-
'@type': 'Question',
|
|
49
|
-
name: item.question,
|
|
50
|
-
acceptedAnswer: { '@type': 'Answer', text: item.answer },
|
|
51
|
-
})),
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
const howToSchema: WithContext<HowToThing> = {
|
|
55
|
-
'@context': 'https://schema.org',
|
|
56
|
-
'@type': 'HowTo',
|
|
57
|
-
name: title,
|
|
58
|
-
description,
|
|
59
|
-
step: howToData.map((s, i) => ({ '@type': 'HowToStep', position: i + 1, name: s.name, text: s.text })),
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
const appSchema: WithContext<SoftwareApplication> = {
|
|
63
|
-
'@context': 'https://schema.org',
|
|
64
|
-
'@type': 'SoftwareApplication',
|
|
65
|
-
name: title,
|
|
66
|
-
description,
|
|
67
|
-
applicationCategory: 'UtilityApplication',
|
|
68
|
-
operatingSystem: 'All',
|
|
69
|
-
offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
|
|
70
|
-
inLanguage: 'zh',
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
const ui: CalculadoraTiempoDatosUI = {
|
|
74
|
-
headerTitle: '网络中流逝的时间',
|
|
75
|
-
labelWebSize: '网站权重 (MB)',
|
|
76
|
-
unit: 'MB',
|
|
77
|
-
presetsLabel: '现实案例',
|
|
78
|
-
labelSpeed: '连接速度',
|
|
79
|
-
speedLabel3g: '3G',
|
|
80
|
-
speedValue3g: '0.4 Mbps',
|
|
81
|
-
speedLabel4g: '4G/LTE',
|
|
82
|
-
speedValue4g: '10 Mbps',
|
|
83
|
-
speedLabel5g: '5G',
|
|
84
|
-
speedValue5g: '100+ Mbps',
|
|
85
|
-
labelTimes: '每天访问多少次?',
|
|
86
|
-
resultTitle: '结果',
|
|
87
|
-
resultSingleLoad: '单次加载',
|
|
88
|
-
resultDailyTotal: '每日总计',
|
|
89
|
-
resultTimePerYear: '每年的等待时间',
|
|
90
|
-
resultLifeYears: '一生的等待时间',
|
|
91
|
-
resultMessage: '您已损失了大约 1 年的寿命',
|
|
92
|
-
copyMessage: '已复制',
|
|
93
|
-
preset3g: '3G',
|
|
94
|
-
preset4g: '4G',
|
|
95
|
-
preset5g: '5G',
|
|
96
|
-
};
|
|
97
|
-
|
|
98
|
-
export const content: ToolLocaleContent<CalculadoraTiempoDatosUI> = {
|
|
99
|
-
slug,
|
|
100
|
-
title,
|
|
101
|
-
description,
|
|
102
|
-
ui,
|
|
103
|
-
faqTitle: '常见问题',
|
|
104
|
-
faq: faqData,
|
|
2
|
+
import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
|
|
3
|
+
import type { ToolLocaleContent } from '../../../types';
|
|
4
|
+
import type { CalculadoraTiempoDatosUI } from '../ui';
|
|
5
|
+
|
|
6
|
+
const slug = 'data-time-calculator-web-speed-impact';
|
|
7
|
+
const title = '数据时间计算器:网页速度的影响';
|
|
8
|
+
const description = '了解您的用户在 3G、4G 和 5G 连接下等待网站加载时损失了多少寿命。计算网站权重的真实影响。';
|
|
9
|
+
|
|
10
|
+
const faqData = [
|
|
11
|
+
{
|
|
12
|
+
question: '为什么了解网站加载时间很重要?',
|
|
13
|
+
answer: '因为它直接影响用户体验、SEO 和转化率。Google 的记录显示,每一秒的延迟都会使转化率降低 7%。此外,53% 的移动端访问者会放弃加载时间超过 3 秒的页面。',
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
question: '寿命损失的那些微小百分比代表什么?',
|
|
17
|
+
answer: '它们代表了一个人总寿命(约 80 年或 25 亿秒)中用于等待页面加载的时间百分比。虽然单个数值看起来很小,但乘以数百万用户,就代表了巨大的、被浪费的人力时间。',
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
question: '全球平均连接速度是多少?',
|
|
21
|
+
answer: '4G 是发达国家的标准。然而,发展中国家的数百万用户仍然依赖 3G。这就是为什么针对所有连接速度优化网站至关重要的原因。',
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
question: '网站的权重应该是多少?',
|
|
25
|
+
answer: 'Google 建议首页在典型的 4G 连接下,加载时间应少于 3 秒。为此,网站的权重理想情况下应在 1-2 MB 之间。然而,全球平均水平接近 2-3 MB。',
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
question: '如何减轻网站权重?',
|
|
29
|
+
answer: '主要策略:优化图像(占权重的 50-80%)、压缩 CSS 和 JavaScript、使用延迟加载(lazy loading)、实施浏览器缓存以及使用 CDN。图像优化通常是影响最大的因素。',
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
question: '加载速度会影响 Google 排名吗?',
|
|
33
|
+
answer: '是的,绝对会。Google 将 Core Web Vitals 视为重要的排名因素。加载缓慢的网站排名会低于加载较快的网站,即使内容相似也是如此。',
|
|
34
|
+
},
|
|
35
|
+
];
|
|
36
|
+
|
|
37
|
+
const howToData = [
|
|
38
|
+
{ name: '输入您的网站权重', text: '使用浏览器开发者工具或 WebPageTest 获取页面权重。以 MB 为单位输入该值。' },
|
|
39
|
+
{ name: '观察加载时间', text: '计算器显示网站在 3G、4G 和 5G 下加载所需的秒数。现实中的时间通常更高。' },
|
|
40
|
+
{ name: '了解对寿命的影响', text: '"寿命"百分比显示了一个人有多少生命花在了等待上。以此作为优化的动力。' },
|
|
41
|
+
{ name: '优化并重新计算', text: '优化后,再次测量并重新计算。观察微小的改进如何产生重大影响。' },
|
|
42
|
+
];
|
|
43
|
+
|
|
44
|
+
const faqSchema: WithContext<FAQPage> = {
|
|
45
|
+
'@context': 'https://schema.org',
|
|
46
|
+
'@type': 'FAQPage',
|
|
47
|
+
mainEntity: faqData.map((item) => ({
|
|
48
|
+
'@type': 'Question',
|
|
49
|
+
name: item.question,
|
|
50
|
+
acceptedAnswer: { '@type': 'Answer', text: item.answer },
|
|
51
|
+
})),
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
const howToSchema: WithContext<HowToThing> = {
|
|
55
|
+
'@context': 'https://schema.org',
|
|
56
|
+
'@type': 'HowTo',
|
|
57
|
+
name: title,
|
|
58
|
+
description,
|
|
59
|
+
step: howToData.map((s, i) => ({ '@type': 'HowToStep', position: i + 1, name: s.name, text: s.text })),
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
const appSchema: WithContext<SoftwareApplication> = {
|
|
63
|
+
'@context': 'https://schema.org',
|
|
64
|
+
'@type': 'SoftwareApplication',
|
|
65
|
+
name: title,
|
|
66
|
+
description,
|
|
67
|
+
applicationCategory: 'UtilityApplication',
|
|
68
|
+
operatingSystem: 'All',
|
|
69
|
+
offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
|
|
70
|
+
inLanguage: 'zh',
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
const ui: CalculadoraTiempoDatosUI = {
|
|
74
|
+
headerTitle: '网络中流逝的时间',
|
|
75
|
+
labelWebSize: '网站权重 (MB)',
|
|
76
|
+
unit: 'MB',
|
|
77
|
+
presetsLabel: '现实案例',
|
|
78
|
+
labelSpeed: '连接速度',
|
|
79
|
+
speedLabel3g: '3G',
|
|
80
|
+
speedValue3g: '0.4 Mbps',
|
|
81
|
+
speedLabel4g: '4G/LTE',
|
|
82
|
+
speedValue4g: '10 Mbps',
|
|
83
|
+
speedLabel5g: '5G',
|
|
84
|
+
speedValue5g: '100+ Mbps',
|
|
85
|
+
labelTimes: '每天访问多少次?',
|
|
86
|
+
resultTitle: '结果',
|
|
87
|
+
resultSingleLoad: '单次加载',
|
|
88
|
+
resultDailyTotal: '每日总计',
|
|
89
|
+
resultTimePerYear: '每年的等待时间',
|
|
90
|
+
resultLifeYears: '一生的等待时间',
|
|
91
|
+
resultMessage: '您已损失了大约 1 年的寿命',
|
|
92
|
+
copyMessage: '已复制',
|
|
93
|
+
preset3g: '3G',
|
|
94
|
+
preset4g: '4G',
|
|
95
|
+
preset5g: '5G',
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
export const content: ToolLocaleContent<CalculadoraTiempoDatosUI> = {
|
|
99
|
+
slug,
|
|
100
|
+
title,
|
|
101
|
+
description,
|
|
102
|
+
ui,
|
|
103
|
+
faqTitle: '常见问题',
|
|
104
|
+
faq: faqData,
|
|
105
105
|
bibliographyTitle: '关于网页优化的技术资源',
|
|
106
106
|
bibliography,
|
|
107
|
-
howTo: howToData,
|
|
108
|
-
schemas: [faqSchema, howToSchema, appSchema],
|
|
109
|
-
seo: [
|
|
110
|
-
{ type: 'title', text: '为什么网站加载速度至关重要', level: 2 },
|
|
111
|
-
{
|
|
112
|
-
type: 'paragraph',
|
|
113
|
-
html: '在当今数字时代,网站加载速度不是一种奢侈品,而是一种必需。在留住用户、提高搜索排名和实现转化最大化方面,每一毫秒都至关重要。现代用户期望页面加载时间少于 3 秒。',
|
|
114
|
-
},
|
|
115
|
-
{ type: 'title', text: '对用户体验的影响', level: 3 },
|
|
116
|
-
{
|
|
117
|
-
type: 'paragraph',
|
|
118
|
-
html: '如果加载时间超过 3 秒,53% 的移动访客会离开页面。每增加一秒的延迟,转化率就会下降 7%。',
|
|
119
|
-
},
|
|
120
|
-
{ type: 'title', text: '了解连接速度', level: 3 },
|
|
121
|
-
{
|
|
122
|
-
type: 'list',
|
|
123
|
-
items: [
|
|
124
|
-
'<strong>3G:</strong> 0.4 Mbps - 常见于农村和发展中国家',
|
|
125
|
-
'<strong>4G/LTE:</strong> 10 Mbps - 发达国家的标准',
|
|
126
|
-
'<strong>5G:</strong> 100+ Mbps - 正在逐步扩展,但仍受限',
|
|
127
|
-
],
|
|
128
|
-
},
|
|
129
|
-
{ type: 'title', text: '减轻网站权重的策略', level: 3 },
|
|
130
|
-
{
|
|
131
|
-
type: 'list',
|
|
132
|
-
items: [
|
|
133
|
-
'<strong>图像优化:</strong>占权重的 50-80%。使用 TinyPNG 等工具可减少 40-60%。',
|
|
134
|
-
'<strong>压缩:</strong>删除 CSS 和 JavaScript 中不必要的代码。可节省 30-50%。',
|
|
135
|
-
'<strong>延迟加载:</strong>仅当用户滚动到图像时才加载它们。',
|
|
136
|
-
'<strong>浏览器缓存:</strong>在用户浏览器上缓存静态文件。',
|
|
137
|
-
'<strong>CDN:</strong>从地理位置较近的服务器提供内容。',
|
|
138
|
-
],
|
|
139
|
-
},
|
|
140
|
-
{ type: 'title', text: '结论:每一秒都很重要', level: 2 },
|
|
141
|
-
{
|
|
142
|
-
type: 'paragraph',
|
|
143
|
-
html: '您的网站通常是用户对您品牌的第一印象。缓慢的网站会让用户感到沮丧并导致业务流失。快速且响应迅速的网站可以创造积极的体验并改善您的所有指标。',
|
|
144
|
-
},
|
|
145
|
-
],
|
|
146
|
-
};
|
|
147
|
-
|
|
107
|
+
howTo: howToData,
|
|
108
|
+
schemas: [faqSchema, howToSchema, appSchema],
|
|
109
|
+
seo: [
|
|
110
|
+
{ type: 'title', text: '为什么网站加载速度至关重要', level: 2 },
|
|
111
|
+
{
|
|
112
|
+
type: 'paragraph',
|
|
113
|
+
html: '在当今数字时代,网站加载速度不是一种奢侈品,而是一种必需。在留住用户、提高搜索排名和实现转化最大化方面,每一毫秒都至关重要。现代用户期望页面加载时间少于 3 秒。',
|
|
114
|
+
},
|
|
115
|
+
{ type: 'title', text: '对用户体验的影响', level: 3 },
|
|
116
|
+
{
|
|
117
|
+
type: 'paragraph',
|
|
118
|
+
html: '如果加载时间超过 3 秒,53% 的移动访客会离开页面。每增加一秒的延迟,转化率就会下降 7%。',
|
|
119
|
+
},
|
|
120
|
+
{ type: 'title', text: '了解连接速度', level: 3 },
|
|
121
|
+
{
|
|
122
|
+
type: 'list',
|
|
123
|
+
items: [
|
|
124
|
+
'<strong>3G:</strong> 0.4 Mbps - 常见于农村和发展中国家',
|
|
125
|
+
'<strong>4G/LTE:</strong> 10 Mbps - 发达国家的标准',
|
|
126
|
+
'<strong>5G:</strong> 100+ Mbps - 正在逐步扩展,但仍受限',
|
|
127
|
+
],
|
|
128
|
+
},
|
|
129
|
+
{ type: 'title', text: '减轻网站权重的策略', level: 3 },
|
|
130
|
+
{
|
|
131
|
+
type: 'list',
|
|
132
|
+
items: [
|
|
133
|
+
'<strong>图像优化:</strong>占权重的 50-80%。使用 TinyPNG 等工具可减少 40-60%。',
|
|
134
|
+
'<strong>压缩:</strong>删除 CSS 和 JavaScript 中不必要的代码。可节省 30-50%。',
|
|
135
|
+
'<strong>延迟加载:</strong>仅当用户滚动到图像时才加载它们。',
|
|
136
|
+
'<strong>浏览器缓存:</strong>在用户浏览器上缓存静态文件。',
|
|
137
|
+
'<strong>CDN:</strong>从地理位置较近的服务器提供内容。',
|
|
138
|
+
],
|
|
139
|
+
},
|
|
140
|
+
{ type: 'title', text: '结论:每一秒都很重要', level: 2 },
|
|
141
|
+
{
|
|
142
|
+
type: 'paragraph',
|
|
143
|
+
html: '您的网站通常是用户对您品牌的第一印象。缓慢的网站会让用户感到沮丧并导致业务流失。快速且响应迅速的网站可以创造积极的体验并改善您的所有指标。',
|
|
144
|
+
},
|
|
145
|
+
],
|
|
146
|
+
};
|
|
147
|
+
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
---
|
|
2
|
-
import { SEORenderer } from '@jjlmoya/utils-shared';
|
|
3
|
-
import { calculadoraTiempoDatos } from './index';
|
|
4
|
-
import type { KnownLocale } from '../../types';
|
|
5
|
-
|
|
6
|
-
interface Props {
|
|
7
|
-
locale?: KnownLocale;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
const { locale = 'es' } = Astro.props;
|
|
11
|
-
const content = await calculadoraTiempoDatos.i18n[locale]?.();
|
|
12
|
-
if (!content) return null;
|
|
13
|
-
---
|
|
14
|
-
|
|
15
|
-
{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}
|
|
1
|
+
---
|
|
2
|
+
import { SEORenderer } from '@jjlmoya/utils-shared';
|
|
3
|
+
import { calculadoraTiempoDatos } from './index';
|
|
4
|
+
import type { KnownLocale } from '../../types';
|
|
5
|
+
|
|
6
|
+
interface Props {
|
|
7
|
+
locale?: KnownLocale;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
const { locale = 'es' } = Astro.props;
|
|
11
|
+
const content = await calculadoraTiempoDatos.i18n[locale]?.();
|
|
12
|
+
if (!content) return null;
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}
|
|
@@ -1,123 +1,123 @@
|
|
|
1
1
|
import { bibliography } from '../bibliography';
|
|
2
|
-
import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
|
|
3
|
-
import type { ToolLocaleContent } from '../../../types';
|
|
4
|
-
import type { ColorConverterUI } from '../ui';
|
|
5
|
-
|
|
6
|
-
const slug = 'farbkonverter-rgb-hex-hsl';
|
|
7
|
-
const title = 'Online Farbkonverter RGB HEX und HSL';
|
|
8
|
-
const description = 'Konvertieren Sie Farben sofort zwischen RGB, HEX und HSL. Generieren Sie komplementäre Farbharmonien und analysieren Sie den WCAG-Kontrast. 100 % clientseitig und privat.';
|
|
9
|
-
|
|
10
|
-
const faqData = [
|
|
11
|
-
{
|
|
12
|
-
question: 'Wie funktioniert der Farbkonverter für RGB zu HEX und HSL?',
|
|
13
|
-
answer: 'Das Tool nimmt Rot-, Grün- und Blauwerte (RGB) und verwendet mathematische Algorithmen, um diese in ihr Hexadezimal-Äquivalent (HEX) oder in Werte für Farbton, Sättigung und Helligkeit (HSL) umzurechnen. Es funktioniert auch umgekehrt.',
|
|
14
|
-
},
|
|
15
|
-
{
|
|
16
|
-
question: 'Warum sollte ich in meinen Designs HSL anstelle von HEX verwenden?',
|
|
17
|
-
answer: 'Das HSL-Format ist viel intuitiver. Es ermöglicht Ihnen, Sättigung oder Helligkeit anzupassen, ohne den Farbton zu ändern, was das Erstellen harmonischer Paletten oder Schaltflächenzustände (Hover, Deaktiviert) erheblich erleichtert.',
|
|
18
|
-
},
|
|
19
|
-
{
|
|
20
|
-
question: 'Was ist der relative Kontrastwert?',
|
|
21
|
-
answer: 'Dies ist eine Kennzahl, die die Lesbarkeit von Text auf einem Hintergrund basierend auf seiner Luminanz angibt. Ein hoher Kontrast stellt sicher, dass Menschen mit Sehbehinderungen den Inhalt gemäß den WCAG-Barrierefreiheitsrichtlinien lesen können.',
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
question: 'Ist es sicher, diesen Online-Farbkonverter zu verwenden?',
|
|
25
|
-
answer: 'Absolut. Da er zu 100 % clientseitig ausgeführt wird, verlassen Ihre Farbdaten niemals Ihren Computer. Die gesamte Verarbeitung findet direkt in Ihrem Browser statt, was Privatsphäre und sofortige Leistung garantiert.',
|
|
26
|
-
},
|
|
27
|
-
];
|
|
28
|
-
|
|
29
|
-
const howToData = [
|
|
30
|
-
{ name: 'Farbe auswählen', text: 'Verwenden Sie die Schieberegler für Rot, Grün und Blau oder geben Sie einen HEX-Code direkt in das Textfeld ein.' },
|
|
31
|
-
{ name: 'RGB-Kanäle anpassen', text: 'Bewegen Sie die Schieberegler, um die Intensität jedes Kanals zu ändern und die Aktualisierung in Echtzeit zu sehen.' },
|
|
32
|
-
{ name: 'Format kopieren', text: 'Klicken Sie auf die Schaltfläche "Kopieren" neben dem HEX-, RGB- oder HSL-Format, das Sie benötigen.' },
|
|
33
|
-
{ name: 'Harmonien erkunden', text: 'Klicken Sie auf die Harmoniefarben (komplementär, analog, triadisch), um sie in die Zwischenablage zu kopieren.' },
|
|
34
|
-
];
|
|
35
|
-
|
|
36
|
-
const faqSchema: WithContext<FAQPage> = {
|
|
37
|
-
'@context': 'https://schema.org',
|
|
38
|
-
'@type': 'FAQPage',
|
|
39
|
-
mainEntity: faqData.map((item) => ({
|
|
40
|
-
'@type': 'Question',
|
|
41
|
-
name: item.question,
|
|
42
|
-
acceptedAnswer: { '@type': 'Answer', text: item.answer },
|
|
43
|
-
})),
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
const howToSchema: WithContext<HowToThing> = {
|
|
47
|
-
'@context': 'https://schema.org',
|
|
48
|
-
'@type': 'HowTo',
|
|
49
|
-
name: title,
|
|
50
|
-
description,
|
|
51
|
-
step: howToData.map((s, i) => ({ '@type': 'HowToStep', position: i + 1, name: s.name, text: s.text })),
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
const appSchema: WithContext<SoftwareApplication> = {
|
|
55
|
-
'@context': 'https://schema.org',
|
|
56
|
-
'@type': 'SoftwareApplication',
|
|
57
|
-
name: title,
|
|
58
|
-
description,
|
|
59
|
-
applicationCategory: 'UtilityApplication',
|
|
60
|
-
operatingSystem: 'All',
|
|
61
|
-
offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
|
|
62
|
-
inLanguage: 'de',
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
const ui: ColorConverterUI = {
|
|
66
|
-
labelPreview: 'Vorschau (Klicken zum Kopieren von HEX)',
|
|
67
|
-
labelHarmonies: 'Farbharmonien',
|
|
68
|
-
labelR: 'Rot',
|
|
69
|
-
labelG: 'Grün',
|
|
70
|
-
labelB: 'Blau',
|
|
71
|
-
labelComp: 'Komp.',
|
|
72
|
-
labelAna1: 'Analog 1',
|
|
73
|
-
labelAna2: 'Analog 2',
|
|
74
|
-
labelTri1: 'Triade 1',
|
|
75
|
-
labelTri2: 'Triade 2',
|
|
76
|
-
btnCopy: 'Kopieren',
|
|
77
|
-
btnCopied: 'Kopiert',
|
|
78
|
-
contrastLabel: 'Kontrast',
|
|
79
|
-
clickToCopy: 'Klicken zum Kopieren',
|
|
80
|
-
};
|
|
81
|
-
|
|
82
|
-
export const content: ToolLocaleContent<ColorConverterUI> = {
|
|
83
|
-
slug,
|
|
84
|
-
title,
|
|
85
|
-
description,
|
|
86
|
-
ui,
|
|
87
|
-
faqTitle: 'Häufig gestellte Fragen',
|
|
88
|
-
faq: faqData,
|
|
2
|
+
import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
|
|
3
|
+
import type { ToolLocaleContent } from '../../../types';
|
|
4
|
+
import type { ColorConverterUI } from '../ui';
|
|
5
|
+
|
|
6
|
+
const slug = 'farbkonverter-rgb-hex-hsl';
|
|
7
|
+
const title = 'Online Farbkonverter RGB HEX und HSL';
|
|
8
|
+
const description = 'Konvertieren Sie Farben sofort zwischen RGB, HEX und HSL. Generieren Sie komplementäre Farbharmonien und analysieren Sie den WCAG-Kontrast. 100 % clientseitig und privat.';
|
|
9
|
+
|
|
10
|
+
const faqData = [
|
|
11
|
+
{
|
|
12
|
+
question: 'Wie funktioniert der Farbkonverter für RGB zu HEX und HSL?',
|
|
13
|
+
answer: 'Das Tool nimmt Rot-, Grün- und Blauwerte (RGB) und verwendet mathematische Algorithmen, um diese in ihr Hexadezimal-Äquivalent (HEX) oder in Werte für Farbton, Sättigung und Helligkeit (HSL) umzurechnen. Es funktioniert auch umgekehrt.',
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
question: 'Warum sollte ich in meinen Designs HSL anstelle von HEX verwenden?',
|
|
17
|
+
answer: 'Das HSL-Format ist viel intuitiver. Es ermöglicht Ihnen, Sättigung oder Helligkeit anzupassen, ohne den Farbton zu ändern, was das Erstellen harmonischer Paletten oder Schaltflächenzustände (Hover, Deaktiviert) erheblich erleichtert.',
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
question: 'Was ist der relative Kontrastwert?',
|
|
21
|
+
answer: 'Dies ist eine Kennzahl, die die Lesbarkeit von Text auf einem Hintergrund basierend auf seiner Luminanz angibt. Ein hoher Kontrast stellt sicher, dass Menschen mit Sehbehinderungen den Inhalt gemäß den WCAG-Barrierefreiheitsrichtlinien lesen können.',
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
question: 'Ist es sicher, diesen Online-Farbkonverter zu verwenden?',
|
|
25
|
+
answer: 'Absolut. Da er zu 100 % clientseitig ausgeführt wird, verlassen Ihre Farbdaten niemals Ihren Computer. Die gesamte Verarbeitung findet direkt in Ihrem Browser statt, was Privatsphäre und sofortige Leistung garantiert.',
|
|
26
|
+
},
|
|
27
|
+
];
|
|
28
|
+
|
|
29
|
+
const howToData = [
|
|
30
|
+
{ name: 'Farbe auswählen', text: 'Verwenden Sie die Schieberegler für Rot, Grün und Blau oder geben Sie einen HEX-Code direkt in das Textfeld ein.' },
|
|
31
|
+
{ name: 'RGB-Kanäle anpassen', text: 'Bewegen Sie die Schieberegler, um die Intensität jedes Kanals zu ändern und die Aktualisierung in Echtzeit zu sehen.' },
|
|
32
|
+
{ name: 'Format kopieren', text: 'Klicken Sie auf die Schaltfläche "Kopieren" neben dem HEX-, RGB- oder HSL-Format, das Sie benötigen.' },
|
|
33
|
+
{ name: 'Harmonien erkunden', text: 'Klicken Sie auf die Harmoniefarben (komplementär, analog, triadisch), um sie in die Zwischenablage zu kopieren.' },
|
|
34
|
+
];
|
|
35
|
+
|
|
36
|
+
const faqSchema: WithContext<FAQPage> = {
|
|
37
|
+
'@context': 'https://schema.org',
|
|
38
|
+
'@type': 'FAQPage',
|
|
39
|
+
mainEntity: faqData.map((item) => ({
|
|
40
|
+
'@type': 'Question',
|
|
41
|
+
name: item.question,
|
|
42
|
+
acceptedAnswer: { '@type': 'Answer', text: item.answer },
|
|
43
|
+
})),
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
const howToSchema: WithContext<HowToThing> = {
|
|
47
|
+
'@context': 'https://schema.org',
|
|
48
|
+
'@type': 'HowTo',
|
|
49
|
+
name: title,
|
|
50
|
+
description,
|
|
51
|
+
step: howToData.map((s, i) => ({ '@type': 'HowToStep', position: i + 1, name: s.name, text: s.text })),
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
const appSchema: WithContext<SoftwareApplication> = {
|
|
55
|
+
'@context': 'https://schema.org',
|
|
56
|
+
'@type': 'SoftwareApplication',
|
|
57
|
+
name: title,
|
|
58
|
+
description,
|
|
59
|
+
applicationCategory: 'UtilityApplication',
|
|
60
|
+
operatingSystem: 'All',
|
|
61
|
+
offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
|
|
62
|
+
inLanguage: 'de',
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
const ui: ColorConverterUI = {
|
|
66
|
+
labelPreview: 'Vorschau (Klicken zum Kopieren von HEX)',
|
|
67
|
+
labelHarmonies: 'Farbharmonien',
|
|
68
|
+
labelR: 'Rot',
|
|
69
|
+
labelG: 'Grün',
|
|
70
|
+
labelB: 'Blau',
|
|
71
|
+
labelComp: 'Komp.',
|
|
72
|
+
labelAna1: 'Analog 1',
|
|
73
|
+
labelAna2: 'Analog 2',
|
|
74
|
+
labelTri1: 'Triade 1',
|
|
75
|
+
labelTri2: 'Triade 2',
|
|
76
|
+
btnCopy: 'Kopieren',
|
|
77
|
+
btnCopied: 'Kopiert',
|
|
78
|
+
contrastLabel: 'Kontrast',
|
|
79
|
+
clickToCopy: 'Klicken zum Kopieren',
|
|
80
|
+
};
|
|
81
|
+
|
|
82
|
+
export const content: ToolLocaleContent<ColorConverterUI> = {
|
|
83
|
+
slug,
|
|
84
|
+
title,
|
|
85
|
+
description,
|
|
86
|
+
ui,
|
|
87
|
+
faqTitle: 'Häufig gestellte Fragen',
|
|
88
|
+
faq: faqData,
|
|
89
89
|
bibliographyTitle: 'Farben- und Webdesign-Ressourcen',
|
|
90
90
|
bibliography,
|
|
91
|
-
howTo: howToData,
|
|
92
|
-
schemas: [faqSchema, howToSchema, appSchema],
|
|
93
|
-
seo: [
|
|
94
|
-
{ type: 'title', text: 'RGB zu HEX und HSL Farbkonverter für Entwickler', level: 2 },
|
|
95
|
-
{
|
|
96
|
-
type: 'paragraph',
|
|
97
|
-
html: 'In der Welt der <strong>Frontend-Entwicklung</strong> und des <strong>UI/UX-Designs</strong> ist Farbmanagement eine ständige Aufgabe. Unser <strong>Online-Farbkonverter</strong> ermöglicht es Ihnen, Werte zwischen <strong>HEX, RGB und HSL</strong> sofort und mit mathematischer Präzision umzuwandeln.',
|
|
98
|
-
},
|
|
99
|
-
{ type: 'title', text: 'Farbformate: HEX, RGB und HSL', level: 3 },
|
|
100
|
-
{
|
|
101
|
-
type: 'list',
|
|
102
|
-
items: [
|
|
103
|
-
'<strong>HEX (Hexadezimal):</strong> Der De-facto-Standard für CSS. Kompakt und einfach im Code zu teilen.',
|
|
104
|
-
'<strong>RGB (Rot, Grün, Blau):</strong> Basierend auf dem additiven Lichtsystem. Ideal für die direkte Manipulation von Kanälen oder die Anwendung von Transparenz mit RGBA.',
|
|
105
|
-
'<strong>HSL (Hue, Saturation, Lightness):</strong> Das intuitivste Format. Passen Sie Farbton, Sättigung und Helligkeit an, um harmonische Paletten zu erstellen.',
|
|
106
|
-
],
|
|
107
|
-
},
|
|
108
|
-
{ type: 'title', text: 'Kontrast und WCAG-Barrierefreiheit', level: 3 },
|
|
109
|
-
{
|
|
110
|
-
type: 'paragraph',
|
|
111
|
-
html: 'Der Rechner enthält eine <strong>relative Kontrastmessung</strong> basierend auf der Luminanz. Dies hilft Ihnen, die <strong>WCAG</strong>-Richtlinien einzuhalten und sicherzustellen, dass Ihr Text auf ausgewählten Hintergründen lesbar ist.',
|
|
112
|
-
},
|
|
113
|
-
{ type: 'title', text: 'Automatische Farbharmonien', level: 3 },
|
|
114
|
-
{
|
|
115
|
-
type: 'list',
|
|
116
|
-
items: [
|
|
117
|
-
'<strong>Komplementär:</strong> Die gegenüberliegende Farbe im Farbkreis, ideal für maximalen Kontrast.',
|
|
118
|
-
'<strong>Analog:</strong> Benachbarte Farben, die sanfte, harmonische Übergänge schaffen.',
|
|
119
|
-
'<strong>Triadisch:</strong> Drei äquidistante Farben für lebendige, ausgewogene Kompositionen.',
|
|
120
|
-
],
|
|
121
|
-
},
|
|
122
|
-
],
|
|
123
|
-
};
|
|
91
|
+
howTo: howToData,
|
|
92
|
+
schemas: [faqSchema, howToSchema, appSchema],
|
|
93
|
+
seo: [
|
|
94
|
+
{ type: 'title', text: 'RGB zu HEX und HSL Farbkonverter für Entwickler', level: 2 },
|
|
95
|
+
{
|
|
96
|
+
type: 'paragraph',
|
|
97
|
+
html: 'In der Welt der <strong>Frontend-Entwicklung</strong> und des <strong>UI/UX-Designs</strong> ist Farbmanagement eine ständige Aufgabe. Unser <strong>Online-Farbkonverter</strong> ermöglicht es Ihnen, Werte zwischen <strong>HEX, RGB und HSL</strong> sofort und mit mathematischer Präzision umzuwandeln.',
|
|
98
|
+
},
|
|
99
|
+
{ type: 'title', text: 'Farbformate: HEX, RGB und HSL', level: 3 },
|
|
100
|
+
{
|
|
101
|
+
type: 'list',
|
|
102
|
+
items: [
|
|
103
|
+
'<strong>HEX (Hexadezimal):</strong> Der De-facto-Standard für CSS. Kompakt und einfach im Code zu teilen.',
|
|
104
|
+
'<strong>RGB (Rot, Grün, Blau):</strong> Basierend auf dem additiven Lichtsystem. Ideal für die direkte Manipulation von Kanälen oder die Anwendung von Transparenz mit RGBA.',
|
|
105
|
+
'<strong>HSL (Hue, Saturation, Lightness):</strong> Das intuitivste Format. Passen Sie Farbton, Sättigung und Helligkeit an, um harmonische Paletten zu erstellen.',
|
|
106
|
+
],
|
|
107
|
+
},
|
|
108
|
+
{ type: 'title', text: 'Kontrast und WCAG-Barrierefreiheit', level: 3 },
|
|
109
|
+
{
|
|
110
|
+
type: 'paragraph',
|
|
111
|
+
html: 'Der Rechner enthält eine <strong>relative Kontrastmessung</strong> basierend auf der Luminanz. Dies hilft Ihnen, die <strong>WCAG</strong>-Richtlinien einzuhalten und sicherzustellen, dass Ihr Text auf ausgewählten Hintergründen lesbar ist.',
|
|
112
|
+
},
|
|
113
|
+
{ type: 'title', text: 'Automatische Farbharmonien', level: 3 },
|
|
114
|
+
{
|
|
115
|
+
type: 'list',
|
|
116
|
+
items: [
|
|
117
|
+
'<strong>Komplementär:</strong> Die gegenüberliegende Farbe im Farbkreis, ideal für maximalen Kontrast.',
|
|
118
|
+
'<strong>Analog:</strong> Benachbarte Farben, die sanfte, harmonische Übergänge schaffen.',
|
|
119
|
+
'<strong>Triadisch:</strong> Drei äquidistante Farben für lebendige, ausgewogene Kompositionen.',
|
|
120
|
+
],
|
|
121
|
+
},
|
|
122
|
+
],
|
|
123
|
+
};
|