-
Notifications
You must be signed in to change notification settings - Fork 0
/
de.html
498 lines (493 loc) · 19.8 KB
/
de.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Übersicht zu den technischen Komponenten des DB UX Design Systems der Deutsche Bahn">
<title>DB UI</title>
<link
rel="stylesheet"
href="https://db-ui.github.io/core/css/enterprise/db-ui-core.css"
/>
<link
rel="stylesheet"
href="https://db-ui.github.io/core/css/pattern-scaffolding-project-specific.css"
/>
<link rel="stylesheet" href="styles/v2.css" />
<link rel="alternate" href="index.html" hreflang="en" />
<link rel="icon" type="image/svg+xml" href="/images/favicon.ico" />
</head>
<body class="tpl-intro">
<header class="rea-header" role="banner">
<div class="cmp-brand">
<a href="#" title="Startseite" rel="home">
<img
src="images/db_logo.svg"
alt="zurück zur Startseite"
width="100"
height="70"
class="elm-image is-logo"
elementtiming="logo"
/>
</a>
</div>
</header>
<main id="en">
<section>
<h1>Starke digitale Produkte</h1>
<p>
Das DB UI Ökosystem beschleunigt die Entwicklung digitaler Produkte
der Deutschen Bahn – offen für alle Einsätze, kompatibel zu den
Marken-Standards und zugänglich, nehmen wir uns nichts weniger vor,
als die Demokratisierung der Entwicklung bestmöglich zu unterstützen.
</p>
<img src="images/header_image_0.guetzli.jpg" srcset="images/header_image_0.guetzli.2x.jpg 2x, images/header_image_0.guetzli.3x.jpg 3x" width="1012" height="338" alt="" style="margin: auto; display: block; max-width: 100%;">
<p>
Personenverkehr und DB Systel haben ihre Design Systeme Version für
Web in der Version 2 der Standard Web Components zusammengeführt.
Unser Ziel ist eine einheitliche Basis UX im Sinne der Modernen Ikone
für Kunden und Mitarbeiteranwendungen. Um unser Design End 2 End von
Konzeption über Design bis zur Implementierung konsistent zu halten,
wird das DB UX Design System Version 2 auch in Code von DB Systel und
Reisendeninformation umgesetzt.
</p>
<p>
Um vor allem Mitarbeitende der Bereiche Entwicklung, Konzeption &
Design und Content-Produktion & -Pflege zu befähigen, allerbeste
digitale Erlebnisse zu erstellen und zu betreiben.
</p>
</section>
<section class="ecosystem">
<h2 class="elm-headline">Produktlandschaft</h2>
<ul class="cmp-cards">
<li class="cmp-card" data-variant="banner">
<figure>
<img
class="elm-image"
src="images/db-ui-base-logo.png"
alt=""
width="410"
height="410"
>
<figcaption>
<h3>
<a
href="https://db-ui.github.io/base/"
class="elm-link"
target="_blank"
title="Living styleguide in neuem Fenster öffnen"
aria-label="DB UI Base Living styleguide in neuem Fenster öffnen"
><strong>DB UI Base</strong></a
>
</h3>
<p>
Generelle Assets und Design Tokens für die vielfältige Nutzung
in Web als auch Projekten nativer App-Entwicklung
</p>
</figcaption>
</figure>
</li>
<li class="cmp-card" data-variant="banner">
<figure>
<img
class="elm-image"
src="images/db-ui-core-logo.png"
alt=""
width="410"
height="410"
/>
<figcaption>
<h3>
<a
href="https://db-ui.github.io/core/"
class="elm-link"
target="_blank"
title="Living styleguide in neuem Fenster öffnen"
aria-label="DB UI Core Living styleguide in neuem Fenster öffnen"
><strong>DB UI Core</strong></a
>
</h3>
<p>
Robuste HTML UI Komponenten, wiederverwendbare visuelle Styles
und mächtige Werkzeuge
</p>
</figcaption>
</figure>
</li>
<li class="cmp-card" data-variant="banner">
<figure>
<img
class="elm-image"
src="images/db-ui-elements-logo.png"
alt=""
width="410"
height="410"
/>
<figcaption>
<h3>
<a
href="https://db-ui.github.io/elements/"
class="elm-link"
target="_blank"
title="Living styleguide in neuem Fenster öffnen"
aria-label="DB UI Elements Living styleguide in neuem Fenster öffnen"
><strong>DB UI Elements – Web Components</strong></a
>
</h3>
<p>
Auf Web-Standards basierende universelle JavaScript UI
Komponenten
</p>
</figcaption>
</figure>
</li>
<li class="cmp-card" data-variant="banner">
<figure>
<img
class="elm-image"
src="images/db-ui-elements-logo.png"
alt=""
width="410"
height="410"
/>
<figcaption>
<h3>
<a
href="https://db-ui.github.io/elements/"
class="elm-link"
target="_blank"
title="Living styleguide in neuem Fenster öffnen"
aria-label="DB UI Elements Living styleguide in neuem Fenster öffnen"
><strong
>DB UI Elements – JS Framework Komponenten</strong
></a
>
</h3>
<p>
In Angular, React und Vue direkt konsumierbare Komponenten
</p>
</figcaption>
</figure>
</li>
</ul>
<p>
Durch
<a
href="https://db-ui.github.io/base/"
class="elm-link"
target="_blank"
title="Living styleguide in neuem Fenster öffnen"
aria-label="DB UI Base Living styleguide in neuem Fenster öffnen"
><strong>DB UI Base</strong></a
>
liefern wir generelle Assets und Design Tokens für die vielfältige
Nutzung in Web als auch Projekten nativer App-Entwicklung.
</p>
<p>
Mit
<a
href="https://db-ui.github.io/core/"
class="elm-link"
target="_blank"
title="Living styleguide in neuem Fenster öffnen"
aria-label="DB UI Core Living styleguide in neuem Fenster öffnen"
><strong>DB UI Core</strong></a
>
bieten wir als Entwicklungs-Basis robuste HTML UI Komponenten,
wiederverwendbare visuelle Styles und mächtige Werkzeuge.
</p>
<p>
Speziell für die JavaScript Anwendungsentwicklung stellen wir zudem
mit
<a
href="https://db-ui.github.io/elements/"
class="elm-link"
target="_blank"
title="Living styleguide in neuem Fenster öffnen"
aria-label="DB UI Elements Living styleguide in neuem Fenster öffnen"
><strong>DB UI Elements</strong></a
>
universelle UI Komponenten zur Verfügung – einerseits auf Standards
basierende Web Components, und andererseits für die großen JS
Frameworks direkt konsumierbare Komponenten.
</p>
</section>
<section>
<!-- [html-validate-disable-next heading-level -- we're doing some simple demonstration simplification here] -->
<h2 class="elm-headline">Kern Prinzipien</h2>
<ul class="cmp-cards">
<!-- [html-validate-disable-next element-permitted-content, element-permitted-parent -- we're only providing a partial here] -->
<li class="cmp-card" data-variant="banner">
<figure>
<svg
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
aria-hidden="true"
>
<use
href="icons/illustrative/devices/db_ic_il_laptop.svg#icon"
></use>
</svg>
<figcaption>
<!-- [html-validate-disable-next heading-level] -->
<h3 class="elm-headline">Konsistent & Konform</h3>
<p>
DB UI Core basiert auf dem
<a
href="https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/DB-UX-Design-System/Design-fuer-Apps-Web/UI-Komponenten"
target="_blank"
>DB UX Design System</a
>, den Richtlinien für alle Kunden- und Enterprise Websites und Web Anwendungen des DB Personenverkehrs.
</p>
</figcaption>
</figure>
</li>
<!-- [html-validate-disable-next element-permitted-content, element-permitted-parent -- we're only providing a partial here] -->
<li class="cmp-card" data-variant="banner">
<figure>
<svg
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
aria-hidden="true"
>
<use
href="icons/illustrative/action/db_ic_il_handshake.svg#icon"
></use>
</svg>
<figcaption>
<!-- [html-validate-disable-next heading-level] -->
<h3 class="elm-headline">Barrierefrei</h3>
<p>
DB UI Core setzt auf sematisches HTML, ARIA Rollen, Zustände und
Eigenschaften um die Gestaltung anzubinden, und erzwingt damit korrektes,
zugängliches Markup. Zudem lassen wir unsere Arbeiten durch das
<a
href="https://db.de/8pei5n"
target="_blank"
rel="noopener noreferrer"
>Team Digital Accessibility</a
> testen.
</p>
</figcaption>
</figure>
</li>
<!-- [html-validate-disable-next element-permitted-content, element-permitted-parent -- we're only providing a partial here] -->
<li class="cmp-card" data-variant="banner">
<figure>
<svg
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
aria-hidden="true"
>
<use
href="icons/illustrative/news/db_ic_il_newspaper.svg#icon"
></use>
</svg>
<figcaption>
<!-- [html-validate-disable-next heading-level] -->
<h3 class="elm-headline">Deklarativ</h3>
<p>
Wir verwenden beschreibende HTML Klassen-Benamungen
anstelle von visuellen Helfern, sodass unsere Auszeichnungen
und die Struktur schlank, performant, einfach zu aktualisieren,
als auch für Menschen klar verständlich sind.
</p>
</figcaption>
</figure>
</li>
<!-- [html-validate-disable-next element-permitted-content, element-permitted-parent -- we're only providing a partial here] -->
<li class="cmp-card" data-variant="banner">
<figure>
<svg
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
aria-hidden="true"
>
<use
href="icons/illustrative/communication/db_ic_il_broken.svg#icon"
></use>
</svg>
<figcaption>
<!-- [html-validate-disable-next heading-level] -->
<h3 class="elm-headline">Unabhängig</h3>
<p>
Unser Code ist entkoppelt von der JavaScript Schicht, sodass
unsere Komponenten in jedem Web Technologie-Kontext
implementiert werden können; zudem stellen wir universelle Web Components
als auch "native" JS Framework Komponenten mit
<a href="https://db-ui.github.io/elements/" target="_blank"
>DB UI Elements</a
>
bereit.
</p>
</figcaption>
</figure>
</li>
<!-- [html-validate-disable-next element-permitted-content, element-permitted-parent -- we're only providing a partial here] -->
<li class="cmp-card" data-variant="banner">
<figure>
<svg
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
aria-hidden="true"
>
<use
href="icons/illustrative/feature/db_ic_il_green.svg#icon"
></use>
</svg>
<figcaption>
<!-- [html-validate-disable-next heading-level] -->
<h3 class="elm-headline">Aktuell</h3>
<p>
Mit der Weiterentwicklung des
<a
href="https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/DB-UX-Design-System/Design-fuer-Apps-Web/UI-Komponenten"
target="_blank"
>DB UX Design Systems</a
>
stellen wir auch stets Code Aktualisierungen bereit,
sodass unsere Entwickelnden lediglich die Pakete aktualisieren
müssen, um den visuellen und funktionalen Neuerungen zu erhalten.
</p>
</figcaption>
</figure>
</li>
<!-- [html-validate-disable-next element-permitted-content, element-permitted-parent -- we're only providing a partial here] -->
<li class="cmp-card" data-variant="banner">
<figure>
<svg
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64"
aria-hidden="true"
>
<use
href="icons/illustrative/action/db_ic_il_tips.svg#icon"
></use>
</svg>
<figcaption>
<!-- [html-validate-disable-next heading-level] -->
<h3 class="elm-headline">Gemeinschaftlich</h3>
<p>
DB UI versteht sich als technologische Platform für eine zentrale Basis
kuratierter Komponenten; deren Entwicklung ist stark unterstützt
von der Community, und adaptiert aus den Arbeiten in
den Projekten sowie zahlreichen Rückmeldungen.
</p>
</figcaption>
</figure>
</li>
</ul>
</section>
<section>
<!-- [html-validate-disable-next heading-level -- we're doing some simple demonstration simplification here] -->
<h2 class="elm-headline">Nutzung</h2>
<p>
Zunächst muss DB UI Core als Abhängigkeit im Projekt installiert werden und
und dann im HTML das CSS referenziert werden.<br>
Hierzu haben wir im
<a
href="https://github.com/db-ui/core/tree/main/docs/getStarted.adoc"
target="_blank"
rel="noopener noreferrer"
hreflang="en">Get Started(docs)</a
> detailierte Informationen bereitgestellt.<br>
Im Falle der Entwicklung einer JavaScript Anwendung sollte insbesondere auch
<a href="https://db-ui.github.io/elements/" target="_blank"
>DB UI Elements</a
> in Betracht gezogen werden, das auf DB UI Core basiert und mit dem wir den
Web Standard der Web Components bereitstellen für ein einfaches Einbinden
in diese Technologien.
</p>
<!-- [html-validate-disable-next heading-level -- we're doing some simple demonstration simplification here] -->
<h2 class="elm-headline">Weitere Informationen</h2>
<p>
Zusätzlich stellen wir stetig weitere Informationen zu unserem Ökosystem bereit:
</p>
<ul class="cmp-link-list">
<li>
<a
href="https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/DB-UX-Design-System/Design-fuer-Apps-Web/UI-Komponenten"
class="elm-link"
title=""
rel="noopener noreferrer"
target="_blank"
>DB UX Design System Dokumentation im DB Marketingportal
</a>
</li>
<li>
<a
href="https://db.de/pu8moh"
class="elm-link"
title=""
rel="noopener noreferrer"
target="_blank"
>Confluence Wiki – "Technische Umsetzung des Enterprise UI
Design Systems" (nur intern verfügbar)
</a>
</li>
<li>
<a
href="https://db.de/1tyr73"
class="elm-link"
title=""
rel="noopener noreferrer"
target="_blank"
>Confluence – Web UI Komponenten Bibliothek Library (nur intern verfügbar)
</a>
</li>
<li>
<a
href="https://github.com/db-ui/core/blob/main/CHANGELOG.md"
class="elm-link"
title=""
rel="noopener noreferrer"
target="_blank"
>Änderungshistorie / Changelog
</a>
</li>
<li>
<a
href="https://github.com/db-ui/core/tree/main/docs/adr"
class="elm-link"
title=""
rel="noopener noreferrer"
target="_blank"
>Architekturentscheidungen bzw. <abbr title="Architectural Decision Records">ADRs</abbr>
</a>
</li>
</ul>
<!-- [html-validate-disable-next heading-level -- we're doing some simple demonstration simplification here] -->
<h2 class="elm-headline">Gebt uns Euer Feedback!</h2>
<p>
Durch Eure Rückmeldungen können wir uns stets weiterentwickeln – Ihr könnt uns entweder kontaktieren im
<a
href="https://db.de/krnm74"
class="elm-link"
title="Title text"
rel="noopener noreferrer"
target="_blank"
>DB UI Kanal der Web Dev Community in Microsoft Teams (nur DB intern)
</a>
, oder schreibt direkt an
<a
href="mailto:[email protected]"
class="elm-link"
title="Title text"
</a>
. Bitte unterstützt uns daher auf den Wegen, die Euch möglich sind,
wir freuen uns darüber sehr !<br>
Wir sind eifrig dabei, möglichst viele Beispiele zu den Verhalten
hinzuzufügen, um diese bestmöglich zu erklären.
</p>
</section>
</main>
</body>
</html>