Schnellstart: Unterschied zwischen den Versionen
Aus DG HochN-Wiki
Test Einführung NAchhaltige Beschaffung Markierung: Quelltext-Bearbeitung 2017 |
KKeine Bearbeitungszusammenfassung Markierung: Quelltext-Bearbeitung 2017 |
||
| (Eine dazwischenliegende Version desselben Benutzers wird nicht angezeigt) | |||
| Zeile 4: | Zeile 4: | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title> | <title>Nachhaltigkeits-Guide der DG HochN</title> | ||
<!-- Tailwind CSS CDN für schnelles und responsives Styling --> | |||
<script src="https://cdn.tailwindcss.com"></script> | <script src="https://cdn.tailwindcss.com"></script> | ||
<style> | <style> | ||
/* Zusätzliche, spezifische Stile */ | |||
.accordion-panel { | |||
max-height: 0; | |||
overflow: hidden; | |||
transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out; | |||
} | } | ||
. | .accordion-button { | ||
transition: | transition: background-color 0.2s; | ||
cursor: pointer; | |||
} | } | ||
. | .accordion-button:hover { | ||
background-color: #e0f2fe; /* light blue hover */ | |||
} | } | ||
</style> | </style> | ||
</head> | </head> | ||
<body class=" | <body class="font-sans antialiased bg-gray-50 p-2 sm:p-4"> | ||
< | <div id="app" class="max-w-4xl mx-auto bg-white shadow-xl rounded-xl overflow-hidden"> | ||
<!-- | <!-- HEADER --> | ||
< | <header class="bg-blue-800 text-white p-6 sm:p-8"> | ||
< | <h1 class="text-2xl sm:text-3xl font-extrabold mb-1"> | ||
< | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6 inline-block mr-2 align-text-bottom"> | ||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /> | |||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6.25l-7.5 7.5l-2.5-2.5" /> | |||
</svg> | |||
Nachhaltigkeits-Leitfaden | |||
</ | </h1> | ||
</ | <p class="text-sm opacity-90">DG HochN: Effizienz & Verantwortung in Navigation und Hochleistung.</p> | ||
</header> | |||
<!-- | <!-- HAUPTINHALT (AKKORDEON) --> | ||
<div id=" | <main class="p-4 sm:p-6 space-y-4"> | ||
<div class="space-y-2" id="accordion-container"> | |||
<!-- AKKORDEON ELEMENT 1: Grüne IT und HPC --> | |||
<div class="border border-blue-200 rounded-lg overflow-hidden"> | |||
<button id="btn-1" class="accordion-button w-full flex justify-between items-center p-4 bg-blue-50 text-blue-800 font-semibold text-left focus:outline-none" onclick="toggleAccordion(1)"> | |||
<span class="text-lg">1. Grüne IT und Hochleistungs-Computing (HPC)</span> | |||
<span id="icon-1" class="transform transition-transform duration-300"> | |||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5"> | |||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> | |||
</svg> | |||
</span> | |||
</button> | |||
<div id="panel-1" class="accordion-panel bg-white p-4"> | |||
<h3 class="font-bold text-gray-700 mb-2">Fokus: Energieeffizienz in Rechenzentren</h3> | |||
<ul class="list-disc list-inside space-y-1 ml-4 text-gray-600"> | |||
<li>Priorisierung von Freikühlsystemen und Nutzung der Abwärme.</li> | |||
<li>Einsatz von Servern mit höchsten Energieeffizienz-Zertifizierungen (z. B. 80 PLUS Titanium).</li> | |||
<li>Maximale Hardware-Auslastung durch Virtualisierung zur Reduzierung der physischen Geräte.</li> | |||
</ul> | |||
<h3 class="font-bold text-gray-700 mt-4 mb-2">Code- und Algorithmus-Optimierung</h3> | |||
<ul class="list-disc list-inside space-y-1 ml-4 text-gray-600"> | |||
<li>Entwicklung von Algorithmen mit minimaler Time-to-Solution und geringstem Rechenbedarf.</li> | |||
<li>Effiziente Speichernutzung und Reduzierung energieintensiver Datentransfers.</li> | |||
<li>Bevorzugung von Cloud-Diensten, die 100% erneuerbare Energien nutzen.</li> | |||
</ul> | |||
</div> | |||
</div> | |||
<!-- AKKORDEON ELEMENT 2: Lebenszyklus von Hardware --> | |||
<div class="border border-blue-200 rounded-lg overflow-hidden"> | |||
<button id="btn-2" class="accordion-button w-full flex justify-between items-center p-4 bg-blue-50 text-blue-800 font-semibold text-left focus:outline-none" onclick="toggleAccordion(2)"> | |||
<span class="text-lg">2. Lebenszyklus von Hardware und Beschaffung</span> | |||
<span id="icon-2" class="transform transition-transform duration-300"> | |||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5"> | |||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> | |||
</svg> | |||
</span> | |||
</button> | |||
<div id="panel-2" class="accordion-panel bg-white p-4"> | |||
<h3 class="font-bold text-gray-700 mb-2">Zirkuläre Beschaffung</h3> | |||
<ul class="list-disc list-inside space-y-1 ml-4 text-gray-600"> | |||
<li>Ziel: Nutzungsdauer von 5 Jahren oder mehr für alle IT-Komponenten.</li> | |||
<li>Bevorzugung modularer, leicht reparierbarer und aufrüstbarer Hardware.</li> | |||
<li>Prüfung des Einsatzes zertifizierter wiederaufbereiteter Hardware für Sekundäraufgaben.</li> | |||
</ul> | |||
<h3 class="font-bold text-gray-700 mt-4 mb-2">Entsorgung (E-Waste Management)</h3> | |||
<ul class="list-disc list-inside space-y-1 ml-4 text-gray-600"> | |||
<li>Sicherstellung des Recyclings über zertifizierte Partner mit hoher Rohstoff-Rückgewinnungsquote.</li> | |||
<li>Verwendung von zertifizierten Verfahren zur vollständigen Datenlöschung vor dem Recycling.</li> | |||
< | |||
< | |||
< | |||
<ul class="list-disc | |||
<li> | |||
<li> | |||
</ul> | </ul> | ||
</div> | </div> | ||
</div> | |||
<!-- AKKORDEON ELEMENT 3: Nachhaltige Navigation und Mobilität --> | |||
<div class="border border-blue-200 rounded-lg overflow-hidden"> | |||
<button id="btn-3" class="accordion-button w-full flex justify-between items-center p-4 bg-blue-50 text-blue-800 font-semibold text-left focus:outline-none" onclick="toggleAccordion(3)"> | |||
<span class="text-lg">3. Nachhaltige Navigation und Mobilität</span> | |||
<span id="icon-3" class="transform transition-transform duration-300"> | |||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5"> | |||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> | |||
</svg> | |||
</span> | |||
</button> | |||
<div id="panel-3" class="accordion-panel bg-white p-4"> | |||
<h3 class="font-bold text-gray-700 mb-2">Green Routing</h3> | |||
<ul class="list-disc list-inside space-y-1 ml-4 text-gray-600"> | |||
<li>Forschung und Entwicklung von Algorithmen zur Berechnung der '''emissionsärmsten''' Route (nicht nur der kürzesten).</li> | |||
<li>Berücksichtigung von Ladeinfrastruktur, Topografie und spezifischen Fahrzeugemissionen.</li> | |||
<li>Integration multimodaler Lösungen (ÖPNV, Rad, Fußgänger) in Navigationssysteme.</li> | |||
< | |||
< | |||
< | |||
</ | |||
</ | |||
</ | |||
<div | |||
< | |||
<li | |||
<li | |||
<li | |||
</ul> | </ul> | ||
<h3 class="font-bold text-gray-700 mt-4 mb-2">Interne Operationen</h3> | |||
<ul class="list-disc list-inside space-y-1 ml-4 text-gray-600"> | |||
<li>Konsequente Umsetzung des papierlosen Büros.</li> | |||
<li>Priorisierung von Videokonferenzen und Bahnfahrt (statt Flug) für Dienstreisen.</li> | |||
< | |||
< | |||
< | |||
<li> | |||
</ul> | </ul> | ||
</div> | </div> | ||
</div> | |||
</div> | |||
</main> | |||
<!-- FOOTER --> | |||
<footer class="p-4 bg-gray-100 text-center text-sm text-gray-500 border-t"> | |||
<p>Dieser Leitfaden ist ein lebendiges Dokument. Für Vorschläge zur Erweiterung wenden Sie sich bitte an das DG HochN Nachhaltigkeits-Team.</p> | |||
</footer> | |||
</div> | |||
<script> | |||
/** | |||
* Funktion zum Umschalten (Toggle) des Akkordeon-Elements. | |||
* @param {number} id - Die ID des Elements (1, 2, 3, etc.). | |||
document.getElementById( | */ | ||
function toggleAccordion(id) { | |||
const panel = document.getElementById(`panel-${id}`); | |||
const icon = document.getElementById(`icon-${id}`); | |||
const | |||
// Überprüfen, ob das Panel derzeit geöffnet ist (maxHeight ist gesetzt) | |||
const isPanelOpen = panel.style.maxHeight && panel.style.maxHeight !== '0px'; | |||
// | // Alle Panels schließen, außer dem aktuellen, wenn es bereits offen ist | ||
document.querySelectorAll('.accordion-panel').forEach(p => { | |||
p.style.maxHeight = '0'; | |||
p.style.padding = '0 1rem'; // Padding zurücksetzen, um den Übergang zu glätten | |||
}); | |||
document.querySelectorAll('[id^="icon-"]').forEach(i => { | |||
// Setzt alle Icons auf das 'Plus' (geschlossen) | |||
i.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5"> | |||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> | |||
</svg>`; | |||
}); | |||
if (!isPanelOpen) { | |||
if ( | // Das aktuelle Panel öffnen | ||
// scrollHeight liefert die tatsächliche Höhe des Inhalts | |||
panel.style.maxHeight = panel.scrollHeight + "px"; | |||
panel.style.padding = '1rem'; | |||
// Icon auf 'Minus' (geöffnet) setzen | |||
icon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5"> | |||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" /> | |||
</svg>`; | |||
} | } | ||
} | } | ||
// Initialer Aufruf, um sicherzustellen, dass das Padding beim Start richtig gesetzt ist. | |||
document.addEventListener('DOMContentLoaded', () => { | |||
document.querySelectorAll('.accordion-panel').forEach(p => { | |||
// Stellt sicher, dass die Panels initial unsichtbar sind und kein Padding haben | |||
} | p.style.maxHeight = '0'; | ||
} | p.style.padding = '0 1rem'; | ||
}); | |||
}); | |||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> | ||
Aktuelle Version vom 1. Dezember 2025, 14:36 Uhr
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Nachhaltigkeits-Guide der DG HochN</title> <script src="https://cdn.tailwindcss.com"></script> <style> /* Zusätzliche, spezifische Stile */ .accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out; } .accordion-button { transition: background-color 0.2s; cursor: pointer; } .accordion-button:hover { background-color: #e0f2fe; /* light blue hover */ } </style>
</head> <body class="font-sans antialiased bg-gray-50 p-2 sm:p-4">
<header class="bg-blue-800 text-white p-6 sm:p-8">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6 inline-block mr-2 align-text-bottom"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6.25l-7.5 7.5l-2.5-2.5" /> </svg> Nachhaltigkeits-Leitfaden
DG HochN: Effizienz & Verantwortung in Navigation und Hochleistung.
</header>
<main class="p-4 sm:p-6 space-y-4">
<button id="btn-1" class="accordion-button w-full flex justify-between items-center p-4 bg-blue-50 text-blue-800 font-semibold text-left focus:outline-none" onclick="toggleAccordion(1)">
1. Grüne IT und Hochleistungs-Computing (HPC)
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</button>
Fokus: Energieeffizienz in Rechenzentren
- Priorisierung von Freikühlsystemen und Nutzung der Abwärme.
- Einsatz von Servern mit höchsten Energieeffizienz-Zertifizierungen (z. B. 80 PLUS Titanium).
- Maximale Hardware-Auslastung durch Virtualisierung zur Reduzierung der physischen Geräte.
Code- und Algorithmus-Optimierung
- Entwicklung von Algorithmen mit minimaler Time-to-Solution und geringstem Rechenbedarf.
- Effiziente Speichernutzung und Reduzierung energieintensiver Datentransfers.
- Bevorzugung von Cloud-Diensten, die 100% erneuerbare Energien nutzen.
<button id="btn-2" class="accordion-button w-full flex justify-between items-center p-4 bg-blue-50 text-blue-800 font-semibold text-left focus:outline-none" onclick="toggleAccordion(2)">
2. Lebenszyklus von Hardware und Beschaffung
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</button>
Zirkuläre Beschaffung
- Ziel: Nutzungsdauer von 5 Jahren oder mehr für alle IT-Komponenten.
- Bevorzugung modularer, leicht reparierbarer und aufrüstbarer Hardware.
- Prüfung des Einsatzes zertifizierter wiederaufbereiteter Hardware für Sekundäraufgaben.
Entsorgung (E-Waste Management)
- Sicherstellung des Recyclings über zertifizierte Partner mit hoher Rohstoff-Rückgewinnungsquote.
- Verwendung von zertifizierten Verfahren zur vollständigen Datenlöschung vor dem Recycling.
<button id="btn-3" class="accordion-button w-full flex justify-between items-center p-4 bg-blue-50 text-blue-800 font-semibold text-left focus:outline-none" onclick="toggleAccordion(3)">
3. Nachhaltige Navigation und Mobilität
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
</button>
Green Routing
- Forschung und Entwicklung von Algorithmen zur Berechnung der emissionsärmsten Route (nicht nur der kürzesten).
- Berücksichtigung von Ladeinfrastruktur, Topografie und spezifischen Fahrzeugemissionen.
- Integration multimodaler Lösungen (ÖPNV, Rad, Fußgänger) in Navigationssysteme.
Interne Operationen
- Konsequente Umsetzung des papierlosen Büros.
- Priorisierung von Videokonferenzen und Bahnfahrt (statt Flug) für Dienstreisen.
</main>
<footer class="p-4 bg-gray-100 text-center text-sm text-gray-500 border-t">
Dieser Leitfaden ist ein lebendiges Dokument. Für Vorschläge zur Erweiterung wenden Sie sich bitte an das DG HochN Nachhaltigkeits-Team.
</footer>
<script>
/**
* Funktion zum Umschalten (Toggle) des Akkordeon-Elements.
* @param {number} id - Die ID des Elements (1, 2, 3, etc.).
*/
function toggleAccordion(id) {
const panel = document.getElementById(`panel-${id}`);
const icon = document.getElementById(`icon-${id}`);
// Überprüfen, ob das Panel derzeit geöffnet ist (maxHeight ist gesetzt)
const isPanelOpen = panel.style.maxHeight && panel.style.maxHeight !== '0px';
// Alle Panels schließen, außer dem aktuellen, wenn es bereits offen ist
document.querySelectorAll('.accordion-panel').forEach(p => {
p.style.maxHeight = '0';
p.style.padding = '0 1rem'; // Padding zurücksetzen, um den Übergang zu glätten
});
document.querySelectorAll('[id^="icon-"]').forEach(i => {
// Setzt alle Icons auf das 'Plus' (geschlossen)
i.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>`;
});
if (!isPanelOpen) {
// Das aktuelle Panel öffnen
// scrollHeight liefert die tatsächliche Höhe des Inhalts
panel.style.maxHeight = panel.scrollHeight + "px";
panel.style.padding = '1rem';
// Icon auf 'Minus' (geöffnet) setzen
icon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
</svg>`;
}
}
// Initialer Aufruf, um sicherzustellen, dass das Padding beim Start richtig gesetzt ist.
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.accordion-panel').forEach(p => {
// Stellt sicher, dass die Panels initial unsichtbar sind und kein Padding haben
p.style.maxHeight = '0';
p.style.padding = '0 1rem';
});
});
</script>
</body> </html>