diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.de.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.de.png new file mode 100644 index 00000000..224ff949 Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.de.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.en.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.en.png new file mode 100644 index 00000000..48934523 Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.en.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.es.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.es.png new file mode 100644 index 00000000..9efcfd64 Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.es.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.fa.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.fa.png new file mode 100644 index 00000000..17aa4e5d Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.fa.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.fr.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.fr.png new file mode 100644 index 00000000..9d2a6c92 Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.fr.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.hi.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.hi.png new file mode 100644 index 00000000..d37ffdfb Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.hi.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.hk.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.hk.png new file mode 100644 index 00000000..d5cecea9 Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.hk.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.ko.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.ko.png new file mode 100644 index 00000000..c7897e8b Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.ko.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.lt.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.lt.png new file mode 100644 index 00000000..540f3118 Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.lt.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.pl.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.pl.png new file mode 100644 index 00000000..f95e40d6 Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.pl.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.pt.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.pt.png new file mode 100644 index 00000000..d302fe89 Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.pt.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.tw.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.tw.png new file mode 100644 index 00000000..d5cecea9 Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.tw.png differ diff --git a/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.zh.png b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.zh.png new file mode 100644 index 00000000..da6bd412 Binary files /dev/null and b/translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.zh.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.de.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.de.png new file mode 100644 index 00000000..f75a9a34 Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.de.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.en.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.en.png new file mode 100644 index 00000000..0cfc445d Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.en.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.es.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.es.png new file mode 100644 index 00000000..32430b68 Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.es.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.fa.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.fa.png new file mode 100644 index 00000000..5122fce5 Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.fa.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.fr.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.fr.png new file mode 100644 index 00000000..2518ebc2 Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.fr.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.hi.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.hi.png new file mode 100644 index 00000000..b93de7a6 Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.hi.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.hk.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.hk.png new file mode 100644 index 00000000..30a50544 Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.hk.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.ko.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.ko.png new file mode 100644 index 00000000..86123beb Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.ko.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.lt.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.lt.png new file mode 100644 index 00000000..c7482c79 Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.lt.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.pl.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.pl.png new file mode 100644 index 00000000..26574a68 Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.pl.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.pt.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.pt.png new file mode 100644 index 00000000..9fe88756 Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.pt.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.tw.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.tw.png new file mode 100644 index 00000000..30a50544 Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.tw.png differ diff --git a/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.zh.png b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.zh.png new file mode 100644 index 00000000..b09711b0 Binary files /dev/null and b/translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.zh.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.de.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.de.png new file mode 100644 index 00000000..683fcec5 Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.de.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.en.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.en.png new file mode 100644 index 00000000..0ae82350 Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.en.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.es.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.es.png new file mode 100644 index 00000000..339391ab Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.es.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.fa.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.fa.png new file mode 100644 index 00000000..32f9426d Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.fa.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.fr.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.fr.png new file mode 100644 index 00000000..f9048bff Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.fr.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.hi.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.hi.png new file mode 100644 index 00000000..747de0bb Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.hi.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.hk.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.hk.png new file mode 100644 index 00000000..04f3acad Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.hk.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.ko.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.ko.png new file mode 100644 index 00000000..4119f04a Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.ko.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.lt.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.lt.png new file mode 100644 index 00000000..6c0968bd Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.lt.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.pl.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.pl.png new file mode 100644 index 00000000..2e62633e Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.pl.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.pt.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.pt.png new file mode 100644 index 00000000..e3bcec5d Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.pt.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.tw.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.tw.png new file mode 100644 index 00000000..3fcd2dc2 Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.tw.png differ diff --git a/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.zh.png b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.zh.png new file mode 100644 index 00000000..0265a77d Binary files /dev/null and b/translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.zh.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.de.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.de.png new file mode 100644 index 00000000..97234e5d Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.de.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.en.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.en.png new file mode 100644 index 00000000..518fbb44 Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.en.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.es.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.es.png new file mode 100644 index 00000000..be574566 Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.es.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.fa.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.fa.png new file mode 100644 index 00000000..08e52ded Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.fa.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.fr.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.fr.png new file mode 100644 index 00000000..cbd5e6a4 Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.fr.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.hi.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.hi.png new file mode 100644 index 00000000..4b26bdb6 Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.hi.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.hk.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.hk.png new file mode 100644 index 00000000..d12b9918 Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.hk.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.ko.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.ko.png new file mode 100644 index 00000000..1bf3433c Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.ko.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.lt.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.lt.png new file mode 100644 index 00000000..c4c74f22 Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.lt.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.pl.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.pl.png new file mode 100644 index 00000000..e20dafe4 Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.pl.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.pt.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.pt.png new file mode 100644 index 00000000..621181cc Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.pt.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.tw.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.tw.png new file mode 100644 index 00000000..77838c59 Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.tw.png differ diff --git a/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.zh.png b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.zh.png new file mode 100644 index 00000000..e195f137 Binary files /dev/null and b/translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.zh.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.de.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.de.png new file mode 100644 index 00000000..edbec1fd Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.de.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.en.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.en.png new file mode 100644 index 00000000..3b2a2c44 Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.en.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.es.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.es.png new file mode 100644 index 00000000..a41bbac3 Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.es.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.fa.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.fa.png new file mode 100644 index 00000000..69d5d7c6 Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.fa.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.fr.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.fr.png new file mode 100644 index 00000000..98b41e24 Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.fr.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.hi.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.hi.png new file mode 100644 index 00000000..b914bac0 Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.hi.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.hk.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.hk.png new file mode 100644 index 00000000..56d74971 Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.hk.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.ko.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.ko.png new file mode 100644 index 00000000..c38a5086 Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.ko.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.lt.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.lt.png new file mode 100644 index 00000000..6b0acea8 Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.lt.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.pl.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.pl.png new file mode 100644 index 00000000..8db1ab2f Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.pl.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.pt.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.pt.png new file mode 100644 index 00000000..38fa233c Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.pt.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.tw.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.tw.png new file mode 100644 index 00000000..56d74971 Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.tw.png differ diff --git a/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.zh.png b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.zh.png new file mode 100644 index 00000000..a3d09a57 Binary files /dev/null and b/translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.zh.png differ diff --git a/translations/de/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/de/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 83c068a1..fc24b5db 100644 --- a/translations/de/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/de/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,17 +1,17 @@ # Einführung in Programmiersprachen und Werkzeuge des Handwerks -Diese Lektion behandelt die Grundlagen von Programmiersprachen. Die hier behandelten Themen gelten für die meisten modernen Programmiersprachen. Im Abschnitt "Werkzeuge des Handwerks" lernst du nützliche Software kennen, die dir als Entwickler:in hilft. +Diese Lektion behandelt die Grundlagen von Programmiersprachen. Die hier behandelten Themen gelten für die meisten modernen Programmiersprachen. Im Abschnitt "Werkzeuge des Handwerks" lernst du nützliche Software kennen, die dir als Entwickler hilft. -![Intro Programmierung](../../../../sketchnotes/webdev101-programming.png) +![Intro Programmierung](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.de.png) > Sketchnote von [Tomomi Imura](https://twitter.com/girlie_mac) ## Quiz vor der Vorlesung @@ -21,30 +21,30 @@ Diese Lektion behandelt die Grundlagen von Programmiersprachen. Die hier behande In dieser Lektion behandeln wir: -- Was ist Programmieren? +- Was ist Programmierung? - Arten von Programmiersprachen - Grundelemente eines Programms -- Nützliche Software und Werkzeuge für professionelle Entwickler:innen +- Nützliche Software und Tools für professionelle Entwickler > Du kannst diese Lektion auf [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) absolvieren! -## Was ist Programmieren? +## Was ist Programmierung? -Programmieren (auch bekannt als Codieren) ist der Prozess, Anweisungen für ein Gerät wie einen Computer oder ein mobiles Gerät zu schreiben. Wir schreiben diese Anweisungen mit einer Programmiersprache, die dann vom Gerät interpretiert wird. Diese Anweisungen können verschiedene Namen haben, aber *Programm*, *Computerprogramm*, *Anwendung (App)* und *ausführbare Datei* sind einige gängige Bezeichnungen. +Programmierung (auch bekannt als Codierung) ist der Prozess des Schreibens von Anweisungen für ein Gerät wie einen Computer oder ein mobiles Gerät. Wir schreiben diese Anweisungen mit einer Programmiersprache, die dann vom Gerät interpretiert wird. Diese Anweisungen können verschiedene Namen haben, aber *Programm*, *Computerprogramm*, *Anwendung (App)* und *ausführbare Datei* sind einige gängige Begriffe. -Ein *Programm* kann alles sein, was mit Code geschrieben wurde; Websites, Spiele und Handy-Apps sind Programme. Auch wenn es möglich ist, ein Programm ohne Code zu erstellen, wird die zugrunde liegende Logik vom Gerät interpretiert, und diese Logik wurde höchstwahrscheinlich mit Code geschrieben. Ein Programm, das *läuft* oder *ausgeführt* wird, führt Anweisungen aus. Das Gerät, mit dem du diese Lektion liest, führt ein Programm aus, um sie auf deinem Bildschirm anzuzeigen. +Ein *Programm* kann alles sein, was mit Code geschrieben wurde; Websites, Spiele und Handy-Apps sind Programme. Obwohl es möglich ist, ein Programm ohne Code zu erstellen, wird die zugrunde liegende Logik vom Gerät interpretiert, und diese Logik wurde höchstwahrscheinlich mit Code geschrieben. Ein Programm, das *läuft* oder *ausgeführt* wird, führt Anweisungen aus. Das Gerät, mit dem du diese Lektion liest, führt ein Programm aus, um sie auf deinem Bildschirm anzuzeigen. -✅ Recherchiere ein wenig: Wer gilt als der/die erste Computerprogrammierer:in der Welt? +✅ Recherchiere ein wenig: Wer gilt als der erste Computerprogrammierer der Welt? ## Programmiersprachen -Programmiersprachen ermöglichen es Entwickler:innen, Anweisungen für ein Gerät zu schreiben. Geräte können nur Binärcode (1en und 0en) verstehen, und für *die meisten* Entwickler:innen ist das keine sehr effiziente Art der Kommunikation. Programmiersprachen sind das Mittel zur Kommunikation zwischen Menschen und Computern. +Programmiersprachen ermöglichen es Entwicklern, Anweisungen für ein Gerät zu schreiben. Geräte können nur Binärdaten (1en und 0en) verstehen, und für *die meisten* Entwickler ist das keine sehr effiziente Art der Kommunikation. Programmiersprachen sind das Mittel der Kommunikation zwischen Menschen und Computern. -Programmiersprachen gibt es in verschiedenen Formaten und sie können unterschiedlichen Zwecken dienen. Zum Beispiel wird JavaScript hauptsächlich für Webanwendungen verwendet, während Bash hauptsächlich für Betriebssysteme genutzt wird. +Programmiersprachen gibt es in verschiedenen Formaten und sie können unterschiedliche Zwecke erfüllen. Zum Beispiel wird JavaScript hauptsächlich für Webanwendungen verwendet, während Bash hauptsächlich für Betriebssysteme genutzt wird. -*Low-Level-Sprachen* erfordern in der Regel weniger Schritte als *High-Level-Sprachen*, damit ein Gerät Anweisungen interpretieren kann. Was High-Level-Sprachen jedoch beliebt macht, ist ihre Lesbarkeit und Unterstützung. JavaScript gilt als High-Level-Sprache. +*Low-Level-Sprachen* erfordern in der Regel weniger Schritte als *High-Level-Sprachen*, damit ein Gerät Anweisungen interpretieren kann. Was High-Level-Sprachen jedoch beliebt macht, ist ihre Lesbarkeit und Unterstützung. JavaScript wird als High-Level-Sprache angesehen. -Der folgende Code zeigt den Unterschied zwischen einer High-Level-Sprache wie JavaScript und einer Low-Level-Sprache wie ARM-Assemblercode. +Der folgende Code zeigt den Unterschied zwischen einer High-Level-Sprache wie JavaScript und einer Low-Level-Sprache wie ARM-Assembler-Code. ```javascript let number = 10 @@ -91,32 +91,32 @@ Glaub es oder nicht, *sie tun beide dasselbe*: Sie geben eine Fibonacci-Sequenz Eine einzelne Anweisung in einem Programm wird als *Statement* bezeichnet und hat normalerweise ein Zeichen oder einen Zeilenabstand, der markiert, wo die Anweisung endet oder *terminiert*. Wie ein Programm terminiert, variiert je nach Sprache. -Anweisungen in einem Programm können von Daten abhängen, die von einem Benutzer oder einer anderen Quelle bereitgestellt werden, um Anweisungen auszuführen. Daten können beeinflussen, wie sich ein Programm verhält, daher bieten Programmiersprachen eine Möglichkeit, Daten vorübergehend zu speichern, damit sie später verwendet werden können. Diese werden als *Variablen* bezeichnet. Variablen sind Anweisungen, die ein Gerät anweisen, Daten im Speicher zu speichern. Variablen in Programmen ähneln Variablen in der Algebra, da sie einen eindeutigen Namen haben und sich ihr Wert im Laufe der Zeit ändern kann. +Anweisungen in einem Programm können von Daten abhängen, die von einem Benutzer oder anderswo bereitgestellt werden, um Anweisungen auszuführen. Daten können beeinflussen, wie ein Programm sich verhält, daher bieten Programmiersprachen eine Möglichkeit, Daten vorübergehend zu speichern, damit sie später verwendet werden können. Diese werden als *Variablen* bezeichnet. Variablen sind Anweisungen, die ein Gerät anweisen, Daten in seinem Speicher zu speichern. Variablen in Programmen sind ähnlich wie Variablen in der Algebra, bei denen sie einen eindeutigen Namen haben und ihr Wert sich im Laufe der Zeit ändern kann. -Es besteht die Möglichkeit, dass einige Anweisungen von einem Gerät nicht ausgeführt werden. Dies geschieht in der Regel absichtlich, wenn es vom Entwickler so geschrieben wurde, oder versehentlich, wenn ein unerwarteter Fehler auftritt. Diese Art der Kontrolle über eine Anwendung macht sie robuster und wartbarer. Typischerweise treten diese Kontrolländerungen auf, wenn bestimmte Bedingungen erfüllt sind. Eine gängige Anweisung in modernen Programmiersprachen, um zu steuern, wie ein Programm ausgeführt wird, ist die `if..else`-Anweisung. +Es besteht die Möglichkeit, dass einige Anweisungen von einem Gerät nicht ausgeführt werden. Dies geschieht normalerweise absichtlich, wenn es vom Entwickler geschrieben wurde, oder versehentlich, wenn ein unerwarteter Fehler auftritt. Diese Art der Kontrolle über eine Anwendung macht sie robuster und wartungsfreundlicher. Typischerweise treten diese Änderungen in der Kontrolle auf, wenn bestimmte Bedingungen erfüllt sind. Eine gängige Anweisung, die in der modernen Programmierung verwendet wird, um zu steuern, wie ein Programm läuft, ist die `if..else`-Anweisung. -✅ Du wirst mehr über diese Art von Anweisungen in späteren Lektionen lernen. +✅ Du wirst mehr über diese Art von Anweisung in den folgenden Lektionen lernen. ## Werkzeuge des Handwerks [![Werkzeuge des Handwerks](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Werkzeuge des Handwerks") -> 🎥 Klicke auf das Bild oben, um ein Video über Werkzeuge anzusehen +> 🎥 Klicke auf das Bild oben für ein Video über Tools -In diesem Abschnitt lernst du einige Software kennen, die du als nützlich empfinden könntest, wenn du deine Reise als professionelle:r Entwickler:in beginnst. +In diesem Abschnitt lernst du einige Software kennen, die du als nützlich empfinden könntest, wenn du deine professionelle Entwicklerreise beginnst. -Eine **Entwicklungsumgebung** ist eine einzigartige Sammlung von Werkzeugen und Funktionen, die ein:e Entwickler:in häufig beim Schreiben von Software verwendet. Einige dieser Werkzeuge wurden speziell auf die Bedürfnisse eines:einer Entwickler:in zugeschnitten und können sich im Laufe der Zeit ändern, wenn sich die Prioritäten in der Arbeit, bei persönlichen Projekten oder bei der Verwendung einer anderen Programmiersprache ändern. Entwicklungsumgebungen sind so einzigartig wie die Entwickler:innen, die sie nutzen. +Eine **Entwicklungsumgebung** ist eine einzigartige Sammlung von Tools und Funktionen, die ein Entwickler häufig beim Schreiben von Software verwendet. Einige dieser Tools wurden für die spezifischen Bedürfnisse eines Entwicklers angepasst und können sich im Laufe der Zeit ändern, wenn sich die Prioritäten des Entwicklers in der Arbeit, bei persönlichen Projekten oder bei der Verwendung einer anderen Programmiersprache ändern. Entwicklungsumgebungen sind so einzigartig wie die Entwickler, die sie nutzen. ### Editoren Eines der wichtigsten Werkzeuge für die Softwareentwicklung ist der Editor. Editoren sind der Ort, an dem du deinen Code schreibst und manchmal auch ausführst. -Entwickler:innen verlassen sich aus mehreren Gründen auf Editoren: +Entwickler verlassen sich aus mehreren Gründen auf Editoren: -- *Debugging* hilft, Fehler und Probleme aufzudecken, indem der Code Zeile für Zeile durchgegangen wird. Einige Editoren verfügen über Debugging-Funktionen, die für bestimmte Programmiersprachen angepasst und hinzugefügt werden können. -- *Syntaxhervorhebung* fügt Farben und Textformatierungen zum Code hinzu, was ihn leichter lesbar macht. Die meisten Editoren erlauben eine angepasste Syntaxhervorhebung. -- *Erweiterungen und Integrationen* sind spezialisierte Werkzeuge für Entwickler:innen, die von anderen Entwickler:innen erstellt wurden. Diese Werkzeuge sind nicht im Basis-Editor enthalten. Zum Beispiel dokumentieren viele Entwickler:innen ihren Code, um zu erklären, wie er funktioniert. Sie könnten eine Rechtschreibprüfungserweiterung installieren, um Tippfehler in der Dokumentation zu finden. Die meisten Erweiterungen sind für die Verwendung in einem bestimmten Editor gedacht, und die meisten Editoren bieten eine Möglichkeit, nach verfügbaren Erweiterungen zu suchen. -- *Anpassung* ermöglicht es Entwickler:innen, eine einzigartige Entwicklungsumgebung zu schaffen, die ihren Bedürfnissen entspricht. Die meisten Editoren sind extrem anpassbar und erlauben es Entwickler:innen, eigene Erweiterungen zu erstellen. +- *Debugging* hilft, Fehler und Probleme aufzudecken, indem der Code Zeile für Zeile durchgegangen wird. Einige Editoren haben Debugging-Funktionen; sie können angepasst und für bestimmte Programmiersprachen hinzugefügt werden. +- *Syntax-Hervorhebung* fügt Farben und Textformatierungen zum Code hinzu, wodurch er leichter lesbar wird. Die meisten Editoren erlauben eine angepasste Syntax-Hervorhebung. +- *Erweiterungen und Integrationen* sind spezialisierte Tools für Entwickler, von Entwicklern. Diese Tools sind nicht in den Basiseditor integriert. Zum Beispiel dokumentieren viele Entwickler ihren Code, um zu erklären, wie er funktioniert. Sie könnten eine Rechtschreibprüfungserweiterung installieren, um Tippfehler in der Dokumentation zu finden. Die meisten Erweiterungen sind für die Verwendung in einem bestimmten Editor gedacht, und die meisten Editoren bieten eine Möglichkeit, nach verfügbaren Erweiterungen zu suchen. +- *Anpassung* ermöglicht es Entwicklern, eine einzigartige Entwicklungsumgebung zu schaffen, die ihren Bedürfnissen entspricht. Die meisten Editoren sind extrem anpassbar und erlauben es Entwicklern möglicherweise auch, benutzerdefinierte Erweiterungen zu erstellen. #### Beliebte Editoren und Webentwicklungs-Erweiterungen @@ -135,9 +135,9 @@ Entwickler:innen verlassen sich aus mehreren Gründen auf Editoren: ### Browser -Ein weiteres wichtiges Werkzeug ist der Browser. Webentwickler:innen verlassen sich auf den Browser, um zu sehen, wie ihr Code im Web ausgeführt wird. Er wird auch verwendet, um die visuellen Elemente einer Webseite anzuzeigen, die im Editor geschrieben wurden, wie HTML. +Ein weiteres wichtiges Werkzeug ist der Browser. Webentwickler verlassen sich auf den Browser, um zu sehen, wie ihr Code im Web ausgeführt wird. Er wird auch verwendet, um die visuellen Elemente einer Webseite anzuzeigen, die im Editor geschrieben wurden, wie HTML. -Viele Browser verfügen über *Entwicklerwerkzeuge* (DevTools), die eine Reihe hilfreicher Funktionen und Informationen enthalten, um Entwickler:innen dabei zu helfen, wichtige Informationen über ihre Anwendung zu sammeln und zu erfassen. Zum Beispiel: Wenn eine Webseite Fehler hat, ist es manchmal hilfreich zu wissen, wann sie aufgetreten sind. DevTools in einem Browser können so konfiguriert werden, dass diese Informationen erfasst werden. +Viele Browser verfügen über *Entwicklertools* (DevTools), die eine Reihe hilfreicher Funktionen und Informationen enthalten, um Entwicklern zu helfen, wichtige Informationen über ihre Anwendung zu sammeln und zu erfassen. Zum Beispiel: Wenn eine Webseite Fehler hat, ist es manchmal hilfreich zu wissen, wann sie aufgetreten sind. DevTools in einem Browser können so konfiguriert werden, dass diese Informationen erfasst werden. #### Beliebte Browser und DevTools @@ -145,15 +145,15 @@ Viele Browser verfügen über *Entwicklerwerkzeuge* (DevTools), die eine Reihe h - [Chrome](https://developers.google.com/web/tools/chrome-devtools/) - [Firefox](https://developer.mozilla.org/docs/Tools) -### Kommandozeilenwerkzeuge +### Kommandozeilen-Tools -Einige Entwickler:innen bevorzugen eine weniger grafische Ansicht für ihre täglichen Aufgaben und verlassen sich auf die Kommandozeile, um dies zu erreichen. Das Schreiben von Code erfordert eine erhebliche Menge an Tippen, und einige Entwickler:innen bevorzugen es, ihren Arbeitsfluss auf der Tastatur nicht zu unterbrechen. Sie verwenden Tastenkombinationen, um zwischen Desktop-Fenstern zu wechseln, an verschiedenen Dateien zu arbeiten und Werkzeuge zu nutzen. Die meisten Aufgaben können mit einer Maus erledigt werden, aber ein Vorteil der Kommandozeile ist, dass vieles mit Kommandozeilenwerkzeugen erledigt werden kann, ohne zwischen Maus und Tastatur wechseln zu müssen. Ein weiterer Vorteil der Kommandozeile ist, dass sie konfigurierbar ist und du eine benutzerdefinierte Konfiguration speichern, später ändern und auf andere Entwicklungsmaschinen importieren kannst. Da Entwicklungsumgebungen so einzigartig für jede:n Entwickler:in sind, vermeiden einige die Kommandozeile, andere verlassen sich vollständig darauf, und wieder andere bevorzugen eine Mischung aus beidem. +Einige Entwickler bevorzugen eine weniger grafische Ansicht für ihre täglichen Aufgaben und verlassen sich auf die Kommandozeile, um dies zu erreichen. Das Schreiben von Code erfordert eine erhebliche Menge an Tippen, und einige Entwickler bevorzugen es, ihren Arbeitsfluss auf der Tastatur nicht zu unterbrechen. Sie verwenden Tastenkombinationen, um zwischen Desktop-Fenstern zu wechseln, an verschiedenen Dateien zu arbeiten und Tools zu verwenden. Die meisten Aufgaben können mit einer Maus erledigt werden, aber ein Vorteil der Kommandozeile ist, dass vieles mit Kommandozeilen-Tools erledigt werden kann, ohne zwischen Maus und Tastatur wechseln zu müssen. Ein weiterer Vorteil der Kommandozeile ist, dass sie konfigurierbar ist und du eine benutzerdefinierte Konfiguration speichern, später ändern und auf andere Entwicklungsmaschinen importieren kannst. Da Entwicklungsumgebungen so einzigartig für jeden Entwickler sind, vermeiden einige die Kommandozeile, andere verlassen sich vollständig darauf, und wieder andere bevorzugen eine Mischung aus beidem. -### Beliebte Kommandozeilenoptionen +### Beliebte Kommandozeilen-Optionen Die Optionen für die Kommandozeile unterscheiden sich je nach Betriebssystem. -*💻 = ist standardmäßig auf dem Betriebssystem vorinstalliert.* +*💻 = ist vorinstalliert auf dem Betriebssystem.* #### Windows @@ -174,7 +174,7 @@ Die Optionen für die Kommandozeile unterscheiden sich je nach Betriebssystem. - [KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html) - [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) -#### Beliebte Kommandozeilenwerkzeuge +#### Beliebte Kommandozeilen-Tools - [Git](https://git-scm.com/) (💻 auf den meisten Betriebssystemen) - [NPM](https://www.npmjs.com/) @@ -182,17 +182,17 @@ Die Optionen für die Kommandozeile unterscheiden sich je nach Betriebssystem. ### Dokumentation -Wenn ein:e Entwickler:in etwas Neues lernen möchte, wird er:sie sich höchstwahrscheinlich an die Dokumentation wenden, um zu erfahren, wie man es benutzt. Entwickler:innen verlassen sich oft auf Dokumentationen, um sich darüber zu informieren, wie Werkzeuge und Sprachen richtig verwendet werden, und um ein tieferes Verständnis dafür zu erlangen, wie sie funktionieren. +Wenn ein Entwickler etwas Neues lernen möchte, wendet er sich höchstwahrscheinlich an die Dokumentation, um zu erfahren, wie man es benutzt. Entwickler verlassen sich oft auf Dokumentationen, um sich durch die richtige Nutzung von Tools und Sprachen zu führen und auch um ein tieferes Verständnis dafür zu gewinnen, wie sie funktionieren. #### Beliebte Dokumentationen zur Webentwicklung -- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), von Mozilla, den Herausgebern des [Firefox](https://www.mozilla.org/firefox/)-Browsers +- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), von Mozilla, den Herausgebern des [Firefox](https://www.mozilla.org/firefox/) Browsers - [Frontend Masters](https://frontendmasters.com/learn/) - [Web.dev](https://web.dev), von Google, den Herausgebern von [Chrome](https://www.google.com/chrome/) - [Microsofts eigene Entwicklerdokumentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), für [Microsoft Edge](https://www.microsoft.com/edge) - [W3 Schools](https://www.w3schools.com/where_to_start.asp) -✅ Recherchiere: Jetzt, da du die Grundlagen der Umgebung eines Webentwicklers kennst, vergleiche sie mit der Umgebung eines Webdesigners. +✅ Recherchiere: Jetzt, da du die Grundlagen der Umgebung eines Webentwicklers kennst, vergleiche und kontrastiere sie mit der Umgebung eines Webdesigners. --- @@ -201,15 +201,17 @@ Wenn ein:e Entwickler:in etwas Neues lernen möchte, wird er:sie sich höchstwah Vergleiche einige Programmiersprachen. Was sind einige der einzigartigen Merkmale von JavaScript im Vergleich zu Java? Wie sieht es mit COBOL im Vergleich zu Go aus? ## Quiz nach der Vorlesung -[Quiz nach der Vorlesung](https://ff-quizzes.netlify.app/web/quiz/2) +[Quiz nach der Vorlesung](https://ff-quizzes.netlify.app/web/) -## Wiederholung & Selbststudium +## Überprüfung & Selbststudium -Lerne ein wenig über die verschiedenen Programmiersprachen, die einem Programmierer zur Verfügung stehen. Versuche, eine Zeile in einer Sprache zu schreiben, und schreibe sie dann in zwei anderen Sprachen um. Was hast du dabei gelernt? +Studier ein wenig über die verschiedenen Sprachen, die einem Programmierer zur Verfügung stehen. Versuche, eine Zeile in einer Sprache zu schreiben und sie dann in zwei anderen neu zu schreiben. Was hast du gelernt? ## Aufgabe [Die Dokumentation lesen](assignment.md) +--- + **Haftungsausschluss**: Dieses Dokument wurde mit dem KI-Übersetzungsdienst [Co-op Translator](https://github.com/Azure/co-op-translator) übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben. \ No newline at end of file diff --git a/translations/de/1-getting-started-lessons/2-github-basics/README.md b/translations/de/1-getting-started-lessons/2-github-basics/README.md index aabac9d7..9778e5c7 100644 --- a/translations/de/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/de/1-getting-started-lessons/2-github-basics/README.md @@ -1,8 +1,8 @@ -# Erstellen barrierefreier Webseiten +# Erstellen von barrierefreien Webseiten -![Alles über Barrierefreiheit](../../../../sketchnotes/webdev101-a11y.png) +![Alles über Barrierefreiheit](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.de.png) > Sketchnote von [Tomomi Imura](https://twitter.com/girlie_mac) ## Quiz vor der Vorlesung -[Quiz vor der Vorlesung](https://ff-quizzes.netlify.app/web/quiz/5) +[Quiz vor der Vorlesung](https://ff-quizzes.netlify.app/web/) > Die Stärke des Webs liegt in seiner Universalität. Der Zugang für alle, unabhängig von Behinderung, ist ein wesentlicher Aspekt. > > \- Sir Timothy Berners-Lee, W3C-Direktor und Erfinder des World Wide Web -Dieses Zitat unterstreicht perfekt die Bedeutung der Erstellung barrierefreier Websites. Eine Anwendung, die nicht von allen genutzt werden kann, ist per Definition ausschließend. Als Webentwickler sollten wir Barrierefreiheit immer im Blick haben. Wenn Sie diesen Fokus von Anfang an haben, sind Sie auf dem besten Weg, sicherzustellen, dass jeder Zugang zu den von Ihnen erstellten Seiten hat. In dieser Lektion lernen Sie die Werkzeuge kennen, die Ihnen helfen, sicherzustellen, dass Ihre Webinhalte barrierefrei sind, und wie Sie mit Barrierefreiheit im Hinterkopf entwickeln können. +Dieses Zitat unterstreicht perfekt die Bedeutung der Erstellung barrierefreier Webseiten. Eine Anwendung, die nicht von allen genutzt werden kann, ist per Definition ausschließend. Als Webentwickler sollten wir Barrierefreiheit immer im Blick haben. Wenn Sie diesen Fokus von Anfang an haben, sind Sie auf dem besten Weg, sicherzustellen, dass jeder Zugang zu den von Ihnen erstellten Seiten hat. In dieser Lektion lernen Sie die Werkzeuge kennen, die Ihnen helfen, sicherzustellen, dass Ihre Webinhalte barrierefrei sind, und wie Sie mit Barrierefreiheit im Hinterkopf entwickeln können. > Sie können diese Lektion auf [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon) absolvieren! -## Zu verwendende Werkzeuge +## Werkzeuge, die Sie verwenden können ### Screenreader Eines der bekanntesten Barrierefreiheitswerkzeuge sind Screenreader. -[Screenreader](https://en.wikipedia.org/wiki/Screen_reader) sind häufig genutzte Clients für Menschen mit Sehbehinderungen. Während wir Zeit darauf verwenden, sicherzustellen, dass ein Browser die Informationen, die wir teilen möchten, korrekt darstellt, müssen wir auch sicherstellen, dass ein Screenreader dies tut. +[Screenreader](https://en.wikipedia.org/wiki/Screen_reader) sind häufig genutzte Clients für Menschen mit Sehbehinderungen. Während wir Zeit darauf verwenden, sicherzustellen, dass ein Browser die Informationen, die wir teilen möchten, korrekt darstellt, müssen wir auch sicherstellen, dass ein Screenreader dies ebenfalls tut. -Ein Screenreader liest eine Seite von oben nach unten hörbar vor. Wenn Ihre Seite nur aus Text besteht, wird der Reader die Informationen ähnlich wie ein Browser vermitteln. Natürlich sind Webseiten selten rein textbasiert; sie enthalten Links, Grafiken, Farben und andere visuelle Komponenten. Es muss darauf geachtet werden, dass diese Informationen korrekt von einem Screenreader gelesen werden. +Ein Screenreader liest eine Seite von oben nach unten hörbar vor. Wenn Ihre Seite nur aus Text besteht, wird der Reader die Informationen ähnlich wie ein Browser wiedergeben. Natürlich sind Webseiten selten rein textbasiert; sie enthalten Links, Grafiken, Farben und andere visuelle Komponenten. Es muss darauf geachtet werden, dass diese Informationen korrekt von einem Screenreader gelesen werden. Jeder Webentwickler sollte sich mit einem Screenreader vertraut machen. Wie oben hervorgehoben, ist es der Client, den Ihre Nutzer verwenden werden. Genauso wie Sie wissen, wie ein Browser funktioniert, sollten Sie lernen, wie ein Screenreader funktioniert. Glücklicherweise sind Screenreader in den meisten Betriebssystemen integriert. Einige Browser haben auch integrierte Tools und Erweiterungen, die Text laut vorlesen oder sogar grundlegende Navigationsfunktionen bieten, wie [diese barrierefreiheitsorientierten Edge-Browser-Tools](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). Diese sind ebenfalls wichtige Barrierefreiheitswerkzeuge, funktionieren jedoch ganz anders als Screenreader und sollten nicht mit Screenreader-Testtools verwechselt werden. -✅ Probieren Sie einen Screenreader und einen Browser-Textleser aus. Unter Windows ist [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) standardmäßig enthalten, und [JAWS](https://webaim.org/articles/jaws/) und [NVDA](https://www.nvaccess.org/about-nvda/) können ebenfalls installiert werden. Unter macOS und iOS ist [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) standardmäßig installiert. +✅ Probieren Sie einen Screenreader und einen Browser-Textleser aus. Unter Windows ist [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) standardmäßig enthalten, und [JAWS](https://webaim.org/articles/jaws/) und [NVDA](https://www.nvaccess.org/about-nvda/) können ebenfalls installiert werden. Auf macOS und iOS ist [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) standardmäßig installiert. ### Zoom -Ein weiteres Werkzeug, das häufig von Menschen mit Sehbehinderungen verwendet wird, ist das Zoomen. Die einfachste Art des Zoomens ist statisches Zoomen, gesteuert durch `Control + Pluszeichen (+)` oder durch das Verringern der Bildschirmauflösung. Diese Art des Zoomens bewirkt, dass die gesamte Seite vergrößert wird. Daher ist es wichtig, [responsives Design](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) zu verwenden, um eine gute Benutzererfahrung bei erhöhten Zoomstufen zu gewährleisten. +Ein weiteres Werkzeug, das häufig von Menschen mit Sehbehinderungen verwendet wird, ist das Zoomen. Die einfachste Art des Zoomens ist das statische Zoomen, gesteuert durch `Control + Pluszeichen (+)` oder durch das Verringern der Bildschirmauflösung. Diese Art des Zoomens bewirkt, dass die gesamte Seite vergrößert wird. Daher ist es wichtig, [responsives Design](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) zu verwenden, um eine gute Benutzererfahrung bei erhöhten Zoomstufen zu gewährleisten. -Eine andere Art des Zoomens basiert auf spezieller Software, die einen Bereich des Bildschirms vergrößert und schwenkt, ähnlich wie bei der Verwendung einer echten Lupe. Unter Windows ist [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) integriert, und [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) ist eine Drittanbieter-Vergrößerungssoftware mit mehr Funktionen und einer größeren Nutzerbasis. Sowohl macOS als auch iOS verfügen über eine integrierte Vergrößerungssoftware namens [Zoom](https://www.apple.com/accessibility/mac/vision/). +Eine andere Art des Zoomens basiert auf spezieller Software, die einen Bereich des Bildschirms vergrößert und verschiebt, ähnlich wie bei der Verwendung einer echten Lupe. Unter Windows ist [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) integriert, und [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) ist eine Drittanbieter-Vergrößerungssoftware mit mehr Funktionen und einer größeren Benutzerbasis. Sowohl macOS als auch iOS verfügen über eine integrierte Vergrößerungssoftware namens [Zoom](https://www.apple.com/accessibility/mac/vision/). ### Kontrastprüfer -Farben auf Websites müssen sorgfältig ausgewählt werden, um den Bedürfnissen von farbenblinden Nutzern oder Menschen, die Schwierigkeiten haben, Farben mit geringem Kontrast zu sehen, gerecht zu werden. +Farben auf Webseiten müssen sorgfältig ausgewählt werden, um den Bedürfnissen von farbenblinden Nutzern oder Menschen, die Schwierigkeiten haben, Farben mit geringem Kontrast zu sehen, gerecht zu werden. -✅ Testen Sie eine Website, die Sie gerne nutzen, auf Farbverwendung mit einer Browser-Erweiterung wie [WCAGs Farbprüfer](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). Was lernen Sie? +✅ Testen Sie eine Webseite, die Sie gerne nutzen, auf die Verwendung von Farben mit einer Browser-Erweiterung wie [WCAGs Farbprüfer](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US&WT.mc_id=academic-77807-sagibbon). Was lernen Sie? ### Lighthouse -Im Entwicklerbereich Ihres Browsers finden Sie das Lighthouse-Tool. Dieses Tool ist wichtig, um einen ersten Überblick über die Barrierefreiheit (sowie andere Analysen) einer Website zu erhalten. Während es wichtig ist, sich nicht ausschließlich auf Lighthouse zu verlassen, ist eine 100%-Bewertung als Ausgangspunkt sehr hilfreich. +Im Entwicklerbereich Ihres Browsers finden Sie das Lighthouse-Tool. Dieses Tool ist wichtig, um einen ersten Überblick über die Barrierefreiheit (sowie andere Analysen) einer Webseite zu erhalten. Während es wichtig ist, sich nicht ausschließlich auf Lighthouse zu verlassen, ist eine 100%-Bewertung als Ausgangspunkt sehr hilfreich. -✅ Finden Sie Lighthouse im Entwicklerbereich Ihres Browsers und führen Sie eine Analyse auf einer beliebigen Website durch. Was entdecken Sie? +✅ Finden Sie Lighthouse im Entwicklerbereich Ihres Browsers und führen Sie eine Analyse auf einer beliebigen Seite durch. Was entdecken Sie? ## Gestaltung für Barrierefreiheit @@ -63,25 +63,25 @@ Barrierefreiheit ist ein relativ großes Thema. Um Ihnen zu helfen, stehen zahlr - [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers) -Während wir nicht jeden Aspekt der Erstellung barrierefreier Websites abdecken können, finden Sie unten einige der Kernprinzipien, die Sie umsetzen sollten. Eine barrierefreie Seite von Anfang an zu gestalten ist **immer** einfacher, als eine bestehende Seite nachträglich barrierefrei zu machen. +Während wir nicht alle Aspekte der Erstellung barrierefreier Seiten abdecken können, finden Sie unten einige der wichtigsten Prinzipien, die Sie umsetzen sollten. Eine barrierefreie Seite von Anfang an zu gestalten ist **immer** einfacher, als eine bestehende Seite nachträglich barrierefrei zu machen. ## Gute Anzeigeprinzipien ### Farbpaletten, die sicher sind -Menschen sehen die Welt auf unterschiedliche Weise, und dazu gehören auch Farben. Wenn Sie ein Farbschema für Ihre Website auswählen, sollten Sie sicherstellen, dass es für alle zugänglich ist. Ein großartiges [Tool zur Erstellung von Farbpaletten ist Color Safe](http://colorsafe.co/). +Menschen sehen die Welt auf unterschiedliche Weise, und dazu gehören auch Farben. Wenn Sie ein Farbschema für Ihre Seite auswählen, sollten Sie sicherstellen, dass es für alle zugänglich ist. Ein großartiges [Tool zur Erstellung von Farbpaletten ist Color Safe](http://colorsafe.co/). -✅ Identifizieren Sie eine Website, die in ihrer Farbverwendung sehr problematisch ist. Warum? +✅ Identifizieren Sie eine Webseite, die in ihrer Farbverwendung sehr problematisch ist. Warum? ### Verwenden Sie das richtige HTML Mit CSS und JavaScript ist es möglich, jedes Element wie jede Art von Steuerung aussehen zu lassen. `` könnte verwendet werden, um einen `