208 lines
14 KiB
Plaintext
208 lines
14 KiB
Plaintext
{
|
|
"locals": {
|
|
"t": {
|
|
"meta": {
|
|
"title": "HTML-Grundlagen: Webentwicklung mit nativen Browser-Features",
|
|
"description": "Lerne native HTML-Capabilities und Progressive Enhancement Patterns. Diese Anleitung zeigt, wie eingebaute Browser-Features Komplexität reduzieren, Performance verbessern und wartbareren Code schaffen."
|
|
},
|
|
"hero": {
|
|
"title": "🚀 HTML-Grundlagen",
|
|
"subtitle": "Lerne native HTML-Capabilities und Progressive Enhancement Patterns. Diese Anleitung zeigt, wie eingebaute Browser-Features Komplexität reduzieren, Performance verbessern und wartbareren Code schaffen."
|
|
},
|
|
"sections": {
|
|
"disclosure": {
|
|
"title": "🎯 Aufklappbare Bereiche (Details/Summary)",
|
|
"js_title": "JavaScript-Implementierung",
|
|
"js_badge": "KOMPLEX",
|
|
"js_warning": "Aufwand: Manuelle ARIA-Verwaltung, Tastatur-Events, Fokus-Management und Screen Reader Kompatibilität erforderlich.",
|
|
"js_content1": "Custom Aufklapp-Implementierungen erfordern umfassendes Event-Handling, State-Synchronisation zwischen Komponenten und sorgfältige Beachtung von Accessibility-Anforderungen inklusive ARIA-Attributen und Tastatur-Navigation.",
|
|
"js_content2": "State-Management über mehrere aufklappbare Bereiche führt zu Komplexität in Event-Koordination, Memory-Management und Performance-Optimierung, besonders bei dynamischem Content-Loading.",
|
|
"js_cons_title": "❌ Architektur-Komplexität:",
|
|
"js_cons": [
|
|
"Event-Delegation und Memory-Leak-Prävention",
|
|
"ARIA State-Synchronisation und Keyboard-Trap-Management",
|
|
"Cross-Browser-Kompatibilität und Polyfill-Anforderungen"
|
|
],
|
|
"native_title": "Native Details/Summary Elemente",
|
|
"native_badge": "ZERO-JS",
|
|
"native_note": "Plattform-Integration: Eingebaute ARIA-Semantik, Tastatur-Navigation, Screen Reader Support und browser-optimierte Animationen.",
|
|
"native_semantic_title": "Semantische HTML-Architektur",
|
|
"native_semantic_content": "Das HTML5 details/summary Pattern bietet deklarative Progressive Disclosure ohne JavaScript-Dependencies. Browser-Engines handhaben State-Management, Accessibility und User-Interaction nach Plattform-Konventionen.",
|
|
"native_enhancement_title": "Progressive Enhancement Vorteile",
|
|
"native_enhancement_content": "Start mit funktionalem HTML sorgt für graceful degradation in allen Umgebungen. CSS und JavaScript werden zu Enhancement-Layern statt funktionalen Anforderungen - verbessert Zuverlässigkeit und reduziert Technical Debt.",
|
|
"native_performance_title": "Performance-Charakteristika",
|
|
"native_performance_content": "Native Elemente eliminieren Bundle-Size-Overhead, reduzieren Runtime-Memory-Consumption und nutzen Browser-Optimierungen, die Custom Implementations nicht verfügbar sind. Hardware-Acceleration und effizientes Event-Handling sind eingebaut.",
|
|
"native_pros_title": "✅ Plattform-Vorteile:",
|
|
"native_pros": [
|
|
"Zero JavaScript Footprint mit voller Accessibility-Compliance",
|
|
"Browser-native Performance-Optimierungen und Hardware-Acceleration",
|
|
"Konsistentes Cross-Platform-Verhalten ohne Maintenance-Overhead"
|
|
]
|
|
},
|
|
"modals": {
|
|
"title": "🪟 Modal Dialog Patterns",
|
|
"js_title": "Custom Modal Implementierung",
|
|
"js_badge": "BRÜCHIG",
|
|
"js_warning": "Kritische Anforderungen: Focus-Trapping, inerte Hintergrund-Inhalte, ESC-Key-Handling, Backdrop-Click-Management und ARIA Modal-Semantik.",
|
|
"js_button": "Custom Modal starten",
|
|
"js_modal_title": "Custom Modal Architektur",
|
|
"js_modal_content": "Dieser Ansatz erfordert Modal-Stack-Management, Verhinderung von Hintergrund-Interaktion, Koordination von Focus-Management und ordnungsgemäßes Cleanup zur Vermeidung von Memory-Leaks und Accessibility-Verletzungen.",
|
|
"js_modal_issue": "Kritisches Problem: Hintergrund-Content bleibt für Screen Reader und Tastatur-Navigation ohne explizites Inert-Management zugänglich.",
|
|
"js_modal_close": "Modal schließen",
|
|
"js_cons_title": "❌ Implementierungs-Herausforderungen:",
|
|
"js_cons": [
|
|
"Focus-Trap-Implementierung und Wiederherstellungs-Komplexität",
|
|
"Modal-Stack-Management und Z-Index-Koordination",
|
|
"Event-Cleanup und Memory-Leak-Prävention"
|
|
],
|
|
"native_title": "Native Dialog Element",
|
|
"native_badge": "ROBUST",
|
|
"native_note": "Eingebaute Capabilities: Automatisches Focus-Trapping, Inert-Background-Management, ESC-Key-Support und ordnungsgemäße Modal-Semantik.",
|
|
"native_button": "Native Dialog starten",
|
|
"native_dialog_title": "Native Dialog Element",
|
|
"native_dialog_content": "Das HTML5 Dialog-Element bietet robuste Modal-Funktionalität mit automatischem Focus-Management, Backdrop-Interaction-Handling und ordnungsgemäßer Accessibility-Semantik in der Browser-Engine.",
|
|
"native_dialog_advantage": "Schlüssel-Vorteil: Hintergrund-Content wird automatisch inert, verhindert Interaktion und Screen Reader Zugriff ohne zusätzliche Implementierung.",
|
|
"native_dialog_close": "Dialog schließen",
|
|
"native_pros_title": "✅ Engine-Level Features:",
|
|
"native_pros": [
|
|
"Automatisches Focus-Trapping mit ordnungsgemäßer Wiederherstellung",
|
|
"Eingebautes ESC-Key-Handling und Backdrop-Click-Support",
|
|
"Modal-Semantik und Inert-Background-Management"
|
|
]
|
|
},
|
|
"validation": {
|
|
"title": "📝 Constraint Validation Patterns",
|
|
"js_title": "Custom Validierungs-Logik",
|
|
"js_badge": "FRAGIL",
|
|
"js_warning": "Validierungs-Komplexität: Custom Error-Messaging, Timing-Koordination, Accessibility-Announcements und Server-Client-Synchronisation.",
|
|
"js_email_label": "E-Mail-Validierung",
|
|
"js_email_error": "Ungültiges E-Mail-Format erkannt",
|
|
"js_regex_label": "Pattern-Matching (UUID)",
|
|
"js_regex_error": "UUID-Format erforderlich: 8-4-4-4-12 Hex-Ziffern",
|
|
"js_submit": "Formular validieren",
|
|
"js_cons_title": "❌ Validierungs-Brüchigkeit:",
|
|
"js_cons": [
|
|
"Regex-Patterns verpassen Edge Cases und Internationalisierung",
|
|
"Error-Timing und Accessibility-Announcement-Koordination",
|
|
"Client-Server-Validierungs-Drift und Synchronisations-Issues"
|
|
],
|
|
"native_title": "Constraint Validation API",
|
|
"native_badge": "SPEC-KONFORM",
|
|
"native_note": "Standards-basiert: Automatische Error-Announcements, internationalisierte Messages und CSS-Pseudo-Class-Integration.",
|
|
"native_email_label": "E-Mail-Validierung",
|
|
"native_email_placeholder": "entwickler@beispiel.org",
|
|
"native_uuid_label": "UUID Pattern",
|
|
"native_uuid_placeholder": "550e8400-e29b-41d4-a716-446655440000",
|
|
"native_uuid_title": "Gib ein gültiges UUID-Format ein (z.B. 550e8400-e29b-41d4-a716-446655440000)",
|
|
"native_api_label": "API Endpoint URL",
|
|
"native_api_placeholder": "https://api.beispiel.org/v1",
|
|
"native_submit": "Formular absenden",
|
|
"native_pros_title": "✅ Spezifikations-Konformität:",
|
|
"native_pros": [
|
|
"RFC-konforme Validierungs-Pattern mit Internationalisierung",
|
|
"Automatische Error-Messages in der bevorzugten Sprache des Users",
|
|
"CSS-Pseudo-Classes (:valid, :invalid) für Styling-Integration"
|
|
]
|
|
},
|
|
"progress": {
|
|
"title": "📊 Progress Indication Patterns",
|
|
"js_title": "Custom Progress Implementierung",
|
|
"js_badge": "SEMANTIK-LEER",
|
|
"js_warning": "Accessibility-Gap: Keine semantische Bedeutung ohne explizite ARIA-Implementierung und Screen Reader Progress-Announcements.",
|
|
"js_text": "Build-Progress:",
|
|
"js_button": "Build-Prozess starten",
|
|
"js_cons_title": "❌ Semantische Limitierungen:",
|
|
"js_cons": [
|
|
"Keine inhärente semantische Bedeutung für Assistive Technologies",
|
|
"Manuelles ARIA Live-Region-Management für Progress-Updates",
|
|
"Custom Animation-Performance und Value-Interpolation"
|
|
],
|
|
"native_title": "Native Progress Element",
|
|
"native_badge": "SEMANTISCH",
|
|
"native_note": "Semantische Integration: Eingebaute Progress-Role, automatische ARIA-Value-Announcements und Indeterminate-State-Support.",
|
|
"native_compilation": "Kompilierungs-Progress",
|
|
"native_compilation_text": "75% vollständig",
|
|
"native_indeterminate": "Unbestimmte Operation (wird verarbeitet)",
|
|
"native_indeterminate_text": "Verarbeite Dependencies...",
|
|
"native_dynamic": "Dynamischer Progress:",
|
|
"native_button": "Prozess starten",
|
|
"native_pros_title": "✅ Semantische Vorteile:",
|
|
"native_pros": [
|
|
"Eingebaute Progress-Role mit automatischen Value-Announcements",
|
|
"Indeterminate-State-Support für Operations unbekannter Dauer",
|
|
"Plattform-optimiertes Rendering und Animation-Performance"
|
|
]
|
|
},
|
|
"temporal": {
|
|
"title": "📅 Temporal Input Patterns",
|
|
"js_title": "Custom Date Picker",
|
|
"js_badge": "SCHWERGEWICHTIG",
|
|
"js_warning": "Implementierungs-Umfang: Kalender-Widget-Architektur, Tastatur-Navigation, Internationalisierung, Timezone-Handling und Mobile-Touch-Optimierung.",
|
|
"js_label": "Deployment-Datum (Custom)",
|
|
"js_placeholder": "JJJJ-MM-TT",
|
|
"js_picker_content": "[Kalender-Widget-Implementierung]\nBenötigt: Date-Manipulation-Library, Internationalisierung,\nTastatur-Navigation, Mobile-Gesture-Handling,\nTimezone-Berechnungen, Accessibility-Compliance.",
|
|
"js_cons_title": "❌ Implementierungs-Overhead:",
|
|
"js_cons": [
|
|
"Große JavaScript-Libraries und komplexe Kalender-Logik",
|
|
"Mobile-UX-Inkonsistenz mit Plattform-Date-Pickern",
|
|
"Internationalisierungs-Komplexität und Timezone-Edge-Cases"
|
|
],
|
|
"native_title": "Native Temporal Inputs",
|
|
"native_badge": "PLATTFORM-NATIV",
|
|
"native_note": "OS-Integration: Plattform-konsistente UI, automatische Tastatur-Navigation, eingebaute Validierung und Internationalisierungs-Support.",
|
|
"native_release_label": "Release-Datum",
|
|
"native_timestamp_label": "Build-Timestamp",
|
|
"native_window_label": "Deployment-Fenster",
|
|
"native_pros_title": "✅ Plattform-Integration:",
|
|
"native_pros": [
|
|
"Zero-Bundle-Impact mit nativer OS-Picker-Integration",
|
|
"Automatische Validierung und Internationalisierungs-Support",
|
|
"Konsistente UX entsprechend Plattform-Konventionen"
|
|
]
|
|
},
|
|
"autocomplete": {
|
|
"title": "🔍 Autocomplete Patterns",
|
|
"js_title": "Custom Autocomplete",
|
|
"js_badge": "INTERAKTIONS-SCHWER",
|
|
"js_warning": "Interaktions-Komplexität: Dropdown-Positionierung, Tastatur-Navigation, ARIA-Combobox-Implementierung und Mobile-Touch-Handling.",
|
|
"js_label": "Framework-Suche (Custom)",
|
|
"js_placeholder": "Framework-Name eingeben...",
|
|
"js_cons_title": "❌ Interaktions-Management:",
|
|
"js_cons": [
|
|
"Komplexe ARIA-Combobox-Implementierung und State-Management",
|
|
"Dropdown-Positionierung und Viewport-Kollisions-Erkennung",
|
|
"Mobile-Keyboard-Optimierung und Touch-Event-Handling"
|
|
],
|
|
"native_title": "Native Datalist Element",
|
|
"native_badge": "ZERO-CONFIG",
|
|
"native_note": "Native Combobox: Eingebaute ARIA-Combobox-Semantik, Tastatur-Navigation und plattform-konsistente Interaktions-Pattern.",
|
|
"native_framework_label": "JavaScript Framework",
|
|
"native_framework_placeholder": "Framework auswählen oder eingeben...",
|
|
"native_language_label": "Programmiersprache",
|
|
"native_language_placeholder": "Sprache auswählen...",
|
|
"native_pros_title": "✅ Zero-Configuration Vorteile:",
|
|
"native_pros": [
|
|
"Native Combobox-Semantik mit automatischem ARIA-Support",
|
|
"Plattform-konsistente Tastatur- und Interaktions-Pattern",
|
|
"Formular-Validierungs-Integration und graceful Degradation"
|
|
]
|
|
}
|
|
},
|
|
"summary": {
|
|
"title": "HTML-First Development",
|
|
"content": "Native HTML-Elemente repräsentieren Jahre von Browser-Engineering, Accessibility-Forschung und Web-Standards-Evolution. Sie bieten robuste Funktionalität mit minimalem Implementierungs-Overhead und maximaler Kompatibilität.",
|
|
"approach_title": "Der Progressive Enhancement Ansatz:",
|
|
"approach_items": [
|
|
"Baue mit semantischem HTML, das universell funktioniert",
|
|
"Verbessere das visuelle Design durch CSS ohne Funktionalitäts-Brüche",
|
|
"Schichte JavaScript für komplexe Interaktionen, wo native Capabilities unzureichend sind"
|
|
],
|
|
"closing": "Nutze Browser-Engines statt ihre Funktionalität zu reimplementieren. Deine Codebase wird wartbarer, deine User haben bessere Experiences.",
|
|
"quote": "Die anspruchsvollste Architektur ist oft die, die existierende, gut getestete Komponenten nutzt. Native HTML-Elemente bieten Jahrzehnte von Optimierung und Accessibility-Engineering—baue auf diesem Fundament auf, nicht darum herum."
|
|
}
|
|
},
|
|
"lang": "de",
|
|
"dir": "ltr"
|
|
}
|
|
}
|