diff --git a/translated_images/mo/.co-op-translator.json b/translated_images/mo/.co-op-translator.json new file mode 100644 index 000000000..02f4b68c0 --- /dev/null +++ b/translated_images/mo/.co-op-translator.json @@ -0,0 +1,860 @@ +{ + "moodle.94eb93d714a50cb2.webp": { + "original_hash": "0d04a6ef1ac524b452d5a0aae3f45bee", + "translation_date": "2026-01-15T15:38:12+00:00", + "source_file": "teaching-files/moodle.png", + "language_code": "mo" + }, + "canvas.fbd605ff8e5b8aff.webp": { + "original_hash": "29556305738d345dd023554d788d5477", + "translation_date": "2026-01-15T15:38:41+00:00", + "source_file": "teaching-files/canvas.png", + "language_code": "mo" + }, + "install-on-edge.78634f02842c4828.webp": { + "original_hash": "6224aad8f1cd252da83c2808ff5c7a4e", + "translation_date": "2026-01-15T15:39:00+00:00", + "source_file": "5-browser-extension/install-on-edge.png", + "language_code": "mo" + }, + "extension-screenshot.0e7f5bfa110e92e3.webp": { + "original_hash": "4fdd1d3fdbc9ac2c2932f83847a5e4b8", + "translation_date": "2026-01-15T15:39:28+00:00", + "source_file": "5-browser-extension/extension-screenshot.png", + "language_code": "mo" + }, + "createcodespace.0238bbf4d7a8d955.webp": { + "original_hash": "4f504323085308f4a0e7b5bfb37e16d7", + "translation_date": "2026-01-15T15:39:37+00:00", + "source_file": "images/createcodespace.png", + "language_code": "mo" + }, + "favicon.37b561214b36d454.webp": { + "original_hash": "228faa6584f8ba1f7e9a75e3200112e9", + "translation_date": "2026-01-15T15:39:37+00:00", + "source_file": "images/favicon.png", + "language_code": "mo" + }, + "character.5c0dd8e067ffd693.webp": { + "original_hash": "076bbb4d25a17982c81973b8dba9d4fa", + "translation_date": "2026-01-15T15:39:46+00:00", + "source_file": "images/character.png", + "language_code": "mo" + }, + "clone_repo.6a202fb230ab6bdd.webp": { + "original_hash": "9261d014674312eece91deae958538cf", + "translation_date": "2026-01-15T15:39:52+00:00", + "source_file": "images/clone_repo.png", + "language_code": "mo" + }, + "background.148a8d43afde5730.webp": { + "original_hash": "5a50f015fb466782c69063ffebb256de", + "translation_date": "2026-01-15T15:40:02+00:00", + "source_file": "images/background.png", + "language_code": "mo" + }, + "screenshot.e7a5ad659e364568.webp": { + "original_hash": "c562c1fdc9d73658456e02b873e4dff9", + "translation_date": "2026-01-15T15:40:09+00:00", + "source_file": "images/screenshot.png", + "language_code": "mo" + }, + "browser.60317c9be8b7f84a.webp": { + "original_hash": "aa4461fec006d86899864d991b50cc74", + "translation_date": "2026-01-15T15:40:44+00:00", + "source_file": "sketchnotes/browser.jpg", + "language_code": "mo" + }, + "webdev101-html.4389c2067af68e98.webp": { + "original_hash": "23bf24ecb0e72f0c6c835824dec5ee54", + "translation_date": "2026-01-15T15:41:15+00:00", + "source_file": "sketchnotes/webdev101-html.png", + "language_code": "mo" + }, + "webdev101-programming.d6e3f98e61ac4bff.webp": { + "original_hash": "adf4dac4d350592773dbdba8ebaaa262", + "translation_date": "2026-01-15T15:41:52+00:00", + "source_file": "sketchnotes/webdev101-programming.png", + "language_code": "mo" + }, + "webdev101-github.8846d7971abef6f9.webp": { + "original_hash": "412ec8fc404fead25f314e2fdb564548", + "translation_date": "2026-01-15T15:42:17+00:00", + "source_file": "sketchnotes/webdev101-github.png", + "language_code": "mo" + }, + "webdev101-css.3f7af5991bf53a20.webp": { + "original_hash": "9de1dc14864697c82395b02f31a72aec", + "translation_date": "2026-01-15T15:42:51+00:00", + "source_file": "sketchnotes/webdev101-css.png", + "language_code": "mo" + }, + "webdev101-js-functions.be049c4726e94f8b.webp": { + "original_hash": "ec4279b1b2191fa07a83e78a97e81f29", + "translation_date": "2026-01-15T15:43:20+00:00", + "source_file": "sketchnotes/webdev101-js-functions.png", + "language_code": "mo" + }, + "webdev101-js-decisions.69e1b20f272dd1f0.webp": { + "original_hash": "5e49a0b9b4149f782a4378354ba7fd56", + "translation_date": "2026-01-15T15:43:51+00:00", + "source_file": "sketchnotes/webdev101-js-decisions.png", + "language_code": "mo" + }, + "webdev101-a11y.8ef3025c858d897a.webp": { + "original_hash": "3f5220c5d502a906028b8a85245cc6da", + "translation_date": "2026-01-15T15:44:25+00:00", + "source_file": "sketchnotes/webdev101-a11y.png", + "language_code": "mo" + }, + "webdev101-js-datatypes.4cc470179730702c.webp": { + "original_hash": "20fda1612cc0e8d20e6be01ffc28e5f7", + "translation_date": "2026-01-15T15:44:53+00:00", + "source_file": "sketchnotes/webdev101-js-datatypes.png", + "language_code": "mo" + }, + "webdev101-js.10280393044d7eaa.webp": { + "original_hash": "fe1f154de74b31fdeb9a6df40e7ad5e1", + "translation_date": "2026-01-15T15:45:22+00:00", + "source_file": "sketchnotes/webdev101-js.png", + "language_code": "mo" + }, + "webdev101-js-arrays.439d7528b8a29455.webp": { + "original_hash": "564c9e2d7f8e5a3b7e23570df300c732", + "translation_date": "2026-01-15T15:45:46+00:00", + "source_file": "sketchnotes/webdev101-js-arrays.png", + "language_code": "mo" + }, + "create-new-file.2814e609c2af9aeb.webp": { + "original_hash": "cf6df76faeac2d92904e5d877b7bdf69", + "translation_date": "2026-01-15T15:45:51+00:00", + "source_file": "8-code-editor/images/create-new-file.png", + "language_code": "mo" + }, + "create-new-file-pb.0797800d977ec3eb.webp": { + "original_hash": "c149c42e04132f2409651425d6924ffa", + "translation_date": "2026-01-15T15:46:02+00:00", + "source_file": "8-code-editor/images/create-new-file-pb.png", + "language_code": "mo" + }, + "extension-settings.21c752ae4f4cdb78.webp": { + "original_hash": "fd7ebcb5d84c78047026ab3337908306", + "translation_date": "2026-01-15T15:46:22+00:00", + "source_file": "8-code-editor/images/extension-settings.png", + "language_code": "mo" + }, + "after-codeswing-extension-pb.0ebddddcf73b5509.webp": { + "original_hash": "861d59ec65a7334c5f3a4c02dfe22ceb", + "translation_date": "2026-01-15T15:47:35+00:00", + "source_file": "8-code-editor/images/after-codeswing-extension-pb.png", + "language_code": "mo" + }, + "create-a-fork.297ab42b4bd0af99.webp": { + "original_hash": "10712b80e3dcfa7c44fb8820a6ff3ad3", + "translation_date": "2026-01-15T15:47:40+00:00", + "source_file": "8-code-editor/images/create-a-fork.png", + "language_code": "mo" + }, + "open-remote-repository.bd9c2598b8949e7f.webp": { + "original_hash": "777c01a9242da7d5d0e1b037df9c86f9", + "translation_date": "2026-01-15T15:47:43+00:00", + "source_file": "8-code-editor/images/open-remote-repository.png", + "language_code": "mo" + }, + "extensions.eca0e0c7f59a10b5.webp": { + "original_hash": "a6c9c8f51d3edd917262e53664f08441", + "translation_date": "2026-01-15T15:47:48+00:00", + "source_file": "8-code-editor/images/extensions.png", + "language_code": "mo" + }, + "edit-a-file-pb.263555922c14fc52.webp": { + "original_hash": "5c52723d35259eadd110d0c720a87b04", + "translation_date": "2026-01-15T15:48:24+00:00", + "source_file": "8-code-editor/images/edit-a-file-pb.png", + "language_code": "mo" + }, + "palette-menu.4946174e07f42622.webp": { + "original_hash": "7387b91076790084ec8828866e88c6ce", + "translation_date": "2026-01-15T15:48:28+00:00", + "source_file": "8-code-editor/images/palette-menu.png", + "language_code": "mo" + }, + "open-palette-menu.46dda01084738da8.webp": { + "original_hash": "1860e80bf0534b9d54ef0fcb7e1a9f9e", + "translation_date": "2026-01-15T15:48:34+00:00", + "source_file": "8-code-editor/images/open-palette-menu.png", + "language_code": "mo" + }, + "default-vscode-dev.5d06881d65c1b323.webp": { + "original_hash": "146fecc3a9da37cb1d5c9d628cd94996", + "translation_date": "2026-01-15T15:48:41+00:00", + "source_file": "8-code-editor/images/default-vscode-dev.png", + "language_code": "mo" + }, + "project-on-vscode.dev.e79815a9a95ee7fe.webp": { + "original_hash": "35de4bc32ea66a11f919671558e07d52", + "translation_date": "2026-01-15T15:48:46+00:00", + "source_file": "8-code-editor/images/project-on-vscode.dev.png", + "language_code": "mo" + }, + "new-file-github.com.c886796d800e8056.webp": { + "original_hash": "2e0ddd0dad4734e3968b70907df9c052", + "translation_date": "2026-01-15T15:49:00+00:00", + "source_file": "8-code-editor/images/new-file-github.com.png", + "language_code": "mo" + }, + "working-tree.c58eec08e6335c79.webp": { + "original_hash": "bf2608b4302123a00a8e7b1b6a430b4a", + "translation_date": "2026-01-15T15:49:10+00:00", + "source_file": "8-code-editor/images/working-tree.png", + "language_code": "mo" + }, + "working-tree-pb.6cd43e5076f23ba3.webp": { + "original_hash": "f6b14887694745dd143a09bd60b74185", + "translation_date": "2026-01-15T15:49:21+00:00", + "source_file": "8-code-editor/images/working-tree-pb.png", + "language_code": "mo" + }, + "extension-details.9f8f1fd4e9eb2de5.webp": { + "original_hash": "f57d2e246e6ba8a58463d7573640d714", + "translation_date": "2026-01-15T15:49:41+00:00", + "source_file": "8-code-editor/images/extension-details.png", + "language_code": "mo" + }, + "edit-a-file.52c0ee665ef19f08.webp": { + "original_hash": "c28903236d60be6bba3f3848ea368c63", + "translation_date": "2026-01-15T15:49:46+00:00", + "source_file": "8-code-editor/images/edit-a-file.png", + "language_code": "mo" + }, + "canvas_grid.5f209da785ded492.webp": { + "original_hash": "8da354720ffbfd778571aa17402de890", + "translation_date": "2026-01-15T15:49:49+00:00", + "source_file": "6-space-game/2-drawing-to-canvas/canvas_grid.png", + "language_code": "mo" + }, + "partI-solution.36c53b48c9ffae2a.webp": { + "original_hash": "fbbd263368f61f8ed3a86c4571e6810b", + "translation_date": "2026-01-15T15:49:51+00:00", + "source_file": "6-space-game/2-drawing-to-canvas/partI-solution.png", + "language_code": "mo" + }, + "spritesheet.bec82852290b14ee.webp": { + "original_hash": "d593b0f366e9efd2f2b3ef18e7eb2d0c", + "translation_date": "2026-01-15T15:49:52+00:00", + "source_file": "6-space-game/solution/spritesheet.png", + "language_code": "mo" + }, + "laserRed.e86e8fb629c6026e.webp": { + "original_hash": "6f0626e9839beb9d9a82ff40699aabfd", + "translation_date": "2026-01-15T15:49:52+00:00", + "source_file": "6-space-game/4-collision-detection/your-work/assets/laserRed.png", + "language_code": "mo" + }, + "enemyShip.b9626ed228a17a32.webp": { + "original_hash": "2a41854e0eaa974e8619298f3b333e11", + "translation_date": "2026-01-15T15:49:53+00:00", + "source_file": "6-space-game/4-collision-detection/your-work/assets/enemyShip.png", + "language_code": "mo" + }, + "player.680ea4c619b54fe1.webp": { + "original_hash": "952e66c2dd458cfd6e82052f7123a97b", + "translation_date": "2026-01-15T15:49:53+00:00", + "source_file": "6-space-game/4-collision-detection/your-work/assets/player.png", + "language_code": "mo" + }, + "life.466df3b1692a244a.webp": { + "original_hash": "9a5d93e699071693b15b7b157f760a90", + "translation_date": "2026-01-15T15:49:54+00:00", + "source_file": "6-space-game/4-collision-detection/your-work/assets/life.png", + "language_code": "mo" + }, + "laserRed.cae9ab24ea9b18fd.webp": { + "original_hash": "6f0626e9839beb9d9a82ff40699aabfd", + "translation_date": "2026-01-15T15:49:54+00:00", + "source_file": "6-space-game/4-collision-detection/solution/assets/laserRed.png", + "language_code": "mo" + }, + "enemyShip.add7036e1c3c3014.webp": { + "original_hash": "2a41854e0eaa974e8619298f3b333e11", + "translation_date": "2026-01-15T15:49:54+00:00", + "source_file": "6-space-game/4-collision-detection/solution/assets/enemyShip.png", + "language_code": "mo" + }, + "player.c99c25d54a615ca0.webp": { + "original_hash": "952e66c2dd458cfd6e82052f7123a97b", + "translation_date": "2026-01-15T15:49:55+00:00", + "source_file": "6-space-game/4-collision-detection/solution/assets/player.png", + "language_code": "mo" + }, + "life.65a2aaceca875284.webp": { + "original_hash": "9a5d93e699071693b15b7b157f760a90", + "translation_date": "2026-01-15T15:49:56+00:00", + "source_file": "6-space-game/4-collision-detection/solution/assets/life.png", + "language_code": "mo" + }, + "enemyShip.22cbee6ea27a5809.webp": { + "original_hash": "2a41854e0eaa974e8619298f3b333e11", + "translation_date": "2026-01-15T15:49:56+00:00", + "source_file": "6-space-game/2-drawing-to-canvas/your-work/assets/enemyShip.png", + "language_code": "mo" + }, + "player.47bc9de0714c723d.webp": { + "original_hash": "952e66c2dd458cfd6e82052f7123a97b", + "translation_date": "2026-01-15T15:49:57+00:00", + "source_file": "6-space-game/2-drawing-to-canvas/your-work/assets/player.png", + "language_code": "mo" + }, + "enemyShip.5df2a822c16650c2.webp": { + "original_hash": "2a41854e0eaa974e8619298f3b333e11", + "translation_date": "2026-01-15T15:49:57+00:00", + "source_file": "6-space-game/2-drawing-to-canvas/solution/assets/enemyShip.png", + "language_code": "mo" + }, + "player.dd24c1afa8c71e9b.webp": { + "original_hash": "952e66c2dd458cfd6e82052f7123a97b", + "translation_date": "2026-01-15T15:49:58+00:00", + "source_file": "6-space-game/2-drawing-to-canvas/solution/assets/player.png", + "language_code": "mo" + }, + "laserRed.69730edd76f0b3bd.webp": { + "original_hash": "6f0626e9839beb9d9a82ff40699aabfd", + "translation_date": "2026-01-15T15:49:58+00:00", + "source_file": "6-space-game/6-end-condition/your-work/assets/laserRed.png", + "language_code": "mo" + }, + "enemyShip.4fbf2889e6129db4.webp": { + "original_hash": "2a41854e0eaa974e8619298f3b333e11", + "translation_date": "2026-01-15T15:49:59+00:00", + "source_file": "6-space-game/6-end-condition/your-work/assets/enemyShip.png", + "language_code": "mo" + }, + "player.606f85953e5e564e.webp": { + "original_hash": "952e66c2dd458cfd6e82052f7123a97b", + "translation_date": "2026-01-15T15:49:59+00:00", + "source_file": "6-space-game/6-end-condition/your-work/assets/player.png", + "language_code": "mo" + }, + "life.78b6e96a3003767e.webp": { + "original_hash": "9a5d93e699071693b15b7b157f760a90", + "translation_date": "2026-01-15T15:50:00+00:00", + "source_file": "6-space-game/6-end-condition/your-work/assets/life.png", + "language_code": "mo" + }, + "laserRed.2040e11f55c0a40a.webp": { + "original_hash": "6f0626e9839beb9d9a82ff40699aabfd", + "translation_date": "2026-01-15T15:50:00+00:00", + "source_file": "6-space-game/6-end-condition/solution/assets/laserRed.png", + "language_code": "mo" + }, + "enemyShip.1a1354d7988de290.webp": { + "original_hash": "2a41854e0eaa974e8619298f3b333e11", + "translation_date": "2026-01-15T15:50:00+00:00", + "source_file": "6-space-game/6-end-condition/solution/assets/enemyShip.png", + "language_code": "mo" + }, + "player.137ee0e47f895ffc.webp": { + "original_hash": "952e66c2dd458cfd6e82052f7123a97b", + "translation_date": "2026-01-15T15:50:01+00:00", + "source_file": "6-space-game/6-end-condition/solution/assets/player.png", + "language_code": "mo" + }, + "life.86d843ce9c23289c.webp": { + "original_hash": "9a5d93e699071693b15b7b157f760a90", + "translation_date": "2026-01-15T15:50:01+00:00", + "source_file": "6-space-game/6-end-condition/solution/assets/life.png", + "language_code": "mo" + }, + "laserRed.e58ef8db2585dfbe.webp": { + "original_hash": "6f0626e9839beb9d9a82ff40699aabfd", + "translation_date": "2026-01-15T15:50:02+00:00", + "source_file": "6-space-game/5-keeping-score/your-work/assets/laserRed.png", + "language_code": "mo" + }, + "enemyShip.321ecb1b4eb21f2c.webp": { + "original_hash": "2a41854e0eaa974e8619298f3b333e11", + "translation_date": "2026-01-15T15:50:02+00:00", + "source_file": "6-space-game/5-keeping-score/your-work/assets/enemyShip.png", + "language_code": "mo" + }, + "player.2887422f6982c3cd.webp": { + "original_hash": "952e66c2dd458cfd6e82052f7123a97b", + "translation_date": "2026-01-15T15:50:03+00:00", + "source_file": "6-space-game/5-keeping-score/your-work/assets/player.png", + "language_code": "mo" + }, + "life.2a159298dd98f4ef.webp": { + "original_hash": "9a5d93e699071693b15b7b157f760a90", + "translation_date": "2026-01-15T15:50:03+00:00", + "source_file": "6-space-game/5-keeping-score/your-work/assets/life.png", + "language_code": "mo" + }, + "laserRed.b583dc1728eb8581.webp": { + "original_hash": "6f0626e9839beb9d9a82ff40699aabfd", + "translation_date": "2026-01-15T15:50:03+00:00", + "source_file": "6-space-game/5-keeping-score/solution/assets/laserRed.png", + "language_code": "mo" + }, + "enemyShip.035a46787bff658c.webp": { + "original_hash": "2a41854e0eaa974e8619298f3b333e11", + "translation_date": "2026-01-15T15:50:04+00:00", + "source_file": "6-space-game/5-keeping-score/solution/assets/enemyShip.png", + "language_code": "mo" + }, + "player.391fed427ede24f5.webp": { + "original_hash": "952e66c2dd458cfd6e82052f7123a97b", + "translation_date": "2026-01-15T15:50:05+00:00", + "source_file": "6-space-game/5-keeping-score/solution/assets/player.png", + "language_code": "mo" + }, + "life.6fb9f50d53ee0413.webp": { + "original_hash": "9a5d93e699071693b15b7b157f760a90", + "translation_date": "2026-01-15T15:50:05+00:00", + "source_file": "6-space-game/5-keeping-score/solution/assets/life.png", + "language_code": "mo" + }, + "preview.9215f0a010074476.webp": { + "original_hash": "6eaab6a69de1fa433e822578652c7287", + "translation_date": "2026-01-15T15:50:07+00:00", + "source_file": "6-space-game/solution/spaceArt/preview.jpg", + "language_code": "mo" + }, + "meteorBig.1e452b3ad7af50ad.webp": { + "original_hash": "07f37816512f563dd68780fdee2e30a6", + "translation_date": "2026-01-15T15:50:08+00:00", + "source_file": "6-space-game/solution/spaceArt/png/meteorBig.png", + "language_code": "mo" + }, + "meteorSmall.0d729bc71c12d41f.webp": { + "original_hash": "ebabf6690cc614f9e33f019c356166fa", + "translation_date": "2026-01-15T15:50:08+00:00", + "source_file": "6-space-game/solution/spaceArt/png/meteorSmall.png", + "language_code": "mo" + }, + "laserRed.d81ce4986f87c251.webp": { + "original_hash": "6f0626e9839beb9d9a82ff40699aabfd", + "translation_date": "2026-01-15T15:50:09+00:00", + "source_file": "6-space-game/solution/spaceArt/png/laserRed.png", + "language_code": "mo" + }, + "enemyShip.deb0477a7312f54d.webp": { + "original_hash": "2a41854e0eaa974e8619298f3b333e11", + "translation_date": "2026-01-15T15:50:09+00:00", + "source_file": "6-space-game/solution/spaceArt/png/enemyShip.png", + "language_code": "mo" + }, + "player.57b3107c03012695.webp": { + "original_hash": "952e66c2dd458cfd6e82052f7123a97b", + "translation_date": "2026-01-15T15:50:10+00:00", + "source_file": "6-space-game/solution/spaceArt/png/player.png", + "language_code": "mo" + }, + "laserGreenShot.e4fbfc4714c08a5b.webp": { + "original_hash": "cb6ed500c16736a41998e4cd0c467df7", + "translation_date": "2026-01-15T15:50:11+00:00", + "source_file": "6-space-game/solution/spaceArt/png/laserGreenShot.png", + "language_code": "mo" + }, + "life.27144b6d4bfdea76.webp": { + "original_hash": "9a5d93e699071693b15b7b157f760a90", + "translation_date": "2026-01-15T15:50:12+00:00", + "source_file": "6-space-game/solution/spaceArt/png/life.png", + "language_code": "mo" + }, + "laserGreen.89904f0f49945560.webp": { + "original_hash": "ddf7102c86fc3ec46037714c60091851", + "translation_date": "2026-01-15T15:50:12+00:00", + "source_file": "6-space-game/solution/spaceArt/png/laserGreen.png", + "language_code": "mo" + }, + "laserRedShot.c39d066745996a71.webp": { + "original_hash": "1f1048184aab9d405e9f7d067a57af01", + "translation_date": "2026-01-15T15:50:12+00:00", + "source_file": "6-space-game/solution/spaceArt/png/laserRedShot.png", + "language_code": "mo" + }, + "enemyUFO.bf8585e4e8dcdb68.webp": { + "original_hash": "18198bef76e4882928e4092344d0fb98", + "translation_date": "2026-01-15T15:50:13+00:00", + "source_file": "6-space-game/solution/spaceArt/png/enemyUFO.png", + "language_code": "mo" + }, + "shield.1b9412b7ca6610ab.webp": { + "original_hash": "a672dc1a5f905918272bb58f1e236340", + "translation_date": "2026-01-15T15:50:14+00:00", + "source_file": "6-space-game/solution/spaceArt/png/shield.png", + "language_code": "mo" + }, + "playerDamaged.181703f652fd5176.webp": { + "original_hash": "9d71aebe7303edd536064fb0f5e2ae82", + "translation_date": "2026-01-15T15:50:15+00:00", + "source_file": "6-space-game/solution/spaceArt/png/playerDamaged.png", + "language_code": "mo" + }, + "playerRight.e4825f489e29f737.webp": { + "original_hash": "1c7b03f73e1d6ed74955357680cb05cb", + "translation_date": "2026-01-15T15:50:15+00:00", + "source_file": "6-space-game/solution/spaceArt/png/playerRight.png", + "language_code": "mo" + }, + "playerLeft.0f928412e66ba5d9.webp": { + "original_hash": "40a42047b8ee49c6dd87c981e98d4d2e", + "translation_date": "2026-01-15T15:50:16+00:00", + "source_file": "6-space-game/solution/spaceArt/png/playerLeft.png", + "language_code": "mo" + }, + "backgroundColor.e19c3c60768150c8.webp": { + "original_hash": "b3e10fe033f615ec9d3580cce61eae09", + "translation_date": "2026-01-15T15:50:16+00:00", + "source_file": "6-space-game/solution/spaceArt/png/Background/backgroundColor.png", + "language_code": "mo" + }, + "starBig.72e9c6d0d18f363d.webp": { + "original_hash": "4e8f1abc8b48d75990117ea8b6207842", + "translation_date": "2026-01-15T15:50:17+00:00", + "source_file": "6-space-game/solution/spaceArt/png/Background/starBig.png", + "language_code": "mo" + }, + "starBackground.a897b8acb1b0587d.webp": { + "original_hash": "cca00ba0b9e73859ab5bb928d5ca2fa2", + "translation_date": "2026-01-15T15:50:20+00:00", + "source_file": "6-space-game/solution/spaceArt/png/Background/starBackground.png", + "language_code": "mo" + }, + "starSmall.ed78b961dbcd0898.webp": { + "original_hash": "609bf88a971475818f95816b8cf71508", + "translation_date": "2026-01-15T15:50:20+00:00", + "source_file": "6-space-game/solution/spaceArt/png/Background/starSmall.png", + "language_code": "mo" + }, + "speedLine.5bcabb93f48b5ae1.webp": { + "original_hash": "ef791dbe8ea2e21cf697831e203803d5", + "translation_date": "2026-01-15T15:50:21+00:00", + "source_file": "6-space-game/solution/spaceArt/png/Background/speedLine.png", + "language_code": "mo" + }, + "nebula.55c2933d36d035d3.webp": { + "original_hash": "e0fa4f86653c6fe97bc77271c46241c2", + "translation_date": "2026-01-15T15:50:22+00:00", + "source_file": "6-space-game/solution/spaceArt/png/Background/nebula.png", + "language_code": "mo" + }, + "laserRed.381bc5555491ce67.webp": { + "original_hash": "6f0626e9839beb9d9a82ff40699aabfd", + "translation_date": "2026-01-15T15:50:22+00:00", + "source_file": "6-space-game/3-moving-elements-around/your-work/assets/laserRed.png", + "language_code": "mo" + }, + "enemyShip.b39a140287683bf7.webp": { + "original_hash": "2a41854e0eaa974e8619298f3b333e11", + "translation_date": "2026-01-15T15:50:23+00:00", + "source_file": "6-space-game/3-moving-elements-around/your-work/assets/enemyShip.png", + "language_code": "mo" + }, + "player.3c4f50182552a73a.webp": { + "original_hash": "952e66c2dd458cfd6e82052f7123a97b", + "translation_date": "2026-01-15T15:50:23+00:00", + "source_file": "6-space-game/3-moving-elements-around/your-work/assets/player.png", + "language_code": "mo" + }, + "laserRed.e66e29ace6666064.webp": { + "original_hash": "6f0626e9839beb9d9a82ff40699aabfd", + "translation_date": "2026-01-15T15:50:23+00:00", + "source_file": "6-space-game/3-moving-elements-around/solution/assets/laserRed.png", + "language_code": "mo" + }, + "enemyShip.62983ed4bfb2220f.webp": { + "original_hash": "2a41854e0eaa974e8619298f3b333e11", + "translation_date": "2026-01-15T15:50:24+00:00", + "source_file": "6-space-game/3-moving-elements-around/solution/assets/enemyShip.png", + "language_code": "mo" + }, + "player.bfe14f110bddf56d.webp": { + "original_hash": "952e66c2dd458cfd6e82052f7123a97b", + "translation_date": "2026-01-15T15:50:25+00:00", + "source_file": "6-space-game/3-moving-elements-around/solution/assets/player.png", + "language_code": "mo" + }, + "localstorage.472f8147b6a3f8d1.webp": { + "original_hash": "7706ccb87a13a08250f315f03140bc61", + "translation_date": "2026-01-15T15:50:36+00:00", + "source_file": "5-browser-extension/2-forms-browsers-local-storage/images/localstorage.png", + "language_code": "mo" + }, + "snapshot.97750180ebcad737.webp": { + "original_hash": "9db2fa7afcc1d258ec1a130cef145f94", + "translation_date": "2026-01-15T15:50:43+00:00", + "source_file": "5-browser-extension/3-background-tasks-and-performance/images/snapshot.png", + "language_code": "mo" + }, + "profiler.5a4a62479c5df01c.webp": { + "original_hash": "40b8a4d9f47e2f3e18aa2e814a15356c", + "translation_date": "2026-01-15T15:51:16+00:00", + "source_file": "5-browser-extension/3-background-tasks-and-performance/images/profiler.png", + "language_code": "mo" + }, + "log.804026979f3707e0.webp": { + "original_hash": "4c5e39f339781db01641b77b6b2d6026", + "translation_date": "2026-01-15T15:51:26+00:00", + "source_file": "5-browser-extension/3-background-tasks-and-performance/images/log.png", + "language_code": "mo" + }, + "earlybrowsers.d984b711cdf3a42d.webp": { + "original_hash": "810a4d2348668e25289029c5cfcb67bd", + "translation_date": "2026-01-15T15:51:35+00:00", + "source_file": "5-browser-extension/1-about-browsers/images/earlybrowsers.jpg", + "language_code": "mo" + }, + "2.1dae52ff08042246.webp": { + "original_hash": "3995628a6a986308859d0cb6eed8d787", + "translation_date": "2026-01-15T15:51:48+00:00", + "source_file": "5-browser-extension/1-about-browsers/images/2.png", + "language_code": "mo" + }, + "install-on-edge.d68781acaf0b3d3d.webp": { + "original_hash": "6224aad8f1cd252da83c2808ff5c7a4e", + "translation_date": "2026-01-15T15:52:10+00:00", + "source_file": "5-browser-extension/1-about-browsers/images/install-on-edge.png", + "language_code": "mo" + }, + "1.b6da8c1394b07491.webp": { + "original_hash": "6b12479c2e6a54160867fa8945c04082", + "translation_date": "2026-01-15T15:52:20+00:00", + "source_file": "5-browser-extension/1-about-browsers/images/1.png", + "language_code": "mo" + }, + "history.7fdabbafa521e064.webp": { + "original_hash": "445d71bea6a747dfe547df7eea846439", + "translation_date": "2026-01-15T15:52:26+00:00", + "source_file": "7-bank-project/1-template-route/history.png", + "language_code": "mo" + }, + "screen1.baccbba0f1f93364.webp": { + "original_hash": "92c8fa2dbe566c4e19c98a9e7de6faa6", + "translation_date": "2026-01-15T15:52:32+00:00", + "source_file": "7-bank-project/images/screen1.png", + "language_code": "mo" + }, + "screen2.123c82a831a1d14a.webp": { + "original_hash": "43b7f2857d5f758394e443df8fbc31cf", + "translation_date": "2026-01-15T15:52:43+00:00", + "source_file": "7-bank-project/images/screen2.png", + "language_code": "mo" + }, + "click-register.e89a30bf0d4bc9ca.webp": { + "original_hash": "ef9688313524664fad6ab9b0e080c758", + "translation_date": "2026-01-15T15:52:43+00:00", + "source_file": "7-bank-project/2-forms/images/click-register.png", + "language_code": "mo" + }, + "form-post.61de4ca1b964d91a.webp": { + "original_hash": "7e95c76a8ea2e82bceea70aae89f2360", + "translation_date": "2026-01-15T15:52:50+00:00", + "source_file": "7-bank-project/2-forms/images/form-post.png", + "language_code": "mo" + }, + "validation-error.8bd23e98d416c22f.webp": { + "original_hash": "d614ce6b24e2583901da9038297fe327", + "translation_date": "2026-01-15T15:52:53+00:00", + "source_file": "7-bank-project/2-forms/images/validation-error.png", + "language_code": "mo" + }, + "result.96ef01f607bf856a.webp": { + "original_hash": "e83c44a0fcaa7720ce32eb71d53d5250", + "translation_date": "2026-01-15T15:52:59+00:00", + "source_file": "7-bank-project/2-forms/images/result.png", + "language_code": "mo" + }, + "browser-console.efaf0b51aaaf6778.webp": { + "original_hash": "8d6c5077d1f133d27c65c0014ef503a9", + "translation_date": "2026-01-15T15:53:06+00:00", + "source_file": "7-bank-project/2-forms/images/browser-console.png", + "language_code": "mo" + }, + "login-error.416fe019b36a6327.webp": { + "original_hash": "ea96ed372d7a4c37ee2df3f0352f79d1", + "translation_date": "2026-01-15T15:53:10+00:00", + "source_file": "7-bank-project/3-data/images/login-error.png", + "language_code": "mo" + }, + "mpa.7f7375a1a2d4aa77.webp": { + "original_hash": "021255b74f0b79b0c286c163c210ef3d", + "translation_date": "2026-01-15T15:53:15+00:00", + "source_file": "7-bank-project/3-data/images/mpa.png", + "language_code": "mo" + }, + "spa.268ec73b41f992c2.webp": { + "original_hash": "3d3d7273070c2ddab04458fbb084ad4a", + "translation_date": "2026-01-15T15:53:20+00:00", + "source_file": "7-bank-project/3-data/images/spa.png", + "language_code": "mo" + }, + "dialog.93bba104afeb79f1.webp": { + "original_hash": "c56b5ad7eb8c4df4b3ed8a99bf67e6e2", + "translation_date": "2026-01-15T15:53:28+00:00", + "source_file": "7-bank-project/4-state-management/images/dialog.png", + "language_code": "mo" + }, + "data-flow.fa2354e0908fecc8.webp": { + "original_hash": "c9b82b42fa1973b3b7bfad9c7128c24c", + "translation_date": "2026-01-15T15:53:31+00:00", + "source_file": "7-bank-project/4-state-management/images/data-flow.png", + "language_code": "mo" + }, + "screenshot_gray.0c796099a1f9f25e.webp": { + "original_hash": "324b7bff7867c38e100d0acad18ed53d", + "translation_date": "2026-01-15T15:53:35+00:00", + "source_file": "3-terrarium/images/screenshot_gray.png", + "language_code": "mo" + }, + "vs-code-index.e2986cf919471eb9.webp": { + "original_hash": "ed8437cb2629b95551fff5e5d72ef4f5", + "translation_date": "2026-01-15T15:53:39+00:00", + "source_file": "3-terrarium/1-intro-to-html/images/vs-code-index.png", + "language_code": "mo" + }, + "dom-tree.7daf0e763cbbba92.webp": { + "original_hash": "579f4ae298ff15a357def7f442671847", + "translation_date": "2026-01-15T15:53:51+00:00", + "source_file": "3-terrarium/3-intro-to-DOM-and-closures/images/dom-tree.png", + "language_code": "mo" + }, + "terrarium-final.0920f16e87c13a84.webp": { + "original_hash": "324b7bff7867c38e100d0acad18ed53d", + "translation_date": "2026-01-15T15:53:56+00:00", + "source_file": "3-terrarium/3-intro-to-DOM-and-closures/images/terrarium-final.png", + "language_code": "mo" + }, + "plant7.194d5a42fcf5a88c.webp": { + "original_hash": "b7a1e35f9946cb04440ce620c34f201d", + "translation_date": "2026-01-15T15:54:08+00:00", + "source_file": "3-terrarium/solution/images/plant7.png", + "language_code": "mo" + }, + "plant9.8fe614c01ded1b1e.webp": { + "original_hash": "a9655c162938a27c63d48ac675061e2b", + "translation_date": "2026-01-15T15:54:20+00:00", + "source_file": "3-terrarium/solution/images/plant9.png", + "language_code": "mo" + }, + "plant8.7b247809ab0eb492.webp": { + "original_hash": "3eb38c747aaf33ce7aa70b58a31b62a8", + "translation_date": "2026-01-15T15:54:41+00:00", + "source_file": "3-terrarium/solution/images/plant8.png", + "language_code": "mo" + }, + "plant1.a876180d8659acb9.webp": { + "original_hash": "e08f9b0f46f6d9d7c9949d4c3e590694", + "translation_date": "2026-01-15T15:54:48+00:00", + "source_file": "3-terrarium/solution/images/plant1.png", + "language_code": "mo" + }, + "plant14.908791477a46eb7f.webp": { + "original_hash": "349b8e5a33d1221bef4a4ac3bb439bb9", + "translation_date": "2026-01-15T15:55:02+00:00", + "source_file": "3-terrarium/solution/images/plant14.png", + "language_code": "mo" + }, + "plant6.ca4ff8372e6676b1.webp": { + "original_hash": "6932fdb455fcae5b324b129367d2f56a", + "translation_date": "2026-01-15T15:55:09+00:00", + "source_file": "3-terrarium/solution/images/plant6.png", + "language_code": "mo" + }, + "plant11.0ce0081b0ef17aa1.webp": { + "original_hash": "68346dbd1ae03331b0a87025c3e8e9e2", + "translation_date": "2026-01-15T15:55:23+00:00", + "source_file": "3-terrarium/solution/images/plant11.png", + "language_code": "mo" + }, + "plant10.2f2c47804ae52dd3.webp": { + "original_hash": "dba97454882c2796c52a33c403db61f7", + "translation_date": "2026-01-15T15:55:34+00:00", + "source_file": "3-terrarium/solution/images/plant10.png", + "language_code": "mo" + }, + "plant13.37d6ab2e2481421f.webp": { + "original_hash": "5cac561d7596ee631c4d02436d8f6998", + "translation_date": "2026-01-15T15:55:47+00:00", + "source_file": "3-terrarium/solution/images/plant13.png", + "language_code": "mo" + }, + "plant4.3b78072b427727c6.webp": { + "original_hash": "c523205855d0691a9a0161c6abca983c", + "translation_date": "2026-01-15T15:55:56+00:00", + "source_file": "3-terrarium/solution/images/plant4.png", + "language_code": "mo" + }, + "plant3.06efdd0fa0c4b115.webp": { + "original_hash": "7e40e6f14cf52f7d75ed42320817b044", + "translation_date": "2026-01-15T15:56:03+00:00", + "source_file": "3-terrarium/solution/images/plant3.png", + "language_code": "mo" + }, + "plant5.8ec58b18ac336fa8.webp": { + "original_hash": "bcf5f2eacd7da3fe6b07c857d7f5a2ce", + "translation_date": "2026-01-15T15:56:11+00:00", + "source_file": "3-terrarium/solution/images/plant5.png", + "language_code": "mo" + }, + "plant2.9e45efea224115b0.webp": { + "original_hash": "24beefd3dcca66085b44d3ae5d9758e1", + "translation_date": "2026-01-15T15:56:21+00:00", + "source_file": "3-terrarium/solution/images/plant2.png", + "language_code": "mo" + }, + "plant12.6b934c4312a00228.webp": { + "original_hash": "dafacde8e7a0b56c4baaabe88b4f90e2", + "translation_date": "2026-01-15T15:56:27+00:00", + "source_file": "3-terrarium/solution/images/plant12.png", + "language_code": "mo" + }, + "terrarium-final.2f07047ffc597d0a.webp": { + "original_hash": "c669f9222e16690bb2015ce86bb4739c", + "translation_date": "2026-01-15T15:56:30+00:00", + "source_file": "3-terrarium/2-intro-to-css/images/terrarium-final.png", + "language_code": "mo" + }, + "1.cc07a5cbe114ad1d.webp": { + "original_hash": "fc436b6749801dd90d0558ae92d56b60", + "translation_date": "2026-01-15T15:56:33+00:00", + "source_file": "3-terrarium/2-intro-to-css/images/1.png", + "language_code": "mo" + }, + "clone_repo.5085c48d666ead57.webp": { + "original_hash": "28c00f3d5861ab95d188b4f6a2d337df", + "translation_date": "2026-01-15T15:56:39+00:00", + "source_file": "1-getting-started-lessons/2-github-basics/images/clone_repo.png", + "language_code": "mo" + }, + "codespace.bcecbdf5d2747d3d.webp": { + "original_hash": "ff86a65511122ddb448e092969566b0a", + "translation_date": "2026-01-15T15:56:44+00:00", + "source_file": "9-chat-project/assets/codespace.png", + "language_code": "mo" + }, + "playground.d2b927122224ff8f.webp": { + "original_hash": "4152bb8cd5f23e73d58b3beb52919477", + "translation_date": "2026-01-15T15:57:14+00:00", + "source_file": "9-chat-project/assets/playground.png", + "language_code": "mo" + }, + "playground-choice.1d23ba7d407f4758.webp": { + "original_hash": "1c2e88cad7aad10922b4de1e87f1a47f", + "translation_date": "2026-01-15T15:57:18+00:00", + "source_file": "9-chat-project/assets/playground-choice.png", + "language_code": "mo" + }, + "template.67ad477109d29a2b.webp": { + "original_hash": "a184e4c012fd4fca9ab3c552df87bd0c", + "translation_date": "2026-01-15T15:57:21+00:00", + "source_file": "9-chat-project/assets/template.png", + "language_code": "mo" + }, + "screenshot.0a1ee0d123df681b.webp": { + "original_hash": "f909b463a14ff6542a816470f68bfac3", + "translation_date": "2026-01-15T15:57:44+00:00", + "source_file": "9-chat-project/assets/screenshot.png", + "language_code": "mo" + } +} \ No newline at end of file diff --git a/translated_images/mo/1.b6da8c1394b07491.webp b/translated_images/mo/1.b6da8c1394b07491.webp new file mode 100644 index 000000000..b55df858c Binary files /dev/null and b/translated_images/mo/1.b6da8c1394b07491.webp differ diff --git a/translated_images/mo/1.cc07a5cbe114ad1d.webp b/translated_images/mo/1.cc07a5cbe114ad1d.webp new file mode 100644 index 000000000..54a350b5a Binary files /dev/null and b/translated_images/mo/1.cc07a5cbe114ad1d.webp differ diff --git a/translated_images/mo/2.1dae52ff08042246.webp b/translated_images/mo/2.1dae52ff08042246.webp new file mode 100644 index 000000000..4520dd024 Binary files /dev/null and b/translated_images/mo/2.1dae52ff08042246.webp differ diff --git a/translated_images/mo/after-codeswing-extension-pb.0ebddddcf73b5509.webp b/translated_images/mo/after-codeswing-extension-pb.0ebddddcf73b5509.webp new file mode 100644 index 000000000..28a30ccd1 Binary files /dev/null and b/translated_images/mo/after-codeswing-extension-pb.0ebddddcf73b5509.webp differ diff --git a/translations/my/2-js-basics/1-data-types/README.md b/translations/my/2-js-basics/1-data-types/README.md index 75e765fbd..87b7e1d30 100644 --- a/translations/my/2-js-basics/1-data-types/README.md +++ b/translations/my/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript အခြေခံ: ဒေတာအမျိုးအစားများ -![JavaScript အခြေခံ - ဒေတာအမျိုးအစားများ](../../../../translated_images/my/webdev101-js-datatypes.4cc470179730702c.png) +![JavaScript အခြေခံ - ဒေတာအမျိုးအစားများ](../../../../translated_images/my/webdev101-js-datatypes.4cc470179730702c.webp) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/my/2-js-basics/2-functions-methods/README.md b/translations/my/2-js-basics/2-functions-methods/README.md index 9d037bf83..adc982bcd 100644 --- a/translations/my/2-js-basics/2-functions-methods/README.md +++ b/translations/my/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript အခြေခံ: Methods နှင့် Functions -![JavaScript Basics - Functions](../../../../translated_images/my/webdev101-js-functions.be049c4726e94f8b.png) +![JavaScript Basics - Functions](../../../../translated_images/my/webdev101-js-functions.be049c4726e94f8b.webp) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/my/2-js-basics/3-making-decisions/README.md b/translations/my/2-js-basics/3-making-decisions/README.md index 375f89057..9082b43b6 100644 --- a/translations/my/2-js-basics/3-making-decisions/README.md +++ b/translations/my/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript အခြေခံ: ဆုံးဖြတ်ချက်များလုပ်ခြင်း -![JavaScript အခြေခံ - ဆုံးဖြတ်ချက်များလုပ်ခြင်း](../../../../translated_images/my/webdev101-js-decisions.69e1b20f272dd1f0.png) +![JavaScript အခြေခံ - ဆုံးဖြတ်ချက်များလုပ်ခြင်း](../../../../translated_images/my/webdev101-js-decisions.69e1b20f272dd1f0.webp) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/my/2-js-basics/4-arrays-loops/README.md b/translations/my/2-js-basics/4-arrays-loops/README.md index 380ad9013..85f27df03 100644 --- a/translations/my/2-js-basics/4-arrays-loops/README.md +++ b/translations/my/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript အခြေခံ: Arrays နှင့် Loops -![JavaScript Basics - Arrays](../../../../translated_images/my/webdev101-js-arrays.439d7528b8a29455.png) +![JavaScript Basics - Arrays](../../../../translated_images/my/webdev101-js-arrays.439d7528b8a29455.webp) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/my/3-terrarium/1-intro-to-html/README.md b/translations/my/3-terrarium/1-intro-to-html/README.md index 568db0122..3f0148a05 100644 --- a/translations/my/3-terrarium/1-intro-to-html/README.md +++ b/translations/my/3-terrarium/1-intro-to-html/README.md @@ -26,7 +26,7 @@ journey Build terrarium: 5: Student ``` -![HTML ကိုမိတ်ဆက်ခြင်း](../../../../translated_images/my/webdev101-html.4389c2067af68e98.png) +![HTML ကိုမိတ်ဆက်ခြင်း](../../../../translated_images/my/webdev101-html.4389c2067af68e98.webp) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) HTML, သို့မဟုတ် HyperText Markup Language ဟာ သင်သွားရောက်ခဲ့တဲ့ website တစ်ခုချင်းစီရဲ့ အခြေခံအဆောက်အအုံပဲဖြစ်ပါတယ်။ HTML ကို website ရဲ့ အရိုးတစ်ခုလိုပဲ စဉ်းစားနိုင်ပါတယ် – content ကိုဘယ်မှာထားမလဲ၊ ဘယ်လိုစီမံမလဲ၊ အစိတ်အပိုင်းတစ်ခုချင်းစီက ဘာကိုကိုယ်စားပြုလဲဆိုတာကို သတ်မှတ်ပေးပါတယ်။ CSS က HTML ကို အရောင်နဲ့ layout တွေဖြင့် "အဝတ်အစား" ဝတ်ပေးမှာဖြစ်ပြီး၊ JavaScript ကတော့ interactivity ဖြင့် "အသက်" ပေးမှာဖြစ်ပါတယ်။ HTML က အခြေခံအဆောက်အအုံကိုပေးပြီး အခြားအရာတွေကိုဖြစ်နိုင်စေပါတယ်။ @@ -88,7 +88,7 @@ HTML code ကိုစတင်မလုပ်ခင်မှာ သင့် te 4. Explorer pane မှာ "New File" icon ကို click လုပ်ပါ 5. သင့် file ကို `index.html` လို့အမည်ပေးပါ -![VS Code Explorer showing new file creation](../../../../translated_images/my/vs-code-index.e2986cf919471eb9.png) +![VS Code Explorer showing new file creation](../../../../translated_images/my/vs-code-index.e2986cf919471eb9.webp) **Option 2: Terminal Commands ကိုအသုံးပြုခြင်း** ```bash diff --git a/translations/my/3-terrarium/2-intro-to-css/README.md b/translations/my/3-terrarium/2-intro-to-css/README.md index ad87094cd..4c486ed4e 100644 --- a/translations/my/3-terrarium/2-intro-to-css/README.md +++ b/translations/my/3-terrarium/2-intro-to-css/README.md @@ -30,7 +30,7 @@ journey Glass reflections: 5: Student ``` -![CSS ကိုမိတ်ဆက်ခြင်း](../../../../translated_images/my/webdev101-css.3f7af5991bf53a20.png) +![CSS ကိုမိတ်ဆက်ခြင်း](../../../../translated_images/my/webdev101-css.3f7af5991bf53a20.webp) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) HTML သင့်ရဲ့ terrarium အခြေခံပုံစံကို သတိရပါသလား? CSS က plain structure ကို visually appealing ဖြစ်အောင် ပြောင်းလဲပေးမယ်။ @@ -205,7 +205,7 @@ body { Browser ရဲ့ developer tools (F12) ကိုဖွင့်ပြီး Elements tab ကိုသွားပါ။ သင့်ရဲ့ `

` element ကို inspect လုပ်ပါ။ `` element ကနေ font family ကို inherit လုပ်ထားတာကိုတွေ့ပါလိမ့်မယ်: -![inherited font](../../../../translated_images/my/1.cc07a5cbe114ad1d.png) +![inherited font](../../../../translated_images/my/1.cc07a5cbe114ad1d.webp) ✅ **Experiment Time**: `` element မှာ `color`, `line-height`, `text-align` လို inheritable property တွေကို set လုပ်ကြည့်ပါ။ Heading နဲ့ အခြား element တွေမှာ ဘာတွေဖြစ်သွားလဲ? @@ -531,7 +531,7 @@ Terrarium ကိုလက်တွေ့ကျတဲ့ glass reflections နဲ Light က glass surfaces တွေမှာဘယ်လိုပြန်လည်ထင်ရလဲဆိုတာ simulation လုပ်တဲ့ subtle highlights တွေကိုဖန်တီးပါမယ်။ Renaissance painters တွေက Jan van Eyck လိုမျိုး light နဲ့ reflection ကိုအသုံးပြုပြီး painted glass ကို three-dimensional ဖြစ်အောင်လုပ်ခဲ့သလိုမျိုးပါ။ သင့်ရဲ့ရည်မှန်းချက်ကတော့: -![finished terrarium](../../../../translated_images/my/terrarium-final.2f07047ffc597d0a.png) +![finished terrarium](../../../../translated_images/my/terrarium-final.2f07047ffc597d0a.webp) **သင့်ရဲ့ challenge:** - **Subtle white or light-colored oval shapes** ကို glass reflections အတွက်ဖန်တီးပါ diff --git a/translations/my/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/my/3-terrarium/3-intro-to-DOM-and-closures/README.md index 9ec0212ab..57587ec03 100644 --- a/translations/my/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/my/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -26,7 +26,7 @@ journey Complete terrarium: 5: Student ``` -![DOM and a closure](../../../../translated_images/my/webdev101-js.10280393044d7eaa.png) +![DOM and a closure](../../../../translated_images/my/webdev101-js.10280393044d7eaa.webp) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ဝင်ရောက်ကြိုဆိုပါတယ်။ ဒီနေ့မှာတော့ ဝက်ဘ်ဒီဇိုင်းကို အပြောင်းအလဲဖြစ်စေတဲ့ အပိုင်းတစ်ခုကို လေ့လာမှာဖြစ်ပါတယ်။ Document Object Model (DOM) ဟာ HTML နဲ့ JavaScript အကြားက တံတားတစ်ခုလိုဖြစ်ပြီး၊ ဒီနေ့မှာတော့ သင့် terrarium ကို အသက်ဝင်အောင်လုပ်ဖို့ အသုံးပြုမှာပါ။ Tim Berners-Lee က ပထမဆုံး ဝက်ဘ်ဘရောက်ဇာကို ဖန်တီးတဲ့အခါ၊ စာရွက်စာတမ်းတွေကို dynamic နဲ့ interactive ဖြစ်စေတဲ့ ဝက်ဘ်ကို ရည်ရွယ်ခဲ့ပါတယ်။ DOM က အဲဒီရည်မှန်းချက်ကို အကောင်အထည်ဖော်ပေးပါတယ်။ @@ -105,7 +105,7 @@ flowchart TD style Q fill:#ffebee ``` -![DOM tree representation](../../../../translated_images/my/dom-tree.7daf0e763cbbba92.png) +![DOM tree representation](../../../../translated_images/my/dom-tree.7daf0e763cbbba92.webp) > DOM နဲ့ HTML markup ကို ကိုယ်စားပြုထားတဲ့ပုံ။ [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) မှ @@ -150,7 +150,7 @@ flowchart LR > 💡 **Closures ကိုနားလည်ခြင်း**: JavaScript မှာ closures ဟာ အရေးကြီးတဲ့အကြောင်းအရာတစ်ခုဖြစ်ပြီး၊ developer အများစုဟာ အနှစ်များစွာ အသုံးပြုပြီးမှသာ အကြောင်းအရာအားလုံးကို အပြည့်အဝ နားလည်နိုင်ပါတယ်။ ဒီနေ့မှာတော့ practical application ကို အဓိကထားပြီး interactive features တွေကို တည်ဆောက်တဲ့အခါ closures တွေကို သဘာဝအတိုင်း တွေ့မြင်ရမှာဖြစ်ပါတယ်။ နားလည်မှုတွေဟာ အကောင်အထည်ဖော်တဲ့နည်းလမ်းတွေကို မြင်ရင်းဖြစ်လာပါလိမ့်မယ်။ -![DOM tree representation](../../../../translated_images/my/dom-tree.7daf0e763cbbba92.png) +![DOM tree representation](../../../../translated_images/my/dom-tree.7daf0e763cbbba92.webp) > DOM နဲ့ HTML markup ကို ကိုယ်စားပြုထားတဲ့ပုံ။ [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) မှ @@ -531,7 +531,7 @@ Dragging system သည် CSS property key နှစ်ခုကို manipulat - **Cross-device support**: Desktop နှင့် mobile တွင်အလုပ်လုပ်သည် - **Performance conscious**: Memory leak မရှိဘဲ calculation များကိုထပ်မလုပ်ပါ -![finished terrarium](../../../../translated_images/my/terrarium-final.0920f16e87c13a84.png) +![finished terrarium](../../../../translated_images/my/terrarium-final.0920f16e87c13a84.webp) --- diff --git a/translations/my/3-terrarium/solution/README.md b/translations/my/3-terrarium/solution/README.md index c2188d27c..a3240eec9 100644 --- a/translations/my/3-terrarium/solution/README.md +++ b/translations/my/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: အနည်းငယ်သော drag and drop code-meditation ဖြစ်ပါတယ်။ HTML, JS နှင့် CSS အနည်းငယ်ကို အသုံးပြုပြီး web interface တစ်ခုကို တည်ဆောက်၊ အလှဆင်ပြီး အပြန်အလှန်လုပ်ဆောင်မှုများ ထည့်သွင်းနိုင်ပါတယ်။ -![my terrarium](../../../../translated_images/my/screenshot_gray.0c796099a1f9f25e.png) +![my terrarium](../../../../translated_images/my/screenshot_gray.0c796099a1f9f25e.webp) ## အကျေးဇူးတင်စကား diff --git a/translations/my/5-browser-extension/1-about-browsers/README.md b/translations/my/5-browser-extension/1-about-browsers/README.md index de54b044b..78c8b53ce 100644 --- a/translations/my/5-browser-extension/1-about-browsers/README.md +++ b/translations/my/5-browser-extension/1-about-browsers/README.md @@ -26,7 +26,7 @@ journey Polish experience: 5: Student ``` -![Browser sketchnote](../../../../translated_images/my/browser.60317c9be8b7f84a.jpg) +![Browser sketchnote](../../../../translated_images/my/browser.60317c9be8b7f84a.webp) > Sketchnote by [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## မိမိကိုယ်ကိုစမ်းမေးမေးခွန်း @@ -79,7 +79,7 @@ Web browser ဆိုတာက အလွန်တိုးတက်တဲ့ doc ✅ **သမိုင်းအနည်းငယ်**: ပထမဆုံး browser ကို 'WorldWideWeb' လို့ခေါ်ပြီး Sir Timothy Berners-Lee က 1990 ခုနှစ်မှာ ဖန်တီးခဲ့ပါတယ်။ -![early browsers](../../../../translated_images/my/earlybrowsers.d984b711cdf3a42d.jpg) +![early browsers](../../../../translated_images/my/earlybrowsers.d984b711cdf3a42d.webp) > Some early browsers, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### Web Content ကို Browser တွေ ဘယ်လိုလုပ်ဆောင်သလဲ @@ -198,7 +198,7 @@ quadrantChart Extension installation လုပ်ဆောင်မှုကို နားလည်ခြင်းက သင့် extension ကို install လုပ်တဲ့ user တွေရဲ့ အတွေ့အကြုံကို ခန့်မှန်းနိုင်စေပါတယ်။ Installation လုပ်ဆောင်မှုက ခေတ်မီ browser တွေမှာ interface design အနည်းငယ်ကွဲပြားမှုနဲ့ standardized ဖြစ်ပါတယ်။ -![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/my/install-on-edge.d68781acaf0b3d3d.png) +![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/my/install-on-edge.d68781acaf0b3d3d.webp) > **အရေးကြီး**: Developer mode ကို toggle လုပ်ပြီး သင့်ကိုယ်တိုင်ဖန်တီးတဲ့ extensions တွေကို စမ်းသပ်တဲ့အခါ၊ အခြား store တွေက extensions တွေကို ခွင့်ပြုပါ။ @@ -313,10 +313,10 @@ User interface components တွေကို ဖန်တီးပါမယ် ### Extension Views Overview **Setup View** - First-time user configuration: -![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/my/1.b6da8c1394b07491.png) +![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/my/1.b6da8c1394b07491.webp) **Results View** - Carbon footprint data display: -![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/my/2.1dae52ff08042246.png) +![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/my/2.1dae52ff08042246.webp) ### Configuration Form ကို ဖန်တီးခြင်း diff --git a/translations/my/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/my/5-browser-extension/2-forms-browsers-local-storage/README.md index b95bf7d8f..e69629770 100644 --- a/translations/my/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/my/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -268,7 +268,7 @@ stateDiagram-v2 ClearStorage --> FirstTime: Back to setup ``` -![Local storage pane](../../../../translated_images/my/localstorage.472f8147b6a3f8d1.png) +![Local storage pane](../../../../translated_images/my/localstorage.472f8147b6a3f8d1.webp) > ⚠️ **Security Consideration**: Production application တွေမှာ LocalStorage မှာ API key တွေကိုသိမ်းဆည်းထားခြင်းက security risk ဖြစ်ပါတယ်။ JavaScript က data ကို access လုပ်နိုင်တဲ့အတွက်ပါ။ သင်ယူရေးအတွက်တော့ ဒီနည်းလမ်းကအဆင်ပြေပါတယ်၊ ဒါပေမယ့် အစစ်အမှန် application တွေမှာ sensitive credentials တွေကို secure server-side storage မှာသိမ်းဆည်းသင့်ပါတယ်။ diff --git a/translations/my/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/my/5-browser-extension/3-background-tasks-and-performance/README.md index 86104e0af..8eee03ab0 100644 --- a/translations/my/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/my/5-browser-extension/3-background-tasks-and-performance/README.md @@ -126,7 +126,7 @@ Edge မှာ Developer Tools ကိုဖွင့်ဖို့၊ အပေ စမ်းကြည့်ရအောင်။ Website တစ်ခုကိုဖွင့်ပါ (Microsoft.com ကောင်းပါတယ်) 'Record' button ကိုနှိပ်ပါ။ အခုတော့ page ကို refresh လုပ်ပြီး profiler က ဖြစ်ပျက်နေတဲ့အရာတွေကို capture လုပ်တာကိုကြည့်ပါ။ Recording ကိုရပ်လိုက်တဲ့အခါ browser က site ကို 'scripts', 'renders', 'paints' လုပ်ပုံကို အကြမ်းဖျင်းဖော်ပြထားတဲ့ breakdown ကိုတွေ့ပါလိမ့်မယ်။ Rocket launch အတွင်း mission control က system တစ်ခုချင်းစီကို monitor လုပ်ပုံလိုမျိုးပါပဲ - ဘာတွေဖြစ်နေတယ်၊ ဘယ်အချိန်မှာဖြစ်တယ်ဆိုတာ real-time data ရပါတယ်။ -![Edge profiler](../../../../translated_images/my/profiler.5a4a62479c5df01c.png) +![Edge profiler](../../../../translated_images/my/profiler.5a4a62479c5df01c.webp) ✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) မှာပိုမိုနက်နက်ရှိုင်းရှိုင်းလေ့လာနိုင်ပါတယ် @@ -136,11 +136,11 @@ Profile timeline ရဲ့ element တွေကို select လုပ်ပြ Profile timeline ရဲ့ အပိုင်းတစ်ခုကို select လုပ်ပြီး summary pane မှာ page performance ရဲ့ snapshot ကိုကြည့်ပါ: -![Edge profiler snapshot](../../../../translated_images/my/snapshot.97750180ebcad737.png) +![Edge profiler snapshot](../../../../translated_images/my/snapshot.97750180ebcad737.webp) Event Log pane မှာ event တစ်ခုခု 15 ms ထက်ပိုကြာနေမလားဆိုတာစစ်ပါ: -![Edge event log](../../../../translated_images/my/log.804026979f3707e0.png) +![Edge event log](../../../../translated_images/my/log.804026979f3707e0.webp) ✅ Profiler ကိုနားလည်ပါ! ဒီ site ရဲ့ developer tools ကိုဖွင့်ပြီး bottleneck တွေရှိမရှိကြည့်ပါ။ ဘာ asset က slowest-loading ဖြစ်နေလဲ? Fastest-loading asset ကဘာလဲ? diff --git a/translations/my/5-browser-extension/README.md b/translations/my/5-browser-extension/README.md index 6f584c1cc..ece72e861 100644 --- a/translations/my/5-browser-extension/README.md +++ b/translations/my/5-browser-extension/README.md @@ -23,7 +23,7 @@ CO_OP_TRANSLATOR_METADATA: ### အားကျမှုများ -![အစိမ်းရောင် ဘရောက်ဇာ အက်စတင်ရှင်း](../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.png) +![အစိမ်းရောင် ဘရောက်ဇာ အက်စတင်ရှင်း](../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.webp) ## အားကျမှုများ diff --git a/translations/my/5-browser-extension/solution/README.md b/translations/my/5-browser-extension/solution/README.md index 2935a66de..360a05998 100644 --- a/translations/my/5-browser-extension/solution/README.md +++ b/translations/my/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow ရဲ့ C02 Signal API ကို အသုံးပြုပြီး လျှပ်စစ်ဓာတ်အားအသုံးပြုမှုကို စောင့်ကြည့်နိုင်ရန် browser extension တစ်ခု တည်ဆောက်ပါ။ ဒါက region ရဲ့ လျှပ်စစ်ဓာတ်အားအသုံးပြုမှု အလေးအနက်ကို သတိပေးချက်အဖြစ် browser ထဲမှာ ရှိနေစေမှာဖြစ်ပါတယ်။ ဒီ extension ကို အခါအားလျော်စွာ အသုံးပြုခြင်းက သင့်ရဲ့ လုပ်ဆောင်မှုများအပေါ် အချက်အလက်အခြေခံပြီး ဆုံးဖြတ်ချက်များ ချမှတ်နိုင်ရန် အထောက်အကူဖြစ်စေပါမယ်။ -![extension screenshot](../../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.png) +![extension screenshot](../../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.webp) ## စတင်အသုံးပြုခြင်း @@ -31,7 +31,7 @@ npm run build Edge browser မှာ install လုပ်ရန်အတွက် browser ရဲ့ အပေါ်ဘက်ညာထောင့်မှာရှိတဲ့ 'three dot' menu ကို အသုံးပြုပြီး Extensions panel ကို ရှာပါ။ 'Load Unpacked' ကို ရွေးချယ်ပြီး extension အသစ်တစ်ခုကို load လုပ်ပါ။ prompt မှာ 'dist' folder ကို ဖွင့်ပြီး extension ကို load လုပ်ပါ။ အသုံးပြုရန်အတွက် CO2 Signal ရဲ့ API key ([ဒီမှာ email ဖြင့် ရယူပါ](https://www.co2signal.com/) - ဒီ page မှာ သင့် email ကို box ထဲမှာ ထည့်ပါ) နှင့် [Electricity Map](https://www.electricitymap.org/map) ရဲ့ [region code](http://api.electricitymap.org/v3/zones) ကို ထည့်ရန် လိုအပ်ပါမယ်။ ဥပမာအားဖြင့် Boston မှာ 'US-NEISO' ကို အသုံးပြုပါတယ်။ -![installing](../../../../translated_images/my/install-on-edge.78634f02842c4828.png) +![installing](../../../../translated_images/my/install-on-edge.78634f02842c4828.webp) API key နှင့် region code ကို extension interface ထဲမှာ input လုပ်ပြီးနောက် browser extension bar ရဲ့ အရောင် dot က region ရဲ့ လျှပ်စစ်ဓာတ်အားအသုံးပြုမှုကို ပြသပြီး သင့်အတွက် လျှပ်စစ်ဓာတ်အားများအသုံးပြုရမည့် လုပ်ဆောင်မှုများအပေါ် pointer တစ်ခု ပေးပါမယ်။ ဒီ 'dot' system ရဲ့ concept ကို [Energy Lollipop extension](https://energylollipop.com/) မှ California emissions အတွက် ရရှိခဲ့ပါတယ်။ diff --git a/translations/my/5-browser-extension/solution/translation/README.fr.md b/translations/my/5-browser-extension/solution/translation/README.fr.md index 650018fc1..8ceae4463 100644 --- a/translations/my/5-browser-extension/solution/translation/README.fr.md +++ b/translations/my/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow ၏ C02 Signal API ကို အသုံးပြု၍ လျှပ်စစ်စွမ်းအင်သုံးစွဲမှုကို ချက်ချင်းစောင့်ကြည့်နိုင်ရန် သင့်ဘရောက်ဇာတွင် သတိပေးချက်တစ်ခုရရှိစေရန် ဘရောက်ဇာအတွက် Extension တစ်ခု ဖန်တီးပါ။ ဒီအထူး Extension ကို အသုံးပြုခြင်းဖြင့် သင့်ဒေသရှိ လျှပ်စစ်စွမ်းအင်သုံးစွဲမှုအခြေအနေအပေါ် မူတည်ပြီး သင့်လုပ်ဆောင်မှုများအတွက် ပိုမိုသင့်တော်သော ဆုံးဖြတ်ချက်များ ချမှတ်နိုင်စေပါမည်။ -![Extension Screenshot](../../../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.png) +![Extension Screenshot](../../../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.webp) ## စတင်ရန် @@ -31,7 +31,7 @@ npm run build Edge တွင် ထည့်သွင်းရန်အတွက် ဘရောက်ဇာ၏ အပေါ်ယံညာဘက်ရှိ 'သုံးချက်' မီနူးကို အသုံးပြု၍ Extensions ပန်းနယ်ကို ရှာပါ။ အဲဒီနေရာမှ 'Unpacked Extension ကို Load လုပ်ရန်' ကို ရွေးချယ်ပြီး Extension အသစ်တစ်ခုကို ထည့်သွင်းပါ။ Prompt တွင် 'dist' ဖိုလ်ဒါကို ဖွင့်ပြီး Extension ကို Load လုပ်ပါ။ အသုံးပြုရန်အတွက် CO2 Signal API အတွက် API Key တစ်ခုလိုအပ်ပါမည် ([ဒီမှာ အီးမေးလ်ဖြင့် ရယူပါ](https://www.co2signal.com/) - ဒီစာမျက်နှာရှိ အကွက်ထဲတွင် သင့်အီးမေးလ်ကို ထည့်သွင်းပါ) နှင့် [Electricity Map](https://www.electricitymap.org/map) တွင် သင့်ဒေသအတွက် [Zone Code](http://api.electricitymap.org/v3/zones) ကို ရယူပါ။ (ဥပမာ - Boston အတွက် 'US-NEISO' ကို အသုံးပြုပါ။) -![Installation](../../../../../translated_images/my/install-on-edge.78634f02842c4828.png) +![Installation](../../../../../translated_images/my/install-on-edge.78634f02842c4828.webp) API Key နှင့် ဒေသကုဒ်ကို Extension Interface ထဲတွင် ထည့်သွင်းပြီးပါက ဘရောက်ဇာ၏ Extension Bar တွင် ရောင်စုံအမှတ်တစ်ခုသည် သင့်ဒေသရှိ လျှပ်စစ်စွမ်းအင်သုံးစွဲမှုအခြေအနေကို ပြသရန် ပြောင်းလဲသွားပါမည်။ ထို့အပြင် သင့်အတွက် သင့်တော်သော စွမ်းအင်သုံးစွဲမှုဆိုင်ရာ လုပ်ဆောင်မှုများကို အကြံပြုနိုင်မည်ဖြစ်သည်။ ဒီ 'အမှတ်' စနစ်၏ အကြံကို [Energy Lollipop Extension](https://energylollipop.com/) မှ ကယ်လီဖိုးနီးယားရှိ အထူးထုတ်လွှင့်မှုများအတွက် ရယူထားပါသည်။ diff --git a/translations/my/5-browser-extension/solution/translation/README.hi.md b/translations/my/5-browser-extension/solution/translation/README.hi.md index e6b3697f5..1b3f62475 100644 --- a/translations/my/5-browser-extension/solution/translation/README.hi.md +++ b/translations/my/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: မီးစက်သုံးစွဲမှုကို ထိန်းချုပ်ရန် tmrow ရဲ့ C02 Signal API ကို အသုံးပြုပြီး၊ သင့်ဘရောက်ဇာမှာ သင့်ဒေသရဲ့ မီးစက်သုံးစွဲမှုအခြေအနေကို သတိပေးနိုင်တဲ့ ဘရောက်ဇာအက်စ်တင်ရှင်းတစ်ခုကို တည်ဆောက်ခြင်း။ ဒီအက်စ်တင်ရှင်းကို သုံးခြင်းက သင့်လုပ်ဆောင်မှုတွေကို ဒီအချက်အလက်အပေါ်အခြေခံပြီး ဆုံးဖြတ်နိုင်ဖို့ အထောက်အကူပြုပါလိမ့်မယ်။ -![အက်စ်တင်ရှင်း စကရင်ရှော့ ](../../../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.png) +![အက်စ်တင်ရှင်း စကရင်ရှော့ ](../../../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.webp) ## စတင်ခြင်း @@ -31,7 +31,7 @@ npm run build Edge မှာ ထည့်သွင်းဖို့အတွက်၊ ဘရောက်ဇာရဲ့ အပေါ်ယာဘက်ထောင့်မှာရှိတဲ့ 'သုံးချက်' မီနူးကို အသုံးပြုပြီး အက်စ်တင်ရှင်း panel ကို ရှာပါ။ အဲဒီနေရာက 'Load Unpacked' ကို ရွေးပြီး အသစ်ထည့်သွင်းပါ။ Prompt မှာ 'dist' ဖိုလ်ဒါကို ဖွင့်ပြီး အက်စ်တင်ရှင်းကို ထည့်သွင်းပါ။ အသုံးပြုဖို့အတွက် သင့်မှာ CO2 Signal ရဲ့ API ([ဒီမှာ အီးမေးလ်နဲ့ ရယူပါ](https://www.co2snal.com/)) API key တစ်ခုလိုအပ်ပါမယ်။ [သင့်ဒေသရဲ့ code](http://api.electricitymap.org/v3/zones) ကို [Electricity Map](https://www.electricitymap.org/map) မှာ ရှာပါ (ဥပမာ၊ Boston မှာဆိုရင် 'US-NEISO' ကို အသုံးပြုပါတယ်)။ -![ထည့်သွင်းခြင်း](../../../../../translated_images/my/install-on-edge.78634f02842c4828.png) +![ထည့်သွင်းခြင်း](../../../../../translated_images/my/install-on-edge.78634f02842c4828.webp) API key နဲ့ ဒေသ code ကို အက်စ်တင်ရှင်း interface မှာ ထည့်သွင်းပြီးသွားရင်၊ ဘရောက်ဇာအက်စ်တင်ရှင်း bar မှာရှိတဲ့ အရောင်ပွင့်လုံးက သင့်ဒေသရဲ့ မီးစက်သုံးစွဲမှုအခြေအနေကို ပြသဖို့ ပြောင်းလဲသင့်ပြီး၊ မီးစက်သုံးစွဲမှုများတဲ့ လုပ်ဆောင်မှုတွေကို သင့်အတွက် သင့်တော်မယ်ဆိုတာကို သတိပေးပါလိမ့်မယ်။ ဒီ 'dot' စနစ်ရဲ့ အကြောင်းအရင်းကို ကယ်လီဖိုးနီးယားရဲ့ ထုတ်လွှတ်မှုအတွက် [Energy Lollipop Extension](https://energylollipop.com/) မှာ အကြံဉာဏ်ရခဲ့တာပါ။ diff --git a/translations/my/5-browser-extension/solution/translation/README.it.md b/translations/my/5-browser-extension/solution/translation/README.it.md index 7ff1047c3..38dbd6d1c 100644 --- a/translations/my/5-browser-extension/solution/translation/README.it.md +++ b/translations/my/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow ရဲ့ Signal CO2 API ကို အသုံးပြုပြီး လျှပ်စစ်ဓာတ်အားအသုံးပြုမှုကို စောင့်ကြည့်ကာ သင့်ရဲ့ ဘရောက်ဇာတွင် တိုက်ရိုက် သတိပေးချက်ရနိုင်ရန် ဘရောက်ဇာအတွက် extension တစ်ခု ဖန်တီးပါမည်။ ဒီ extension ကို အသုံးပြုခြင်းအားဖြင့် သင့်ရဲ့ လုပ်ဆောင်မှုများကို အချက်အလက်များအပေါ် အခြေခံပြီး အကဲဖြတ်နိုင်ပါမည်။ -![extension screenshot](../../../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.png) +![extension screenshot](../../../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.webp) ## စတင်ရန် @@ -31,7 +31,7 @@ npm run build Edge တွင် install လုပ်ရန်အတွက် ဘရောက်ဇာ၏ အပေါ်ယံညာဘက်ရှိ "သုံးချက်" menu ကို အသုံးပြု၍ Extensions panel ကို ရှာပါ။ Developer Mode ကို (ဘရောက်ဇာ၏ ဘေးဘက်အောက်ခြေတွင်) ဖွင့်ထားရန် လိုအပ်ပါသည်။ "Load unpacked" ကို ရွေးချယ်ပြီး extension အသစ်တစ်ခုကို load လုပ်ပါ။ Prompt တွင် "dist" ဖိုလ်ဒါကို ဖွင့်ပြီး extension ကို load လုပ်ပါမည်။ အသုံးပြုရန် CO2 Signal API အတွက် API key တစ်ခုလိုအပ်ပါမည် ([ဒီမှာ e-mail ဖြင့် ရယူနိုင်ပါသည်](https://www.co2signal.com/) - ဒီစာမျက်နှာတွင် သင့် e-mail ကို box ထဲတွင် ထည့်ပါ) နှင့် [electricity map](https://www.electricitymap.org/map) တွင် သင့်ဒေသနှင့် ကိုက်ညီသော [region code](http://api.electricitymap.org/v3/zones) (ဥပမာ Boston တွင် "US-NEISO")။ -![installation](../../../../../translated_images/my/install-on-edge.78634f02842c4828.png) +![installation](../../../../../translated_images/my/install-on-edge.78634f02842c4828.webp) API key နှင့် region ကို extension interface တွင် ထည့်ပြီးနောက် ဘရောက်ဇာ၏ extension bar တွင်ရှိသော အရောင်အမှတ်အသားသည် ဒေသ၏ လျှပ်စစ်ဓာတ်အားအသုံးပြုမှုကို ပြသရန် ပြောင်းလဲသင့်ပါမည်။ ထို့အပြင် အမြင့်မားသော စွမ်းအင်အသုံးပြုမှု လုပ်ဆောင်မှုများကို မည်သို့လုပ်ဆောင်ရမည်ကို အညွှန်းပေးပါမည်။ ဒီ "အမှတ်" စနစ်၏ အခြေခံแนวคิดကို [Energy Lollipop extension](https://energylollipop.com/) မှ California emissions အတွက် ပံ့ပိုးပေးထားပါသည်။ diff --git a/translations/my/5-browser-extension/solution/translation/README.ja.md b/translations/my/5-browser-extension/solution/translation/README.ja.md index 10bf5660a..2e6c1d5aa 100644 --- a/translations/my/5-browser-extension/solution/translation/README.ja.md +++ b/translations/my/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow ရဲ့ C02 Signal API ကို အသုံးပြုပြီး သင့်ဒေသရဲ့ လျှပ်စစ်ဓာတ်အားအသုံးပြုမှုကို ဘရောက်ဇာပေါ်မှာ သတိပေးချက်အဖြစ် ပြသနိုင်ရန် အက်စ်တင်ရှင်းတစ်ခုကို တည်ဆောက်ပါ။ ဒီအက်စ်တင်ရှင်းကို အလွတ်သုံးနိုင်ပြီး ဒီအချက်အလက်အပေါ် အခြေခံပြီး သင့်လုပ်ဆောင်မှုများကို ဆုံးဖြတ်နိုင်ပါသည်။ -![extension screenshot](../../../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.png) +![extension screenshot](../../../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.webp) ## စတင်ရန် @@ -31,7 +31,7 @@ npm run build Edge မှာ ထည့်သွင်းဖို့အတွက် ဘရောက်ဇာရဲ့ အပေါ်ဘက်ညာဖက်မှာရှိတဲ့ "၃ ခုတိုင်" menu ကို နှိပ်ပြီး "Extensions" panel ကို ရှာပါ။ အဲဒီနေရာက "Load Unpacked" ကို ရွေးပြီး အက်စ်တင်ရှင်းအသစ်ကို load လုပ်ပါ။ prompt မှာ "dist" ဖိုလ်ဒါကို ဖွင့်ပါ။ အက်စ်တင်ရှင်းကို load လုပ်ပြီးပါပြီ။ အသုံးပြုဖို့ CO2 Signal API ရဲ့ API key ([ဒီမှာ email နဲ့ ရယူပါ](https://www.co2signal.com/) - ဒီစာမျက်နှာမှာ email ကို box ထဲထည့်ပါ) နဲ့ [Electricity Map](https://www.electricitymap.org/map) ရဲ့ သင့်ဒေသအတွက် [code](http://api.electricitymap.org/v3/zones) လိုအပ်ပါတယ် (ဥပမာ - Boston မှာ 'US-NEISO' ကို အသုံးပြုပါတယ်)။ -![installing](../../../../../translated_images/my/install-on-edge.78634f02842c4828.png) +![installing](../../../../../translated_images/my/install-on-edge.78634f02842c4828.webp) API key နဲ့ ဒေသ code ကို အက်စ်တင်ရှင်း interface မှာ ထည့်သွင်းပြီးရင် ဘရောက်ဇာရဲ့ extension bar မှာ ပြသတဲ့ အရောင်အမှတ်လေးက သင့်ဒေသရဲ့ လျှပ်စစ်ဓာတ်အားအသုံးပြုမှုကို အခြေခံပြီး သင့်လုပ်ဆောင်မှုအတွက် သင့်တော်တဲ့ အချက်အလက်ကို ပြသပေးပါမယ်။ ဒီ "dot" system ရဲ့ အကြံဉာဏ်ကို ကယ်လီဖိုးနီးယားပြည်နယ်ရဲ့ [Energy Lollipop extension](https://energylollipop.com/) ကပေးခဲ့တာဖြစ်ပါတယ်။ diff --git a/translations/my/5-browser-extension/solution/translation/README.ms.md b/translations/my/5-browser-extension/solution/translation/README.ms.md index e43a81d23..a489dfbd5 100644 --- a/translations/my/5-browser-extension/solution/translation/README.ms.md +++ b/translations/my/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: CO2 Signal API ကို အသုံးပြု၍ လျှပ်စစ်ဓာတ်အား အသုံးပြုမှုကို စစ်ဆေးပြီး၊ သင့်ဒေသ၏ လျှပ်စစ်ဓာတ်အား အသုံးပြုမှု အခြေအနေကို သတိပေးချက်အဖြစ် သင့် browser မှာ ရရှိနိုင်အောင် browser extension တစ်ခုကို တည်ဆောက်ပါ။ ဒီ extension ကို အသုံးပြုခြင်းက သင့်လုပ်ဆောင်မှုများကို ဒီအချက်အလက်အပေါ် အခြေခံပြီး စဉ်းစားနိုင်ရန် အထောက်အကူဖြစ်စေပါမည်။ -![browser extension screenshot](../../../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.png) +![browser extension screenshot](../../../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.webp) ## စတင်ရန် @@ -31,7 +31,7 @@ npm run build Edge မှာ install လုပ်ရန်အတွက် browser ရဲ့ ညာဘက်အပေါ်ထောင့်မှာရှိတဲ့ 'သုံးခုတိုင်' menu ကို အသုံးပြု၍ Extensions panel ကို ရှာပါ။ 'Load Unpacked' ကို ရွေးပြီး extension အသစ်ကို load လုပ်ပါ။ 'dist' folder ကို ဖွင့်ပြီး extension ကို load လုပ်ပါ။ အသုံးပြုရန်အတွက် CO2 Signal API အတွက် API key ([ဒီမှာ email ဖြင့် ရယူပါ](https://www.co2signal.com/) - ဒီ page ရဲ့ box ထဲမှာ သင့် email ကို ထည့်ပါ) နှင့် [သင့်ဒေသအတွက် code](http://api.electricitymap.org/v3/zones) ကို [Electricity Map](https://www.electricitymap.org/map) မှာ ရှာပါ။ (ဥပမာ Boston မှာ 'US-NEISO' ကို အသုံးပြုပါ။) -![installing](../../../../../translated_images/my/install-on-edge.78634f02842c4828.png) +![installing](../../../../../translated_images/my/install-on-edge.78634f02842c4828.webp) API key နှင့် region code ကို extension interface မှာ ထည့်ပြီးနောက် browser extension bar ရဲ့ အရောင် dot က သင့်ဒေသရဲ့ လျှပ်စစ်ဓာတ်အား အသုံးပြုမှုကို ပြသပြီး သင့်လုပ်ဆောင်မှုများအတွက် အကြံပေးချက်များကို ပေးပါမည်။ ဒီ 'dot' စနစ်ရဲ့ အကြောင်းအရင်းကို [Energy Lollipop browser extension](https://energylollipop.com/) မှ California အတွက် concept အဖြစ် ရရှိခဲ့ပါသည်။ diff --git a/translations/my/5-browser-extension/start/README.md b/translations/my/5-browser-extension/start/README.md index e34b8823a..6d69c6448 100644 --- a/translations/my/5-browser-extension/start/README.md +++ b/translations/my/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow ရဲ့ C02 Signal API ကို အသုံးပြုပြီး လျှပ်စစ်ဓာတ်အားအသုံးပြုမှုကို စောင့်ကြည့်နိုင်ရန် browser extension တစ်ခု တည်ဆောက်ပါ။ ဒါကို သင့် browser မှာ တိုက်ရိုက် သတိပေးအဖြစ် အသုံးပြုနိုင်ပါတယ်။ ဒီ extension ကို အခါအားလျော်စွာ အသုံးပြုခြင်းက သင့်ရဲ့ လုပ်ဆောင်မှုတွေကို ဒီအချက်အလက်အပေါ် အခြေခံပြီး ဆုံးဖြတ်နိုင်ဖို့ အထောက်အကူဖြစ်စေပါလိမ့်မယ်။ -![extension screenshot](../../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.png) +![extension screenshot](../../../../translated_images/my/extension-screenshot.0e7f5bfa110e92e3.webp) ## စတင်အသုံးပြုခြင်း @@ -31,7 +31,7 @@ npm run build Edge browser မှာ install လုပ်ဖို့အတွက် browser ရဲ့ အပေါ်ဘက်ညာထောင့်မှာရှိတဲ့ 'three dot' menu ကို အသုံးပြုပြီး Extensions panel ကို ရှာပါ။ 'Load Unpacked' ကို ရွေးချယ်ပြီး extension အသစ်တစ်ခုကို load လုပ်ပါ။ prompt မှာ 'dist' folder ကို ဖွင့်ပြီး extension ကို load လုပ်ပါ။ အသုံးပြုဖို့အတွက် CO2 Signal ရဲ့ API key ([ဒီမှာ email ဖြင့် ရယူပါ](https://www.co2signal.com/) - ဒီစာမျက်နှာမှာ သင့် email ကို box ထဲမှာ ထည့်ပါ) နဲ့ [Electricity Map](https://www.electricitymap.org/map) ရဲ့ သင့်ဒေသကို ကိုယ်စားပြုတဲ့ [region code](http://api.electricitymap.org/v3/zones) ကို ထည့်သွင်းဖို့ လိုအပ်ပါမယ်။ ဥပမာအားဖြင့် Boston မှာ 'US-NEISO' ကို အသုံးပြုပါတယ်။ -![installing](../../../../translated_images/my/install-on-edge.78634f02842c4828.png) +![installing](../../../../translated_images/my/install-on-edge.78634f02842c4828.webp) API key နဲ့ region ကို extension interface မှာ input လုပ်ပြီးရင် browser extension bar ရဲ့ အရောင် dot က သင့်ဒေသရဲ့ လျှပ်စစ်ဓာတ်အားအသုံးပြုမှုကို ပြောင်းလဲပြသပေးပါလိမ့်မယ်။ ဒါက သင့်အတွက် လျှပ်စစ်ဓာတ်အားများစွာ အသုံးပြုရမယ့် လုပ်ဆောင်မှုတွေကို ဘယ်လိုလုပ်ဆောင်ရမလဲဆိုတာ အညွှန်းပေးပါလိမ့်မယ်။ ဒီ 'dot' စနစ်ရဲ့ အကြံဉာဏ်ကို [Energy Lollipop extension](https://energylollipop.com/) က California emissions အတွက် ပေးခဲ့တာဖြစ်ပါတယ်။ diff --git a/translations/my/6-space-game/2-drawing-to-canvas/README.md b/translations/my/6-space-game/2-drawing-to-canvas/README.md index 9ade7c030..6173aa7ae 100644 --- a/translations/my/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/my/6-space-game/2-drawing-to-canvas/README.md @@ -97,7 +97,7 @@ mindmap ပြီးစီးသော ရလဒ်သည် အောက်ပါအတိုင်း ဖြစ်သင့်သည်- -![အနက်ရောင်မျက်နှာပြင်တွင် သူရဲကောင်းနှင့် 5*5 အမှုးများ](../../../../translated_images/my/partI-solution.36c53b48c9ffae2a.png) +![အနက်ရောင်မျက်နှာပြင်တွင် သူရဲကောင်းနှင့် 5*5 အမှုးများ](../../../../translated_images/my/partI-solution.36c53b48c9ffae2a.webp) ## ဖြေရှင်းချက် diff --git a/translations/my/6-space-game/5-keeping-score/README.md b/translations/my/6-space-game/5-keeping-score/README.md index 6f6c26b25..47b92f74d 100644 --- a/translations/my/6-space-game/5-keeping-score/README.md +++ b/translations/my/6-space-game/5-keeping-score/README.md @@ -160,7 +160,7 @@ sequenceDiagram ``` - **အမှတ်ပေးစနစ်**: ရန်သူသင်္ဘောတစ်စင်းကို ဖျက်ဆီးတိုင်း ၁၀၀ အမှတ်ရရှိမယ် (အလွယ်တကူ စိတ်ထဲမှာတွက်နိုင်ဖို့အတွက် round number တွေက ပိုမိုလွယ်ကူပါတယ်။) အမှတ်ကို ဘေးဘက်အောက်ထောင့်မှာ ပြသပါမယ်။ -- **အသက်ရေတွက်စနစ်**: သင့် hero က အသက်သုံးခုနဲ့ စတင်ပါမယ် - စိန်ခေါ်မှုနဲ့ ကစားနိုင်စွမ်းကို ချိန်ညှိဖို့ arcade ဂိမ်းအစောပိုင်းတွေက သတ်မှတ်ထားတဲ့ standard တစ်ခုပါ။ ရန်သူနဲ့ တိုက်မိတိုင်း အသက်တစ်ခုဆုံးရှုံးရပါမယ်။ ကျန်ရှိတဲ့ အသက်တွေကို သင်္ဘော icon တွေကို အသုံးပြုပြီး ဘေးဘက်အောက်ထောင့်မှာ ပြသပါမယ် ![life image](../../../../translated_images/my/life.6fb9f50d53ee0413.png)။ +- **အသက်ရေတွက်စနစ်**: သင့် hero က အသက်သုံးခုနဲ့ စတင်ပါမယ် - စိန်ခေါ်မှုနဲ့ ကစားနိုင်စွမ်းကို ချိန်ညှိဖို့ arcade ဂိမ်းအစောပိုင်းတွေက သတ်မှတ်ထားတဲ့ standard တစ်ခုပါ။ ရန်သူနဲ့ တိုက်မိတိုင်း အသက်တစ်ခုဆုံးရှုံးရပါမယ်။ ကျန်ရှိတဲ့ အသက်တွေကို သင်္ဘော icon တွေကို အသုံးပြုပြီး ဘေးဘက်အောက်ထောင့်မှာ ပြသပါမယ် ![life image](../../../../translated_images/my/life.6fb9f50d53ee0413.webp)။ ## တည်ဆောက်ဖို့ အဆင်သင့်ဖြစ်ပါပြီ! diff --git a/translations/my/7-bank-project/1-template-route/README.md b/translations/my/7-bank-project/1-template-route/README.md index 32553b399..d03dc571e 100644 --- a/translations/my/7-bank-project/1-template-route/README.md +++ b/translations/my/7-bank-project/1-template-route/README.md @@ -541,7 +541,7 @@ sequenceDiagram `history.pushState` ကို အသုံးပြုကာ browser ရဲ့ navigation history မှာ entry အသစ်တွေကို ဖန်တီးနိုင်ပါတယ်။ Browser ရဲ့ *back button* ကို နှိပ်ထားပြီး စစ်ဆေးကြည့်ပါ၊ navigation history က ဒီလိုပုံစံတစ်ခုကို ပြသသင့်ပါတယ်: -![Navigation history ရဲ့ screenshot](../../../../translated_images/my/history.7fdabbafa521e064.png) +![Navigation history ရဲ့ screenshot](../../../../translated_images/my/history.7fdabbafa521e064.webp) Back button ကို အကြိမ်အများကြိမ် click လုပ်ကြည့်ပါ၊ လက်ရှိ URL က ပြောင်းလဲပြီး history က update လုပ်သွားမယ်၊ ဒါပေမယ့် အတူတူ template ကိုပဲ ပြသနေပါမယ်။ diff --git a/translations/my/7-bank-project/2-forms/README.md b/translations/my/7-bank-project/2-forms/README.md index 363726915..45b296980 100644 --- a/translations/my/7-bank-project/2-forms/README.md +++ b/translations/my/7-bank-project/2-forms/README.md @@ -295,7 +295,7 @@ Submit button ကိုနှိပ်တဲ့အခါမှာ ဘာတွ 2. Browser ရဲ့ address bar မှာ ပြောင်းလဲမှုတွေကို သတိထားပါ 3. Page reload ဖြစ်ပြီး data တွေ URL မှာ ပေါ်လာတာကို သတိထားပါ -![Register button ကိုနှိပ်ပြီး browser URL ပြောင်းလဲမှု screenshot](../../../../translated_images/my/click-register.e89a30bf0d4bc9ca.png) +![Register button ကိုနှိပ်ပြီး browser URL ပြောင်းလဲမှု screenshot](../../../../translated_images/my/click-register.e89a30bf0d4bc9ca.webp) ### HTTP Method တွေကို နှိုင်းယှဉ်ခြင်း @@ -502,7 +502,7 @@ async function register() { 3. **"Create Account" ကို နှိပ်ပါ** 4. **Console messages နှင့် user feedback ကို ကြည့်ရှုပါ** -![Browser console တွင် log message ကို ပြသထားသော screenshot](../../../../translated_images/my/browser-console.efaf0b51aaaf6778.png) +![Browser console တွင် log message ကို ပြသထားသော screenshot](../../../../translated_images/my/browser-console.efaf0b51aaaf6778.webp) **သင်မြင်ရမည့်အရာများ:** - **Loading state** submit button တွင် ပေါ်လာသည် @@ -677,7 +677,7 @@ Registration form ကို robust validation ဖြင့် user experience 3. **Special character များကို** username field တွင် စမ်းသပ်ပါ 4. **Negative balance amount ကို** input လုပ်ပါ -![Validation error ကို ပြသထားသော screenshot](../../../../translated_images/my/validation-error.8bd23e98d416c22f.png) +![Validation error ကို ပြသထားသော screenshot](../../../../translated_images/my/validation-error.8bd23e98d416c22f.webp) **သင်မြင်ရမည့်အရာများ:** - **Browser သည်** native validation message များကို ပြသသည် @@ -825,7 +825,7 @@ timeline CSS အလှဆင်မှုများထည့်ပြီးနောက် login စာမျက်နှာ၏ နောက်ဆုံးပုံစံကို အောက်ပါပုံကဲ့သို့ ရနိုင်ပါသည် - -![CSS အလှဆင်မှုများထည့်ပြီးနောက် login စာမျက်နှာ၏ screenshot](../../../../translated_images/my/result.96ef01f607bf856a.png) +![CSS အလှဆင်မှုများထည့်ပြီးနောက် login စာမျက်နှာ၏ screenshot](../../../../translated_images/my/result.96ef01f607bf856a.webp) ## Post-Lecture Quiz diff --git a/translations/my/7-bank-project/3-data/README.md b/translations/my/7-bank-project/3-data/README.md index 5901c070a..60a071c7f 100644 --- a/translations/my/7-bank-project/3-data/README.md +++ b/translations/my/7-bank-project/3-data/README.md @@ -160,7 +160,7 @@ sequenceDiagram Browser->>User: Displays new page (flash/reload) ``` -![Update workflow in a multi-page application](../../../../translated_images/my/mpa.7f7375a1a2d4aa77.png) +![Update workflow in a multi-page application](../../../../translated_images/my/mpa.7f7375a1a2d4aa77.webp) **ဒီနည်းလမ်းက ဘာလို့ clunky ဖြစ်ခဲ့သလဲ:** - Click တစ်ချက်တိုင်းက page တစ်ခုလုံးကို ပြန်တည်ဆောက်ရတာ @@ -187,7 +187,7 @@ sequenceDiagram Browser->>User: Shows updated content (no reload) ``` -![Update workflow in a single-page application](../../../../translated_images/my/spa.268ec73b41f992c2.png) +![Update workflow in a single-page application](../../../../translated_images/my/spa.268ec73b41f992c2.webp) **SPA တွေက ဘာလို့ ပိုကောင်းသလဲ:** - တကယ်ပြောင်းလဲလိုတဲ့ အပိုင်းတွေကိုသာ update လုပ်တာ (smart, right?) @@ -500,7 +500,7 @@ if (data.error) { Invalid account ဖြင့်စမ်းသပ်ပါက၊ Error message ကို page ပေါ်မှာပေါ်လာတာကိုမြင်ရပါမည်! -![Login အတွင်း error message ပြသထားသော screenshot](../../../../translated_images/my/login-error.416fe019b36a6327.png) +![Login အတွင်း error message ပြသထားသော screenshot](../../../../translated_images/my/login-error.416fe019b36a6327.webp) #### အဆင့် 4: Accessibility ဖြင့်ပါဝင်မှုရှိစေခြင်း @@ -815,7 +815,7 @@ Agent mode ကို အသုံးပြု၍ အောက်ပါ challenge ဒီလို polished dashboard တစ်ခုကို ရနိုင်ပါမည်: -![Screenshot of an example result of the dashboard after styling](../../../../translated_images/my/screen2.123c82a831a1d14a.png) +![Screenshot of an example result of the dashboard after styling](../../../../translated_images/my/screen2.123c82a831a1d14a.webp) ဒီအတိုင်းတိတိမလုပ်ရပါ - အကြံဉာဏ်အဖြစ် အသုံးပြုပြီး သင့်စိတ်ကြိုက် ပြောင်းလဲပါ! diff --git a/translations/my/7-bank-project/4-state-management/README.md b/translations/my/7-bank-project/4-state-management/README.md index 9a0faad57..0fde308ad 100644 --- a/translations/my/7-bank-project/4-state-management/README.md +++ b/translations/my/7-bank-project/4-state-management/README.md @@ -188,7 +188,7 @@ Titanic ၏ compartmentalized design ကဲ့သို့၊ ပြဿနာမ ကျွန်ုပ်တို့သည် **centralized state management** system တစ်ခုကို ဖန်တီးမည်။ ၎င်းသည် အရေးကြီးသောအရာအားလုံးကို စီမံခန့်ခွဲသော တစ်ဦးတည်းသော လူတစ်ဦးကဲ့သို့ဖြစ်သည်: -![HTML, user actions နှင့် state အကြား data flows ကို ပြသသော schema](../../../../translated_images/my/data-flow.fa2354e0908fecc8.png) +![HTML, user actions နှင့် state အကြား data flows ကို ပြသသော schema](../../../../translated_images/my/data-flow.fa2354e0908fecc8.webp) ```mermaid flowchart TD diff --git a/translations/my/7-bank-project/4-state-management/assignment.md b/translations/my/7-bank-project/4-state-management/assignment.md index 8b0e9823f..75f19269d 100644 --- a/translations/my/7-bank-project/4-state-management/assignment.md +++ b/translations/my/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA: **မျှော်လင့်ရသော ရလဒ်:** ဒီအလုပ်ကို ပြီးမြောက်ပြီးနောက် သင့်ဘဏ်အက်ပ်တွင် အလှဆင်ထားပြီး အကျိုးရှိသော "ငွေစာရင်း ထည့်သွင်းရန်" လုပ်ဆောင်ချက်တစ်ခု ပါဝင်မည်ဖြစ်ပြီး အောက်ပါပုံစံအတိုင်း လုပ်ဆောင်မှုနှင့် အပြင်အဆင်များကို ပေးစွမ်းနိုင်ရမည်- -![Screenshot showing an example "Add transaction" dialog](../../../../translated_images/my/dialog.93bba104afeb79f1.png) +![Screenshot showing an example "Add transaction" dialog](../../../../translated_images/my/dialog.93bba104afeb79f1.webp) ## သင့်အကောင်အထည်ဖော်မှုကို စမ်းသပ်ခြင်း diff --git a/translations/my/7-bank-project/README.md b/translations/my/7-bank-project/README.md index 70f9b0913..a89e34d45 100644 --- a/translations/my/7-bank-project/README.md +++ b/translations/my/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: ဒီပရောဂျက်မှာ သင်ဟာ စိတ်ကူးယဉ်ဘဏ်တစ်ခုကို ဘယ်လိုတည်ဆောက်ရမယ်ဆိုတာကို သင်ယူနိုင်ပါမယ်။ ဒီသင်ခန်းစာတွေမှာ ဝက်ဘ်အက်ပ်ကို ဘယ်လိုပုံစံချပြီး လမ်းကြောင်းတွေထည့်ရမယ်၊ ဖောင်တွေတည်ဆောက်ရမယ်၊ state ကို စီမံခန့်ခွဲရမယ်၊ API ကနေ ဒေတာကို ရယူပြီး ဘဏ်ရဲ့ ဒေတာကို ဘယ်လိုရယူရမယ်ဆိုတာကို ရှင်းပြထားပါတယ်။ -| ![Screen1](../../../translated_images/my/screen1.baccbba0f1f93364.png) | ![Screen2](../../../translated_images/my/screen2.123c82a831a1d14a.png) | +| ![Screen1](../../../translated_images/my/screen1.baccbba0f1f93364.webp) | ![Screen2](../../../translated_images/my/screen2.123c82a831a1d14a.webp) | |--------------------------------|--------------------------------| ## သင်ခန်းစာများ diff --git a/translations/my/8-code-editor/1-using-a-code-editor/README.md b/translations/my/8-code-editor/1-using-a-code-editor/README.md index 5be1305f5..7d0e39e8d 100644 --- a/translations/my/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/my/8-code-editor/1-using-a-code-editor/README.md @@ -185,7 +185,7 @@ Alexander Graham Bell ရဲ့ Telephone က အကွာအဝေးကို အရာအားလုံး Load လုပ်ပြီးနောက်မှာ သင့် Code ကို အာရုံစိုက်နိုင်အောင် Design လုပ်ထားတဲ့ ရိုးရှင်းပြီး လှပတဲ့ Workspace ကို တွေ့ပါမယ်။ -![Default VSCode.dev interface](../../../../translated_images/my/default-vscode-dev.5d06881d65c1b323.png) +![Default VSCode.dev interface](../../../../translated_images/my/default-vscode-dev.5d06881d65c1b323.webp) **Neighborhood Tour:** - **Activity Bar** (ဘယ်ဘက် Strip): Explorer 📁, Search 🔍, Source Control 🌿, Extensions 🧩, Settings ⚙️ @@ -233,7 +233,7 @@ VSCode.dev မှာ Fresh Start လုပ်ပြီး Specific Repository 1. [vscode.dev](https://vscode.dev) ကို သွားပါ 2. Welcome Screen မှာ "Open Remote Repository" Button ကို ရှာပြီး Click လုပ်ပါ - ![Open remote repository](../../../../translated_images/my/open-remote-repository.bd9c2598b8949e7f.png) + ![Open remote repository](../../../../translated_images/my/open-remote-repository.bd9c2598b8949e7f.webp) 3. GitHub Repository URL ကို Paste လုပ်ပါ (ဒီ URL ကို စမ်းကြည့်ပါ: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. Enter ကို နှိပ်ပြီး Magic ဖြစ်တာကို ကြည့်ပါ! @@ -242,7 +242,7 @@ VSCode.dev မှာ Fresh Start လုပ်ပြီး Specific Repository Coding Wizard လို ခံစားချင်ပါသလား? Ctrl+Shift+P (Mac မှာ Cmd+Shift+P) Shortcut ကို စမ်းကြည့်ပါ: -![Command Palette](../../../../translated_images/my/palette-menu.4946174e07f42622.png) +![Command Palette](../../../../translated_images/my/palette-menu.4946174e07f42622.webp) **Command Palette က Coding အတွက် Search Engine လိုပါပဲ:** - "open remote" လို့ ရိုက်လိုက်တာနဲ့ Repository Opener ကို ရှာပေးပါမယ် @@ -304,7 +304,7 @@ Architect ရဲ့ Office မှာ Blueprints တွေကို စီမံ 3. Appropriate Extension (`style.css`, `script.js`, `index.html`) ပါတဲ့ Filename ကို ရိုက်ပါ 4. Enter ကို နှိပ်ပြီး File ကို ဖန်တီးပါ -![Creating a new file](../../../../translated_images/my/create-new-file.2814e609c2af9aeb.png) +![Creating a new file](../../../../translated_images/my/create-new-file.2814e609c2af9aeb.webp) **Naming Conventions:** - File ရဲ့ ရည်ရွယ်ချက်ကို ဖော်ပြတဲ့ Descriptive @@ -374,7 +374,7 @@ Extension marketplace က အလွန်စီမံထားပြီး သ 2. Browse လုပ်ပါ သို့မဟုတ် အထူးတစ်ခုခုကို ရှာဖွေပါ 3. စိတ်ဝင်စားစရာကောင်းတဲ့ အရာကို နှိပ်ပြီး အသေးစိတ်ကို ကြည့်ပါ -![Extension marketplace interface](../../../../translated_images/my/extensions.eca0e0c7f59a10b5.png) +![Extension marketplace interface](../../../../translated_images/my/extensions.eca0e0c7f59a10b5.webp) **အဲဒီမှာ တွေ့ရမှာ:** @@ -427,7 +427,7 @@ Extension အများစုမှာ သင့် workflow အလိုက 3. Dropdown မှ "Extension Settings" ကို ရွေးပါ 4. သင့် workflow အလိုက် အဆင်ပြေတဲ့အထိ ညှိပါ -![Customizing extension settings](../../../../translated_images/my/extension-settings.21c752ae4f4cdb78.png) +![Customizing extension settings](../../../../translated_images/my/extension-settings.21c752ae4f4cdb78.webp) **သင့်အနေနဲ့ ညှိချင်နိုင်တဲ့ အရာများ:** - Code formatting (tabs vs spaces, line length, စသည်တို့) diff --git a/translations/my/8-code-editor/1-using-a-code-editor/assignment.md b/translations/my/8-code-editor/1-using-a-code-editor/assignment.md index d85605454..9e8d40c93 100644 --- a/translations/my/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/my/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ VSCode.dev သည် Repository ကို ဖွင့်ရန် အနည် 4. Commit Message ရေးပါ: "Add initial HTML structure" 5. "Commit new file" ကို Click လုပ်ပြီး သင့်ပြောင်းလဲမှုများကို Save လုပ်ပါ -![Creating initial file on GitHub](../../../../translated_images/my/new-file-github.com.c886796d800e8056.png) +![Creating initial file on GitHub](../../../../translated_images/my/new-file-github.com.c886796d800e8056.webp) **ဒီ Initial Setup က ဘာတွေကို အကောင်အထည်ဖော်ထားသလဲ:** - HTML5 Document Structure ကို Semantic Elements ဖြင့် Properly Establish လုပ်ထားသည် @@ -104,7 +104,7 @@ VSCode.dev သည် Repository ကို ဖွင့်ရန် အနည် ✅ **Success Indicator**: Explorer Sidebar တွင် သင့် Project Files တွေကို မြင်ရပြီး Main Editor Area တွင် `index.html` ကို Edit လုပ်နိုင်ပါမည်။ -![Project loaded in VSCode.dev](../../../../translated_images/my/project-on-vscode.dev.e79815a9a95ee7fe.png) +![Project loaded in VSCode.dev](../../../../translated_images/my/project-on-vscode.dev.e79815a9a95ee7fe.webp) **Interface တွင် မြင်ရမည့်အရာများ:** - **Explorer Sidebar**: **သင့် Repository Files နှင့် Folder Structure ကို ပြသသည်** @@ -448,7 +448,7 @@ Extensions များသည် Development Experience ကို တိုး **Installation ပြီးနောက် ရရှိသော ရလဒ်များ:** CodeSwing Install ပြီးပါက သင့် Resume Website ၏ Live Preview ကို Editor တွင် မြင်ရပါမည်။ သင့် Site ရဲ့ အလှပဆုံးပုံစံကို Changes များလုပ်နေစဉ် မြင်နိုင်ပါသည်။ -![CodeSwing extension showing live preview](../../../../translated_images/my/after-codeswing-extension-pb.0ebddddcf73b5509.png) +![CodeSwing extension showing live preview](../../../../translated_images/my/after-codeswing-extension-pb.0ebddddcf73b5509.webp) **Enhanced Interface ကို နားလည်ခြင်း:** - **Split View**: **Code ကို တစ်ဖက်၊ Live Preview ကို တစ်ဖက်တွင် ပြသသည်** diff --git a/translations/my/9-chat-project/README.md b/translations/my/9-chat-project/README.md index 775f24536..13e8c1219 100644 --- a/translations/my/9-chat-project/README.md +++ b/translations/my/9-chat-project/README.md @@ -61,7 +61,7 @@ print(response.choices[0].message.content) သင့်ရဲ့ အပြီးသတ် project ဟာ ဒီလိုပုံစံရှိပါမယ်: -![Chat app interface showing conversation between user and AI assistant](../../../translated_images/my/screenshot.0a1ee0d123df681b.png) +![Chat app interface showing conversation between user and AI assistant](../../../translated_images/my/screenshot.0a1ee0d123df681b.webp) ## 🗺️ AI Application Development ရဲ့ သင့်ရဲ့ လေ့လာရေးခရီး @@ -194,7 +194,7 @@ mindmap **Core Principle**: AI application development ဟာ traditional web development skills တွေကို AI service integration နဲ့ ပေါင်းစပ်ပြီး သုံးစွဲသူတွေကို သဘာဝနဲ့ တုံ့ပြန်မှုကောင်းတဲ့ intelligent applications တွေ ဖန်တီးပေးပါတယ်။ -![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/my/playground.d2b927122224ff8f.png) +![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/my/playground.d2b927122224ff8f.webp) **Playground ရဲ့ အသုံးဝင်မှု**: - **စမ်းသပ်**: GPT-4o-mini, Claude နဲ့ အခြား AI models တွေကို စမ်းသပ်နိုင်တယ် (အခမဲ့!) @@ -204,7 +204,7 @@ mindmap Playground ကို အနည်းငယ် စမ်းသပ်ပြီးရင် "Code" tab ကို နှိပ်ပြီး သင့် programming language ကို ရွေးပြီး implementation code ကို ရယူနိုင်ပါတယ်။ -![Playground choice showing code generation options for different programming languages](../../../translated_images/my/playground-choice.1d23ba7d407f4758.png) +![Playground choice showing code generation options for different programming languages](../../../translated_images/my/playground-choice.1d23ba7d407f4758.webp) ## Python Backend Integration ကို Setup လုပ်ခြင်း @@ -2107,14 +2107,14 @@ mindmap - [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) သို့ **သွားပါ** - GitHub တွင် login လုပ်ထားသည်ကို သေချာစွာ **စစ်ဆေးပြီး** "Use this template" ကို အပေါ်ယံညာဘက်တွင် **နှိပ်ပါ** -![Create from template interface showing the green "Use this template" button](../../../translated_images/my/template.67ad477109d29a2b.png) +![Create from template interface showing the green "Use this template" button](../../../translated_images/my/template.67ad477109d29a2b.webp) **အဆင့် ၂: Codespaces ကို စတင်ပါ** - သင့် newly created repository ကို **ဖွင့်ပါ** - အစိမ်းရောင် "Code" ခလုတ်ကို **နှိပ်ပြီး** "Codespaces" ကို **ရွေးပါ** - "Create codespace on main" ကို **ရွေးပြီး** development environment ကို စတင်ပါ -![Create codespace interface with options for launching cloud development environment](../../../translated_images/my/codespace.bcecbdf5d2747d3d.png) +![Create codespace interface with options for launching cloud development environment](../../../translated_images/my/codespace.bcecbdf5d2747d3d.webp) **အဆင့် ၃: Environment Configuration** သင့် Codespace load ပြီးလျှင် သင်သည် အောက်ပါအရာများကို အသုံးပြုနိုင်ပါမည်- diff --git a/translations/my/README.md b/translations/my/README.md index 065f20574..412507b73 100644 --- a/translations/my/README.md +++ b/translations/my/README.md @@ -72,13 +72,13 @@ Azure AI Foundry Discord Community တွင် ပါဝင်ဆောင် စတင်ရန် [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) သို့ သွားပါ! -![Background](../../translated_images/my/background.148a8d43afde5730.png) +![Background](../../translated_images/my/background.148a8d43afde5730.webp) - အခြေခံမှ RAG အထိ အကြောင်းအရာ များကို ဖွင့်ပြသသည်။ - GenAI နှင့် ကျွန်ုပ်တို့ ရှေ့ဆောင် app ဖြင့် သမိုင်းပုဂ္ဂိုလ်များနှင့် ဝိုင်းယှဉ် ဆက်သွယ်နိုင်သည်။ - ပျော်ရွှင်မှုနှင့် စိတ်ဝင်စားဖွယ်ရာ အသံစဉ်၊ သင့်အနေဖြင့် အချိန်ခရီးသွားနေပါသည်။ -![character](../../translated_images/my/character.5c0dd8e067ffd693.png) +![character](../../translated_images/my/character.5c0dd8e067ffd693.webp) ချင်းချင်း သင်ခန်းစာတိုင်းတွင် လေ့ကျင့်ခန်းတစ်ခုကို ပြီးမြောက်စေရန်၊ နောက်တစ်ခုမှာ အသိပညာ စစ်ဆေးမှုတစ်ခုပြုလုပ်ရန်နှင့် မိမိဆိုင်ရာ သင်ယူမှုအကြောင်းအရာများ အတွက် စိန်ခေါ်မှု တစ်ခု ရှိပါသည်- @@ -115,7 +115,7 @@ Azure AI Foundry Discord Community တွင် ပါဝင်ဆောင် သင်ဖန်တီးထားသော Repository မိတ္တူတွင် **Code** ခလုတ်ကို နှိပ်ပြီး **Open with Codespaces** ကို ရွေးချယ်ပါ။ ၎င်းသည် သင်အလုပ်လုပ်ရန် Codespace အသစ် တစ်ခု ဖန်တီးပေးပါလိမ့်မည်။ -![Codespace](../../translated_images/my/createcodespace.0238bbf4d7a8d955.png) +![Codespace](../../translated_images/my/createcodespace.0238bbf4d7a8d955.webp) #### သင်၏ ကွန်ပြူတာတွင် သင်ခန်းစာများကို ပြေးရန် diff --git a/translations/my/for-teachers.md b/translations/my/for-teachers.md index 3e8896592..e9e550791 100644 --- a/translations/my/for-teachers.md +++ b/translations/my/for-teachers.md @@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA: - Moodle Cloud တွင် Common Cartridge support အကန့်အသတ်ရှိသည်။ Canvas တွင်လည်း upload လုပ်နိုင်သော Moodle file ကို အသုံးပြုရန် ဦးစားပေးပါ။ - Import ပြီးနောက် modules, due dates, quiz settings များကို သင်၏ term schedule နှင့် ကိုက်ညီစေရန် ပြန်လည်သုံးသပ်ပါ။ -![Moodle](../../translated_images/my/moodle.94eb93d714a50cb2.png) +![Moodle](../../translated_images/my/moodle.94eb93d714a50cb2.webp) > Moodle classroom အတွင်းရှိ သင်ခန်းစာများ -![Canvas](../../translated_images/my/canvas.fbd605ff8e5b8aff.png) +![Canvas](../../translated_images/my/canvas.fbd605ff8e5b8aff.webp) > Canvas အတွင်းရှိ သင်ခန်းစာများ ### Repo ကို တိုက်ရိုက်အသုံးပြုခြင်း (Classroom မပါ) diff --git a/translations/ne/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/ne/1-getting-started-lessons/1-intro-to-programming-languages/README.md index cf68a0373..af5edb177 100644 --- a/translations/ne/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/ne/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: आज, हामी ती अद्भुत उपकरणहरूको अन्वेषण गर्नेछौं जसले आधुनिक वेब विकासलाई सम्भव मात्र होइन, गम्भीर रूपमा लत लाग्ने बनाउँछ। म त्यही सम्पादकहरू, ब्राउजरहरू, र वर्कफ्लोहरूको कुरा गर्दैछु जुन नेटफ्लिक्स, स्पोटिफाई, र तपाईंको मनपर्ने इन्डी एप स्टुडियोका डेभलपरहरूले हरेक दिन प्रयोग गर्छन्। र यहाँ तपाईंलाई खुशीको नाच गर्न बनाउने भाग छ: यी पेशेवर-ग्रेड, उद्योग-मानक उपकरणहरूको अधिकांश पूर्ण रूपमा निःशुल्क छन्! -![प्रोग्रामिङ परिचय](../../../../translated_images/ne/webdev101-programming.d6e3f98e61ac4bff.png) +![प्रोग्रामिङ परिचय](../../../../translated_images/ne/webdev101-programming.d6e3f98e61ac4bff.webp) > स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा ```mermaid diff --git a/translations/ne/1-getting-started-lessons/2-github-basics/README.md b/translations/ne/1-getting-started-lessons/2-github-basics/README.md index b10b3a158..b0fd74b69 100644 --- a/translations/ne/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/ne/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: हामी यो यात्रा सँगै गर्नेछौं, एक कदममा। कुनै हतार छैन, कुनै दबाब छैन – केवल तपाईं, म, र केही साँच्चै चिसो उपकरणहरू जुन तपाईंको नयाँ साथी बन्नेछन्! -![GitHub परिचय](../../../../translated_images/ne/webdev101-github.8846d7971abef6f9.png) +![GitHub परिचय](../../../../translated_images/ne/webdev101-github.8846d7971abef6f9.webp) > स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा ```mermaid @@ -594,7 +594,7 @@ flowchart TD ✅ 'सुरुवाती-अनुकूल' रिपोजिटरीहरू खोज्नको लागि [ट्याग 'good-first-issue' द्वारा खोज्नुहोस्](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)। -![रिपो स्थानीय रूपमा प्रतिलिपि गर्नुहोस्](../../../../translated_images/ne/clone_repo.5085c48d666ead57.png) +![रिपो स्थानीय रूपमा प्रतिलिपि गर्नुहोस्](../../../../translated_images/ne/clone_repo.5085c48d666ead57.webp) कोड प्रतिलिपि गर्ने धेरै तरिकाहरू छन्। एउटा तरिका भनेको रिपोजिटरीको सामग्री "क्लोन" गर्नु हो, HTTPS, SSH, वा GitHub CLI (कमाण्ड लाइन इन्टरफेस) प्रयोग गरेर। diff --git a/translations/ne/1-getting-started-lessons/3-accessibility/README.md b/translations/ne/1-getting-started-lessons/3-accessibility/README.md index a62bbe571..86ca0ac4c 100644 --- a/translations/ne/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/ne/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # पहुँचयोग्य वेबपेजहरू बनाउने -![पहुंचयोग्यता सम्बन्धी सबै कुरा](../../../../translated_images/ne/webdev101-a11y.8ef3025c858d897a.png) +![पहुंचयोग्यता सम्बन्धी सबै कुरा](../../../../translated_images/ne/webdev101-a11y.8ef3025c858d897a.webp) > स्केच नोट [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा ```mermaid diff --git a/translations/ne/2-js-basics/1-data-types/README.md b/translations/ne/2-js-basics/1-data-types/README.md index c95e2e5f5..5bd685001 100644 --- a/translations/ne/2-js-basics/1-data-types/README.md +++ b/translations/ne/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # जाभास्क्रिप्ट आधारभूत: डाटा प्रकारहरू -![जाभास्क्रिप्ट आधारभूत - डाटा प्रकारहरू](../../../../translated_images/ne/webdev101-js-datatypes.4cc470179730702c.png) +![जाभास्क्रिप्ट आधारभूत - डाटा प्रकारहरू](../../../../translated_images/ne/webdev101-js-datatypes.4cc470179730702c.webp) > स्केच नोट [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा ```mermaid diff --git a/translations/ne/2-js-basics/2-functions-methods/README.md b/translations/ne/2-js-basics/2-functions-methods/README.md index 8ba909304..183377694 100644 --- a/translations/ne/2-js-basics/2-functions-methods/README.md +++ b/translations/ne/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # जाभास्क्रिप्ट आधारभूत: मेथड्स र फङ्सन्स -![जाभास्क्रिप्ट आधारभूत - फङ्सन्स](../../../../translated_images/ne/webdev101-js-functions.be049c4726e94f8b.png) +![जाभास्क्रिप्ट आधारभूत - फङ्सन्स](../../../../translated_images/ne/webdev101-js-functions.be049c4726e94f8b.webp) > स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा ```mermaid diff --git a/translations/ne/2-js-basics/3-making-decisions/README.md b/translations/ne/2-js-basics/3-making-decisions/README.md index 687010a76..dec6284d8 100644 --- a/translations/ne/2-js-basics/3-making-decisions/README.md +++ b/translations/ne/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # जाभास्क्रिप्ट आधारभूत: निर्णय लिनु -![जाभास्क्रिप्ट आधारभूत - निर्णय लिनु](../../../../translated_images/ne/webdev101-js-decisions.69e1b20f272dd1f0.png) +![जाभास्क्रिप्ट आधारभूत - निर्णय लिनु](../../../../translated_images/ne/webdev101-js-decisions.69e1b20f272dd1f0.webp) > स्केच नोट [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा diff --git a/translations/ne/2-js-basics/4-arrays-loops/README.md b/translations/ne/2-js-basics/4-arrays-loops/README.md index 68b6019c6..09e3c3d94 100644 --- a/translations/ne/2-js-basics/4-arrays-loops/README.md +++ b/translations/ne/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # जाभास्क्रिप्ट आधारभूत: एरेहरू र लूपहरू -![जाभास्क्रिप्ट आधारभूत - एरेहरू](../../../../translated_images/ne/webdev101-js-arrays.439d7528b8a29455.png) +![जाभास्क्रिप्ट आधारभूत - एरेहरू](../../../../translated_images/ne/webdev101-js-arrays.439d7528b8a29455.webp) > स्केच नोट [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा ```mermaid diff --git a/translations/ne/3-terrarium/1-intro-to-html/README.md b/translations/ne/3-terrarium/1-intro-to-html/README.md index 9d7e66612..51dd99839 100644 --- a/translations/ne/3-terrarium/1-intro-to-html/README.md +++ b/translations/ne/3-terrarium/1-intro-to-html/README.md @@ -26,7 +26,7 @@ journey Build terrarium: 5: Student ``` -![HTML को परिचय](../../../../translated_images/ne/webdev101-html.4389c2067af68e98.png) +![HTML को परिचय](../../../../translated_images/ne/webdev101-html.4389c2067af68e98.webp) > स्केच नोट [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा HTML, वा हाइपरटेक्स्ट मार्कअप भाषा, तपाईंले कहिल्यै भ्रमण गरेको प्रत्येक वेबसाइटको आधार हो। HTML लाई वेब पृष्ठहरूको संरचना दिने कंकालको रूपमा सोच्नुहोस् – यसले सामग्री कहाँ जान्छ, कसरी व्यवस्थित हुन्छ, र प्रत्येक टुक्राले के प्रतिनिधित्व गर्दछ भनेर परिभाषित गर्दछ। CSS ले पछि तपाईंको HTML लाई रंग र लेआउटको साथ "सजाउनेछ", र जाभास्क्रिप्टले अन्तरक्रियात्मकता संग यसलाई जीवनमा ल्याउनेछ, HTML ले सबै कुरा सम्भव बनाउने आवश्यक संरचना प्रदान गर्दछ। @@ -88,7 +88,7 @@ HTML कोडमा प्रवेश गर्नु अघि, तपाई 4. एक्सप्लोरर प्यानमा, "नयाँ फाइल" आइकन क्लिक गर्नुहोस् 5. तपाईंको फाइललाई `index.html` नाम दिनुहोस् -![VS कोड एक्सप्लोरर नयाँ फाइल सिर्जना देखाउँदै](../../../../translated_images/ne/vs-code-index.e2986cf919471eb9.png) +![VS कोड एक्सप्लोरर नयाँ फाइल सिर्जना देखाउँदै](../../../../translated_images/ne/vs-code-index.e2986cf919471eb9.webp) **विकल्प २: टर्मिनल कमाण्डहरू प्रयोग गर्दै** ```bash diff --git a/translations/ne/3-terrarium/2-intro-to-css/README.md b/translations/ne/3-terrarium/2-intro-to-css/README.md index cec11929e..d84c5dc6b 100644 --- a/translations/ne/3-terrarium/2-intro-to-css/README.md +++ b/translations/ne/3-terrarium/2-intro-to-css/README.md @@ -30,7 +30,7 @@ journey Glass reflections: 5: Student ``` -![CSS को परिचय](../../../../translated_images/ne/webdev101-css.3f7af5991bf53a20.png) +![CSS को परिचय](../../../../translated_images/ne/webdev101-css.3f7af5991bf53a20.webp) > स्केच नोट [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा तपाईंको HTML टेरारियम कति सामान्य देखिन्थ्यो भन्ने सम्झनुहुन्छ? CSS ले त्यो साधारण संरचनालाई दृश्यात्मक रूपमा आकर्षक बनाउने काम गर्छ। @@ -205,7 +205,7 @@ body { तपाईंको ब्राउजरको डेभलपर टूल्स (F12) खोल्नुहोस्, एलिमेन्ट्स ट्याबमा जानुहोस्, र तपाईंको `

` तत्व निरीक्षण गर्नुहोस्। तपाईंले देख्नुहुनेछ कि यसले शरीरबाट फन्ट परिवार इनहेरिट गर्छ: -![इनहेरिट गरिएको फन्ट](../../../../translated_images/ne/1.cc07a5cbe114ad1d.png) +![इनहेरिट गरिएको फन्ट](../../../../translated_images/ne/1.cc07a5cbe114ad1d.webp) ✅ **प्रयोग समय**: `` मा `color`, `line-height`, वा `text-align` जस्ता अन्य इनहेरिटेबल गुणहरू सेट गर्न प्रयास गर्नुहोस्। तपाईंको हेडिङ र अन्य तत्वहरूमा के हुन्छ? @@ -564,7 +564,7 @@ Agent मोड प्रयोग गरेर निम्न चुनौत तपाईंले हल्का रंगका अण्डाकार आकारहरू सिर्जना गर्नुहुनेछ जसले ग्लास रिफ्लेक्सनलाई नक्कल गर्छ। यो प्रविधि Renaissance चित्रकारहरू जस्तै Jan van Eyck ले चित्रित ग्लासलाई तीन-आयामीय देखाउन प्रकाश र रिफ्लेक्सन प्रयोग गरेको जस्तै हो। तपाईंले निम्न लक्ष्य राख्नुहुनेछ: -![finished terrarium](../../../../translated_images/ne/terrarium-final.2f07047ffc597d0a.png) +![finished terrarium](../../../../translated_images/ne/terrarium-final.2f07047ffc597d0a.webp) **तपाईंको चुनौती:** - **सिर्जना गर्नुहोस्** ग्लास रिफ्लेक्सनका लागि हल्का रंगका अण्डाकार आकारहरू diff --git a/translations/ne/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/ne/3-terrarium/3-intro-to-DOM-and-closures/README.md index 9080bb528..75b5c6db2 100644 --- a/translations/ne/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/ne/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -26,7 +26,7 @@ journey Complete terrarium: 5: Student ``` -![DOM र क्लोजर](../../../../translated_images/ne/webdev101-js.10280393044d7eaa.png) +![DOM र क्लोजर](../../../../translated_images/ne/webdev101-js.10280393044d7eaa.webp) > स्केच नोट [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा वेब विकासको सबैभन्दा रोचक पक्षमा स्वागत छ - चीजहरूलाई अन्तरक्रियात्मक बनाउने! डकुमेन्ट अब्जेक्ट मोडेल (DOM) तपाईंको HTML र जाभास्क्रिप्ट बीचको पुल जस्तै हो, र आज हामी यसलाई तपाईंको टेरारियमलाई जीवन्त बनाउन प्रयोग गर्नेछौं। जब टिम बर्नर्स-लीले पहिलो वेब ब्राउजर बनाएका थिए, उनले वेबलाई गतिशील र अन्तरक्रियात्मक बनाउन सक्ने दस्तावेजहरूको कल्पना गरेका थिए - DOM ले त्यो दृष्टिकोणलाई सम्भव बनाउँछ। @@ -105,7 +105,7 @@ flowchart TD style Q fill:#ffebee ``` -![DOM ट्री प्रतिनिधित्व](../../../../translated_images/ne/dom-tree.7daf0e763cbbba92.png) +![DOM ट्री प्रतिनिधित्व](../../../../translated_images/ne/dom-tree.7daf0e763cbbba92.webp) > DOM र HTML मार्कअपको प्रतिनिधित्व जसले यसलाई सन्दर्भित गर्छ। [ओल्फा नासराओई](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) बाट @@ -150,7 +150,7 @@ flowchart LR > 💡 **क्लोजर बुझ्दै**: क्लोजरहरू जाभास्क्रिप्टमा महत्त्वपूर्ण विषय हुन्, र धेरै विकासकर्ताहरूले तिनीहरूलाई पूर्ण रूपमा सैद्धान्तिक पक्षहरू बुझ्नुअघि वर्षौंसम्म प्रयोग गर्छन्। आज, हामी व्यावहारिक अनुप्रयोगमा केन्द्रित छौं - तपाईंले अन्तरक्रियात्मक सुविधाहरू निर्माण गर्दा क्लोजरहरू स्वाभाविक रूपमा देखा पर्ने देख्नुहुनेछ। बुझाइ वास्तविक समस्याहरू समाधान गर्ने तरिकामा देखेर विकास हुनेछ। -![DOM ट्री प्रतिनिधित्व](../../../../translated_images/ne/dom-tree.7daf0e763cbbba92.png) +![DOM ट्री प्रतिनिधित्व](../../../../translated_images/ne/dom-tree.7daf0e763cbbba92.webp) > DOM र HTML मार्कअपको प्रतिनिधित्व जसले यसलाई सन्दर्भित गर्छ। [ओल्फा नासराओई](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) बाट @@ -556,7 +556,7 @@ function stopElementDrag() { - **क्रस-डिभाइस समर्थन**: डेस्कटप र मोबाइलमा काम गर्छ - **प्रदर्शन सचेत**: कुनै मेमोरी लीक वा अनावश्यक गणनाहरू छैनन् -![समाप्त टेरारियम](../../../../translated_images/ne/terrarium-final.0920f16e87c13a84.png) +![समाप्त टेरारियम](../../../../translated_images/ne/terrarium-final.0920f16e87c13a84.webp) --- diff --git a/translations/ne/3-terrarium/solution/README.md b/translations/ne/3-terrarium/solution/README.md index bd128c6bf..4b18625d9 100644 --- a/translations/ne/3-terrarium/solution/README.md +++ b/translations/ne/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: सानो ड्र्याग र ड्रप कोड-मेडिटेसन। थोरै HTML, JS, र CSS प्रयोग गरेर तपाईं वेब इन्टरफेस बनाउन, यसलाई स्टाइल गर्न, र अन्तरक्रिया थप्न सक्नुहुन्छ। -![मेरो टेरारियम](../../../../translated_images/ne/screenshot_gray.0c796099a1f9f25e.png) +![मेरो टेरारियम](../../../../translated_images/ne/screenshot_gray.0c796099a1f9f25e.webp) ## श्रेय diff --git a/translations/ne/5-browser-extension/1-about-browsers/README.md b/translations/ne/5-browser-extension/1-about-browsers/README.md index 5b793d7ff..80172f0fd 100644 --- a/translations/ne/5-browser-extension/1-about-browsers/README.md +++ b/translations/ne/5-browser-extension/1-about-browsers/README.md @@ -26,7 +26,7 @@ journey Polish experience: 5: Student ``` -![ब्राउजर स्केच नोट](../../../../translated_images/ne/browser.60317c9be8b7f84a.jpg) +![ब्राउजर स्केच नोट](../../../../translated_images/ne/browser.60317c9be8b7f84a.webp) > स्केच नोट [वसिम चेघम](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) द्वारा ## प्रि-लेक्चर क्विज @@ -79,7 +79,7 @@ mindmap ✅ **थोरै इतिहास**: पहिलो ब्राउजर 'वर्ल्डवाइडवेब' भनिन्थ्यो र यो सर टिमोथी बर्नर्स-लीले १९९० मा निर्माण गरेका थिए। -![प्रारम्भिक ब्राउजरहरू](../../../../translated_images/ne/earlybrowsers.d984b711cdf3a42d.jpg) +![प्रारम्भिक ब्राउजरहरू](../../../../translated_images/ne/earlybrowsers.d984b711cdf3a42d.webp) > केही प्रारम्भिक ब्राउजरहरू, [करेन म्याकग्रेन](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) मार्फत ### ब्राउजरहरूले वेब सामग्री कसरी प्रक्रिया गर्छन् @@ -198,7 +198,7 @@ quadrantChart एक्सटेन्सन स्थापना प्रक्रिया बुझ्नाले तपाईंलाई प्रयोगकर्ताहरूले तपाईंको एक्सटेन्सन स्थापना गर्दा अनुभव गर्ने कुराको पूर्वानुमान गर्न मद्दत गर्छ। स्थापना प्रक्रिया आधुनिक ब्राउजरहरूमा मानकीकृत छ, इन्टरफेस डिजाइनमा साना भिन्नताहरूका साथ। -![एज ब्राउजरको स्क्रिनशट जसमा edge://extensions पृष्ठ र सेटिङ मेनु खुला छ](../../../../translated_images/ne/install-on-edge.d68781acaf0b3d3d.png) +![एज ब्राउजरको स्क्रिनशट जसमा edge://extensions पृष्ठ र सेटिङ मेनु खुला छ](../../../../translated_images/ne/install-on-edge.d68781acaf0b3d3d.webp) > **महत्वपूर्ण**: आफ्नो एक्सटेन्सन परीक्षण गर्दा डेभलपर मोड अन गर्नुहोस् र अन्य स्टोरहरूबाट एक्सटेन्सनहरू अनुमति दिन सुनिश्चित गर्नुहोस्। @@ -313,10 +313,10 @@ project-root/ ### एक्सटेन्सन दृश्यहरूको अवलोकन **सेटअप दृश्य** - पहिलो पटक प्रयोगकर्ता कन्फिगरेसन: -![सम्पन्न एक्सटेन्सनको स्क्रिनशट जसले क्षेत्र नाम र API कीको लागि इनपुटहरू भएको फारम देखाउँछ।](../../../../translated_images/ne/1.b6da8c1394b07491.png) +![सम्पन्न एक्सटेन्सनको स्क्रिनशट जसले क्षेत्र नाम र API कीको लागि इनपुटहरू भएको फारम देखाउँछ।](../../../../translated_images/ne/1.b6da8c1394b07491.webp) **परिणाम दृश्य** - कार्बन फुटप्रिन्ट डेटा प्रदर्शन: -![सम्पन्न एक्सटेन्सनको स्क्रिनशट जसले US-NEISO क्षेत्रको लागि कार्बन प्रयोग र फोसिल इन्धन प्रतिशतको मानहरू देखाउँछ।](../../../../translated_images/ne/2.1dae52ff08042246.png) +![सम्पन्न एक्सटेन्सनको स्क्रिनशट जसले US-NEISO क्षेत्रको लागि कार्बन प्रयोग र फोसिल इन्धन प्रतिशतको मानहरू देखाउँछ।](../../../../translated_images/ne/2.1dae52ff08042246.webp) ### कन्फिगरेसन फारम निर्माण गर्दै diff --git a/translations/ne/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/ne/5-browser-extension/2-forms-browsers-local-storage/README.md index c6f8a7f5f..9179950ed 100644 --- a/translations/ne/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/ne/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -268,7 +268,7 @@ stateDiagram-v2 ClearStorage --> FirstTime: Back to setup ``` -![लोकल स्टोरेज प्यान](../../../../translated_images/ne/localstorage.472f8147b6a3f8d1.png) +![लोकल स्टोरेज प्यान](../../../../translated_images/ne/localstorage.472f8147b6a3f8d1.webp) > ⚠️ **सुरक्षा विचार**: उत्पादन अनुप्रयोगहरूमा, लोकल स्टोरेजमा API कुञ्जीहरू भण्डारण गर्दा सुरक्षा जोखिमहरू हुन्छन् किनभने जाभास्क्रिप्टले यो डाटामा पहुँच गर्न सक्छ। सिक्ने उद्देश्यका लागि, यो दृष्टिकोण ठीक छ, तर वास्तविक अनुप्रयोगहरूले संवेदनशील प्रमाणपत्रहरूको लागि सुरक्षित सर्भर-साइड स्टोरेज प्रयोग गर्नुपर्छ। diff --git a/translations/ne/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/ne/5-browser-extension/3-background-tasks-and-performance/README.md index 0636939da..e7beb287e 100644 --- a/translations/ne/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/ne/5-browser-extension/3-background-tasks-and-performance/README.md @@ -126,7 +126,7 @@ flowchart LR यसलाई प्रयास गरौं। एउटा वेबसाइट खोल्नुहोस् (Microsoft.com राम्रो काम गर्दछ) र 'रिकर्ड' बटन क्लिक गर्नुहोस्। अब पृष्ठलाई रिफ्रेस गर्नुहोस् र प्रोफाइलरले के भइरहेको छ भनेर क्याप्चर गर्न हेर्नुहोस्। जब तपाईं रेकर्डिङ रोक्नुहुन्छ, तपाईंले ब्राउजरले साइटलाई 'स्क्रिप्ट', 'रेन्डर', र 'पेन्ट' गर्ने तरिकाको विस्तृत विवरण देख्नुहुनेछ। यो मिशन कन्ट्रोलले रकेट प्रक्षेपणको समयमा प्रत्येक प्रणालीलाई अनुगमन गर्ने तरिकाको जस्तै हो - तपाईंलाई वास्तविक समयमा के भइरहेको छ र कहिले भइरहेको छ भन्ने डेटा प्राप्त हुन्छ। -![एज प्रोफाइलर](../../../../translated_images/ne/profiler.5a4a62479c5df01c.png) +![एज प्रोफाइलर](../../../../translated_images/ne/profiler.5a4a62479c5df01c.webp) ✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) मा थप विवरणहरू छन् यदि तपाईं गहिराइमा जान चाहनुहुन्छ भने। @@ -136,11 +136,11 @@ flowchart LR प्रोफाइल टाइमलाइनको एक भाग चयन गरेर र सारांश प्यान हेरेर तपाईंको पृष्ठको प्रदर्शनको स्न्यापशट प्राप्त गर्नुहोस्: -![एज प्रोफाइलर स्न्यापशट](../../../../translated_images/ne/snapshot.97750180ebcad737.png) +![एज प्रोफाइलर स्न्यापशट](../../../../translated_images/ne/snapshot.97750180ebcad737.webp) इभेन्ट लग प्यान जाँच गर्नुहोस् कि कुनै इभेन्ट १५ मिलिसेकेन्ड भन्दा लामो समय लागेको छ कि छैन: -![एज इभेन्ट लग](../../../../translated_images/ne/log.804026979f3707e0.png) +![एज इभेन्ट लग](../../../../translated_images/ne/log.804026979f3707e0.webp) ✅ तपाईंको प्रोफाइलरलाई चिन्नुहोस्! यस साइटमा डेभलपर टूल्स खोल्नुहोस् र कुनै पनि बाधाहरू छन् कि छैनन् हेर्नुहोस्। सबैभन्दा ढिलो लोड हुने सम्पत्ति के हो? सबैभन्दा छिटो? diff --git a/translations/ne/5-browser-extension/README.md b/translations/ne/5-browser-extension/README.md index 149e42396..63bd77815 100644 --- a/translations/ne/5-browser-extension/README.md +++ b/translations/ne/5-browser-extension/README.md @@ -23,7 +23,7 @@ CO_OP_TRANSLATOR_METADATA: ### क्रेडिट्स -![हरियो ब्राउजर एक्स्टेन्सन](../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.png) +![हरियो ब्राउजर एक्स्टेन्सन](../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.webp) ## क्रेडिट्स diff --git a/translations/ne/5-browser-extension/solution/README.md b/translations/ne/5-browser-extension/solution/README.md index 66b8b344b..354557249 100644 --- a/translations/ne/5-browser-extension/solution/README.md +++ b/translations/ne/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow को C02 Signal API प्रयोग गरेर बिजुलीको प्रयोग ट्र्याक गर्न, एउटा ब्राउजर एक्स्टेन्सन बनाउनुहोस् जसले तपाईंलाई तपाईंको क्षेत्रको बिजुली प्रयोगको भार कस्तो छ भनेर ब्राउजरमै सम्झना दिलाउन सक्छ। यो एक्स्टेन्सनलाई अनियमित रूपमा प्रयोग गर्दा तपाईंले यस जानकारीको आधारमा आफ्नो गतिविधिहरूको निर्णय लिन मद्दत गर्नेछ। -![एक्स्टेन्सन स्क्रिनसट](../../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.png) +![एक्स्टेन्सन स्क्रिनसट](../../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.webp) ## सुरु गर्न @@ -31,7 +31,7 @@ npm run build Edge मा स्थापना गर्न, ब्राउजरको माथिल्लो दायाँ कुनामा रहेको 'तीन डट' मेनु प्रयोग गरेर Extensions प्यानल खोज्नुहोस्। त्यहाँबाट, 'Load Unpacked' चयन गरेर नयाँ एक्स्टेन्सन लोड गर्नुहोस्। प्रम्प्टमा 'dist' फोल्डर खोल्नुहोस् र एक्स्टेन्सन लोड हुनेछ। यसलाई प्रयोग गर्न, तपाईंलाई CO2 Signal को API को लागि API key ([यहाँ इमेल मार्फत प्राप्त गर्नुहोस्](https://www.co2signal.com/) - यस पृष्ठमा आफ्नो इमेल बक्समा प्रविष्ट गर्नुहोस्) र [Electricity Map](https://www.electricitymap.org/map) सँग सम्बन्धित [तपाईंको क्षेत्रको कोड](http://api.electricitymap.org/v3/zones) चाहिन्छ (उदाहरणका लागि, बोस्टनमा, म 'US-NEISO' प्रयोग गर्छु)। -![स्थापना गर्दै](../../../../translated_images/ne/install-on-edge.78634f02842c4828.png) +![स्थापना गर्दै](../../../../translated_images/ne/install-on-edge.78634f02842c4828.webp) एक पटक API key र क्षेत्र एक्स्टेन्सन इन्टरफेसमा प्रविष्ट गरेपछि, ब्राउजर एक्स्टेन्सन बारमा रहेको रङ्गीन डटले तपाईंको क्षेत्रको ऊर्जा प्रयोगलाई प्रतिबिम्बित गर्न परिवर्तन गर्नेछ र तपाईंलाई ऊर्जा-गहन गतिविधिहरूको लागि उपयुक्त सल्लाह दिनेछ। यो 'डट' प्रणालीको अवधारणा मलाई [Energy Lollipop एक्स्टेन्सन](https://energylollipop.com/) बाट क्यालिफोर्नियाको उत्सर्जनका लागि प्रेरित गरिएको हो। diff --git a/translations/ne/5-browser-extension/solution/translation/README.fr.md b/translations/ne/5-browser-extension/solution/translation/README.fr.md index 36cd33ce8..ea653e64f 100644 --- a/translations/ne/5-browser-extension/solution/translation/README.fr.md +++ b/translations/ne/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow को C02 Signal API प्रयोग गरेर बिजुली खपत ट्र्याक गर्दै, एउटा ब्राउजर एक्स्टेन्सन बनाउनुहोस् जसले तपाईंलाई तपाईंको क्षेत्रको बिजुली खपतको बारेमा सिधै ब्राउजरमा सम्झना दिन्छ। यो विशेष एक्स्टेन्सनको प्रयोगले तपाईंलाई यी जानकारीहरूको आधारमा तपाईंको गतिविधिहरूको बारेमा निर्णय लिन मद्दत गर्नेछ। -![एक्स्टेन्सनको स्क्रिनसट](../../../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.png) +![एक्स्टेन्सनको स्क्रिनसट](../../../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.webp) ## सुरु गर्न @@ -31,7 +31,7 @@ npm run build Edge मा स्थापना गर्न, ब्राउजरको माथिल्लो दायाँ कुनामा रहेको 'तीन बिन्दु' मेनु प्रयोग गरेर Extensions प्यानल खोज्नुहोस्। त्यहाँबाट, 'लोड अनजिप्ड एक्स्टेन्सन' चयन गरेर नयाँ एक्स्टेन्सन लोड गर्नुहोस्। प्रॉम्प्टमा 'dist' फोल्डर खोल्नुहोस्, र एक्स्टेन्सन लोड हुनेछ। यसलाई प्रयोग गर्न, तपाईंलाई CO2 Signal API को लागि API की चाहिन्छ ([यहाँ ईमेल मार्फत प्राप्त गर्नुहोस्](https://www.co2signal.com/) - यो पृष्ठमा रहेको बाकसमा तपाईंको ईमेल प्रविष्ट गर्नुहोस्) र तपाईंको क्षेत्रको लागि [कोड](http://api.electricitymap.org/v3/zones) जुन [बिजुलीको नक्सा](https://www.electricitymap.org/map) सँग मेल खान्छ (उदाहरणका लागि, बोस्टनमा, म 'US-NEISO' प्रयोग गर्छु)। -![स्थापना](../../../../../translated_images/ne/install-on-edge.78634f02842c4828.png) +![स्थापना](../../../../../translated_images/ne/install-on-edge.78634f02842c4828.webp) एक पटक API की र क्षेत्र एक्स्टेन्सन इन्टरफेसमा प्रविष्ट गरेपछि, ब्राउजरको एक्स्टेन्सन बारमा रहेको रङ्गीन बिन्दु तपाईंको क्षेत्रको ऊर्जा खपतलाई प्रतिबिम्बित गर्न परिवर्तन हुनुपर्छ र तपाईंलाई ऊर्जा-गहन गतिविधिहरूको बारेमा संकेत दिनुपर्छ जुन तपाईंले गर्न उपयुक्त ठान्न सक्नुहुन्छ। यो 'बिन्दु' प्रणालीको अवधारणा मलाई [Energy Lollipop एक्स्टेन्सन](https://energylollipop.com/) बाट क्यालिफोर्नियाका उत्सर्जनहरूको लागि प्रेरित भएको हो। diff --git a/translations/ne/5-browser-extension/solution/translation/README.hi.md b/translations/ne/5-browser-extension/solution/translation/README.hi.md index e911add09..72a83823e 100644 --- a/translations/ne/5-browser-extension/solution/translation/README.hi.md +++ b/translations/ne/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow को CO2 सिग्नल एपीआई प्रयोग गरेर बिजुलीको उपयोग ट्र्याक गर्ने ब्राउज़र एक्सटेंशन बनाउनुहोस्, जसले तपाईंलाई तपाईंको क्षेत्रको बिजुलीको उपयोग कत्तिको भारी छ भनेर रिमाइन्डर दिन्छ। यो एक्सटेंशन प्रयोग गर्दा, तपाईंले यस जानकारीको आधारमा आफ्नो गतिविधिहरूमा निर्णय लिन सक्नुहुन्छ। -![एक्सटेंशन स्क्रिनशट](../../../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.png) +![एक्सटेंशन स्क्रिनशट](../../../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.webp) ## सुरु गर्न @@ -31,7 +31,7 @@ npm run build एज ब्राउज़रमा इन्स्टल गर्न, ब्राउज़रको माथिल्लो दायाँ कुनामा रहेको 'तीन डट' मेनु प्रयोग गरेर एक्सटेंशन प्यानल खोज्नुहोस्। त्यहाँबाट, 'लोड अनप्याक्ड' विकल्प छान्नुहोस्। प्रॉम्प्टमा 'dist' फोल्डर खोल्नुहोस्, र एक्सटेंशन लोड हुनेछ। यसलाई प्रयोग गर्न, तपाईंलाई CO2 सिग्नलको एपीआई ([यहाँ ईमेल मार्फत प्राप्त गर्नुहोस्](https://www.co2snal.com/) - यो पृष्ठमा आफ्नो ईमेल बक्समा प्रविष्ट गर्नुहोस्) र [आफ्नो क्षेत्रको कोड](http://api.electricitymap.org/v3/zones) [इलेक्ट्रिसिटी म्याप](https://www.electricitymap.org/map) बाट आवश्यक हुनेछ (उदाहरणका लागि, बोस्टनमा, म 'US-NEISO' प्रयोग गर्छु)। -![installing](../../../../../translated_images/ne/install-on-edge.78634f02842c4828.png) +![installing](../../../../../translated_images/ne/install-on-edge.78634f02842c4828.webp) एक पटक एपीआई कुंजी र क्षेत्र एक्सटेंशन इन्टरफेसमा इनपुट गरेपछि, ब्राउज़र एक्सटेंशन बारमा रहेको रंगीन डटले तपाईंको क्षेत्रको ऊर्जा उपयोगलाई प्रतिबिम्बित गर्नुपर्छ र तपाईंलाई संकेत दिनुपर्छ कि ऊर्जा-गहन गतिविधिहरू तपाईंको प्रदर्शनका लागि उपयुक्त छन् कि छैनन्। यो 'डट' प्रणालीको अवधारणा मलाई क्यालिफोर्नियाको उत्सर्जनका लागि [एनर्जी लॉलीपप एक्सटेंशन](https://energylollipop.com/) बाट प्रेरित भएको हो। diff --git a/translations/ne/5-browser-extension/solution/translation/README.it.md b/translations/ne/5-browser-extension/solution/translation/README.it.md index b2ebbe795..eeae321d2 100644 --- a/translations/ne/5-browser-extension/solution/translation/README.it.md +++ b/translations/ne/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow को Signal C02 API प्रयोग गरेर आफ्नो क्षेत्रको विद्युत उपयोगको निगरानी गर्न ब्राउजर एक्सटेन्सन बनाइनेछ। यसले तपाईंको ब्राउजरमा सिधै स्मरण गराउने सुविधा दिनेछ कि तपाईंको क्षेत्रको विद्युत उपयोग कति भारी छ। यो विशेष एक्सटेन्सन प्रयोग गर्दा तपाईं आफ्नो गतिविधिहरूलाई यी जानकारीको आधारमा मूल्याङ्कन गर्न सक्नुहुन्छ। -![एक्सटेन्सनको स्क्रिनशट](../../../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.png) +![एक्सटेन्सनको स्क्रिनशट](../../../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.webp) ## सुरु गर्न @@ -31,7 +31,7 @@ npm run build Edge मा स्थापना गर्न, ब्राउजरको माथिल्लो दायाँ कुनामा रहेको "तीन बिन्दु" मेनु प्रयोग गरेर एक्सटेन्सन प्यानल खोज्नुहोस्। यदि सक्रिय छैन भने, डेभलपर मोड (तल बायाँ) सक्रिय गर्नुहोस्। "अनप्याक्ड लोड" चयन गरेर नयाँ एक्सटेन्सन लोड गर्नुहोस्। प्रम्प्टमा "dist" फोल्डर खोल्नुहोस् र एक्सटेन्सन लोड हुनेछ। प्रयोग गर्नका लागि, तपाईंलाई CO2 Signal API को लागि API की चाहिन्छ (तपाईं [यहाँ इमेल मार्फत प्राप्त गर्न सक्नुहुन्छ](https://www.co2signal.com/) - यस पृष्ठमा आफ्नो इमेल बक्समा राख्नुहोस्) र [म्याप इलेक्ट्रिसिटी](https://www.electricitymap.org/map) अनुसार आफ्नो क्षेत्रको [कोड](http://api.electricitymap.org/v3/zones) (उदाहरणका लागि, बोस्टनमा "US-NEISO")। -![स्थापना](../../../../../translated_images/ne/install-on-edge.78634f02842c4828.png) +![स्थापना](../../../../../translated_images/ne/install-on-edge.78634f02842c4828.webp) एकपटक API की र क्षेत्र एक्सटेन्सनको इन्टरफेसमा राखेपछि, ब्राउजरको एक्सटेन्सन बारमा रहेको रंगीन बिन्दु क्षेत्रको ऊर्जा उपयोगलाई प्रतिबिम्बित गर्न परिवर्तन हुनेछ। यसले उच्च ऊर्जा खपत गतिविधिहरूको उपयुक्तता बारे संकेत दिनेछ। यो "बिन्दु" प्रणालीको अवधारणा [Energy Lollipop एक्सटेन्सन](https://energylollipop.com/) बाट क्यालिफोर्नियाको उत्सर्जनका लागि प्रेरित गरिएको हो। diff --git a/translations/ne/5-browser-extension/solution/translation/README.ja.md b/translations/ne/5-browser-extension/solution/translation/README.ja.md index 5a0363cb9..4a4cfee79 100644 --- a/translations/ne/5-browser-extension/solution/translation/README.ja.md +++ b/translations/ne/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow को C02 सिग्नल API प्रयोग गरेर तपाईंको क्षेत्रको विद्युत उपयोगको मात्रा ट्र्याक गर्नका लागि ब्राउजरमा रिमाइन्डरको रूपमा देखाउन सकिने ब्राउजर एक्सटेन्सन निर्माण गर्नुहोस्। यो एक्सटेन्सनलाई प्रयोग गरेर, तपाईं आफ्नो गतिविधि यस जानकारीको आधारमा निर्णय गर्न सक्नुहुन्छ। -![extension screenshot](../../../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.png) +![extension screenshot](../../../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.webp) ## सुरु गर्न @@ -31,7 +31,7 @@ npm run build Edge मा स्थापना गर्न, ब्राउजरको माथिल्लो दायाँ कुनामा रहेको "तीन डट" मेनुबाट "Extensions" प्यानल खोज्नुहोस्। त्यहाँबाट "Load Unpacked" चयन गरेर नयाँ एक्सटेन्सन लोड गर्नुहोस्। प्रम्प्टमा "dist" फोल्डर खोल्दा एक्सटेन्सन लोड हुनेछ। प्रयोग गर्नका लागि, CO2 सिग्नल API को API की ([यहाँ इमेल मार्फत प्राप्त गर्नुहोस्](https://www.co2signal.com/) - यो पेजको बक्समा इमेल प्रविष्ट गर्नुहोस्) र [Electricity Map](https://www.electricitymap.org/map) मा तपाईंको क्षेत्रको [code](http://api.electricitymap.org/v3/zones) आवश्यक छ (उदाहरणका लागि, बोस्टनमा 'US-NEISO' प्रयोग गरिन्छ)। -![installing](../../../../../translated_images/ne/install-on-edge.78634f02842c4828.png) +![installing](../../../../../translated_images/ne/install-on-edge.78634f02842c4828.webp) API की र क्षेत्र विस्तार इन्टरफेसमा प्रविष्ट गरेपछि, ब्राउजरको एक्सटेन्सन बारमा देखिने रंगीन डट परिवर्तन हुनेछ, जसले तपाईंको क्षेत्रको ऊर्जा उपयोगलाई प्रतिबिम्बित गर्नेछ। यसले तपाईंलाई कुन प्रकारको ऊर्जा आवश्यक पर्ने गतिविधि गर्न उपयुक्त छ भनेर संकेत गर्नेछ। यो "डट" प्रणालीको अवधारणा मलाई क्यालिफोर्नियाको उत्सर्जनको लागि [Energy Lollipop extension](https://energylollipop.com/) बाट प्रेरित गरेको हो। diff --git a/translations/ne/5-browser-extension/solution/translation/README.ms.md b/translations/ne/5-browser-extension/solution/translation/README.ms.md index 9ab65a3e1..9cf5ebbdf 100644 --- a/translations/ne/5-browser-extension/solution/translation/README.ms.md +++ b/translations/ne/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: C02 सिग्नल API प्रयोग गरेर विद्युत प्रयोगको निगरानी गर्न, ब्राउजर एक्सटेन्सन बनाउनुहोस् ताकि तपाईं आफ्नो क्षेत्रको विद्युत प्रयोगको गम्भीरता बारे ब्राउजरमा चेतावनी प्राप्त गर्न सक्नुहुन्छ। यो एक्सटेन्सन प्रयोग गर्दा तपाईंलाई यो जानकारीको आधारमा आफ्नो गतिविधिहरूको निर्णय गर्न मद्दत गर्नेछ। -![ब्राउजर एक्सटेन्सनको स्क्रिनशट](../../../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.png) +![ब्राउजर एक्सटेन्सनको स्क्रिनशट](../../../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.webp) ## यहाँबाट सुरु गर्नुहोस् @@ -31,7 +31,7 @@ npm run build Edge मा स्थापना गर्न, ब्राउजरको दायाँ माथिको कुनामा रहेको 'तीन बिन्दु' मेनु प्रयोग गरेर एक्सटेन्सन प्यानल खोज्नुहोस्। त्यहाँबाट, 'Load Unpacked' चयन गरेर नयाँ एक्सटेन्सन लोड गर्नुहोस्। अनुरोधमा 'dist' फोल्डर खोल्नुहोस् र एक्सटेन्सन लोड हुनेछ। यसलाई प्रयोग गर्न, तपाईंलाई CO2 सिग्नल API को लागि API किज चाहिन्छ ([यहाँ इमेल मार्फत प्राप्त गर्नुहोस्](https://www.co2signal.com/) - यो पृष्ठमा रहेको बक्समा आफ्नो इमेल राख्नुहोस्) र [तपाईंको क्षेत्रको कोड](http://api.electricitymap.org/v3/zones) जुन [इलेक्ट्रिसिटी म्याप](https://www.electricitymap.org/map) सँग मेल खान्छ (उदाहरणका लागि, बोस्टनमा, मैले 'US-NEISO' प्रयोग गरेको छु)। -![डाउनलोड गर्दै](../../../../../translated_images/ne/install-on-edge.78634f02842c4828.png) +![डाउनलोड गर्दै](../../../../../translated_images/ne/install-on-edge.78634f02842c4828.webp) API किज र क्षेत्र एक्सटेन्सनको इन्टरफेसमा प्रविष्ट गरेपछि, ब्राउजर एक्सटेन्सन बारमा रहेको रंगीन बिन्दु तपाईंको क्षेत्रको ऊर्जा प्रयोगलाई प्रतिबिम्बित गर्न परिवर्तन हुनेछ र तपाईंलाई उपयुक्त गतिविधिहरूको सिफारिस दिनेछ। 'डट' प्रणालीको अवधारणा मलाई [क्यालिफोर्नियाको लागि एनर्जी ललिपप ब्राउजर एक्सटेन्सन](https://energylollipop.com/) बाट प्रेरित गरिएको हो। diff --git a/translations/ne/5-browser-extension/start/README.md b/translations/ne/5-browser-extension/start/README.md index a24b9f846..207680864 100644 --- a/translations/ne/5-browser-extension/start/README.md +++ b/translations/ne/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow को C02 Signal API प्रयोग गरेर बिजुलीको प्रयोग ट्र्याक गर्न, एउटा ब्राउजर एक्स्टेन्सन बनाउनुहोस् जसले तपाईंलाई तपाईंको क्षेत्रको बिजुली प्रयोगको भारबारे ब्राउजरमै सम्झना दिन्छ। यो एक्स्टेन्सनलाई अनियमित रूपमा प्रयोग गर्दा तपाईंले यस जानकारीको आधारमा आफ्नो गतिविधिहरूको निर्णय लिन मद्दत गर्नेछ। -![extension screenshot](../../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.png) +![extension screenshot](../../../../translated_images/ne/extension-screenshot.0e7f5bfa110e92e3.webp) ## सुरु गर्न @@ -31,7 +31,7 @@ npm run build Edge मा स्थापना गर्न, ब्राउजरको माथिल्लो दायाँ कुनामा रहेको 'तीन डट' मेनु प्रयोग गरेर Extensions प्यानल खोज्नुहोस्। त्यहाँबाट, 'Load Unpacked' चयन गरेर नयाँ एक्स्टेन्सन लोड गर्नुहोस्। प्रम्प्टमा 'dist' फोल्डर खोल्नुहोस् र एक्स्टेन्सन लोड हुनेछ। यसलाई प्रयोग गर्न, तपाईंलाई CO2 Signal को API को लागि API key ([यहाँ इमेलमार्फत प्राप्त गर्नुहोस्](https://www.co2signal.com/) - यस पृष्ठमा आफ्नो इमेल बक्समा प्रविष्ट गर्नुहोस्) र [Electricity Map](https://www.electricitymap.org/map) सँग सम्बन्धित [तपाईंको क्षेत्रको कोड](http://api.electricitymap.org/v3/zones) आवश्यक हुनेछ (उदाहरणका लागि, बोस्टनमा म 'US-NEISO' प्रयोग गर्छु)। -![installing](../../../../translated_images/ne/install-on-edge.78634f02842c4828.png) +![installing](../../../../translated_images/ne/install-on-edge.78634f02842c4828.webp) एक पटक API key र क्षेत्र एक्स्टेन्सन इन्टरफेसमा प्रविष्ट गरेपछि, ब्राउजर एक्स्टेन्सन बारमा रहेको रङ्गीन डटले तपाईंको क्षेत्रको ऊर्जा प्रयोगलाई प्रतिबिम्बित गर्न परिवर्तन गर्नेछ र तपाईंलाई ऊर्जा-गहन गतिविधिहरूको लागि उपयुक्त सल्लाह दिनेछ। यो 'डट' प्रणालीको अवधारणा मलाई [Energy Lollipop एक्स्टेन्सन](https://energylollipop.com/) बाट क्यालिफोर्नियाको उत्सर्जनका लागि प्रेरित गरिएको हो। diff --git a/translations/ne/6-space-game/2-drawing-to-canvas/README.md b/translations/ne/6-space-game/2-drawing-to-canvas/README.md index 11000e423..0dc9114b1 100644 --- a/translations/ne/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/ne/6-space-game/2-drawing-to-canvas/README.md @@ -108,7 +108,7 @@ quadrantChart UI Elements: [0.9, 0.1] ``` -![क्यानभासको ग्रिड](../../../../translated_images/ne/canvas_grid.5f209da785ded492.png) +![क्यानभासको ग्रिड](../../../../translated_images/ne/canvas_grid.5f209da785ded492.webp) > छवि [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) बाट क्यानभास तत्वमा चित्रण गर्न, तपाईंले क्यानभास ग्राफिक्सको आधार बनाउने तीन-चरण प्रक्रिया पछ्याउनुहुनेछ। तपाईंले यो केही पटक गरेपछि, यो स्वाभाविक बन्छ: @@ -329,11 +329,11 @@ flowchart TD - हिरो जहाज - ![हिरो जहाज](../../../../translated_images/ne/player.dd24c1afa8c71e9b.png) + ![हिरो जहाज](../../../../translated_images/ne/player.dd24c1afa8c71e9b.webp) - 5*5 राक्षस - ![राक्षस जहाज](../../../../translated_images/ne/enemyShip.5df2a822c16650c2.png) + ![राक्षस जहाज](../../../../translated_images/ne/enemyShip.5df2a822c16650c2.webp) ### विकास सुरु गर्न सिफारिस गरिएका चरणहरू @@ -414,7 +414,7 @@ const STOP_X = START_X + FORMATION_WIDTH; तयार परिणाम यसरी देखिनुपर्छ: -![कालो स्क्रिनमा एक नायक र ५*५ राक्षसहरू](../../../../translated_images/ne/partI-solution.36c53b48c9ffae2a.png) +![कालो स्क्रिनमा एक नायक र ५*५ राक्षसहरू](../../../../translated_images/ne/partI-solution.36c53b48c9ffae2a.webp) ## समाधान diff --git a/translations/ne/6-space-game/5-keeping-score/README.md b/translations/ne/6-space-game/5-keeping-score/README.md index dda6dfbb2..b94161534 100644 --- a/translations/ne/6-space-game/5-keeping-score/README.md +++ b/translations/ne/6-space-game/5-keeping-score/README.md @@ -160,7 +160,7 @@ sequenceDiagram ``` - **स्कोरिङ प्रणाली**: प्रत्येक नष्ट गरिएको शत्रु जहाजले १०० पोइन्ट्स प्रदान गर्दछ (राउन्ड नम्बरहरू खेलाडीहरूले मानसिक रूपमा गणना गर्न सजिलो हुन्छ)। स्कोर तलको बायाँ कुनामा देखाइन्छ। -- **जीवन काउन्टर**: तपाईंको हिरो तीन जीवनहरूसँग सुरु हुन्छ - प्रारम्भिक आर्केड गेमहरूले चुनौती र खेल्न योग्यताको सन्तुलन गर्न स्थापना गरेको मानक। प्रत्येक शत्रुसँगको टक्करले एक जीवन खर्च हुन्छ। बाँकी जीवनहरू तलको दायाँ कुनामा जहाज आइकनहरू प्रयोग गरेर देखाइन्छ ![life image](../../../../translated_images/ne/life.6fb9f50d53ee0413.png)। +- **जीवन काउन्टर**: तपाईंको हिरो तीन जीवनहरूसँग सुरु हुन्छ - प्रारम्भिक आर्केड गेमहरूले चुनौती र खेल्न योग्यताको सन्तुलन गर्न स्थापना गरेको मानक। प्रत्येक शत्रुसँगको टक्करले एक जीवन खर्च हुन्छ। बाँकी जीवनहरू तलको दायाँ कुनामा जहाज आइकनहरू प्रयोग गरेर देखाइन्छ ![life image](../../../../translated_images/ne/life.6fb9f50d53ee0413.webp)। ## निर्माण सुरु गरौं! diff --git a/translations/ne/7-bank-project/1-template-route/README.md b/translations/ne/7-bank-project/1-template-route/README.md index fcf4ea36e..1605b706a 100644 --- a/translations/ne/7-bank-project/1-template-route/README.md +++ b/translations/ne/7-bank-project/1-template-route/README.md @@ -614,7 +614,7 @@ sequenceDiagram `history.pushState` प्रयोग गरेर ब्राउजरको नेभिगेसन history मा नयाँ प्रविष्टिहरू सिर्जना हुन्छ। तपाईंले आफ्नो ब्राउजरको *back button* थिचेर जाँच गर्न सक्नुहुन्छ, यसले केही यस्तो देखाउनु पर्छ: -![नेभिगेसन history को स्क्रिनशट](../../../../translated_images/ne/history.7fdabbafa521e064.png) +![नेभिगेसन history को स्क्रिनशट](../../../../translated_images/ne/history.7fdabbafa521e064.webp) यदि तपाईं back बटन केही पटक क्लिक गर्नुहुन्छ भने, तपाईं देख्नुहुनेछ कि हालको URL परिवर्तन हुन्छ र history अपडेट हुन्छ, तर उही template प्रदर्शन भइरहन्छ। diff --git a/translations/ne/7-bank-project/2-forms/README.md b/translations/ne/7-bank-project/2-forms/README.md index 52c2f220b..e8391e995 100644 --- a/translations/ne/7-bank-project/2-forms/README.md +++ b/translations/ne/7-bank-project/2-forms/README.md @@ -295,7 +295,7 @@ graph TD 2. तपाईंको ब्राउजरको ठेगाना पट्टीमा परिवर्तनहरू अवलोकन गर्नुहोस् 3. पृष्ठ पुनः लोड भएको र URL मा डेटा देखा परेको नोट गर्नुहोस् -![दर्ता बटन क्लिक गरेपछि ब्राउजरको URL परिवर्तनको स्क्रिनसट](../../../../translated_images/ne/click-register.e89a30bf0d4bc9ca.png) +![दर्ता बटन क्लिक गरेपछि ब्राउजरको URL परिवर्तनको स्क्रिनसट](../../../../translated_images/ne/click-register.e89a30bf0d4bc9ca.webp) ### HTTP विधिहरूको तुलना @@ -350,7 +350,7 @@ graph TD 2. **"खाता सिर्जना गर्नुहोस्" बटन क्लिक गर्नुहोस्** 3. **तपाईंको ब्राउजरमा सर्भर प्रतिक्रिया अवलोकन गर्नुहोस्** -![ब्राउजर विन्डो, ठेगाना localhost:5000/api/accounts मा, JSON स्ट्रिङ देखाउँदै प्रयोगकर्ता डेटा सहित](../../../../translated_images/ne/form-post.61de4ca1b964d91a.png) +![ब्राउजर विन्डो, ठेगाना localhost:5000/api/accounts मा, JSON स्ट्रिङ देखाउँदै प्रयोगकर्ता डेटा सहित](../../../../translated_images/ne/form-post.61de4ca1b964d91a.webp) **तपाईंले के देख्नुहुन्छ:** - **ब्राउजर पुनःनिर्देशन** API अन्तबिन्दु URL मा @@ -554,7 +554,7 @@ async function register() { 3. **क्लिक गर्नुहोस्** "खाता सिर्जना गर्नुहोस्" 4. **कन्सोल सन्देशहरू र प्रयोगकर्ता प्रतिक्रिया अवलोकन गर्नुहोस्** -![ब्राउजर कन्सोलमा देखिएको लग सन्देशको स्क्रिनशट](../../../../translated_images/ne/browser-console.efaf0b51aaaf6778.png) +![ब्राउजर कन्सोलमा देखिएको लग सन्देशको स्क्रिनशट](../../../../translated_images/ne/browser-console.efaf0b51aaaf6778.webp) **तपाईंले के देख्नुहुन्छ:** - **लोडिङ स्थिति** सबमिट बटनमा देखा पर्छ @@ -729,7 +729,7 @@ input:focus:invalid { 3. **प्रयोगकर्ता नाम फिल्डमा विशेष क्यारेक्टरहरू प्रयास गर्नुहोस्** 4. **नकारात्मक ब्यालेन्स रकम प्रविष्ट गर्नुहोस्** -![फारम सबमिट गर्न प्रयास गर्दा देखिएको मान्यता त्रुटि](../../../../translated_images/ne/validation-error.8bd23e98d416c22f.png) +![फारम सबमिट गर्न प्रयास गर्दा देखिएको मान्यता त्रुटि](../../../../translated_images/ne/validation-error.8bd23e98d416c22f.webp) **तपाईंले के अवलोकन गर्नुहुन्छ:** - **ब्राउजरले** देशी मान्यता सन्देशहरू देखाउँछ @@ -867,7 +867,7 @@ timeline थप शैलीहरू थपेपछि अन्तिम लगइन पृष्ठ कस्तो देखिन सक्छ भन्ने उदाहरण यहाँ छ: -![CSS शैलीहरू थपेपछि लगइन पृष्ठको स्क्रिनशट](../../../../translated_images/ne/result.96ef01f607bf856a.png) +![CSS शैलीहरू थपेपछि लगइन पृष्ठको स्क्रिनशट](../../../../translated_images/ne/result.96ef01f607bf856a.webp) ## पोस्ट-व्याख्यान क्विज diff --git a/translations/ne/7-bank-project/3-data/README.md b/translations/ne/7-bank-project/3-data/README.md index ddaef2af0..93836221a 100644 --- a/translations/ne/7-bank-project/3-data/README.md +++ b/translations/ne/7-bank-project/3-data/README.md @@ -160,7 +160,7 @@ sequenceDiagram Browser->>User: Displays new page (flash/reload) ``` -![मल्टि-पेज एप्लिकेसनमा अपडेट वर्कफ्लो](../../../../translated_images/ne/mpa.7f7375a1a2d4aa77.png) +![मल्टि-पेज एप्लिकेसनमा अपडेट वर्कफ्लो](../../../../translated_images/ne/mpa.7f7375a1a2d4aa77.webp) **किन यो विधि असहज लाग्थ्यो:** - प्रत्येक क्लिकले सम्पूर्ण पृष्ठलाई पुनः निर्माण गर्नुपर्थ्यो @@ -187,7 +187,7 @@ sequenceDiagram Browser->>User: Shows updated content (no reload) ``` -![सिंगल-पेज एप्लिकेसनमा अपडेट वर्कफ्लो](../../../../translated_images/ne/spa.268ec73b41f992c2.png) +![सिंगल-पेज एप्लिकेसनमा अपडेट वर्कफ्लो](../../../../translated_images/ne/spa.268ec73b41f992c2.webp) **किन SPA हरू धेरै राम्रो लाग्छन्:** - केवल वास्तवमा परिवर्तन भएका भागहरू अपडेट हुन्छन् (स्मार्ट, हैन?) @@ -510,7 +510,7 @@ if (data.error) { अब जब तपाईंले अमान्य खाता प्रयोग गरेर परीक्षण गर्नुहुन्छ, तपाईंले पृष्ठमा नै उपयोगी त्रुटि सन्देश देख्नुहुनेछ! -![लगइनको क्रममा देखाइएको त्रुटि सन्देशको स्क्रिनशट](../../../../translated_images/ne/login-error.416fe019b36a6327.png) +![लगइनको क्रममा देखाइएको त्रुटि सन्देशको स्क्रिनशट](../../../../translated_images/ne/login-error.416fe019b36a6327.webp) #### चरण 4: पहुँचयोग्यताको साथ समावेशी बन्नुहोस् @@ -902,7 +902,7 @@ Agent मोड प्रयोग गरेर निम्न चुनौत यहाँ स्टाइलिङ पछि ड्यासबोर्डको उदाहरण परिणाम कस्तो देखिन्छ: -![ड्यासबोर्डको स्टाइलिङ पछि उदाहरण परिणामको स्क्रिनसट](../../../../translated_images/ne/screen2.123c82a831a1d14a.png) +![ड्यासबोर्डको स्टाइलिङ पछि उदाहरण परिणामको स्क्रिनसट](../../../../translated_images/ne/screen2.123c82a831a1d14a.webp) यसलाई ठ्याक्कै मेल गर्नुपर्छ भन्ने महसुस नगर्नुहोस् - यसलाई प्रेरणाको रूपमा प्रयोग गर्नुहोस् र यसलाई आफ्नो बनाउनुहोस्! diff --git a/translations/ne/7-bank-project/4-state-management/README.md b/translations/ne/7-bank-project/4-state-management/README.md index f38d8ebec..47221c05f 100644 --- a/translations/ne/7-bank-project/4-state-management/README.md +++ b/translations/ne/7-bank-project/4-state-management/README.md @@ -186,7 +186,7 @@ mindmap हामी हाम्रो टाउको घुमाउने सट्टा, **केन्द्रीयकृत स्टेट म्यानेजमेन्ट** प्रणाली सिर्जना गर्नेछौं। यसलाई सबै महत्त्वपूर्ण कुराहरूको जिम्मामा एकदमै व्यवस्थित व्यक्तिको रूपमा सोच्नुहोस्: -![HTML, प्रयोगकर्ता कार्यहरू र स्टेट बीचको डेटा प्रवाह देखाउने स्किमा](../../../../translated_images/ne/data-flow.fa2354e0908fecc8.png) +![HTML, प्रयोगकर्ता कार्यहरू र स्टेट बीचको डेटा प्रवाह देखाउने स्किमा](../../../../translated_images/ne/data-flow.fa2354e0908fecc8.webp) ```mermaid flowchart TD diff --git a/translations/ne/7-bank-project/4-state-management/assignment.md b/translations/ne/7-bank-project/4-state-management/assignment.md index 57a3b79ad..e8768b554 100644 --- a/translations/ne/7-bank-project/4-state-management/assignment.md +++ b/translations/ne/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA: **अपेक्षित परिणाम:** यो असाइनमेन्ट पूरा गरेपछि, तपाईंको बैंकिङ एपमा पूर्ण रूपमा कार्यात्मक "ट्रान्जेक्सन थप्नुहोस्" सुविधा हुनेछ जसले व्यावसायिक रूपमा देखिन्छ र व्यवहार गर्दछ: -![उदाहरण "ट्रान्जेक्सन थप्नुहोस्" संवाद देखाउने स्क्रिनशट](../../../../translated_images/ne/dialog.93bba104afeb79f1.png) +![उदाहरण "ट्रान्जेक्सन थप्नुहोस्" संवाद देखाउने स्क्रिनशट](../../../../translated_images/ne/dialog.93bba104afeb79f1.webp) ## तपाईंको कार्यान्वयन परीक्षण गर्दै diff --git a/translations/ne/7-bank-project/README.md b/translations/ne/7-bank-project/README.md index ca8fcb134..de17b080b 100644 --- a/translations/ne/7-bank-project/README.md +++ b/translations/ne/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: यस परियोजनामा, तपाईंले एक काल्पनिक बैंक कसरी निर्माण गर्ने भनेर सिक्नुहुनेछ। यी पाठहरूले वेब एपको लेआउट कसरी बनाउने र रुटहरू प्रदान गर्ने, फारमहरू निर्माण गर्ने, स्टेट व्यवस्थापन गर्ने, र API बाट डेटा कसरी ल्याउने भन्ने निर्देशनहरू समावेश गर्दछ, जसबाट तपाईं बैंकको डेटा प्राप्त गर्न सक्नुहुन्छ। -| ![Screen1](../../../translated_images/ne/screen1.baccbba0f1f93364.png) | ![Screen2](../../../translated_images/ne/screen2.123c82a831a1d14a.png) | +| ![Screen1](../../../translated_images/ne/screen1.baccbba0f1f93364.webp) | ![Screen2](../../../translated_images/ne/screen2.123c82a831a1d14a.webp) | |--------------------------------|--------------------------------| ## पाठहरू diff --git a/translations/ne/8-code-editor/1-using-a-code-editor/README.md b/translations/ne/8-code-editor/1-using-a-code-editor/README.md index ee1de9737..43ee8dde0 100644 --- a/translations/ne/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/ne/8-code-editor/1-using-a-code-editor/README.md @@ -185,7 +185,7 @@ VSCode.dev यी क्षमताहरूलाई तपाईंको ब सबै कुरा लोड भएपछि, तपाईंले एक सुन्दर रूपमा सफा कार्यक्षेत्र देख्नुहुनेछ जुन तपाईंलाई महत्त्वपूर्ण कुरामा केन्द्रित राख्न डिजाइन गरिएको छ – तपाईंको कोड! -![डिफल्ट VSCode.dev इन्टरफेस](../../../../translated_images/ne/default-vscode-dev.5d06881d65c1b323.png) +![डिफल्ट VSCode.dev इन्टरफेस](../../../../translated_images/ne/default-vscode-dev.5d06881d65c1b323.webp) **यहाँ तपाईंको छिमेकको भ्रमण छ:** - **एक्टिभिटी बार** (बायाँपट्टि पट्टी): तपाईंको मुख्य नेभिगेसन एक्सप्लोरर 📁, खोज 🔍, स्रोत नियन्त्रण 🌿, एक्सटेन्सन 🧩, र सेटिङ ⚙️ सहित @@ -233,7 +233,7 @@ flowchart TB 1. [vscode.dev](https://vscode.dev) मा जानुहोस् यदि तपाईं त्यहाँ हुनुहुन्न भने 2. स्वागत स्क्रीनमा "ओपन रिमोट रिपोजिटरी" बटन खोज्नुहोस् र यसलाई क्लिक गर्नुहोस् - ![रिमोट रिपोजिटरी खोल्नुहोस्](../../../../translated_images/ne/open-remote-repository.bd9c2598b8949e7f.png) + ![रिमोट रिपोजिटरी खोल्नुहोस्](../../../../translated_images/ne/open-remote-repository.bd9c2598b8949e7f.webp) 3. कुनै पनि GitHub रिपोजिटरी URL पेस्ट गर्नुहोस् (यो प्रयास गर्नुहोस्: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. इन्टर थिच्नुहोस् र जादू हेर्नुहोस्! @@ -242,7 +242,7 @@ flowchart TB कोडिङ जादूगर जस्तो महसुस गर्न चाहनुहुन्छ? यो किबोर्ड सर्टकट प्रयास गर्नुहोस्: Ctrl+Shift+P (वा Mac मा Cmd+Shift+P) कमाण्ड प्यालेट खोल्न: -![कमाण्ड प्यालेट](../../../../translated_images/ne/palette-menu.4946174e07f42622.png) +![कमाण्ड प्यालेट](../../../../translated_images/ne/palette-menu.4946174e07f42622.webp) **कमाण्ड प्यालेट भनेको तपाईंले गर्न सक्ने सबै कुराको लागि खोज इन्जिन जस्तै हो:** - "ओपन रिमोट" टाइप गर्नुहोस् र यसले रिपोजिटरी ओपनर तपाईंको लागि फेला पार्छ @@ -304,7 +304,7 @@ flowchart TB 3. उपयुक्त एक्सटेन्सन सहित फाइल नाम प्रविष्ट गर्नुहोस् (`style.css`, `script.js`, `index.html`) 4. फाइल सिर्जना गर्न इन्टर थिच्नुहोस् -![नयाँ फाइल सिर्जना गर्दै](../../../../translated_images/ne/create-new-file.2814e609c2af9aeb.png) +![नयाँ फाइल सिर्जना गर्दै](../../../../translated_images/ne/create-new-file.2814e609c2af9aeb.webp) **नामकरण परम्पराहरू:** - फाइल उद्देश्य संकेत गर्ने वर्णनात्मक नामहरू प्रयोग गर्नुहोस् @@ -322,7 +322,7 @@ flowchart TB 2. टाइप गर्न सुरु गर्नुहोस् र VSCode.dev ले तपाईंलाई रंग, सुझाव, र त्रुटि स्पटिङको साथ मद्दत गरेको हेर्नुहोस् 3. Ctrl+S (Windows/Linux) वा Cmd+S (Mac) सँग आफ्नो काम बचत गर्नुहोस् – यद्यपि यसले स्वचालित रूपमा पनि बचत गर्दछ! -![VSCode.dev मा फाइलहरू सम्पादन गर्दै](../../../../translated_images/ne/edit-a-file.52c0ee665ef19f08.png) +![VSCode.dev मा फाइलहरू सम्पादन गर्दै](../../../../translated_images/ne/edit-a-file.52c0ee665ef19f08.webp) **कोड गर्दा हुने चाखलाग्दो कुराहरू:** - तपाईंको कोड सु @@ -392,7 +392,7 @@ Extension Marketplace धेरै राम्रोसँग व्यवस 2. वरिपरि ब्राउज गर्नुहोस् वा केही विशेष खोज्नुहोस् 3. चासो लाग्ने कुनै पनि कुरामा क्लिक गरेर थप जानकारी प्राप्त गर्नुहोस् -![Extension marketplace interface](../../../../translated_images/ne/extensions.eca0e0c7f59a10b5.png) +![Extension marketplace interface](../../../../translated_images/ne/extensions.eca0e0c7f59a10b5.webp) **त्यहाँ के देख्नुहुन्छ:** @@ -445,7 +445,7 @@ Extension Marketplace धेरै राम्रोसँग व्यवस 3. Dropdown बाट "Extension Settings" चयन गर्नुहोस् 4. तपाईको workflow अनुसार चीजहरू समायोजन गर्नुहोस् -![Customizing extension settings](../../../../translated_images/ne/extension-settings.21c752ae4f4cdb78.png) +![Customizing extension settings](../../../../translated_images/ne/extension-settings.21c752ae4f4cdb78.webp) **तपाईले समायोजन गर्न चाहन सक्ने सामान्य कुराहरू:** - तपाईको कोड कसरी फर्म्याट हुन्छ (tabs vs spaces, line length, आदि) diff --git a/translations/ne/8-code-editor/1-using-a-code-editor/assignment.md b/translations/ne/8-code-editor/1-using-a-code-editor/assignment.md index ef33a93ea..664b74c46 100644 --- a/translations/ne/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/ne/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ VSCode.dev लाई रिपोजिटरी खोल्न कम्ति 4. कमिट सन्देश लेख्नुहोस्: "Add initial HTML structure" 5. "Commit new file" क्लिक गरेर परिवर्तनहरू सुरक्षित गर्नुहोस् -![GitHub मा आरम्भिक फाइल सिर्जना गर्दै](../../../../translated_images/ne/new-file-github.com.c886796d800e8056.png) +![GitHub मा आरम्भिक फाइल सिर्जना गर्दै](../../../../translated_images/ne/new-file-github.com.c886796d800e8056.webp) **यो आरम्भिक सेटअपले के पूरा गर्दछ:** - HTML5 कागजात संरचना सेम्यान्टिक तत्वहरूसँग स्थापना गर्दछ @@ -104,7 +104,7 @@ VSCode.dev लाई रिपोजिटरी खोल्न कम्ति ✅ **सफलता संकेतक**: तपाईंले आफ्नो परियोजना फाइलहरू Explorer साइडबारमा देख्नुहुनेछ र `index.html` मुख्य सम्पादक क्षेत्रमा सम्पादनको लागि उपलब्ध हुनेछ। -![VSCode.dev मा परियोजना लोड गरिएको](../../../../translated_images/ne/project-on-vscode.dev.e79815a9a95ee7fe.png) +![VSCode.dev मा परियोजना लोड गरिएको](../../../../translated_images/ne/project-on-vscode.dev.e79815a9a95ee7fe.webp) **इन्टरफेसमा तपाईंले के देख्नुहुनेछ:** - **Explorer साइडबार**: **तपाईंको रिपोजिटरी फाइलहरू र फोल्डर संरचना देखाउँछ** @@ -448,7 +448,7 @@ li:before { **स्थापनापछि तत्काल परिणामहरू:** CodeSwing स्थापना भएपछि, तपाईंले आफ्नो रिजुम वेबसाइटको लाइभ पूर्वावलोकन सम्पादकमा देख्नुहुनेछ। यसले तपाईंलाई परिवर्तनहरू गर्दा तपाईंको साइट कस्तो देखिन्छ भन्ने देख्न अनुमति दिन्छ। -![CodeSwing एक्सटेन्सनले लाइभ पूर्वावलोकन देखाउँदै](../../../../translated_images/ne/after-codeswing-extension-pb.0ebddddcf73b5509.png) +![CodeSwing एक्सटेन्सनले लाइभ पूर्वावलोकन देखाउँदै](../../../../translated_images/ne/after-codeswing-extension-pb.0ebddddcf73b5509.webp) **सुधारिएको इन्टरफेसको समझ:** - **स्प्लिट भ्यू**: **तपाईंको कोड एक पक्षमा र लाइभ पूर्वावलोकन अर्को पक्षमा देखाउँछ** diff --git a/translations/ne/9-chat-project/README.md b/translations/ne/9-chat-project/README.md index b3c2dba1d..2c3b972b4 100644 --- a/translations/ne/9-chat-project/README.md +++ b/translations/ne/9-chat-project/README.md @@ -61,7 +61,7 @@ print(response.choices[0].message.content) तपाईंको समाप्त परियोजना यस्तो देखिनेछ: -![च्याट एप इन्टरफेसमा प्रयोगकर्ता र एआई सहायक बीचको संवाद देखाउँदै](../../../translated_images/ne/screenshot.0a1ee0d123df681b.png) +![च्याट एप इन्टरफेसमा प्रयोगकर्ता र एआई सहायक बीचको संवाद देखाउँदै](../../../translated_images/ne/screenshot.0a1ee0d123df681b.webp) ## 🗺️ एआई अनुप्रयोग विकासको माध्यमबाट तपाईंको सिक्ने यात्रा @@ -1628,14 +1628,14 @@ mindmap - **[Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners)** मा जानुहोस् - **शीर्ष-दायाँ कुनामा "Use this template" क्लिक गर्नुहोस्** (पक्का गर्नुहोस् कि तपाईं GitHub मा लगइन हुनुहुन्छ) -![टेम्प्लेटबाट सिर्जना गर्ने इन्टरफेस जसमा हरियो "Use this template" बटन देखिन्छ](../../../translated_images/ne/template.67ad477109d29a2b.png) +![टेम्प्लेटबाट सिर्जना गर्ने इन्टरफेस जसमा हरियो "Use this template" बटन देखिन्छ](../../../translated_images/ne/template.67ad477109d29a2b.webp) **चरण २: Codespaces सुरु गर्नुहोस्** - **तपाईंको नयाँ सिर्जित रिपोजिटरी खोल्नुहोस्** - **हरियो "Code" बटन क्लिक गर्नुहोस् र "Codespaces" चयन गर्नुहोस्** - **"Create codespace on main" चयन गर्नुहोस्** ताकि तपाईंको विकास वातावरण सुरु होस् -![Codespace सिर्जना गर्ने इन्टरफेस जसमा क्लाउड विकास वातावरण सुरु गर्ने विकल्पहरू छन्](../../../translated_images/ne/codespace.bcecbdf5d2747d3d.png) +![Codespace सिर्जना गर्ने इन्टरफेस जसमा क्लाउड विकास वातावरण सुरु गर्ने विकल्पहरू छन्](../../../translated_images/ne/codespace.bcecbdf5d2747d3d.webp) **चरण ३: वातावरण कन्फिगरेसन** तपाईंको Codespace लोड भएपछि, तपाईंले पहुँच पाउनुहुनेछ: diff --git a/translations/ne/README.md b/translations/ne/README.md index 015735a6b..4a16443e5 100644 --- a/translations/ne/README.md +++ b/translations/ne/README.md @@ -58,13 +58,13 @@ Azure AI Foundry Discord समुदायमा सामेल हुनु [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) मा जानुहोस् र सुरु गर्नुहोस्! -![Background](../../translated_images/ne/background.148a8d43afde5730.png) +![Background](../../translated_images/ne/background.148a8d43afde5730.webp) - आधारदेखि RAG सम्म सबै कुरा समेट्ने पाठहरू। - GenAI र हाम्रो सहायक एप प्रयोग गरी ऐतिहासिक पात्रहरूसँग अन्तरक्रिया गर्नुहोस्। - रमाइलो र आकर्षक कथावस्तु, तपाईं समय यात्रा गर्दै हुनुहुन्छ! -![character](../../translated_images/ne/character.5c0dd8e067ffd693.png) +![character](../../translated_images/ne/character.5c0dd8e067ffd693.webp) प्रत्येक पाठमा असाइन्मेन्ट पूरा गर्ने, ज्ञान जाँच गर्ने र चुनौतीहरू छन् जसले तपाईंलाई यी विषयहरू सिक्न मार्गनिर्देशन गर्छन्: - प्रॉम्प्टिङ र प्रॉम्प्ट इन्जिनियरिङ @@ -100,7 +100,7 @@ Azure AI Foundry Discord समुदायमा सामेल हुनु तपाईंले सिर्जना गरेको यस रिपोजिटरीको प्रतिलिपिमा, **Code** बटन क्लिक गरी **Open with Codespaces** चयन गर्नुहोस्। यसले तपाईँका लागि नयाँ Codespace सिर्जना गर्नेछ। -![Codespace](../../translated_images/ne/createcodespace.0238bbf4d7a8d955.png) +![Codespace](../../translated_images/ne/createcodespace.0238bbf4d7a8d955.webp) #### आफ्नै कम्प्युटरमा यस पाठ्यक्रम चलाउन diff --git a/translations/ne/for-teachers.md b/translations/ne/for-teachers.md index dde337383..51f68d005 100644 --- a/translations/ne/for-teachers.md +++ b/translations/ne/for-teachers.md @@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA: - Moodle Cloud मा सीमित Common Cartridge समर्थन छ। माथिको Moodle फाइललाई प्राथमिकता दिनुहोस्, जसलाई Canvas मा पनि अपलोड गर्न सकिन्छ। - आयातपछि, आफ्नो टर्म तालिकासँग मेल खाने गरी मोड्युलहरू, म्यादहरू, र क्विज सेटिङहरू समीक्षा गर्नुहोस्। -![Moodle](../../translated_images/ne/moodle.94eb93d714a50cb2.png) +![Moodle](../../translated_images/ne/moodle.94eb93d714a50cb2.webp) > Moodle कक्षामा पाठ्यक्रम -![Canvas](../../translated_images/ne/canvas.fbd605ff8e5b8aff.png) +![Canvas](../../translated_images/ne/canvas.fbd605ff8e5b8aff.webp) > Canvas मा पाठ्यक्रम ### रिपोजिटरीलाई प्रत्यक्ष रूपमा प्रयोग गर्नुहोस् (Classroom बिना) diff --git a/translations/nl/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/nl/1-getting-started-lessons/1-intro-to-programming-languages/README.md index b7459450c..3d604ed64 100644 --- a/translations/nl/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/nl/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ Luister, ik snap het helemaal als programmeren nu nog intimiderend lijkt. Toen i Vandaag gaan we de geweldige tools verkennen die moderne webontwikkeling niet alleen mogelijk maken, maar ook verslavend leuk. Ik heb het over dezelfde editors, browsers en workflows die ontwikkelaars bij Netflix, Spotify en je favoriete indie-appstudio elke dag gebruiken. En hier komt het deel dat je een vreugdedansje laat doen: de meeste van deze professionele, industrienorm-tools zijn helemaal gratis! -![Intro Programmering](../../../../translated_images/nl/webdev101-programming.d6e3f98e61ac4bff.png) +![Intro Programmering](../../../../translated_images/nl/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/nl/1-getting-started-lessons/2-github-basics/README.md b/translations/nl/1-getting-started-lessons/2-github-basics/README.md index 44e90f4dd..8657bc1a0 100644 --- a/translations/nl/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/nl/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ Ik weet dat dit in het begin misschien wat overweldigend lijkt – ik herinner m We gaan deze reis samen maken, stap voor stap. Geen haast, geen druk – alleen jij, ik, en een paar echt coole tools die je nieuwe beste vrienden gaan worden! -![Intro tot GitHub](../../../../translated_images/nl/webdev101-github.8846d7971abef6f9.png) +![Intro tot GitHub](../../../../translated_images/nl/webdev101-github.8846d7971abef6f9.webp) > Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -604,7 +604,7 @@ Laten we eerst een repository (of **repo**) op GitHub vinden die je interesseert ✅ Een goede manier om 'beginner-vriendelijke' repos te vinden is door [te zoeken op de tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Een repo lokaal kopiëren](../../../../translated_images/nl/clone_repo.5085c48d666ead57.png) +![Een repo lokaal kopiëren](../../../../translated_images/nl/clone_repo.5085c48d666ead57.webp) Er zijn verschillende manieren om code te kopiëren. Een manier is om de inhoud van de repository te "clonen", met behulp van HTTPS, SSH, of de GitHub CLI (Command Line Interface). diff --git a/translations/nl/1-getting-started-lessons/3-accessibility/README.md b/translations/nl/1-getting-started-lessons/3-accessibility/README.md index 9b21d1396..f787a2cb2 100644 --- a/translations/nl/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/nl/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Toegankelijke Webpagina's Maken -![Alles Over Toegankelijkheid](../../../../translated_images/nl/webdev101-a11y.8ef3025c858d897a.png) +![Alles Over Toegankelijkheid](../../../../translated_images/nl/webdev101-a11y.8ef3025c858d897a.webp) > Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/nl/2-js-basics/1-data-types/README.md b/translations/nl/2-js-basics/1-data-types/README.md index 1628c5335..1108acd7a 100644 --- a/translations/nl/2-js-basics/1-data-types/README.md +++ b/translations/nl/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript Basisprincipes: Gegevenstypen -![JavaScript Basisprincipes - Gegevenstypen](../../../../translated_images/nl/webdev101-js-datatypes.4cc470179730702c.png) +![JavaScript Basisprincipes - Gegevenstypen](../../../../translated_images/nl/webdev101-js-datatypes.4cc470179730702c.webp) > Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/nl/2-js-basics/2-functions-methods/README.md b/translations/nl/2-js-basics/2-functions-methods/README.md index 78724e852..0f7eddc8c 100644 --- a/translations/nl/2-js-basics/2-functions-methods/README.md +++ b/translations/nl/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript Basis: Methoden en Functies -![JavaScript Basis - Functies](../../../../translated_images/nl/webdev101-js-functions.be049c4726e94f8b.png) +![JavaScript Basis - Functies](../../../../translated_images/nl/webdev101-js-functions.be049c4726e94f8b.webp) > Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/nl/2-js-basics/3-making-decisions/README.md b/translations/nl/2-js-basics/3-making-decisions/README.md index ab70e449a..e05a4e773 100644 --- a/translations/nl/2-js-basics/3-making-decisions/README.md +++ b/translations/nl/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript Basis: Beslissingen nemen -![JavaScript Basis - Beslissingen nemen](../../../../translated_images/nl/webdev101-js-decisions.69e1b20f272dd1f0.png) +![JavaScript Basis - Beslissingen nemen](../../../../translated_images/nl/webdev101-js-decisions.69e1b20f272dd1f0.webp) > Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/nl/2-js-basics/4-arrays-loops/README.md b/translations/nl/2-js-basics/4-arrays-loops/README.md index c18857050..ec7906e0e 100644 --- a/translations/nl/2-js-basics/4-arrays-loops/README.md +++ b/translations/nl/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript Basis: Arrays en Lussen -![JavaScript Basis - Arrays](../../../../translated_images/nl/webdev101-js-arrays.439d7528b8a29455.png) +![JavaScript Basis - Arrays](../../../../translated_images/nl/webdev101-js-arrays.439d7528b8a29455.webp) > Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/nl/3-terrarium/1-intro-to-html/README.md b/translations/nl/3-terrarium/1-intro-to-html/README.md index d846894b4..d14de46dd 100644 --- a/translations/nl/3-terrarium/1-intro-to-html/README.md +++ b/translations/nl/3-terrarium/1-intro-to-html/README.md @@ -26,7 +26,7 @@ journey Build terrarium: 5: Student ``` -![Introductie tot HTML](../../../../translated_images/nl/webdev101-html.4389c2067af68e98.png) +![Introductie tot HTML](../../../../translated_images/nl/webdev101-html.4389c2067af68e98.webp) > Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) HTML, of HyperText Markup Language, is de basis van elke website die je ooit hebt bezocht. Zie HTML als het skelet dat structuur geeft aan webpagina's – het bepaalt waar de inhoud komt, hoe het georganiseerd is en wat elk onderdeel betekent. Terwijl CSS later je HTML "aankleedt" met kleuren en lay-outs, en JavaScript het tot leven brengt met interactiviteit, biedt HTML de essentiële structuur die alles mogelijk maakt. @@ -88,7 +88,7 @@ Je maakt een speciale map voor je terrariumproject en voegt je eerste HTML-besta 4. Klik in het Explorer-paneel op het pictogram "New File" 5. Noem je bestand `index.html` -![VS Code Explorer toont het maken van een nieuw bestand](../../../../translated_images/nl/vs-code-index.e2986cf919471eb9.png) +![VS Code Explorer toont het maken van een nieuw bestand](../../../../translated_images/nl/vs-code-index.e2986cf919471eb9.webp) **Optie 2: Gebruik Terminalcommando's** ```bash diff --git a/translations/nl/3-terrarium/2-intro-to-css/README.md b/translations/nl/3-terrarium/2-intro-to-css/README.md index 27d1a15b5..b8fea08a8 100644 --- a/translations/nl/3-terrarium/2-intro-to-css/README.md +++ b/translations/nl/3-terrarium/2-intro-to-css/README.md @@ -30,7 +30,7 @@ journey Glass reflections: 5: Student ``` -![Introductie tot CSS](../../../../translated_images/nl/webdev101-css.3f7af5991bf53a20.png) +![Introductie tot CSS](../../../../translated_images/nl/webdev101-css.3f7af5991bf53a20.webp) > Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) Weet je nog hoe je HTML-terrarium er vrij basic uitzag? Met CSS transformeren we die eenvoudige structuur tot iets visueel aantrekkelijks. @@ -205,7 +205,7 @@ body { Open de ontwikkelaarstools van je browser (F12), ga naar het tabblad Elements en inspecteer je `

`-element. Je zult zien dat het de lettertypefamilie van het body-element erft: -![geërfd lettertype](../../../../translated_images/nl/1.cc07a5cbe114ad1d.png) +![geërfd lettertype](../../../../translated_images/nl/1.cc07a5cbe114ad1d.webp) ✅ **Experimenteren**: Probeer andere overerfbare eigenschappen in te stellen op `` zoals `color`, `line-height` of `text-align`. Wat gebeurt er met je koptekst en andere elementen? @@ -599,7 +599,7 @@ Klaar om je terrarium te verbeteren met realistische glans op glas? Deze technie Je gaat subtiele highlights creëren die simuleren hoe licht reflecteert op glasoppervlakken. Deze aanpak is vergelijkbaar met hoe Renaissance-schilders zoals Jan van Eyck licht en reflectie gebruikten om geschilderd glas driedimensionaal te laten lijken. Dit is wat je wilt bereiken: -![finished terrarium](../../../../translated_images/nl/terrarium-final.2f07047ffc597d0a.png) +![finished terrarium](../../../../translated_images/nl/terrarium-final.2f07047ffc597d0a.webp) **Jouw uitdaging:** - **Creëer** subtiele witte of lichtgekleurde ovale vormen voor de glans op het glas diff --git a/translations/nl/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/nl/3-terrarium/3-intro-to-DOM-and-closures/README.md index d6cb5365d..68a997f3f 100644 --- a/translations/nl/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/nl/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -26,7 +26,7 @@ journey Complete terrarium: 5: Student ``` -![DOM en een closure](../../../../translated_images/nl/webdev101-js.10280393044d7eaa.png) +![DOM en een closure](../../../../translated_images/nl/webdev101-js.10280393044d7eaa.webp) > Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) Welkom bij een van de meest boeiende aspecten van webontwikkeling - interactief maken! Het Document Object Model (DOM) is als een brug tussen je HTML en JavaScript, en vandaag gaan we het gebruiken om je terrarium tot leven te brengen. Toen Tim Berners-Lee de eerste webbrowser creëerde, stelde hij zich een web voor waar documenten dynamisch en interactief konden zijn - de DOM maakt die visie mogelijk. @@ -105,7 +105,7 @@ flowchart TD style Q fill:#ffebee ``` -![DOM boomrepresentatie](../../../../translated_images/nl/dom-tree.7daf0e763cbbba92.png) +![DOM boomrepresentatie](../../../../translated_images/nl/dom-tree.7daf0e763cbbba92.webp) > Een representatie van de DOM en de HTML-markup die ernaar verwijst. Van [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -150,7 +150,7 @@ flowchart LR > 💡 **Closures begrijpen**: Closures zijn een belangrijk onderwerp in JavaScript, en veel ontwikkelaars gebruiken ze jarenlang voordat ze alle theoretische aspecten volledig begrijpen. Vandaag richten we ons op praktische toepassing - je zult zien dat closures natuurlijk ontstaan terwijl we onze interactieve functies bouwen. Begrip zal zich ontwikkelen naarmate je ziet hoe ze echte problemen oplossen. -![DOM boomrepresentatie](../../../../translated_images/nl/dom-tree.7daf0e763cbbba92.png) +![DOM boomrepresentatie](../../../../translated_images/nl/dom-tree.7daf0e763cbbba92.webp) > Een representatie van de DOM en de HTML-markup die ernaar verwijst. Van [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -598,7 +598,7 @@ Test nu jouw interactieve terrarium! Open je `index.html`-bestand in een webbrow - **Ondersteuning voor meerdere apparaten**: Werkt op desktop en mobiel - **Prestatiebewust**: Geen geheugenlekken of overbodige berekeningen -![afgewerkt terrarium](../../../../translated_images/nl/terrarium-final.0920f16e87c13a84.png) +![afgewerkt terrarium](../../../../translated_images/nl/terrarium-final.0920f16e87c13a84.webp) --- diff --git a/translations/nl/3-terrarium/solution/README.md b/translations/nl/3-terrarium/solution/README.md index 92f50f0e3..5cda764c5 100644 --- a/translations/nl/3-terrarium/solution/README.md +++ b/translations/nl/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Een kleine drag-and-drop code-meditatie. Met een beetje HTML, JS en CSS kun je een webinterface bouwen, deze stylen en interactie toevoegen. -![mijn terrarium](../../../../translated_images/nl/screenshot_gray.0c796099a1f9f25e.png) +![mijn terrarium](../../../../translated_images/nl/screenshot_gray.0c796099a1f9f25e.webp) ## Credits diff --git a/translations/nl/5-browser-extension/1-about-browsers/README.md b/translations/nl/5-browser-extension/1-about-browsers/README.md index e6adfd6f2..ef354037a 100644 --- a/translations/nl/5-browser-extension/1-about-browsers/README.md +++ b/translations/nl/5-browser-extension/1-about-browsers/README.md @@ -26,7 +26,7 @@ journey Polish experience: 5: Student ``` -![Browser sketchnote](../../../../translated_images/nl/browser.60317c9be8b7f84a.jpg) +![Browser sketchnote](../../../../translated_images/nl/browser.60317c9be8b7f84a.webp) > Sketchnote door [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## Pre-Les Quiz @@ -79,7 +79,7 @@ Dit proces weerspiegelt hoe de eerste webbrowser, WorldWideWeb, werd ontworpen d ✅ **Een beetje geschiedenis**: De eerste browser heette 'WorldWideWeb' en werd in 1990 gemaakt door Sir Timothy Berners-Lee. -![vroegtijdige browsers](../../../../translated_images/nl/earlybrowsers.d984b711cdf3a42d.jpg) +![vroegtijdige browsers](../../../../translated_images/nl/earlybrowsers.d984b711cdf3a42d.webp) > Enkele vroegtijdige browsers, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### Hoe Browsers Webinhoud Verwerken @@ -198,7 +198,7 @@ quadrantChart Het begrijpen van het installatieproces van extensies helpt je de gebruikerservaring te anticiperen wanneer mensen je extensie installeren. Het installatieproces is gestandaardiseerd in moderne browsers, met kleine variaties in interfaceontwerp. -![screenshot van de Edge-browser die de open edge://extensions-pagina en het open instellingenmenu toont](../../../../translated_images/nl/install-on-edge.d68781acaf0b3d3d.png) +![screenshot van de Edge-browser die de open edge://extensions-pagina en het open instellingenmenu toont](../../../../translated_images/nl/install-on-edge.d68781acaf0b3d3d.webp) > **Belangrijk**: Zorg ervoor dat je ontwikkelaarsmodus inschakelt en extensies van andere winkels toestaat bij het testen van je eigen extensies. @@ -313,10 +313,10 @@ Dit volgt het principe van progressieve onthulling dat sinds de vroege dagen van ### Overzicht van Extensie Weergaven **Setup Weergave** - Configuratie voor eerste gebruik: -![screenshot van de voltooide extensie geopend in een browser, met een formulier met invoervelden voor regio en API-sleutel.](../../../../translated_images/nl/1.b6da8c1394b07491.png) +![screenshot van de voltooide extensie geopend in een browser, met een formulier met invoervelden voor regio en API-sleutel.](../../../../translated_images/nl/1.b6da8c1394b07491.webp) **Resultaten Weergave** - Weergave van CO2-voetafdrukgegevens: -![screenshot van de voltooide extensie die waarden toont voor CO2-gebruik en percentage fossiele brandstoffen voor de regio US-NEISO.](../../../../translated_images/nl/2.1dae52ff08042246.png) +![screenshot van de voltooide extensie die waarden toont voor CO2-gebruik en percentage fossiele brandstoffen voor de regio US-NEISO.](../../../../translated_images/nl/2.1dae52ff08042246.webp) ### Het Configuratieformulier Bouwen diff --git a/translations/nl/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/nl/5-browser-extension/2-forms-browsers-local-storage/README.md index 520be2fbf..57041cd37 100644 --- a/translations/nl/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/nl/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -268,7 +268,7 @@ stateDiagram-v2 ClearStorage --> FirstTime: Back to setup ``` -![Local storage pane](../../../../translated_images/nl/localstorage.472f8147b6a3f8d1.png) +![Local storage pane](../../../../translated_images/nl/localstorage.472f8147b6a3f8d1.webp) > ⚠️ **Beveiligingsoverweging**: In productie-applicaties brengt het opslaan van API-sleutels in LocalStorage beveiligingsrisico's met zich mee, omdat JavaScript toegang heeft tot deze gegevens. Voor leerdoeleinden werkt deze aanpak prima, maar echte applicaties zouden veilige server-side opslag moeten gebruiken voor gevoelige inloggegevens. diff --git a/translations/nl/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/nl/5-browser-extension/3-background-tasks-and-performance/README.md index 6bd83d5d7..162e74fa6 100644 --- a/translations/nl/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/nl/5-browser-extension/3-background-tasks-and-performance/README.md @@ -126,7 +126,7 @@ Om Developer Tools in Edge te openen, klik je op die drie puntjes rechtsboven, g Laten we dit uitproberen. Open een website (Microsoft.com werkt goed hiervoor) en klik op die 'Opnemen'-knop. Vernieuw nu de pagina en bekijk hoe de profiler alles vastlegt wat er gebeurt. Wanneer je stopt met opnemen, zie je een gedetailleerde uitsplitsing van hoe de browser de site 'script', 'rendert' en 'schildert'. Het doet me denken aan hoe de missiecontrole elk systeem monitort tijdens een raketlancering - je krijgt realtime gegevens over precies wat er gebeurt en wanneer. -![Edge profiler](../../../../translated_images/nl/profiler.5a4a62479c5df01c.png) +![Edge profiler](../../../../translated_images/nl/profiler.5a4a62479c5df01c.webp) ✅ De [Microsoft Documentatie](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) heeft veel meer details als je dieper wilt duiken. @@ -136,11 +136,11 @@ Selecteer elementen van de profieltijdlijn om in te zoomen op gebeurtenissen die Krijg een momentopname van de prestaties van je pagina door een deel van de profieltijdlijn te selecteren en naar het samenvattingspaneel te kijken: -![Edge profiler snapshot](../../../../translated_images/nl/snapshot.97750180ebcad737.png) +![Edge profiler snapshot](../../../../translated_images/nl/snapshot.97750180ebcad737.webp) Controleer het Event Log-paneel om te zien of een gebeurtenis langer dan 15 ms duurde: -![Edge event log](../../../../translated_images/nl/log.804026979f3707e0.png) +![Edge event log](../../../../translated_images/nl/log.804026979f3707e0.webp) ✅ Leer je profiler kennen! Open de ontwikkelaarstools op deze site en kijk of er knelpunten zijn. Wat is het langzaamst ladende bestand? Het snelste? diff --git a/translations/nl/5-browser-extension/README.md b/translations/nl/5-browser-extension/README.md index 70d1f0f76..c49a464d7 100644 --- a/translations/nl/5-browser-extension/README.md +++ b/translations/nl/5-browser-extension/README.md @@ -23,7 +23,7 @@ Deze extensie kan ad hoc door een gebruiker worden opgeroepen zodra een API-sleu ### Credits -![een groene browserextensie](../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.png) +![een groene browserextensie](../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.webp) ## Credits diff --git a/translations/nl/5-browser-extension/solution/README.md b/translations/nl/5-browser-extension/solution/README.md index 5aca92996..d9d6bb709 100644 --- a/translations/nl/5-browser-extension/solution/README.md +++ b/translations/nl/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Gebruik de CO2 Signal API van tmrow om het elektriciteitsverbruik bij te houden en bouw een browserextensie zodat je direct in je browser een herinnering hebt over hoe zwaar het elektriciteitsverbruik in jouw regio is. Door deze extensie ad hoc te gebruiken, kun je beter beslissingen nemen over je activiteiten op basis van deze informatie. -![extensie screenshot](../../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.png) +![extensie screenshot](../../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.webp) ## Aan de slag @@ -31,7 +31,7 @@ npm run build Om de extensie op Edge te installeren, gebruik je het menu met de 'drie stippen' rechtsboven in de browser om het Extensies-paneel te vinden. Selecteer daar 'Load Unpacked' om een nieuwe extensie te laden. Open de 'dist'-map wanneer hierom wordt gevraagd en de extensie wordt geladen. Om het te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API ([hier via e-mail verkrijgen](https://www.co2signal.com/) - voer je e-mailadres in het veld op deze pagina in) en de [code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met de [Electricity Map](https://www.electricitymap.org/map) (in Boston gebruik ik bijvoorbeeld 'US-NEISO'). -![installeren](../../../../translated_images/nl/install-on-edge.78634f02842c4828.png) +![installeren](../../../../translated_images/nl/install-on-edge.78634f02842c4828.webp) Zodra de API-sleutel en regio zijn ingevoerd in de interface van de extensie, zou de gekleurde stip in de browserextensiebalk moeten veranderen om het energieverbruik in jouw regio weer te geven. Het geeft je een aanwijzing over welke energie-intensieve activiteiten geschikt zijn om uit te voeren. Het concept achter dit 'stip'-systeem is geïnspireerd door de [Energy Lollipop extensie](https://energylollipop.com/) voor emissies in Californië. diff --git a/translations/nl/5-browser-extension/solution/translation/README.fr.md b/translations/nl/5-browser-extension/solution/translation/README.fr.md index e15326097..6cccab422 100644 --- a/translations/nl/5-browser-extension/solution/translation/README.fr.md +++ b/translations/nl/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Met behulp van de CO2 Signal API van tmrow om het elektriciteitsverbruik te volgen, maak je een browserextensie zodat je direct in je browser een herinnering kunt krijgen over het elektriciteitsverbruik in jouw regio. Het gebruik van deze ad-hoc extensie helpt je om je activiteiten te beoordelen op basis van deze informatie. -![extensie screenshot](../../../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.png) +![extensie screenshot](../../../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.webp) ## Aan de slag @@ -31,7 +31,7 @@ npm run build Om de extensie op Edge te installeren, gebruik je het menu met de 'drie puntjes' in de rechterbovenhoek van de browser om het Extensies-paneel te vinden. Selecteer daar 'Uitgepakte extensie laden' om een nieuwe extensie te laden. Open de map 'dist' wanneer daarom wordt gevraagd, en de extensie wordt geladen. Om de extensie te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API ([verkrijg er hier een via e-mail](https://www.co2signal.com/) - voer je e-mailadres in het veld op deze pagina in) en de [code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met de [Electricity Map](https://www.electricitymap.org/map) (in Boston gebruik ik bijvoorbeeld 'US-NEISO'). -![installatie](../../../../../translated_images/nl/install-on-edge.78634f02842c4828.png) +![installatie](../../../../../translated_images/nl/install-on-edge.78634f02842c4828.webp) Zodra de API-sleutel en de regio zijn ingevoerd in de extensie-interface, zou het gekleurde puntje in de extensiebalk van de browser moeten veranderen om het energieverbruik in jouw regio weer te geven. Dit geeft je een indicatie van welke energie-intensieve activiteiten op dat moment geschikt zijn. Het concept achter dit 'puntensysteem' is geïnspireerd door de [Energy Lollipop extensie](https://energylollipop.com/) voor emissies in Californië. diff --git a/translations/nl/5-browser-extension/solution/translation/README.hi.md b/translations/nl/5-browser-extension/solution/translation/README.hi.md index 1629e777d..1cd1c3391 100644 --- a/translations/nl/5-browser-extension/solution/translation/README.hi.md +++ b/translations/nl/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Met behulp van de CO2 Signal API van tmrow om het elektriciteitsverbruik te volgen, bouwen we een browser-extensie die je eraan herinnert hoe zwaar het elektriciteitsverbruik in jouw regio is. Door deze extensie te gebruiken, kun je op basis van deze informatie beslissingen nemen over je activiteiten. -![Extensie Screenshot](../../../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.png) +![Extensie Screenshot](../../../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.webp) ## Aan de slag @@ -31,7 +31,7 @@ npm run build Om te installeren in Edge, gebruik het 'drie-puntjes'-menu in de rechterbovenhoek van de browser om het extensiepaneel te vinden. Kies daar 'Ongepakte extensie laden'. Open de 'dist'-map in de prompt en de extensie wordt geladen. Om het te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API ([verkrijgbaar via e-mail hier](https://www.co2signal.com/) - voer je e-mailadres in het vak op die pagina in) en [de code voor jouw regio](http://api.electricitymap.org/v3/zones) van [Electricity Map](https://www.electricitymap.org/map) (bijvoorbeeld, in Boston gebruik ik 'US-NEISO'). -![installeren](../../../../../translated_images/nl/install-on-edge.78634f02842c4828.png) +![installeren](../../../../../translated_images/nl/install-on-edge.78634f02842c4828.webp) Zodra de API-sleutel en regio in de extensie-interface zijn ingevoerd, zou de gekleurde stip in de browser-extensiebalk moeten veranderen om het energieverbruik in jouw regio weer te geven. Dit geeft je een indicatie van welke energie-intensieve activiteiten geschikt zijn op dat moment. Het idee achter dit 'stip'-systeem is geïnspireerd door de [Energy Lollipop-extensie](https://energylollipop.com/) voor emissies in Californië. diff --git a/translations/nl/5-browser-extension/solution/translation/README.it.md b/translations/nl/5-browser-extension/solution/translation/README.it.md index 39622071d..a963a1139 100644 --- a/translations/nl/5-browser-extension/solution/translation/README.it.md +++ b/translations/nl/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: We zullen de Signal CO2 API van tmrow gebruiken om het elektriciteitsverbruik te monitoren en een browserextensie te maken. Zo kun je direct in je browser een herinnering krijgen over hoe zwaar het elektriciteitsverbruik in jouw regio is. Het gebruik van deze op maat gemaakte extensie helpt je om je activiteiten te evalueren op basis van deze informatie. -![screenshot van de extensie](../../../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.png) +![screenshot van de extensie](../../../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.webp) ## Aan de Slag @@ -31,7 +31,7 @@ npm run build Om de extensie in Edge te installeren, gebruik je het menu met de "drie puntjes" in de rechterbovenhoek van de browser om het Extensies-paneel te vinden. Als het nog niet is ingeschakeld, zet dan de Ontwikkelaarsmodus aan (linksonder). Selecteer "Uitgepakte extensie laden" om een nieuwe extensie te laden. Open de map "dist" in het prompt, en de extensie wordt geladen. Om het te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API (je kunt er [hier via e-mail een krijgen](https://www.co2signal.com/) - voer je e-mailadres in het veld op deze pagina in) en de [code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met de [elektriciteitskaart](https://www.electricitymap.org/map) (bijvoorbeeld, in Boston is dat "US-NEISO"). -![installatie](../../../../../translated_images/nl/install-on-edge.78634f02842c4828.png) +![installatie](../../../../../translated_images/nl/install-on-edge.78634f02842c4828.webp) Zodra de API-sleutel en de regio zijn ingevoerd in de interface van de extensie, zou het gekleurde puntje in de browserextensiebalk moeten veranderen om het energieverbruik van de regio weer te geven. Het biedt ook een aanwijzing over welke energie-intensieve activiteiten geschikt zijn om uit te voeren. Het concept achter dit "puntensysteem" is geïnspireerd door de [Energy Lollipop-extensie](https://energylollipop.com/) voor emissies in Californië. diff --git a/translations/nl/5-browser-extension/solution/translation/README.ja.md b/translations/nl/5-browser-extension/solution/translation/README.ja.md index 404831543..0ab1cfe31 100644 --- a/translations/nl/5-browser-extension/solution/translation/README.ja.md +++ b/translations/nl/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Bouw een browserextensie die, met behulp van de CO2 Signal API van tmrow, het energieverbruik in jouw regio bijhoudt en dit als een herinnering op je browser weergeeft. Door deze extensie ad-hoc te gebruiken, kun je je activiteiten baseren op deze informatie. -![extension screenshot](../../../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.png) +![extension screenshot](../../../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.webp) ## Aan de slag @@ -31,7 +31,7 @@ npm run build Om de extensie in Edge te installeren, ga je naar het "drie stippen"-menu rechtsboven in de browser en zoek je het paneel "Extensies". Kies daar "Load Unpacked" en laad de nieuwe extensie. Wanneer je wordt gevraagd, open je de "dist"-map om de extensie te laden. Om de extensie te gebruiken, heb je een API-sleutel van de CO2 Signal API nodig ([hier via e-mail verkrijgen](https://www.co2signal.com/) - voer je e-mailadres in het vak op die pagina in) en een [code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met de [Electricity Map](https://www.electricitymap.org/map) (bijvoorbeeld, voor Boston gebruik je 'US-NEISO'). -![installing](../../../../../translated_images/nl/install-on-edge.78634f02842c4828.png) +![installing](../../../../../translated_images/nl/install-on-edge.78634f02842c4828.webp) Wanneer je de API-sleutel en regio invoert in de extensie-interface, verandert de gekleurde stip die in de extensiebalk van je browser wordt weergegeven. Deze stip weerspiegelt het energieverbruik in jouw regio en geeft aan welke activiteiten geschikt zijn op basis van het energieverbruik. Het concept van dit "stip"-systeem is geïnspireerd door de [Energy Lollipop extension](https://energylollipop.com/) voor emissies in Californië. diff --git a/translations/nl/5-browser-extension/solution/translation/README.ms.md b/translations/nl/5-browser-extension/solution/translation/README.ms.md index c0e2f44a3..a2e2e6786 100644 --- a/translations/nl/5-browser-extension/solution/translation/README.ms.md +++ b/translations/nl/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Gebruik de CO2 Signal API van tmrow om het elektriciteitsverbruik te monitoren en bouw een browserextensie waarmee je waarschuwingen kunt ontvangen over hoe zwaar het elektriciteitsverbruik in jouw regio is. Het gebruik van deze extensie helpt je om je activiteiten beter af te stemmen op deze informatie. -![screenshot van browserextensie](../../../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.png) +![screenshot van browserextensie](../../../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.webp) ## Aan de Slag @@ -31,7 +31,7 @@ npm run build Om de extensie in Edge te installeren, gebruik je het menu met de 'drie puntjes' in de rechterbovenhoek van de browser om het Extensies-paneel te vinden. Kies daar 'Load Unpacked' om een nieuwe extensie te laden. Open de 'dist'-map wanneer hierom wordt gevraagd en de extensie wordt geladen. Om de extensie te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API ([verkrijg er een via e-mail hier](https://www.co2signal.com/) - voer je e-mailadres in het veld op deze pagina in) en [de code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met [Electricity Map](https://www.electricitymap.org/map) (in Boston gebruik ik bijvoorbeeld 'US-NEISO'). -![bezig met downloaden](../../../../../translated_images/nl/install-on-edge.78634f02842c4828.png) +![bezig met downloaden](../../../../../translated_images/nl/install-on-edge.78634f02842c4828.webp) Zodra de API-sleutel en regio zijn ingevoerd in de interface van de extensie, zal de gekleurde stip in de browserextensiebalk veranderen om het energieverbruik in jouw regio weer te geven en je een indicatie geven van welke zware activiteiten geschikt zijn om te doen. Het idee achter dit 'stip'-systeem is geïnspireerd door [de Energy Lollipop browserextensie](https://energylollipop.com/) voor de uitstoot in Californië. diff --git a/translations/nl/5-browser-extension/start/README.md b/translations/nl/5-browser-extension/start/README.md index dc7fdd8b0..a4e77a245 100644 --- a/translations/nl/5-browser-extension/start/README.md +++ b/translations/nl/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Met behulp van de CO2 Signal API van tmrow om elektriciteitsgebruik bij te houden, bouw je een browserextensie zodat je direct in je browser een herinnering hebt over hoe zwaar het elektriciteitsgebruik in jouw regio is. Door deze extensie ad hoc te gebruiken, kun je beter beslissingen nemen over je activiteiten op basis van deze informatie. -![extensie screenshot](../../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.png) +![extensie screenshot](../../../../translated_images/nl/extension-screenshot.0e7f5bfa110e92e3.webp) ## Aan de slag @@ -31,7 +31,7 @@ npm run build Om de extensie op Edge te installeren, gebruik je het menu met de 'drie puntjes' rechtsboven in de browser om het Extensiepaneel te vinden. Selecteer daar 'Load Unpacked' om een nieuwe extensie te laden. Open de map 'dist' wanneer daarom wordt gevraagd, en de extensie wordt geladen. Om de extensie te gebruiken, heb je een API-sleutel nodig voor de CO2 Signal API ([hier aanvragen via e-mail](https://www.co2signal.com/) - voer je e-mailadres in op deze pagina) en de [code voor jouw regio](http://api.electricitymap.org/v3/zones) die overeenkomt met de [Electricity Map](https://www.electricitymap.org/map) (in Boston gebruik ik bijvoorbeeld 'US-NEISO'). -![installeren](../../../../translated_images/nl/install-on-edge.78634f02842c4828.png) +![installeren](../../../../translated_images/nl/install-on-edge.78634f02842c4828.webp) Zodra de API-sleutel en regio zijn ingevoerd in de interface van de extensie, zou de gekleurde stip in de browserextensiebalk moeten veranderen om het energiegebruik in jouw regio weer te geven. Het geeft je ook een aanwijzing over welke energie-intensieve activiteiten geschikt zijn om te doen. Het idee achter dit 'stip'-systeem is geïnspireerd door de [Energy Lollipop-extensie](https://energylollipop.com/) voor emissies in Californië. diff --git a/translations/nl/6-space-game/2-drawing-to-canvas/README.md b/translations/nl/6-space-game/2-drawing-to-canvas/README.md index 629f157a1..6f21bf92f 100644 --- a/translations/nl/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/nl/6-space-game/2-drawing-to-canvas/README.md @@ -108,7 +108,7 @@ quadrantChart UI Elements: [0.9, 0.1] ``` -![het raster van de canvas](../../../../translated_images/nl/canvas_grid.5f209da785ded492.png) +![het raster van de canvas](../../../../translated_images/nl/canvas_grid.5f209da785ded492.webp) > Afbeelding van [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) Om op het canvas-element te tekenen, volg je hetzelfde drie-stappenproces dat de basis vormt van alle canvasgraphics. Zodra je dit een paar keer hebt gedaan, wordt het een tweede natuur: @@ -329,11 +329,11 @@ Je gaat een webpagina maken met een Canvas-element. Het moet een zwart scherm va - Heldenschip - ![Heldenschip](../../../../translated_images/nl/player.dd24c1afa8c71e9b.png) + ![Heldenschip](../../../../translated_images/nl/player.dd24c1afa8c71e9b.webp) - 5*5 monster - ![Monsterschip](../../../../translated_images/nl/enemyShip.5df2a822c16650c2.png) + ![Monsterschip](../../../../translated_images/nl/enemyShip.5df2a822c16650c2.webp) ### Aanbevolen stappen om te beginnen met ontwikkelen @@ -470,7 +470,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { Het eindresultaat zou er zo uit moeten zien: -![Zwart scherm met een held en 5*5 monsters](../../../../translated_images/nl/partI-solution.36c53b48c9ffae2a.png) +![Zwart scherm met een held en 5*5 monsters](../../../../translated_images/nl/partI-solution.36c53b48c9ffae2a.webp) ## Oplossing diff --git a/translations/nl/6-space-game/5-keeping-score/README.md b/translations/nl/6-space-game/5-keeping-score/README.md index 0422a89fa..50c853bd0 100644 --- a/translations/nl/6-space-game/5-keeping-score/README.md +++ b/translations/nl/6-space-game/5-keeping-score/README.md @@ -160,7 +160,7 @@ sequenceDiagram ``` - **Puntensysteem**: Elk vernietigd vijandelijk schip levert 100 punten op (ronde getallen zijn gemakkelijker voor spelers om mentaal te berekenen). De score wordt weergegeven in de linkerbenedenhoek. -- **Leventeller**: Je held begint met drie levens - een standaard die door vroege arcadespellen werd vastgesteld om uitdaging en speelbaarheid in balans te brengen. Elke botsing met een vijand kost één leven. We tonen de resterende levens in de rechterbenedenhoek met scheepsiconen ![life image](../../../../translated_images/nl/life.6fb9f50d53ee0413.png). +- **Leventeller**: Je held begint met drie levens - een standaard die door vroege arcadespellen werd vastgesteld om uitdaging en speelbaarheid in balans te brengen. Elke botsing met een vijand kost één leven. We tonen de resterende levens in de rechterbenedenhoek met scheepsiconen ![life image](../../../../translated_images/nl/life.6fb9f50d53ee0413.webp). ## Laten we beginnen met bouwen! diff --git a/translations/nl/7-bank-project/1-template-route/README.md b/translations/nl/7-bank-project/1-template-route/README.md index e33e05db4..5b4619a24 100644 --- a/translations/nl/7-bank-project/1-template-route/README.md +++ b/translations/nl/7-bank-project/1-template-route/README.md @@ -652,7 +652,7 @@ sequenceDiagram Het gebruik van `history.pushState` creëert nieuwe invoeren in de navigatiegeschiedenis van de browser. Je kunt dat controleren door de *terugknop* van je browser ingedrukt te houden, het zou er ongeveer zo uit moeten zien: -![Screenshot van navigatiegeschiedenis](../../../../translated_images/nl/history.7fdabbafa521e064.png) +![Screenshot van navigatiegeschiedenis](../../../../translated_images/nl/history.7fdabbafa521e064.webp) Als je een paar keer op de terugknop klikt, zie je dat de huidige URL verandert en de geschiedenis wordt bijgewerkt, maar dezelfde template blijft worden weergegeven. diff --git a/translations/nl/7-bank-project/2-forms/README.md b/translations/nl/7-bank-project/2-forms/README.md index 3d1f1d4f3..d799959d8 100644 --- a/translations/nl/7-bank-project/2-forms/README.md +++ b/translations/nl/7-bank-project/2-forms/README.md @@ -295,7 +295,7 @@ Laten we eerst observeren wat er gebeurt bij een basisformulierverzending: 2. Observeer de veranderingen in de adresbalk van je browser 3. Merk op hoe de pagina opnieuw laadt en gegevens in de URL verschijnen -![Screenshot van de URL-verandering in de browser na het klikken op de Registreren-knop](../../../../translated_images/nl/click-register.e89a30bf0d4bc9ca.png) +![Screenshot van de URL-verandering in de browser na het klikken op de Registreren-knop](../../../../translated_images/nl/click-register.e89a30bf0d4bc9ca.webp) ### Vergelijking van HTTP-methoden @@ -350,7 +350,7 @@ Laten we je registratieformulier configureren om correct te communiceren met de 2. **Klik** op de knop "Account aanmaken" 3. **Observeer** de serverrespons in je browser -![Een browservenster op het adres localhost:5000/api/accounts, met een JSON-string met gebruikersgegevens](../../../../translated_images/nl/form-post.61de4ca1b964d91a.png) +![Een browservenster op het adres localhost:5000/api/accounts, met een JSON-string met gebruikersgegevens](../../../../translated_images/nl/form-post.61de4ca1b964d91a.webp) **Wat je zou moeten zien:** - **Browser verwijst** naar de API-eindpunt-URL @@ -615,7 +615,7 @@ async function register() { 3. **Klik** op "Account aanmaken" 4. **Observeer** de consoleberichten en gebruikersfeedback -![Screenshot met logbericht in de browserconsole](../../../../translated_images/nl/browser-console.efaf0b51aaaf6778.png) +![Screenshot met logbericht in de browserconsole](../../../../translated_images/nl/browser-console.efaf0b51aaaf6778.webp) **Wat je zou moeten zien:** - **Laadstatus** verschijnt op de verzendknop @@ -790,7 +790,7 @@ Laten we je registratieformulier verbeteren met robuuste validatie die een uitst 3. **Probeer** speciale tekens in het gebruikersnaamveld 4. **Voer** een negatief saldo in -![Screenshot met validatiefout bij het proberen het formulier in te dienen](../../../../translated_images/nl/validation-error.8bd23e98d416c22f.png) +![Screenshot met validatiefout bij het proberen het formulier in te dienen](../../../../translated_images/nl/validation-error.8bd23e98d416c22f.webp) **Wat je zult zien:** - **Browser toont** native validatiemeldingen @@ -952,7 +952,7 @@ Toon een foutmelding in de HTML als de gebruiker al bestaat. Hier is een voorbeeld van hoe de uiteindelijke inlogpagina eruit kan zien na wat styling: -![Screenshot van de inlogpagina na het toevoegen van CSS-stijlen](../../../../translated_images/nl/result.96ef01f607bf856a.png) +![Screenshot van de inlogpagina na het toevoegen van CSS-stijlen](../../../../translated_images/nl/result.96ef01f607bf856a.webp) ## Quiz na de les diff --git a/translations/nl/7-bank-project/3-data/README.md b/translations/nl/7-bank-project/3-data/README.md index b0407d876..687d7dd74 100644 --- a/translations/nl/7-bank-project/3-data/README.md +++ b/translations/nl/7-bank-project/3-data/README.md @@ -160,7 +160,7 @@ sequenceDiagram Browser->>User: Displays new page (flash/reload) ``` -![Update workflow in een multi-page applicatie](../../../../translated_images/nl/mpa.7f7375a1a2d4aa77.png) +![Update workflow in een multi-page applicatie](../../../../translated_images/nl/mpa.7f7375a1a2d4aa77.webp) **Waarom deze aanpak onhandig aanvoelde:** - Elke klik betekende dat de hele pagina opnieuw moest worden opgebouwd @@ -187,7 +187,7 @@ sequenceDiagram Browser->>User: Shows updated content (no reload) ``` -![Update workflow in een single-page applicatie](../../../../translated_images/nl/spa.268ec73b41f992c2.png) +![Update workflow in een single-page applicatie](../../../../translated_images/nl/spa.268ec73b41f992c2.webp) **Waarom SPA's zoveel beter aanvoelen:** - Alleen de delen die daadwerkelijk zijn veranderd worden bijgewerkt (slim, toch?) @@ -523,7 +523,7 @@ if (data.error) { Nu, wanneer je test met een ongeldig account, zie je een nuttige foutmelding direct op de pagina! -![Screenshot van de foutmelding die wordt weergegeven tijdens het inloggen](../../../../translated_images/nl/login-error.416fe019b36a6327.png) +![Screenshot van de foutmelding die wordt weergegeven tijdens het inloggen](../../../../translated_images/nl/login-error.416fe019b36a6327.webp) #### Stap 4: Inclusief zijn met toegankelijkheid @@ -961,7 +961,7 @@ Klaar om je bankingapp naar een hoger niveau te tillen? Laten we ervoor zorgen d Hier is hoe een gepolijst dashboard eruit zou kunnen zien: -![Screenshot van een voorbeeldresultaat van het dashboard na styling](../../../../translated_images/nl/screen2.123c82a831a1d14a.png) +![Screenshot van een voorbeeldresultaat van het dashboard na styling](../../../../translated_images/nl/screen2.123c82a831a1d14a.webp) Voel je niet verplicht om dit precies na te maken - gebruik het als inspiratie en maak er je eigen versie van! diff --git a/translations/nl/7-bank-project/4-state-management/README.md b/translations/nl/7-bank-project/4-state-management/README.md index 7da4c87cb..2ecda0e56 100644 --- a/translations/nl/7-bank-project/4-state-management/README.md +++ b/translations/nl/7-bank-project/4-state-management/README.md @@ -190,7 +190,7 @@ Net als het compartimentontwerp van de Titanic dat robuust leek totdat meerdere In plaats van achter de feiten aan te lopen, gaan we een **gecentraliseerd state management** systeem creëren. Denk eraan als één echt georganiseerd persoon die verantwoordelijk is voor alle belangrijke zaken: -![Schema dat de datastromen toont tussen de HTML, gebruikersacties en state](../../../../translated_images/nl/data-flow.fa2354e0908fecc8.png) +![Schema dat de datastromen toont tussen de HTML, gebruikersacties en state](../../../../translated_images/nl/data-flow.fa2354e0908fecc8.webp) ```mermaid flowchart TD @@ -803,7 +803,7 @@ Deze uitdaging helpt u te denken als een professionele ontwikkelaar die zowel ge Hier is een voorbeeldresultaat na het voltooien van de opdracht: -![Screenshot van een voorbeeld "Transactie toevoegen"-dialoogvenster](../../../../translated_images/nl/dialog.93bba104afeb79f1.png) +![Screenshot van een voorbeeld "Transactie toevoegen"-dialoogvenster](../../../../translated_images/nl/dialog.93bba104afeb79f1.webp) --- diff --git a/translations/nl/7-bank-project/4-state-management/assignment.md b/translations/nl/7-bank-project/4-state-management/assignment.md index 89762c1df..9bfd8ad6c 100644 --- a/translations/nl/7-bank-project/4-state-management/assignment.md +++ b/translations/nl/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ Raadpleeg de [server API-documentatie](../api/README.md) voor: **Verwacht Resultaat:** Na het voltooien van deze opdracht moet je bankapp een volledig functionele "Transactie Toevoegen"-functie hebben die er professioneel uitziet en zich professioneel gedraagt: -![Screenshot van een voorbeeld "Transactie Toevoegen" dialoog](../../../../translated_images/nl/dialog.93bba104afeb79f1.png) +![Screenshot van een voorbeeld "Transactie Toevoegen" dialoog](../../../../translated_images/nl/dialog.93bba104afeb79f1.webp) ## Testen van je Implementatie diff --git a/translations/nl/7-bank-project/README.md b/translations/nl/7-bank-project/README.md index 75c2efa2a..d97fe510b 100644 --- a/translations/nl/7-bank-project/README.md +++ b/translations/nl/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: In dit project leer je hoe je een fictieve bank kunt bouwen. Deze lessen bevatten instructies over hoe je een webapp kunt opzetten en routes kunt toevoegen, formulieren kunt bouwen, de status kunt beheren en gegevens kunt ophalen van een API waarmee je de gegevens van de bank kunt ophalen. -| ![Scherm1](../../../translated_images/nl/screen1.baccbba0f1f93364.png) | ![Scherm2](../../../translated_images/nl/screen2.123c82a831a1d14a.png) | +| ![Scherm1](../../../translated_images/nl/screen1.baccbba0f1f93364.webp) | ![Scherm2](../../../translated_images/nl/screen2.123c82a831a1d14a.webp) | |--------------------------------|--------------------------------| ## Lessen diff --git a/translations/nl/8-code-editor/1-using-a-code-editor/README.md b/translations/nl/8-code-editor/1-using-a-code-editor/README.md index 23b0b5a6b..42e983f2f 100644 --- a/translations/nl/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/nl/8-code-editor/1-using-a-code-editor/README.md @@ -185,7 +185,7 @@ Net zoals de telefoon van Alexander Graham Bell verre locaties verbond, verbindt Zodra alles is geladen, zie je een prachtig schone werkruimte die is ontworpen om je gefocust te houden op wat belangrijk is – je code! -![Standaard VSCode.dev interface](../../../../translated_images/nl/default-vscode-dev.5d06881d65c1b323.png) +![Standaard VSCode.dev interface](../../../../translated_images/nl/default-vscode-dev.5d06881d65c1b323.webp) **Hier is je rondleiding door de buurt:** - **Activiteitenbalk** (die strook links): Je hoofdnavigatie met Explorer 📁, Zoeken 🔍, Source Control 🌿, Extensies 🧩, en Instellingen ⚙️ @@ -233,7 +233,7 @@ Dit is perfect wanneer je nieuw begint in VSCode.dev en een specifieke repositor 1. Ga naar [vscode.dev](https://vscode.dev) als je daar nog niet bent 2. Zoek de knop "Open Remote Repository" op het welkomstscherm en klik erop - ![Open remote repository](../../../../translated_images/nl/open-remote-repository.bd9c2598b8949e7f.png) + ![Open remote repository](../../../../translated_images/nl/open-remote-repository.bd9c2598b8949e7f.webp) 3. Plak een GitHub-repository-URL (probeer deze: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. Druk op Enter en zie de magie gebeuren! @@ -242,7 +242,7 @@ Dit is perfect wanneer je nieuw begint in VSCode.dev en een specifieke repositor Wil je je als een codeerwizard voelen? Probeer deze sneltoets: Ctrl+Shift+P (of Cmd+Shift+P op Mac) om de Command Palette te openen: -![Command Palette](../../../../translated_images/nl/palette-menu.4946174e07f42622.png) +![Command Palette](../../../../translated_images/nl/palette-menu.4946174e07f42622.webp) **De Command Palette is als een zoekmachine voor alles wat je kunt doen:** - Typ "open remote" en het vindt de repository-opener voor je @@ -304,7 +304,7 @@ Net zoals het organiseren van blauwdrukken in het kantoor van een architect, vol 3. Voer de bestandsnaam in, inclusief de juiste extensie (`style.css`, `script.js`, `index.html`) 4. Druk op Enter om het bestand te maken -![Een nieuw bestand maken](../../../../translated_images/nl/create-new-file.2814e609c2af9aeb.png) +![Een nieuw bestand maken](../../../../translated_images/nl/create-new-file.2814e609c2af9aeb.webp) **Naamgevingsconventies:** - Gebruik beschrijvende namen die het doel van het bestand aangeven @@ -322,7 +322,7 @@ Hier begint het echte plezier! De editor van VSCode.dev zit boordevol handige fu 2. Begin met typen en zie hoe VSCode.dev je helpt met kleuren, suggesties en foutdetectie 3. Sla je werk op met Ctrl+S (Windows/Linux) of Cmd+S (Mac) – hoewel het ook automatisch opslaat! -![Bestanden bewerken in VSCode.dev](../../../../translated_images/nl/edit-a-file.52c0ee665ef19f08.png) +![Bestanden bewerken in VSCode.dev](../../../../translated_images/nl/edit-a-file.52c0ee665ef19f08.webp) **De coole dingen die gebeuren terwijl je codeert:** - Je code wordt prachtig ingekleurd, zodat het gemakkelijk te lezen is @@ -343,7 +343,7 @@ Net zoals archeologen gedetailleerde verslagen maken van opgravingslagen, houdt 2. Gewijzigde bestanden verschijnen in de sectie "Changes" 3. Kleuraanduidingen geven wijzigingstypen aan: groen voor toevoegingen, rood voor verwijderingen -![Wijzigingen bekijken in Source Control](../../../../translated_images/nl/working-tree.c58eec08e6335c79.png) +![Wijzigingen bekijken in Source Control](../../../../translated_images/nl/working-tree.c58eec08e6335c79.webp) **Je werk opslaan (de commit-workflow):** @@ -438,7 +438,7 @@ De extensiemarkt is heel overzichtelijk, dus je raakt niet verdwaald terwijl je 2. Blader rond of zoek naar iets specifieks 3. Klik op iets interessants om er meer over te leren -![Interface van de extensiemarkt](../../../../translated_images/nl/extensions.eca0e0c7f59a10b5.png) +![Interface van de extensiemarkt](../../../../translated_images/nl/extensions.eca0e0c7f59a10b5.webp) **Wat je daar zult zien:** @@ -491,7 +491,7 @@ De meeste extensies hebben instellingen die je kunt aanpassen zodat ze precies w 3. Kies "Extensie-instellingen" in het dropdownmenu 4. Pas dingen aan totdat ze perfect aansluiten bij jouw workflow -![Instellingen van extensies aanpassen](../../../../translated_images/nl/extension-settings.21c752ae4f4cdb78.png) +![Instellingen van extensies aanpassen](../../../../translated_images/nl/extension-settings.21c752ae4f4cdb78.webp) **Veelvoorkomende dingen die je wilt aanpassen:** - Hoe je code wordt geformatteerd (tabs vs spaties, regellengte, etc.) diff --git a/translations/nl/8-code-editor/1-using-a-code-editor/assignment.md b/translations/nl/8-code-editor/1-using-a-code-editor/assignment.md index b4b0088e7..891125d64 100644 --- a/translations/nl/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/nl/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ Omdat VSCode.dev ten minste één bestand nodig heeft om een repository te opene 4. **Schrijf** een commitbericht: "Voeg initiële HTML-structuur toe" 5. **Klik op** "Commit new file" om je wijzigingen op te slaan -![Een initiëel bestand maken op GitHub](../../../../translated_images/nl/new-file-github.com.c886796d800e8056.png) +![Een initiëel bestand maken op GitHub](../../../../translated_images/nl/new-file-github.com.c886796d800e8056.webp) **Wat deze initiële setup bereikt:** - **Stelt** een correcte HTML5-documentstructuur in met semantische elementen @@ -104,7 +104,7 @@ Nu de basis van je repository is opgezet, schakelen we over naar VSCode.dev voor ✅ **Succesindicator**: Je zou je projectbestanden moeten zien in de Explorer-zijbalk en `index.html` beschikbaar voor bewerking in het hoofdeditorgebied. -![Project geladen in VSCode.dev](../../../../translated_images/nl/project-on-vscode.dev.e79815a9a95ee7fe.png) +![Project geladen in VSCode.dev](../../../../translated_images/nl/project-on-vscode.dev.e79815a9a95ee7fe.webp) **Wat je ziet in de interface:** - **Explorer-zijbalk**: **Toont** je repository-bestanden en mapstructuur @@ -448,7 +448,7 @@ Extensies verbeteren je ontwikkelervaring door live preview-mogelijkheden en ver **Directe resultaten na installatie:** Zodra CodeSwing is geïnstalleerd, zie je een live preview van je CV-website verschijnen in de editor. Hierdoor kun je precies zien hoe je site eruitziet terwijl je wijzigingen aanbrengt. -![CodeSwing-extensie met live preview](../../../../translated_images/nl/after-codeswing-extension-pb.0ebddddcf73b5509.png) +![CodeSwing-extensie met live preview](../../../../translated_images/nl/after-codeswing-extension-pb.0ebddddcf73b5509.webp) **Begrip van de verbeterde interface:** - **Gesplitst scherm**: **Toont** je code aan de ene kant en een live preview aan de andere kant diff --git a/translations/nl/9-chat-project/README.md b/translations/nl/9-chat-project/README.md index f53c65c5f..4b78b1912 100644 --- a/translations/nl/9-chat-project/README.md +++ b/translations/nl/9-chat-project/README.md @@ -61,7 +61,7 @@ print(response.choices[0].message.content) Zo ziet je voltooide project eruit: -![Chat-app interface die een gesprek toont tussen gebruiker en AI-assistent](../../../translated_images/nl/screenshot.0a1ee0d123df681b.png) +![Chat-app interface die een gesprek toont tussen gebruiker en AI-assistent](../../../translated_images/nl/screenshot.0a1ee0d123df681b.webp) ## 🗺️ Jouw leertraject door AI-toepassingsontwikkeling @@ -194,7 +194,7 @@ mindmap **Kernprincipe**: AI-toepassingsontwikkeling combineert traditionele webontwikkelingsvaardigheden met AI-dienstintegratie, waardoor intelligente toepassingen ontstaan die natuurlijk en responsief aanvoelen voor gebruikers. -![GitHub Models AI Playground interface met modelselectie en testgebied](../../../translated_images/nl/playground.d2b927122224ff8f.png) +![GitHub Models AI Playground interface met modelselectie en testgebied](../../../translated_images/nl/playground.d2b927122224ff8f.webp) **Waarom de playground zo handig is:** - **Probeer** verschillende AI-modellen zoals GPT-4o-mini, Claude en anderen (allemaal gratis!) @@ -204,7 +204,7 @@ mindmap Zodra je wat hebt geëxperimenteerd, klik je gewoon op het tabblad "Code" en kies je je programmeertaal om de implementatiecode te krijgen die je nodig hebt. -![Playground keuze toont codegeneratie-opties voor verschillende programmeertalen](../../../translated_images/nl/playground-choice.1d23ba7d407f4758.png) +![Playground keuze toont codegeneratie-opties voor verschillende programmeertalen](../../../translated_images/nl/playground-choice.1d23ba7d407f4758.webp) ## Het instellen van de Python backend-integratie @@ -2365,14 +2365,14 @@ Wil je dit project uitproberen in een cloudontwikkelingsomgeving? GitHub Codespa - **Ga naar** de [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) - **Klik** op "Use this template" in de rechterbovenhoek (zorg ervoor dat je bent ingelogd op GitHub) -![Interface voor het maken van een template met de groene knop "Use this template"](../../../translated_images/nl/template.67ad477109d29a2b.png) +![Interface voor het maken van een template met de groene knop "Use this template"](../../../translated_images/nl/template.67ad477109d29a2b.webp) **Stap 2: Codespaces Starten** - **Open** je nieuw aangemaakte repository - **Klik** op de groene knop "Code" en selecteer "Codespaces" - **Kies** "Create codespace on main" om je ontwikkelomgeving te starten -![Interface voor het maken van een codespace met opties voor het starten van een cloudontwikkelingsomgeving](../../../translated_images/nl/codespace.bcecbdf5d2747d3d.png) +![Interface voor het maken van een codespace met opties voor het starten van een cloudontwikkelingsomgeving](../../../translated_images/nl/codespace.bcecbdf5d2747d3d.webp) **Stap 3: Omgevingsconfiguratie** Zodra je Codespace is geladen, heb je toegang tot: diff --git a/translations/nl/README.md b/translations/nl/README.md index c21272440..fde9f9ba6 100644 --- a/translations/nl/README.md +++ b/translations/nl/README.md @@ -88,7 +88,7 @@ Volg de volgende stappen: Klik in jouw eigen repository op de knop **Code** en selecteer **Open with Codespaces**. Dit maakt een nieuwe Codespace aan waarin je kunt werken. -![Codespace](../../translated_images/nl/createcodespace.0238bbf4d7a8d955.png) +![Codespace](../../translated_images/nl/createcodespace.0238bbf4d7a8d955.webp) #### Het curriculum lokaal draaien op je computer diff --git a/translations/nl/for-teachers.md b/translations/nl/for-teachers.md index 8eb252202..e0c68b248 100644 --- a/translations/nl/for-teachers.md +++ b/translations/nl/for-teachers.md @@ -42,10 +42,10 @@ Dit lesprogramma bevat importeerbare pakketten voor gangbare LMS-workflows. - Moodle Cloud heeft beperkte ondersteuning voor Common Cartridge. Geef de voorkeur aan het bovenstaande Moodle-bestand, dat ook in Canvas kan worden geüpload. - Controleer na import de modules, deadlines en quizinstellingen om aan te sluiten bij uw semesterschema. -![Moodle](../../translated_images/nl/moodle.94eb93d714a50cb2.png) +![Moodle](../../translated_images/nl/moodle.94eb93d714a50cb2.webp) > Het lesprogramma in een Moodle-klas -![Canvas](../../translated_images/nl/canvas.fbd605ff8e5b8aff.png) +![Canvas](../../translated_images/nl/canvas.fbd605ff8e5b8aff.webp) > Het lesprogramma in Canvas ### Gebruik de repository direct (zonder Classroom) diff --git a/translations/no/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/no/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 2f2928f27..7e218d47b 100644 --- a/translations/no/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/no/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ Se, jeg skjønner helt hvis programmering føles skremmende akkurat nå. Da jeg I dag skal vi utforske de utrolige verktøyene som gjør moderne webutvikling ikke bare mulig, men virkelig vanedannende. Jeg snakker om de samme redaktørene, nettleserne og arbeidsflytene som utviklere hos Netflix, Spotify og ditt favoritt indie app-studio bruker hver eneste dag. Og her er delen som får deg til å danse av glede: de fleste av disse profesjonelle, industristandard verktøyene er helt gratis! -![Intro Programming](../../../../translated_images/no/webdev101-programming.d6e3f98e61ac4bff.png) +![Intro Programming](../../../../translated_images/no/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/no/1-getting-started-lessons/2-github-basics/README.md b/translations/no/1-getting-started-lessons/2-github-basics/README.md index b4c13014e..2685e7756 100644 --- a/translations/no/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/no/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ Jeg vet dette kan føles som mye i starten – jeg husker selv da jeg stirret p Vi skal ta denne reisen sammen, ett steg av gangen. Ikke hast, ingen press – bare du, meg, og noen skikkelig kule verktøy som snart blir dine nye bestevenner! -![Intro to GitHub](../../../../translated_images/no/webdev101-github.8846d7971abef6f9.png) +![Intro to GitHub](../../../../translated_images/no/webdev101-github.8846d7971abef6f9.webp) > Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -604,7 +604,7 @@ Først, la oss finne et repository (eller **repo**) på GitHub som interesserer ✅ En god måte å finne 'nybegynnervennlige' repoer på er å [søke etter taggen 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Kopier en repo lokalt](../../../../translated_images/no/clone_repo.5085c48d666ead57.png) +![Kopier en repo lokalt](../../../../translated_images/no/clone_repo.5085c48d666ead57.webp) Det finnes flere måter å kopiere kode på. En måte er å "klone" innholdet i repoet, ved å bruke HTTPS, SSH, eller GitHub CLI (Command Line Interface). diff --git a/translations/no/1-getting-started-lessons/3-accessibility/README.md b/translations/no/1-getting-started-lessons/3-accessibility/README.md index 3ebde7db0..c9d8b9ea9 100644 --- a/translations/no/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/no/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Lage tilgjengelige nettsider -![Alt om tilgjengelighet](../../../../translated_images/no/webdev101-a11y.8ef3025c858d897a.png) +![Alt om tilgjengelighet](../../../../translated_images/no/webdev101-a11y.8ef3025c858d897a.webp) > Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/no/2-js-basics/1-data-types/README.md b/translations/no/2-js-basics/1-data-types/README.md index 42b46784a..e3d9829e3 100644 --- a/translations/no/2-js-basics/1-data-types/README.md +++ b/translations/no/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript grunnleggende: Datatyper -![JavaScript Basics - Data types](../../../../translated_images/no/webdev101-js-datatypes.4cc470179730702c.png) +![JavaScript Basics - Data types](../../../../translated_images/no/webdev101-js-datatypes.4cc470179730702c.webp) > Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/no/2-js-basics/2-functions-methods/README.md b/translations/no/2-js-basics/2-functions-methods/README.md index 839536351..4620cd31a 100644 --- a/translations/no/2-js-basics/2-functions-methods/README.md +++ b/translations/no/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript Grunnleggende: Metoder og Funksjoner -![JavaScript Basics - Functions](../../../../translated_images/no/webdev101-js-functions.be049c4726e94f8b.png) +![JavaScript Basics - Functions](../../../../translated_images/no/webdev101-js-functions.be049c4726e94f8b.webp) > Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/no/2-js-basics/3-making-decisions/README.md b/translations/no/2-js-basics/3-making-decisions/README.md index 1a997bc84..2e60eeb02 100644 --- a/translations/no/2-js-basics/3-making-decisions/README.md +++ b/translations/no/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript Grunnleggende: Ta Beslutninger -![JavaScript Basics - Making decisions](../../../../translated_images/no/webdev101-js-decisions.69e1b20f272dd1f0.png) +![JavaScript Basics - Making decisions](../../../../translated_images/no/webdev101-js-decisions.69e1b20f272dd1f0.webp) > Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/no/2-js-basics/4-arrays-loops/README.md b/translations/no/2-js-basics/4-arrays-loops/README.md index 38ea6bfd1..08e3be529 100644 --- a/translations/no/2-js-basics/4-arrays-loops/README.md +++ b/translations/no/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript Grunnleggende: Arrays og Løkker -![JavaScript Basics - Arrays](../../../../translated_images/no/webdev101-js-arrays.439d7528b8a29455.png) +![JavaScript Basics - Arrays](../../../../translated_images/no/webdev101-js-arrays.439d7528b8a29455.webp) > Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/no/3-terrarium/1-intro-to-html/README.md b/translations/no/3-terrarium/1-intro-to-html/README.md index 783d59d58..d84661ddf 100644 --- a/translations/no/3-terrarium/1-intro-to-html/README.md +++ b/translations/no/3-terrarium/1-intro-to-html/README.md @@ -25,7 +25,7 @@ journey Forbedre tilgjengelighet: 5: Student Bygg terrarium: 5: Student ``` -![Introduksjon til HTML](../../../../translated_images/no/webdev101-html.4389c2067af68e98.png) +![Introduksjon til HTML](../../../../translated_images/no/webdev101-html.4389c2067af68e98.webp) > Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac) HTML, eller HyperText Markup Language, er grunnlaget for alle nettsider du noen gang har besøkt. Tenk på HTML som skjelettet som gir struktur til nettsider – det definerer hvor innhold går, hvordan det organiseres, og hva hver del representerer. Mens CSS senere "kler opp" ditt HTML med farger og oppsett, og JavaScript bringer det til liv med interaktivitet, gir HTML den nødvendige strukturen som gjør alt annet mulig. @@ -86,7 +86,7 @@ Du skal lage en dedikert mappe for terrarium-prosjektet ditt og legge til din f 4. I Explorer-panelet, klikk på ikonet for "New File" 5. Gi filen navnet `index.html` -![VS Code Explorer showing new file creation](../../../../translated_images/no/vs-code-index.e2986cf919471eb9.png) +![VS Code Explorer showing new file creation](../../../../translated_images/no/vs-code-index.e2986cf919471eb9.webp) **Alternativ 2: Bruke terminalkommandoer** ```bash diff --git a/translations/no/3-terrarium/2-intro-to-css/README.md b/translations/no/3-terrarium/2-intro-to-css/README.md index ee60bc31a..468ae23a1 100644 --- a/translations/no/3-terrarium/2-intro-to-css/README.md +++ b/translations/no/3-terrarium/2-intro-to-css/README.md @@ -29,7 +29,7 @@ journey Responsivt design: 5: Student Glassrefleksjoner: 5: Student ``` -![Introduksjon til CSS](../../../../translated_images/no/webdev101-css.3f7af5991bf53a20.png) +![Introduksjon til CSS](../../../../translated_images/no/webdev101-css.3f7af5991bf53a20.webp) > Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac) Husker du hvordan HTML-terrariet ditt så ganske enkelt ut? CSS er der vi forvandler den enkle strukturen til noe visuelt tiltalende. @@ -202,7 +202,7 @@ body { Åpne nettleserens utviklerverktøy (F12), gå til Elementer-fanen, og inspiser `

`-elementet ditt. Du vil se at det arver fontfamilien fra body: -![arvet font](../../../../translated_images/no/1.cc07a5cbe114ad1d.png) +![arvet font](../../../../translated_images/no/1.cc07a5cbe114ad1d.webp) ✅ **Eksperimenter**: Prøv å sette andre arvelige egenskaper på `` som `color`, `line-height` eller `text-align`. Hva skjer med overskriften og andre elementer? @@ -596,7 +596,7 @@ Klar for å forbedre terrariet med realistiske glassrefleksjoner? Denne teknikke Du skal lage subtile høylys som simulerer hvordan lys reflekteres på glassoverflater. Denne tilnærmingen ligner på hvordan renessanse-malere som Jan van Eyck brukte lys og refleksjon for å få malt glass til å virke tredimensjonalt. Slik skal det bli: -![finished terrarium](../../../../translated_images/no/terrarium-final.2f07047ffc597d0a.png) +![finished terrarium](../../../../translated_images/no/terrarium-final.2f07047ffc597d0a.webp) **Din utfordring:** - **Lag** subtile hvite eller lyse ovale former for glassrefleksjonene diff --git a/translations/no/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/no/3-terrarium/3-intro-to-DOM-and-closures/README.md index c81c43103..2917bca30 100644 --- a/translations/no/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/no/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -25,7 +25,7 @@ journey Test funksjonalitet: 5: Student Fullfør terrarium: 5: Student ``` -![DOM and a closure](../../../../translated_images/no/webdev101-js.10280393044d7eaa.png) +![DOM and a closure](../../../../translated_images/no/webdev101-js.10280393044d7eaa.webp) > Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac) Velkommen til en av de mest engasjerende aspektene ved webutvikling – å gjøre ting interaktive! Document Object Model (DOM) er som en bro mellom din HTML og JavaScript, og i dag skal vi bruke den til å bringe terrariet ditt til liv. Da Tim Berners-Lee laget den første nettleseren, forestilte han seg et nett der dokumenter kunne være dynamiske og interaktive – DOM gjør denne visjonen mulig. @@ -102,7 +102,7 @@ flowchart TD style P fill:#ffebee style Q fill:#ffebee ``` -![DOM tree representation](../../../../translated_images/no/dom-tree.7daf0e763cbbba92.png) +![DOM tree representation](../../../../translated_images/no/dom-tree.7daf0e763cbbba92.webp) > En representasjon av DOM og HTML-markup som refererer til den. Fra [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -146,7 +146,7 @@ flowchart LR ``` > 💡 **Forstå closures**: Closures er et viktig tema i JavaScript, og mange utviklere bruker dem i mange år før de fullt ut forstår alle teoretiske aspekter. I dag fokuserer vi på praktisk anvendelse – du vil se closures naturlig dukke opp når vi bygger våre interaktive funksjoner. Forståelsen utvikler seg mens du ser hvordan de løser virkelige problemer. -![DOM tree representation](../../../../translated_images/no/dom-tree.7daf0e763cbbba92.png) +![DOM tree representation](../../../../translated_images/no/dom-tree.7daf0e763cbbba92.webp) > En representasjon av DOM og HTML-markup som refererer til den. Fra [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -591,7 +591,7 @@ Nå kan du teste ditt interaktive terrarium! Åpne `index.html`-filen i en nettl - **Tverrplattformstøtte**: Fungerer på desktop og mobil - **Ytelsesbevisst**: Ingen minnelekkasjer eller unødvendige beregninger -![finished terrarium](../../../../translated_images/no/terrarium-final.0920f16e87c13a84.png) +![finished terrarium](../../../../translated_images/no/terrarium-final.0920f16e87c13a84.webp) --- diff --git a/translations/no/3-terrarium/solution/README.md b/translations/no/3-terrarium/solution/README.md index 6067998fa..b345bc4a2 100644 --- a/translations/no/3-terrarium/solution/README.md +++ b/translations/no/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: En liten dra-og-slipp kode-meditasjon. Med litt HTML, JS og CSS kan du lage et webgrensesnitt, style det og legge til interaksjon. -![mitt terrarium](../../../../translated_images/no/screenshot_gray.0c796099a1f9f25e.png) +![mitt terrarium](../../../../translated_images/no/screenshot_gray.0c796099a1f9f25e.webp) ## Krediteringer diff --git a/translations/no/5-browser-extension/1-about-browsers/README.md b/translations/no/5-browser-extension/1-about-browsers/README.md index 6a805cc94..b0815ef6c 100644 --- a/translations/no/5-browser-extension/1-about-browsers/README.md +++ b/translations/no/5-browser-extension/1-about-browsers/README.md @@ -25,7 +25,7 @@ journey Feilsøk problemer: 4: Student Poler opplevelsen: 5: Student ``` -![Browser sketchnote](../../../../translated_images/no/browser.60317c9be8b7f84a.jpg) +![Browser sketchnote](../../../../translated_images/no/browser.60317c9be8b7f84a.webp) > Sketchnote av [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## Quiz før forelesning @@ -77,7 +77,7 @@ Denne prosessen speiler hvordan den første nettleseren, WorldWideWeb, ble desig ✅ **Litt historie**: Den første nettleseren het 'WorldWideWeb' og ble laget av Sir Timothy Berners-Lee i 1990. -![early browsers](../../../../translated_images/no/earlybrowsers.d984b711cdf3a42d.jpg) +![early browsers](../../../../translated_images/no/earlybrowsers.d984b711cdf3a42d.webp) > Noen tidlige nettlesere, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### Hvordan Nettlesere Behandler Nettinnhold @@ -194,7 +194,7 @@ quadrantChart Å forstå installasjonsprosessen for utvidelser hjelper deg å forutse brukeropplevelsen når folk installerer din utvidelse. Installasjonsprosessen er standardisert på tvers av moderne nettlesere, med små variasjoner i brukergrensesnitt. -![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/no/install-on-edge.d68781acaf0b3d3d.png) +![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/no/install-on-edge.d68781acaf0b3d3d.webp) > **Viktig**: Husk å skru på utviklermodus og tillate utvidelser fra andre butikker når du tester dine egne utvidelser. @@ -308,10 +308,10 @@ Dette følger prinsippet om gradvis avsløring som har vært brukt i grensesnitt ### Oversikt over Utvidelsens Visninger **Oppsettvisning** - Konfigurering for første gangs bruk: -![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/no/1.b6da8c1394b07491.png) +![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/no/1.b6da8c1394b07491.webp) **Resultatvisning** - Visning av karbonavtrykkdata: -![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/no/2.1dae52ff08042246.png) +![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/no/2.1dae52ff08042246.webp) ### Lage Konfigurasjonsskjemaet diff --git a/translations/no/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/no/5-browser-extension/2-forms-browsers-local-storage/README.md index b7f4f3f6e..8086ea92b 100644 --- a/translations/no/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/no/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -263,7 +263,7 @@ stateDiagram-v2 Reset --> ClearStorage: Fjern lagrede data ClearStorage --> FirstTime: Tilbake til oppsett ``` -![Local storage pane](../../../../translated_images/no/localstorage.472f8147b6a3f8d1.png) +![Local storage pane](../../../../translated_images/no/localstorage.472f8147b6a3f8d1.webp) > ⚠️ **Sikkerhetshensyn**: I produksjonsapplikasjoner utgjør lagring av API-nøkler i LocalStorage sikkerhetsrisiko siden JavaScript har tilgang til disse dataene. For læringsformål fungerer denne tilnærmingen greit, men ekte apper bør bruke sikker server-side lagring for sensitive legitimasjoner. diff --git a/translations/no/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/no/5-browser-extension/3-background-tasks-and-performance/README.md index 68bac3e56..71d562647 100644 --- a/translations/no/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/no/5-browser-extension/3-background-tasks-and-performance/README.md @@ -123,7 +123,7 @@ For å åpne Utviklerverktøy i Edge, klikk på de tre prikkene øverst til høy La oss prøve dette. Åpne et nettsted (Microsoft.com fungerer bra for dette) og trykk på 'Spill inn'-knappen. Last deretter siden på nytt og se profilereren fange alt som skjer. Når du stopper opptaket, vil du se en detaljert oversikt over hvordan nettleseren 'skriver skript', 'renderer' og 'maler' siden. Det minner meg om hvordan oppdragskontrollen overvåker hvert system under en rakettoppskyting – du får sanntidsdata på eksakt hva som skjer og når. -![Edge profiler](../../../../translated_images/no/profiler.5a4a62479c5df01c.png) +![Edge profiler](../../../../translated_images/no/profiler.5a4a62479c5df01c.webp) ✅ [Microsoft-dokumentasjonen](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) har mange flere detaljer hvis du vil dykke dypere. @@ -133,11 +133,11 @@ Velg elementer på profiltidslinjen for å zoome inn på hendelser som skjer men Få et øyeblikksbilde av sidens ytelse ved å velge deler av tidslinjen og se på oppsummeringspanelet: -![Edge snapshot](../../../../translated_images/no/snapshot.97750180ebcad737.png) +![Edge snapshot](../../../../translated_images/no/snapshot.97750180ebcad737.webp) Sjekk hendelsesloggen for å se om noen hendelser tok lengre tid enn 15 ms: -![Edge event log](../../../../translated_images/no/log.804026979f3707e0.png) +![Edge event log](../../../../translated_images/no/log.804026979f3707e0.webp) ✅ Bli kjent med profilereren din! Åpne utviklerverktøyene på dette nettstedet og se om det finnes noen flaskehalser. Hva er den tregest lastende ressursen? Den raskeste? diff --git a/translations/no/5-browser-extension/README.md b/translations/no/5-browser-extension/README.md index 9bc5a61b4..29e8a1250 100644 --- a/translations/no/5-browser-extension/README.md +++ b/translations/no/5-browser-extension/README.md @@ -23,7 +23,7 @@ Denne utvidelsen kan kalles ad hoc av en bruker når en API-nøkkel og regionkod ### Krediteringer -![en grønn nettleserutvidelse](../../../translated_images/no/extension-screenshot.0e7f5bfa110e92e3.png) +![en grønn nettleserutvidelse](../../../translated_images/no/extension-screenshot.0e7f5bfa110e92e3.webp) ## Krediteringer diff --git a/translations/no/5-browser-extension/solution/README.md b/translations/no/5-browser-extension/solution/README.md index c0fd6da43..70fc587d9 100644 --- a/translations/no/5-browser-extension/solution/README.md +++ b/translations/no/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Ved å bruke tmrow sin CO2 Signal API for å spore strømforbruk, kan du lage en nettleserutvidelse som gir deg en påminnelse direkte i nettleseren om hvor tungt strømforbruket er i din region. Å bruke denne utvidelsen sporadisk kan hjelpe deg med å ta bedre vurderinger av aktivitetene dine basert på denne informasjonen. -![utvidelse skjermbilde](../../../../translated_images/no/extension-screenshot.0e7f5bfa110e92e3.png) +![utvidelse skjermbilde](../../../../translated_images/no/extension-screenshot.0e7f5bfa110e92e3.webp) ## Komme i gang @@ -31,7 +31,7 @@ npm run build For å installere på Edge, bruk menyen med 'tre prikker' øverst til høyre i nettleseren for å finne Utvidelser-panelet. Derfra velger du 'Last inn pakket utvidelse' for å laste inn en ny utvidelse. Åpne 'dist'-mappen når du blir bedt om det, og utvidelsen vil lastes inn. For å bruke den, trenger du en API-nøkkel for CO2 Signal API ([få en her via e-post](https://www.co2signal.com/) – skriv inn e-posten din i boksen på denne siden) og koden for din region ([finn den her](http://api.electricitymap.org/v3/zones)) som tilsvarer [Electricity Map](https://www.electricitymap.org/map) (for eksempel bruker jeg 'US-NEISO' i Boston). -![installasjon](../../../../translated_images/no/install-on-edge.78634f02842c4828.png) +![installasjon](../../../../translated_images/no/install-on-edge.78634f02842c4828.webp) Når API-nøkkelen og regionen er lagt inn i utvidelsesgrensesnittet, bør den fargede prikken i nettleserens utvidelseslinje endre seg for å gjenspeile energiforbruket i din region og gi deg en pekepinn på hvilke energikrevende aktiviteter som kan være passende å utføre. Konseptet bak dette 'prikk'-systemet ble inspirert av [Energy Lollipop-utvidelsen](https://energylollipop.com/) for utslipp i California. diff --git a/translations/no/5-browser-extension/solution/translation/README.fr.md b/translations/no/5-browser-extension/solution/translation/README.fr.md index 84e7e3b87..09fbd4fd1 100644 --- a/translations/no/5-browser-extension/solution/translation/README.fr.md +++ b/translations/no/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Ved å bruke CO2 Signal API fra tmrow for å spore strømforbruket, kan du lage en nettleserutvidelse som gir deg en påminnelse direkte i nettleseren om strømforbruket i ditt område. Bruken av denne ad hoc-utvidelsen hjelper deg med å ta beslutninger om aktivitetene dine basert på denne informasjonen. -![utvidelsesskjermbilde](../../../../../translated_images/no/extension-screenshot.0e7f5bfa110e92e3.png) +![utvidelsesskjermbilde](../../../../../translated_images/no/extension-screenshot.0e7f5bfa110e92e3.webp) ## Kom i gang @@ -31,7 +31,7 @@ npm run build For å installere på Edge, bruk menyen med 'tre prikker' øverst til høyre i nettleseren for å finne panelet Utvidelser. Derfra velger du 'Last inn ukomprimert utvidelse' for å laste inn en ny utvidelse. Åpne mappen 'dist' når du blir bedt om det, og utvidelsen vil lastes inn. For å bruke den trenger du en API-nøkkel for CO2 Signal API ([få en her via e-post](https://www.co2signal.com/) - skriv inn e-posten din i feltet på denne siden) og [koden for ditt område](http://api.electricitymap.org/v3/zones) som tilsvarer [Elektrisitetskartet](https://www.electricitymap.org/map) (i Boston, for eksempel, bruker jeg 'US-NEISO'). -![installasjon](../../../../../translated_images/no/install-on-edge.78634f02842c4828.png) +![installasjon](../../../../../translated_images/no/install-on-edge.78634f02842c4828.webp) Når API-nøkkelen og regionen er lagt inn i utvidelsens grensesnitt, skal den fargede prikken i nettleserens utvidelseslinje endre seg for å gjenspeile energiforbruket i ditt område og gi deg en indikator på hvilke energikrevende aktiviteter det kan være passende å utføre. Konseptet bak dette 'prikk'-systemet ble inspirert av [utvidelsen Energy Lollipop](https://energylollipop.com/) for utslipp i California. diff --git a/translations/no/5-browser-extension/solution/translation/README.hi.md b/translations/no/5-browser-extension/solution/translation/README.hi.md index 50536fa42..552e9fcac 100644 --- a/translations/no/5-browser-extension/solution/translation/README.hi.md +++ b/translations/no/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Ved å bruke tmrow sin CO2 Signal API for å spore strømforbruk, bygger vi en nettleserutvidelse som gir deg en påminnelse om hvor belastet strømforbruket i ditt område er. Ved å bruke denne utvidelsen kan du ta beslutninger om aktivitetene dine basert på denne informasjonen. -![Utvidelse skjermbilde](../../../../../translated_images/no/extension-screenshot.0e7f5bfa110e92e3.png) +![Utvidelse skjermbilde](../../../../../translated_images/no/extension-screenshot.0e7f5bfa110e92e3.webp) ## Kom i gang @@ -31,7 +31,7 @@ npm run build For å installere på Edge, bruk 'tre prikker'-menyen øverst til høyre i nettleseren for å finne utvidelsespanelet. Derfra velger du 'Last inn upakket' for å laste inn en ny utvidelse. Åpne 'dist'-mappen ved prompten, og utvidelsen vil bli lastet inn. For å bruke den trenger du en API-nøkkel fra CO2 Signal ([få den via e-post her](https://www.co2snal.com/) - skriv inn e-posten din i boksen på denne siden) og [kode for ditt område](http://api.electricitymap.org/v3/zones) fra [Electricity Map](https://www.electricitymap.org/map) (for eksempel, i Boston bruker jeg 'US-NEISO'). -![installering](../../../../../translated_images/no/install-on-edge.78634f02842c4828.png) +![installering](../../../../../translated_images/no/install-on-edge.78634f02842c4828.webp) Når API-nøkkelen og området er lagt inn i utvidelsesgrensesnittet, bør den fargede prikken i nettleserutvidelseslinjen endre seg for å reflektere energiforbruket i ditt område og gi deg en indikator på hvilke energiintensive aktiviteter som passer for deg. Konseptet bak dette 'prikk'-systemet ble inspirert av [Energy Lollipop Extension](https://energylollipop.com/) for utslipp i California. diff --git a/translations/no/5-browser-extension/solution/translation/README.it.md b/translations/no/5-browser-extension/solution/translation/README.it.md index 4668e582c..9a7270eed 100644 --- a/translations/no/5-browser-extension/solution/translation/README.it.md +++ b/translations/no/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Vi skal bruke tmrow sin Signal CO2-API for å overvåke strømforbruket og lage en nettleserutvidelse som gir deg en påminnelse direkte i nettleseren om hvor belastende strømforbruket er i ditt område. Bruken av denne spesialutviklede utvidelsen vil hjelpe deg med å vurdere aktivitetene dine basert på denne informasjonen. -![skjermbilde av utvidelsen](../../../../../translated_images/no/extension-screenshot.0e7f5bfa110e92e3.png) +![skjermbilde av utvidelsen](../../../../../translated_images/no/extension-screenshot.0e7f5bfa110e92e3.webp) ## Kom i gang @@ -31,7 +31,7 @@ npm run build For å installere på Edge, bruk "tre prikker"-menyen øverst til høyre i nettleseren for å finne utvidelsespanelet. Hvis det ikke allerede er aktivert, slå på Utviklermodus (nederst til venstre). Velg "Last inn pakket utvidelse" for å laste opp en ny utvidelse. Åpne "dist"-mappen når du blir bedt om det, og utvidelsen vil bli lastet inn. For å bruke den trenger du en API-nøkkel for CO2 Signal-API-en (du kan [få en her via e-post](https://www.co2signal.com/) – skriv inn e-posten din i feltet på denne siden) og [koden for din region](http://api.electricitymap.org/v3/zones) som tilsvarer [elektrisitetskartet](https://www.electricitymap.org/map) (for eksempel er koden for Boston "US-NEISO"). -![installasjon](../../../../../translated_images/no/install-on-edge.78634f02842c4828.png) +![installasjon](../../../../../translated_images/no/install-on-edge.78634f02842c4828.webp) Når API-nøkkelen og regionen er lagt inn i utvidelsens grensesnitt, skal den fargede prikken i nettleserens utvidelseslinje endre seg for å gjenspeile energiforbruket i regionen din og gi en indikasjon på hvilke aktiviteter med høyt energiforbruk som kan være passende å utføre. Konseptet bak dette "prikk"-systemet er inspirert av [Energy Lollipop-utvidelsen](https://energylollipop.com/) for utslipp i California. diff --git a/translations/no/5-browser-extension/solution/translation/README.ja.md b/translations/no/5-browser-extension/solution/translation/README.ja.md index 42017861d..d816f0553 100644 --- a/translations/no/5-browser-extension/solution/translation/README.ja.md +++ b/translations/no/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Bygg en nettleserutvidelse som bruker tmrow sin CO2 Signal API for å spore strømforbruket i ditt område og vise det som en påminnelse i nettleseren. Ved å bruke denne utvidelsen kan du ta beslutninger om aktivitetene dine basert på denne informasjonen. -![utvidelse skjermbilde](../../../../../translated_images/no/extension-screenshot.0e7f5bfa110e92e3.png) +![utvidelse skjermbilde](../../../../../translated_images/no/extension-screenshot.0e7f5bfa110e92e3.webp) ## Kom i gang @@ -31,7 +31,7 @@ npm run build For å installere på Edge, finn "Utvidelser"-panelet via "tre prikker"-menyen øverst til høyre i nettleseren. Derfra velger du "Load Unpacked" for å laste inn den nye utvidelsen. Når du blir bedt om det, åpner du "dist"-mappen, og utvidelsen vil bli lastet inn. For å bruke den trenger du en API-nøkkel for CO2 Signal API ([få en her via e-post](https://www.co2signal.com/) - skriv inn e-posten din i boksen på denne siden) og en [kode for ditt område](http://api.electricitymap.org/v3/zones) som er kompatibel med [Electricity Map](https://www.electricitymap.org/map) (for eksempel bruker Boston 'US-NEISO'). -![installering](../../../../../translated_images/no/install-on-edge.78634f02842c4828.png) +![installering](../../../../../translated_images/no/install-on-edge.78634f02842c4828.webp) Når du har lagt inn API-nøkkelen og området i utvidelsesgrensesnittet, vil en farget prikk vises i nettleserens utvidelseslinje. Denne prikken endrer farge for å reflektere energiforbruket i ditt område og gir deg en indikasjon på hvilke aktiviteter som krever energi det er passende å utføre. Konseptet med dette "prikk"-systemet ble inspirert av [Energy Lollipop-utvidelsen](https://energylollipop.com/) for utslipp i California. diff --git a/translations/no/5-browser-extension/solution/translation/README.ms.md b/translations/no/5-browser-extension/solution/translation/README.ms.md index 848df4b9d..fd7ba4286 100644 --- a/translations/no/5-browser-extension/solution/translation/README.ms.md +++ b/translations/no/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Ved å bruke CO2 Signal API fra tmrow for å overvåke strømforbruk, kan du bygge en nettleserutvidelse som gir deg varsler om hvor tungt strømforbruket er i ditt område. Å bruke denne utvidelsen kan hjelpe deg med å ta informerte valg om aktivitetene dine basert på denne informasjonen. -![skjermbilde av nettleserutvidelsen](../../../../../translated_images/no/extension-screenshot.0e7f5bfa110e92e3.png) +![skjermbilde av nettleserutvidelsen](../../../../../translated_images/no/extension-screenshot.0e7f5bfa110e92e3.webp) ## Kom i Gang @@ -31,7 +31,7 @@ npm run build For å installere i Edge, bruk menyen med 'tre prikker' øverst til høyre i nettleseren for å finne panelet Utvidelser. Derfra velger du 'Load Unpacked' for å laste inn en ny utvidelse. Åpne 'dist'-mappen når du blir bedt om det, og utvidelsen vil bli lastet inn. For å bruke den, trenger du en API-nøkkel for CO2 Signal API ([få en her via e-post](https://www.co2signal.com/) - skriv inn e-posten din i boksen på denne siden) og [koden for ditt område](http://api.electricitymap.org/v3/zones) som samsvarer med [Electricity Map](https://www.electricitymap.org/map) (i Boston, for eksempel, bruker jeg 'US-NEISO'). -![laster ned](../../../../../translated_images/no/install-on-edge.78634f02842c4828.png) +![laster ned](../../../../../translated_images/no/install-on-edge.78634f02842c4828.webp) Når API-nøkkelen og området er lagt inn i utvidelsens grensesnitt, vil en farget prikk i nettleserens utvidelseslinje endre seg for å reflektere energiforbruket i ditt område og gi deg anbefalinger om passende aktiviteter basert på dette. Konseptet bak dette 'prikk'-systemet ble inspirert av [Energy Lollipop nettleserutvidelsen](https://energylollipop.com/) for utslipp i California. diff --git a/translations/no/5-browser-extension/start/README.md b/translations/no/5-browser-extension/start/README.md index 69b42f8eb..c252cf9c0 100644 --- a/translations/no/5-browser-extension/start/README.md +++ b/translations/no/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Ved å bruke tmrow's CO2 Signal API for å spore strømforbruk, kan du lage en nettleserutvidelse som gir deg en påminnelse direkte i nettleseren om hvor tungt strømforbruket er i din region. Å bruke denne utvidelsen ad hoc vil hjelpe deg med å ta vurderinger om aktivitetene dine basert på denne informasjonen. -![utvidelsesskjermbilde](../../../../translated_images/no/extension-screenshot.0e7f5bfa110e92e3.png) +![utvidelsesskjermbilde](../../../../translated_images/no/extension-screenshot.0e7f5bfa110e92e3.webp) ## Komme i gang @@ -31,7 +31,7 @@ npm run build For å installere på Edge, bruk menyen med 'tre prikker' øverst til høyre i nettleseren for å finne utvidelsespanelet. Derfra velger du 'Last inn pakket utvidelse' for å laste inn en ny utvidelse. Åpne 'dist'-mappen når du blir bedt om det, og utvidelsen vil lastes inn. For å bruke den, trenger du en API-nøkkel for CO2 Signal's API ([få en her via e-post](https://www.co2signal.com/) - skriv inn e-posten din i boksen på denne siden) og koden for din region ([finn den her](http://api.electricitymap.org/v3/zones)) som tilsvarer [Electricity Map](https://www.electricitymap.org/map) (for eksempel bruker jeg 'US-NEISO' i Boston). -![installering](../../../../translated_images/no/install-on-edge.78634f02842c4828.png) +![installering](../../../../translated_images/no/install-on-edge.78634f02842c4828.webp) Når API-nøkkelen og regionen er lagt inn i utvidelsesgrensesnittet, bør den fargede prikken i nettleserens utvidelseslinje endres for å gjenspeile energiforbruket i din region og gi deg en pekepinn på hvilke energikrevende aktiviteter som kan være passende å utføre. Konseptet bak dette 'prikk'-systemet ble gitt til meg av [Energy Lollipop-utvidelsen](https://energylollipop.com/) for utslipp i California. diff --git a/translations/no/6-space-game/2-drawing-to-canvas/README.md b/translations/no/6-space-game/2-drawing-to-canvas/README.md index e4d3d43a2..ec781206b 100644 --- a/translations/no/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/no/6-space-game/2-drawing-to-canvas/README.md @@ -105,7 +105,7 @@ quadrantChart Power-up: [0.7, 0.6] UI Elements: [0.9, 0.1] ``` -![lerretets rutenett](../../../../translated_images/no/canvas_grid.5f209da785ded492.png) +![lerretets rutenett](../../../../translated_images/no/canvas_grid.5f209da785ded492.webp) > Bilde fra [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) For å tegne på canvas-elementet følger du den samme tre-trinns prosessen som danner grunnlaget for all lerretgrafikk. Når du gjør dette noen ganger, blir det helt naturlig: @@ -323,11 +323,11 @@ Du skal lage en nettside med et Canvas-element. Den skal vise en svart skjerm `1 - Helteskip - ![Helteskip](../../../../translated_images/no/player.dd24c1afa8c71e9b.png) + ![Helteskip](../../../../translated_images/no/player.dd24c1afa8c71e9b.webp) - 5*5 monstre - ![Monsterskip](../../../../translated_images/no/enemyShip.5df2a822c16650c2.png) + ![Monsterskip](../../../../translated_images/no/enemyShip.5df2a822c16650c2.webp) ### Anbefalte steg for å starte utvikling @@ -463,7 +463,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { Det ferdige resultatet skal se slik ut: -![Black screen with a hero and 5*5 monsters](../../../../translated_images/no/partI-solution.36c53b48c9ffae2a.png) +![Black screen with a hero and 5*5 monsters](../../../../translated_images/no/partI-solution.36c53b48c9ffae2a.webp) ## Løsning diff --git a/translations/no/6-space-game/5-keeping-score/README.md b/translations/no/6-space-game/5-keeping-score/README.md index 281e6977c..34dd313b0 100644 --- a/translations/no/6-space-game/5-keeping-score/README.md +++ b/translations/no/6-space-game/5-keeping-score/README.md @@ -155,7 +155,7 @@ sequenceDiagram end ``` - **Poengsystem**: Hvert ødelagte fiendeskip belønner med 100 poeng (runde tall er lettere for spillerne å regne på mentalt). Poengsummen vises nederst til venstre. -- **Livsteller**: Helten din starter med tre liv – en standard etablert av tidlige arkadespill for å balansere utfordring med spillbarhet. Hver kollisjon med en fiende koster ett liv. Vi viser gjenværende liv nederst til høyre med skipsikoner ![life image](../../../../translated_images/no/life.6fb9f50d53ee0413.png). +- **Livsteller**: Helten din starter med tre liv – en standard etablert av tidlige arkadespill for å balansere utfordring med spillbarhet. Hver kollisjon med en fiende koster ett liv. Vi viser gjenværende liv nederst til høyre med skipsikoner ![life image](../../../../translated_images/no/life.6fb9f50d53ee0413.webp). ## La oss bygge! diff --git a/translations/no/7-bank-project/1-template-route/README.md b/translations/no/7-bank-project/1-template-route/README.md index bfa52d36b..fa4ab0fc4 100644 --- a/translations/no/7-bank-project/1-template-route/README.md +++ b/translations/no/7-bank-project/1-template-route/README.md @@ -644,7 +644,7 @@ sequenceDiagram Bruken av `history.pushState` lager nye poster i nettleserens navigasjonshistorikk. Du kan sjekke det ved å holde inne *tilbake-knappen* i nettleseren, det skal vises noe slikt som dette: -![Skjermbilde av navigasjonshistorikk](../../../../translated_images/no/history.7fdabbafa521e064.png) +![Skjermbilde av navigasjonshistorikk](../../../../translated_images/no/history.7fdabbafa521e064.webp) Hvis du prøver å klikke tilbake-knappen flere ganger, vil du se at gjeldende URL endres og historikken er oppdatert, men samme mal vises fortsatt. diff --git a/translations/no/7-bank-project/2-forms/README.md b/translations/no/7-bank-project/2-forms/README.md index 72bb81b81..5e4a05d77 100644 --- a/translations/no/7-bank-project/2-forms/README.md +++ b/translations/no/7-bank-project/2-forms/README.md @@ -292,7 +292,7 @@ Først, la oss observere hva som skjer med et grunnleggende skjema: 2. Observer endringene i nettleserens adressefelt 3. Legg merke til hvordan siden lastes på nytt og data vises i URLen -![Skjermbilde av nettleserens URL-endring etter å ha klikket på Registrer-knappen](../../../../translated_images/no/click-register.e89a30bf0d4bc9ca.png) +![Skjermbilde av nettleserens URL-endring etter å ha klikket på Registrer-knappen](../../../../translated_images/no/click-register.e89a30bf0d4bc9ca.webp) ### Sammenligning av HTTP-metoder @@ -346,7 +346,7 @@ La oss konfigurere registreringsskjemaet ditt til å kommunisere korrekt med bac 2. **Klikk** på "Opprett konto"-knappen 3. **Observer** serverens respons i nettleseren -![Nettleservindu på adressen localhost:5000/api/accounts, som viser en JSON-streng med brukerdata](../../../../translated_images/no/form-post.61de4ca1b964d91a.png) +![Nettleservindu på adressen localhost:5000/api/accounts, som viser en JSON-streng med brukerdata](../../../../translated_images/no/form-post.61de4ca1b964d91a.webp) **Dette bør du se:** - **Nettleseren omdirigeres** til API-endepunktets URL @@ -609,7 +609,7 @@ async function register() { 3. **Klikk** "Opprett konto" 4. **Observer** konsollmeldinger og brukerfeedback -![Skjermbilde som viser loggmelding i nettleserkonsollen](../../../../translated_images/no/browser-console.efaf0b51aaaf6778.png) +![Skjermbilde som viser loggmelding i nettleserkonsollen](../../../../translated_images/no/browser-console.efaf0b51aaaf6778.webp) **Det du bør se:** - **Lastetilstand** vises på sendeknappen @@ -783,7 +783,7 @@ La oss forbedre registreringsskjemaet ditt med robust validering som gir utmerke 3. **Prøv** spesialtegn i brukernavnfeltet 4. **Skriv inn** et negativt saldo-beløp -![Skjermbilde som viser valideringsfeil ved forsøk på innsending av skjemaet](../../../../translated_images/no/validation-error.8bd23e98d416c22f.png) +![Skjermbilde som viser valideringsfeil ved forsøk på innsending av skjemaet](../../../../translated_images/no/validation-error.8bd23e98d416c22f.webp) **Dette vil du observere:** - **Nettleser viser** native valideringsmeldinger @@ -943,7 +943,7 @@ Vis en feilmelding i HTML hvis brukeren allerede eksisterer. Her er et eksempel på hvordan den endelige innloggingssiden kan se ut etter litt styling: -![Screenshot of the login page after adding CSS styles](../../../../translated_images/no/result.96ef01f607bf856a.png) +![Screenshot of the login page after adding CSS styles](../../../../translated_images/no/result.96ef01f607bf856a.webp) ## Quiz etter forelesning diff --git a/translations/no/7-bank-project/3-data/README.md b/translations/no/7-bank-project/3-data/README.md index 3929a5c9c..f26128979 100644 --- a/translations/no/7-bank-project/3-data/README.md +++ b/translations/no/7-bank-project/3-data/README.md @@ -156,7 +156,7 @@ sequenceDiagram Server->>Browser: Returnerer komplett HTML-side Browser->>User: Viser ny side (blitser/laster på nytt) ``` -![Oppdateringsarbeidsflyt i en fler-sides applikasjon](../../../../translated_images/no/mpa.7f7375a1a2d4aa77.png) +![Oppdateringsarbeidsflyt i en fler-sides applikasjon](../../../../translated_images/no/mpa.7f7375a1a2d4aa77.webp) **Hvorfor denne tilnærmingen føltes tungvint:** - Hvert klikk betydde å bygge hele siden fra bunnen av på nytt @@ -182,7 +182,7 @@ sequenceDiagram JavaScript->>Browser: Oppdaterer spesifikke sideelementer Browser->>User: Viser oppdatert innhold (ingen omlasting) ``` -![Oppdateringsarbeidsflyt i en enkelt-sides applikasjon](../../../../translated_images/no/spa.268ec73b41f992c2.png) +![Oppdateringsarbeidsflyt i en enkelt-sides applikasjon](../../../../translated_images/no/spa.268ec73b41f992c2.webp) **Hvorfor SPAs føles mye bedre:** - Bare delene som faktisk har endret seg oppdateres (smart, ikke sant?) @@ -516,7 +516,7 @@ if (data.error) { Nå når du tester med en ugyldig konto, vil du se en hjelpsom feilmelding direkte på siden! -![Screenshot showing the error message displayed during login](../../../../translated_images/no/login-error.416fe019b36a6327.png) +![Screenshot showing the error message displayed during login](../../../../translated_images/no/login-error.416fe019b36a6327.webp) #### Steg 4: Være inkluderende med tilgjengelighet @@ -950,7 +950,7 @@ Klar til å ta bankappen til neste nivå? La oss få den til å se ut og føles Slik kan et polert dashboard se ut: -![Screenshot of an example result of the dashboard after styling](../../../../translated_images/no/screen2.123c82a831a1d14a.png) +![Screenshot of an example result of the dashboard after styling](../../../../translated_images/no/screen2.123c82a831a1d14a.webp) Føl deg ikke presset til å matche dette nøyaktig – bruk det som inspirasjon og gjør det til ditt eget! diff --git a/translations/no/7-bank-project/4-state-management/README.md b/translations/no/7-bank-project/4-state-management/README.md index 71eb45125..eab07802a 100644 --- a/translations/no/7-bank-project/4-state-management/README.md +++ b/translations/no/7-bank-project/4-state-management/README.md @@ -187,7 +187,7 @@ Som Titanics skillevegger som virket robuste til flere kamre fyltes samtidig, vi I stedet for å løpe i sirkel, skal vi lage et **sentralisert tilstandshåndteringssystem**. Tenk på det som å ha én virkelig organisert person som har ansvar for alt det viktige: -![Schema showing the data flows between the HTML, user actions and state](../../../../translated_images/no/data-flow.fa2354e0908fecc8.png) +![Schema showing the data flows between the HTML, user actions and state](../../../../translated_images/no/data-flow.fa2354e0908fecc8.webp) ```mermaid flowchart TD @@ -798,7 +798,7 @@ Denne utfordringen vil hjelpe deg å tenke som en profesjonell utvikler som bala Her er et eksempelresultat etter å ha fullført oppgaven: -![Skjermbilde som viser et eksempel på "Legg til transaksjon"-dialog](../../../../translated_images/no/dialog.93bba104afeb79f1.png) +![Skjermbilde som viser et eksempel på "Legg til transaksjon"-dialog](../../../../translated_images/no/dialog.93bba104afeb79f1.webp) --- diff --git a/translations/no/7-bank-project/4-state-management/assignment.md b/translations/no/7-bank-project/4-state-management/assignment.md index 5323fbd2e..2c576509a 100644 --- a/translations/no/7-bank-project/4-state-management/assignment.md +++ b/translations/no/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ Se [server-API-dokumentasjonen](../api/README.md) for: **Forventet resultat:** Etter å ha fullført denne oppgaven, skal bankappen din ha en fullt funksjonell "Legg til transaksjon"-funksjon som ser profesjonell ut og fungerer som den skal: -![Skjermbilde som viser et eksempel på "Legg til transaksjon"-dialog](../../../../translated_images/no/dialog.93bba104afeb79f1.png) +![Skjermbilde som viser et eksempel på "Legg til transaksjon"-dialog](../../../../translated_images/no/dialog.93bba104afeb79f1.webp) ## Testing av implementeringen diff --git a/translations/no/7-bank-project/README.md b/translations/no/7-bank-project/README.md index 450faf68f..a323ce551 100644 --- a/translations/no/7-bank-project/README.md +++ b/translations/no/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: I dette prosjektet lærer du hvordan du bygger en fiktiv bank. Disse leksjonene inkluderer instruksjoner om hvordan du setter opp en webapp med ruter, bygger skjemaer, håndterer tilstand, og henter data fra en API som gir tilgang til bankens data. -| ![Screen1](../../../translated_images/no/screen1.baccbba0f1f93364.png) | ![Screen2](../../../translated_images/no/screen2.123c82a831a1d14a.png) | +| ![Screen1](../../../translated_images/no/screen1.baccbba0f1f93364.webp) | ![Screen2](../../../translated_images/no/screen2.123c82a831a1d14a.webp) | |--------------------------------|--------------------------------| ## Leksjoner diff --git a/translations/no/8-code-editor/1-using-a-code-editor/README.md b/translations/no/8-code-editor/1-using-a-code-editor/README.md index a1c400cc1..2031bf496 100644 --- a/translations/no/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/no/8-code-editor/1-using-a-code-editor/README.md @@ -182,7 +182,7 @@ Akkurat som Alexander Graham Bells telefon koblet fjerne steder sammen, kobler d Når alt er lastet inn, vil du se et vakkert rent arbeidsområde som er designet for å holde deg fokusert på det som betyr noe – koden din! -![Default VSCode.dev interface](../../../../translated_images/no/default-vscode-dev.5d06881d65c1b323.png) +![Default VSCode.dev interface](../../../../translated_images/no/default-vscode-dev.5d06881d65c1b323.webp) **Her er din omvisning i nabolaget:** - **Aktivitetslinjen** (den stripen til venstre): Hovednavigasjonen din med Explorer 📁, Søk 🔍, Kildekontroll 🌿, Utvidelser 🧩, og Innstillinger ⚙️ @@ -229,7 +229,7 @@ Dette passer perfekt når du er i gang i VSCode.dev og vil åpne et spesifikt re 1. Gå til [vscode.dev](https://vscode.dev) hvis du ikke allerede er der 2. Se etter knappen "Open Remote Repository" på velkomstskjermen og klikk den - ![Open remote repository](../../../../translated_images/no/open-remote-repository.bd9c2598b8949e7f.png) + ![Open remote repository](../../../../translated_images/no/open-remote-repository.bd9c2598b8949e7f.webp) 3. Lim inn hvilken som helst GitHub-repo-URL (prøv denne: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. Trykk Enter og se magien skje! @@ -238,7 +238,7 @@ Dette passer perfekt når du er i gang i VSCode.dev og vil åpne et spesifikt re Vil du føle deg som en kode-trollmann? Prøv tastatursnarveien: Ctrl+Shift+P (eller Cmd+Shift+P på Mac) for å åpne Kommando-paletten: -![Command Palette](../../../../translated_images/no/palette-menu.4946174e07f42622.png) +![Command Palette](../../../../translated_images/no/palette-menu.4946174e07f42622.webp) **Kommando-paletten er som en søkemotor for alt du kan gjøre:** - Skriv "open remote" så finner den repo-åpneren for deg @@ -300,7 +300,7 @@ Som å organisere tegninger i et arkitektkontor følger filoppretting i VSCode.d 3. Tast inn filnavnet med riktig filendelse (`style.css`, `script.js`, `index.html`) 4. Trykk Enter for å opprette filen -![Creating a new file](../../../../translated_images/no/create-new-file.2814e609c2af9aeb.png) +![Creating a new file](../../../../translated_images/no/create-new-file.2814e609c2af9aeb.webp) **Navnekonvensjoner:** - Bruk beskrivende navn som indikerer filens formål @@ -318,7 +318,7 @@ Her begynner moroa! VSCode.devs editor er fylt med nyttige funksjoner som gjør 2. Begynn å skrive og se VSCode.dev hjelpe deg med farger, forslag og feiloppdagelse 3. Lagre arbeidet med Ctrl+S (Windows/Linux) eller Cmd+S (Mac) – selv om det også lagrer automatisk! -![Editing files in VSCode.dev](../../../../translated_images/no/edit-a-file.52c0ee665ef19f08.png) +![Editing files in VSCode.dev](../../../../translated_images/no/edit-a-file.52c0ee665ef19f08.webp) **Kule ting som skjer mens du koder:** - Koden din fargekodes vakkert så den er lett å lese @@ -339,7 +339,7 @@ Som arkeologer som dokumenterer utgravningslag nøyaktig, sporer Git endringer i 2. Endrede filer vises i "Endringer"-seksjonen 3. Fargekoding indikerer type endring: grønt for tillegg, rødt for slettinger -![Viewing changes in Source Control](../../../../translated_images/no/working-tree.c58eec08e6335c79.png) +![Viewing changes in Source Control](../../../../translated_images/no/working-tree.c58eec08e6335c79.webp) **Lagre arbeidet ditt (commit-arbeidsflyten):** @@ -431,7 +431,7 @@ Utvidelsesmarkedet er virkelig godt organisert, så du går ikke deg vill når d 2. Bla rundt eller søk etter noe spesifikt 3. Klikk på noe som ser interessant ut for å lære mer om det -![Extension marketplace interface](../../../../translated_images/no/extensions.eca0e0c7f59a10b5.png) +![Extension marketplace interface](../../../../translated_images/no/extensions.eca0e0c7f59a10b5.webp) **Dette vil du se der inne:** @@ -484,7 +484,7 @@ De fleste utvidelser kommer med innstillinger du kan justere for å få dem til 3. Velg "Extension Settings" fra nedtrekksmenyen 4. Juster ting til det føles helt riktig i arbeidsflyten din -![Customizing extension settings](../../../../translated_images/no/extension-settings.21c752ae4f4cdb78.png) +![Customizing extension settings](../../../../translated_images/no/extension-settings.21c752ae4f4cdb78.webp) **Vanlige ting du kanskje vil justere:** - Hvordan koden din blir formatert (tabulatorer vs mellomrom, linjelengde osv.) diff --git a/translations/no/8-code-editor/1-using-a-code-editor/assignment.md b/translations/no/8-code-editor/1-using-a-code-editor/assignment.md index ac8f78585..6ba190340 100644 --- a/translations/no/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/no/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ Siden VSCode.dev krever minst én fil for å åpne et repository, oppretter vi h 4. **Skriv** en commit-melding: "Legg til innledende HTML-struktur" 5. **Klikk** "Commit new file" for å lagre endringene dine -![Opprette innledende fil på GitHub](../../../../translated_images/no/new-file-github.com.c886796d800e8056.png) +![Opprette innledende fil på GitHub](../../../../translated_images/no/new-file-github.com.c886796d800e8056.webp) **Dette oppnår den innledende oppsettet:** - **Etablerer** riktig HTML5-dokumentstruktur med semantiske elementer @@ -104,7 +104,7 @@ Nå som grunnlaget for repositoryen din er etablert, la oss gå over til VSCode. ✅ **Indikator for suksess**: Du bør se prosjektfilene dine i Explorer-sidepanelet og `index.html` tilgjengelig for redigering i hovedredigeringsområdet. -![Prosjekt lastet inn i VSCode.dev](../../../../translated_images/no/project-on-vscode.dev.e79815a9a95ee7fe.png) +![Prosjekt lastet inn i VSCode.dev](../../../../translated_images/no/project-on-vscode.dev.e79815a9a95ee7fe.webp) **Hva du vil se i grensesnittet:** - **Explorer-sidepanel**: **Viser** prosjektfilene og mappestrukturen din @@ -448,7 +448,7 @@ Utvidelser forbedrer utviklingsopplevelsen din ved å gi muligheter for live for **Umiddelbare resultater etter installasjon:** Når CodeSwing er installert, vil du se en live forhåndsvisning av CV-nettsiden din vises i redigeringsverktøyet. Dette lar deg se nøyaktig hvordan siden din ser ut mens du gjør endringer. -![CodeSwing-utvidelse viser live forhåndsvisning](../../../../translated_images/no/after-codeswing-extension-pb.0ebddddcf73b5509.png) +![CodeSwing-utvidelse viser live forhåndsvisning](../../../../translated_images/no/after-codeswing-extension-pb.0ebddddcf73b5509.webp) **Forstå det forbedrede grensesnittet:** - **Delt visning**: **Viser** koden din på den ene siden og live forhåndsvisning på den andre diff --git a/translations/no/9-chat-project/README.md b/translations/no/9-chat-project/README.md index a6895a830..8979a9085 100644 --- a/translations/no/9-chat-project/README.md +++ b/translations/no/9-chat-project/README.md @@ -60,7 +60,7 @@ print(response.choices[0].message.content) Slik vil ditt ferdige prosjekt se ut: -![Chat app interface showing conversation between user and AI assistant](../../../translated_images/no/screenshot.0a1ee0d123df681b.png) +![Chat app interface showing conversation between user and AI assistant](../../../translated_images/no/screenshot.0a1ee0d123df681b.webp) ## 🗺️ Din Læringsreise Gjennom AI Applikasjonsutvikling @@ -189,7 +189,7 @@ mindmap ``` **Kjerneprinsipp**: AI-applikasjonsutvikling kombinerer tradisjonelle webutviklingsferdigheter med AI-tjenesteintegrasjon, og skaper intelligente applikasjoner som føles naturlige og responsive for brukerne. -![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/no/playground.d2b927122224ff8f.png) +![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/no/playground.d2b927122224ff8f.webp) **Dette gjør playground så nyttig:** - **Prøv ut** forskjellige AI-modeller som GPT-4o-mini, Claude, og flere (alle gratis!) @@ -199,7 +199,7 @@ mindmap Når du har lekt deg litt, klikk bare på "Code"-fanen og velg programmeringsspråk for å få implementasjonskoden du trenger. -![Playground choice showing code generation options for different programming languages](../../../translated_images/no/playground-choice.1d23ba7d407f4758.png) +![Playground choice showing code generation options for different programming languages](../../../translated_images/no/playground-choice.1d23ba7d407f4758.webp) ## Sette Opp Python Backend-integrasjon @@ -2353,14 +2353,14 @@ Vil du prøve dette prosjektet i et skybasert utviklingsmiljø? GitHub Codespace - **Naviger** til [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) - **Klikk** på "Use this template" øverst til høyre (sørg for at du er logget inn på GitHub) -![Create from template interface showing the green "Use this template" button](../../../translated_images/no/template.67ad477109d29a2b.png) +![Create from template interface showing the green "Use this template" button](../../../translated_images/no/template.67ad477109d29a2b.webp) **Steg 2: Start Codespaces** - **Åpne** ditt nylig opprettede repository - **Klikk** på den grønne "Code"-knappen og velg "Codespaces" - **Velg** "Create codespace on main" for å starte utviklingsmiljøet ditt -![Create codespace interface with options for launching cloud development environment](../../../translated_images/no/codespace.bcecbdf5d2747d3d.png) +![Create codespace interface with options for launching cloud development environment](../../../translated_images/no/codespace.bcecbdf5d2747d3d.webp) **Steg 3: Miljøkonfigurasjon** Når Codespace lastes inn, får du tilgang til: diff --git a/translations/no/README.md b/translations/no/README.md index a77778133..3d87c72f5 100644 --- a/translations/no/README.md +++ b/translations/no/README.md @@ -72,13 +72,13 @@ Ikke gå glipp av vår nye læreplan for Generativ AI! Besøk [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) for å komme i gang! -![Background](../../translated_images/no/background.148a8d43afde5730.png) +![Background](../../translated_images/no/background.148a8d43afde5730.webp) - Leksjoner som dekker alt fra det grunnleggende til RAG. - Samhandle med historiske figurer ved hjelp av GenAI og vår ledsagerapp. - Moro og engasjerende fortelling, du vil tidsreise! -![character](../../translated_images/no/character.5c0dd8e067ffd693.png) +![character](../../translated_images/no/character.5c0dd8e067ffd693.webp) Hver leksjon inkluderer en oppgave å fullføre, en kunnskapssjekk og en utfordring for å veilede deg i læringstemaer som: @@ -115,7 +115,7 @@ Følg disse trinnene: I din kopi av dette depotet som du opprettet, klikk på **Kode**-knappen og velg **Åpne med Codespaces**. Dette vil opprette en ny Codespace for deg å jobbe i. -![Codespace](../../translated_images/no/createcodespace.0238bbf4d7a8d955.png) +![Codespace](../../translated_images/no/createcodespace.0238bbf4d7a8d955.webp) #### Kjøre læreplanen lokalt på datamaskinen din diff --git a/translations/no/for-teachers.md b/translations/no/for-teachers.md index c1b21aee2..e6f57ad91 100644 --- a/translations/no/for-teachers.md +++ b/translations/no/for-teachers.md @@ -42,10 +42,10 @@ Dette pensumet inkluderer importbare pakker for vanlige LMS-arbeidsflyter. - Moodle Cloud har begrenset støtte for Common Cartridge. Foretrekk Moodle-filen ovenfor, som også kan lastes opp til Canvas. - Etter import, gjennomgå moduler, frister og quiz-innstillinger for å tilpasse til din terminplan. -![Moodle](../../translated_images/no/moodle.94eb93d714a50cb2.png) +![Moodle](../../translated_images/no/moodle.94eb93d714a50cb2.webp) > Pensumet i et Moodle-klasserom -![Canvas](../../translated_images/no/canvas.fbd605ff8e5b8aff.png) +![Canvas](../../translated_images/no/canvas.fbd605ff8e5b8aff.webp) > Pensumet i Canvas ### Bruk repoet direkte (uten Classroom) diff --git a/translations/pa/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/pa/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 94cc0c4dd..d1ff9c309 100644 --- a/translations/pa/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/pa/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: ਅੱਜ, ਅਸੀਂ ਉਹ ਸ਼ਾਨਦਾਰ ਟੂਲਜ਼ ਦੀ ਖੋਜ ਕਰਨ ਜਾ ਰਹੇ ਹਾਂ ਜੋ ਆਧੁਨਿਕ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਨੂੰ ਸਿਰਫ ਸੰਭਵ ਹੀ ਨਹੀਂ ਬਲਕਿ ਗੰਭੀਰ ਤੌਰ 'ਤੇ ਆਕਰਸ਼ਕ ਬਣਾਉਂਦੇ ਹਨ। ਮੈਂ ਉਹੀ ਸੰਪਾਦਕਾਂ, ਬ੍ਰਾਊਜ਼ਰਾਂ ਅਤੇ ਵਰਕਫਲੋਜ਼ ਬਾਰੇ ਗੱਲ ਕਰ ਰਿਹਾ ਹਾਂ ਜੋ Netflix, Spotify, ਅਤੇ ਤੁਹਾਡੇ ਮਨਪਸੰਦ ਇੰਡੀ ਐਪ ਸਟੂਡੀਓ ਦੇ ਡਿਵੈਲਪਰ ਹਰ ਰੋਜ਼ ਵਰਤਦੇ ਹਨ। ਅਤੇ ਇਹ ਹੈ ਉਹ ਹਿੱਸਾ ਜੋ ਤੁਹਾਨੂੰ ਖੁਸ਼ੀ ਨਾਲ ਨੱਚਣ ਲਈ ਮਜਬੂਰ ਕਰੇਗਾ: ਇਹਨਾਂ ਵਿੱਚੋਂ ਜ਼ਿਆਦਾਤਰ ਪੇਸ਼ੇਵਰ-ਗਰੇਡ, ਉਦਯੋਗ-ਮਿਆਰੀ ਟੂਲਜ਼ ਪੂਰੀ ਤਰ੍ਹਾਂ ਮੁਫ਼ਤ ਹਨ! -![Intro Programming](../../../../translated_images/pa/webdev101-programming.d6e3f98e61ac4bff.png) +![Intro Programming](../../../../translated_images/pa/webdev101-programming.d6e3f98e61ac4bff.webp) > ਸਕੈਚਨੋਟ [Tomomi Imura](https://twitter.com/girlie_mac) ਦੁਆਰਾ ```mermaid diff --git a/translations/pa/1-getting-started-lessons/2-github-basics/README.md b/translations/pa/1-getting-started-lessons/2-github-basics/README.md index 4bc05c2b9..60fd6293c 100644 --- a/translations/pa/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/pa/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: ਅਸੀਂ ਇਹ ਯਾਤਰਾ ਇਕੱਠੇ ਕਰਾਂਗੇ, ਇੱਕ ਕਦਮ ਵਿੱਚ। ਕੋਈ ਜਲਦੀ ਨਹੀਂ, ਕੋਈ ਦਬਾਅ ਨਹੀਂ – ਸਿਰਫ ਤੁਸੀਂ, ਮੈਂ, ਅਤੇ ਕੁਝ ਬਹੁਤ ਹੀ ਸ਼ਾਨਦਾਰ ਟੂਲ ਜੋ ਤੁਹਾਡੇ ਨਵੇਂ ਸਭ ਤੋਂ ਵਧੀਆ ਦੋਸਤ ਬਣਨ ਜਾ ਰਹੇ ਹਨ! -![GitHub ਦਾ ਪਰਚੇ](../../../../translated_images/pa/webdev101-github.8846d7971abef6f9.png) +![GitHub ਦਾ ਪਰਚੇ](../../../../translated_images/pa/webdev101-github.8846d7971abef6f9.webp) > ਸਕੈਚਨੋਟ [Tomomi Imura](https://twitter.com/girlie_mac) ਦੁਆਰਾ ## ਪਾਠ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼ @@ -337,7 +337,7 @@ flowchart TD ✅ 'ਸ਼ੁਰੂਆਤੀ-ਦੋਸਤਾਨਾ' ਰਿਪੋਜ਼ਟਰੀ ਲੱਭਣ ਦਾ ਇੱਕ ਵਧੀਆ ਤਰੀਕਾ ਹੈ [ਟੈਗ 'good-first-issue' ਦੁਆਰਾ ਖੋਜ ਕਰਨਾ](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)। -![ਰਿਪੋ ਨੂੰ ਲੋਕਲ ਤੌਰ 'ਤੇ ਕਾਪੀ ਕਰੋ](../../../../translated_images/pa/clone_repo.5085c48d666ead57.png) +![ਰਿਪੋ ਨੂੰ ਲੋਕਲ ਤੌਰ 'ਤੇ ਕਾਪੀ ਕਰੋ](../../../../translated_images/pa/clone_repo.5085c48d666ead57.webp) ਕੋਡ ਕਾਪੀ ਕਰਨ ਦੇ ਕਈ ਤਰੀਕੇ ਹਨ। ਇੱਕ ਤਰੀਕਾ ਹੈ ਰਿਪੋਜ਼ਟਰੀ ਦੀ ਸਮੱਗਰੀ ਨੂੰ "ਕਲੋਨ" ਕਰਨਾ, HTTPS, SSH ਜਾਂ GitHub CLI (ਕਮਾਂਡ ਲਾਈਨ ਇੰਟਰਫੇਸ) ਦੀ ਵਰਤੋਂ ਕਰਕੇ। diff --git a/translations/pa/1-getting-started-lessons/3-accessibility/README.md b/translations/pa/1-getting-started-lessons/3-accessibility/README.md index deedb11a1..c66dfa1d3 100644 --- a/translations/pa/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/pa/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # ਸਹੀ ਵੈੱਬਸਾਈਟ ਬਣਾਉਣਾ -![ਸਹੀ ਵੈੱਬਸਾਈਟ ਬਾਰੇ ਸਭ ਕੁਝ](../../../../translated_images/pa/webdev101-a11y.8ef3025c858d897a.png) +![ਸਹੀ ਵੈੱਬਸਾਈਟ ਬਾਰੇ ਸਭ ਕੁਝ](../../../../translated_images/pa/webdev101-a11y.8ef3025c858d897a.webp) > ਸਕੈਚਨੋਟ [ਟੋਮੋਮੀ ਇਮੁਰਾ](https://twitter.com/girlie_mac) ਦੁਆਰਾ ```mermaid diff --git a/translations/pa/2-js-basics/1-data-types/README.md b/translations/pa/2-js-basics/1-data-types/README.md index 0bf30aee6..33cd05385 100644 --- a/translations/pa/2-js-basics/1-data-types/README.md +++ b/translations/pa/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # ਜਾਵਾਸਕ੍ਰਿਪਟ ਬੇਸਿਕਸ: ਡਾਟਾ ਟਾਈਪਸ -![JavaScript Basics - Data types](../../../../translated_images/pa/webdev101-js-datatypes.4cc470179730702c.png) +![JavaScript Basics - Data types](../../../../translated_images/pa/webdev101-js-datatypes.4cc470179730702c.webp) > ਸਕੈਚਨੋਟ [Tomomi Imura](https://twitter.com/girlie_mac) ਵੱਲੋਂ ```mermaid diff --git a/translations/pa/2-js-basics/2-functions-methods/README.md b/translations/pa/2-js-basics/2-functions-methods/README.md index fcaf08da5..932269b46 100644 --- a/translations/pa/2-js-basics/2-functions-methods/README.md +++ b/translations/pa/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # ਜਾਵਾਸਕ੍ਰਿਪਟ ਬੇਸਿਕਸ: ਮੈਥਡਸ ਅਤੇ ਫੰਕਸ਼ਨ -![ਜਾਵਾਸਕ੍ਰਿਪਟ ਬੇਸਿਕਸ - ਫੰਕਸ਼ਨ](../../../../translated_images/pa/webdev101-js-functions.be049c4726e94f8b.png) +![ਜਾਵਾਸਕ੍ਰਿਪਟ ਬੇਸਿਕਸ - ਫੰਕਸ਼ਨ](../../../../translated_images/pa/webdev101-js-functions.be049c4726e94f8b.webp) > ਸਕੈਚਨੋਟ [ਟੋਮੋਮੀ ਇਮੁਰਾ](https://twitter.com/girlie_mac) ਦੁਆਰਾ ```mermaid diff --git a/translations/pa/2-js-basics/3-making-decisions/README.md b/translations/pa/2-js-basics/3-making-decisions/README.md index 9a524ef2e..b37aec3d8 100644 --- a/translations/pa/2-js-basics/3-making-decisions/README.md +++ b/translations/pa/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # ਜਾਵਾਸਕ੍ਰਿਪਟ ਬੇਸਿਕਸ: ਫੈਸਲੇ ਲੈਣਾ -![ਜਾਵਾਸਕ੍ਰਿਪਟ ਬੇਸਿਕਸ - ਫੈਸਲੇ ਲੈਣਾ](../../../../translated_images/pa/webdev101-js-decisions.69e1b20f272dd1f0.png) +![ਜਾਵਾਸਕ੍ਰਿਪਟ ਬੇਸਿਕਸ - ਫੈਸਲੇ ਲੈਣਾ](../../../../translated_images/pa/webdev101-js-decisions.69e1b20f272dd1f0.webp) > ਸਕੈਚਨੋਟ [ਟੋਮੋਮੀ ਇਮੁਰਾ](https://twitter.com/girlie_mac) ਦੁਆਰਾ diff --git a/translations/pa/2-js-basics/4-arrays-loops/README.md b/translations/pa/2-js-basics/4-arrays-loops/README.md index 04acfc712..49190ea84 100644 --- a/translations/pa/2-js-basics/4-arrays-loops/README.md +++ b/translations/pa/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # ਜਾਵਾਸਕ੍ਰਿਪਟ ਬੁਨਿਆਦੀਆਂ: ਐਰੇ ਅਤੇ ਲੂਪ -![JavaScript Basics - Arrays](../../../../translated_images/pa/webdev101-js-arrays.439d7528b8a29455.png) +![JavaScript Basics - Arrays](../../../../translated_images/pa/webdev101-js-arrays.439d7528b8a29455.webp) > ਸਕੈਚਨੋਟ [Tomomi Imura](https://twitter.com/girlie_mac) ਵੱਲੋਂ ```mermaid diff --git a/translations/pa/3-terrarium/1-intro-to-html/README.md b/translations/pa/3-terrarium/1-intro-to-html/README.md index ffb6ddb39..47b8f99d6 100644 --- a/translations/pa/3-terrarium/1-intro-to-html/README.md +++ b/translations/pa/3-terrarium/1-intro-to-html/README.md @@ -26,7 +26,7 @@ journey Build terrarium: 5: Student ``` -![HTML ਦਾ ਪਰਿਚਯ](../../../../translated_images/pa/webdev101-html.4389c2067af68e98.png) +![HTML ਦਾ ਪਰਿਚਯ](../../../../translated_images/pa/webdev101-html.4389c2067af68e98.webp) > ਸਕੈਚਨੋਟ [Tomomi Imura](https://twitter.com/girlie_mac) ਦੁਆਰਾ HTML, ਜਾਂ HyperText Markup Language, ਹਰ ਵੈਬਸਾਈਟ ਦੀ ਬੁਨਿਆਦ ਹੈ ਜਿਸ ਨੂੰ ਤੁਸੀਂ ਕਦੇ ਵੀ ਵੇਖਿਆ ਹੈ। HTML ਨੂੰ ਵੈਬ ਪੇਜਾਂ ਦੇ ਢਾਂਚੇ ਦੇ ਤੌਰ 'ਤੇ ਸੋਚੋ - ਇਹ ਨਿਰਧਾਰਤ ਕਰਦਾ ਹੈ ਕਿ ਸਮੱਗਰੀ ਕਿੱਥੇ ਜਾਂਦੀ ਹੈ, ਇਹ ਕਿਵੇਂ ਸੰਗਠਿਤ ਹੈ, ਅਤੇ ਹਰ ਹਿੱਸਾ ਕੀ ਦਰਸਾਉਂਦਾ ਹੈ। ਜਦ CSS ਤੁਹਾਡੇ HTML ਨੂੰ ਰੰਗਾਂ ਅਤੇ ਲੇਆਉਟ ਨਾਲ "ਸਜਾਉਣ" ਲਈ ਆਵੇਗਾ, ਅਤੇ JavaScript ਇਸਨੂੰ ਇੰਟਰਐਕਟਿਵਿਟੀ ਨਾਲ ਜ਼ਿੰਦਾ ਕਰੇਗਾ, HTML ਉਹ ਅਹਿਮ ਢਾਂਚਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜੋ ਬਾਕੀ ਸਭ ਕੁਝ ਸੰਭਵ ਬਣਾਉਂਦਾ ਹੈ। @@ -88,7 +88,7 @@ HTML ਕੋਡ ਵਿੱਚ ਡੁੱਬਣ ਤੋਂ ਪਹਿਲਾਂ, ਆਓ 4. Explorer ਪੈਨ ਵਿੱਚ, "New File" ਆਈਕਨ 'ਤੇ ਕਲਿਕ ਕਰੋ 5. ਆਪਣੀ ਫਾਈਲ ਨੂੰ `index.html` ਨਾਮ ਦਿਓ -![VS Code Explorer ਨਵੀਂ ਫਾਈਲ ਬਣਾਉਣ ਦਿਖਾਉਂਦਾ ਹੈ](../../../../translated_images/pa/vs-code-index.e2986cf919471eb9.png) +![VS Code Explorer ਨਵੀਂ ਫਾਈਲ ਬਣਾਉਣ ਦਿਖਾਉਂਦਾ ਹੈ](../../../../translated_images/pa/vs-code-index.e2986cf919471eb9.webp) **ਵਿਕਲਪ 2: ਟਰਮੀਨਲ ਕਮਾਂਡ ਦੀ ਵਰਤੋਂ ਕਰਨਾ** ```bash diff --git a/translations/pa/3-terrarium/2-intro-to-css/README.md b/translations/pa/3-terrarium/2-intro-to-css/README.md index e0efcbf47..c69b9d188 100644 --- a/translations/pa/3-terrarium/2-intro-to-css/README.md +++ b/translations/pa/3-terrarium/2-intro-to-css/README.md @@ -30,7 +30,7 @@ journey Glass reflections: 5: Student ``` -![CSS ਦਾ ਪਰਚੇਅ](../../../../translated_images/pa/webdev101-css.3f7af5991bf53a20.png) +![CSS ਦਾ ਪਰਚੇਅ](../../../../translated_images/pa/webdev101-css.3f7af5991bf53a20.webp) > ਸਕੈਚਨੋਟ [Tomomi Imura](https://twitter.com/girlie_mac) ਵੱਲੋਂ ਤੁਹਾਨੂੰ ਯਾਦ ਹੈ ਕਿ ਤੁਹਾਡਾ HTML ਟੈਰੀਰੀਅਮ ਕਿੰਨਾ ਸਧਾਰਨ ਲੱਗ ਰਿਹਾ ਸੀ? CSS ਦੇ ਨਾਲ ਅਸੀਂ ਉਸ ਸਧਾਰਨ ਬਣਤਰ ਨੂੰ ਕੁਝ ਵਿਜੁਅਲ ਅਪੀਲ ਦੇਣ ਵਾਲੇ ਵਿੱਚ ਬਦਲ ਸਕਦੇ ਹਾਂ। @@ -205,7 +205,7 @@ body { ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਡਿਵੈਲਪਰ ਟੂਲ (F12) ਖੋਲ੍ਹੋ, ਐਲਿਮੈਂਟਸ ਟੈਬ 'ਤੇ ਜਾਓ, ਅਤੇ ਆਪਣੇ `

` ਤੱਤ ਦੀ ਜਾਂਚ ਕਰੋ। ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ ਇਹ ਬਾਡੀ ਤੋਂ ਫੋਂਟ ਫੈਮਿਲੀ ਵਿਰਾਸਤ ਵਿੱਚ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ: -![ਵਿਰਾਸਤ ਫੋਂਟ](../../../../translated_images/pa/1.cc07a5cbe114ad1d.png) +![ਵਿਰਾਸਤ ਫੋਂਟ](../../../../translated_images/pa/1.cc07a5cbe114ad1d.webp) ✅ **ਪ੍ਰਯੋਗ ਸਮਾਂ**: `` 'ਤੇ ਹੋਰ ਵਿਰਾਸਤ ਗੁਣ ਜਿਵੇਂ `color`, `line-height`, ਜਾਂ `text-align` ਸੈਟ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ਤੁਹਾਡੇ ਹੈਡਿੰਗ ਅਤੇ ਹੋਰ ਤੱਤਾਂ 'ਤੇ ਕੀ ਹੁੰਦਾ ਹੈ? @@ -413,7 +413,7 @@ Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤ ਤੁਹਾਨੂੰ ਹੌਲੀ ਹੌਲੀ ਹਾਈਲਾਈਟਸ ਬਣਾਉਣੇ ਹਨ ਜੋ ਦਰਸਾਉਂਦੇ ਹਨ ਕਿ ਕਿਵੇਂ ਰੋਸ਼ਨੀ ਕੱਚ ਦੀ ਸਤਹ 'ਤੇ ਰਿਫਲੈਕਟ ਕਰਦੀ ਹੈ। ਇਹ ਤਰੀਕਾ ਉਸ ਤਰੀਕੇ ਦੇ ਸਮਾਨ ਹੈ ਜਿਸ ਤਰ੍ਹਾਂ ਰੈਨੈਸਾਂਸ ਪੇਂਟਰ ਜਾਨ ਵੈਨ ਆਇਕ ਨੇ ਰੋਸ਼ਨੀ ਅਤੇ ਰਿਫਲੈਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਪੇਂਟ ਕੀਤੇ ਕੱਚ ਨੂੰ ਤਿੰਨ-ਡਾਈਮੈਂਸ਼ਨਲ ਦਿੱਖ ਦਿੱਤੀ। ਇਹ ਹੈ ਜੋ ਤੁਸੀਂ ਹਾਸਲ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹੋ: -![finished terrarium](../../../../translated_images/pa/terrarium-final.2f07047ffc597d0a.png) +![finished terrarium](../../../../translated_images/pa/terrarium-final.2f07047ffc597d0a.webp) **ਤੁਹਾਡਾ ਚੈਲੈਂਜ:** - **ਬਣਾਓ** ਹੌਲੀ ਹੌਲੀ ਚਿੱਟੇ ਜਾਂ ਹਲਕੇ ਰੰਗ ਦੇ ਓਵਲ ਆਕਾਰ ਕੱਚ ਦੇ ਰਿਫਲੈਕਸ਼ਨ ਲਈ diff --git a/translations/pa/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/pa/3-terrarium/3-intro-to-DOM-and-closures/README.md index 9af8b41e3..3f78c6c12 100644 --- a/translations/pa/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/pa/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -26,7 +26,7 @@ journey Complete terrarium: 5: Student ``` -![DOM ਅਤੇ ਇੱਕ ਕਲੋਜ਼ਰ](../../../../translated_images/pa/webdev101-js.10280393044d7eaa.png) +![DOM ਅਤੇ ਇੱਕ ਕਲੋਜ਼ਰ](../../../../translated_images/pa/webdev101-js.10280393044d7eaa.webp) > ਸਕੈਚਨੋਟ [ਟੋਮੋਮੀ ਇਮੁਰਾ](https://twitter.com/girlie_mac) ਦੁਆਰਾ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਦੇ ਸਭ ਤੋਂ ਰੁਚਿਕਰ ਪਹਲੂਆਂ ਵਿੱਚ ਤੁਹਾਡਾ ਸਵਾਗਤ ਹੈ - ਚੀਜ਼ਾਂ ਨੂੰ ਇੰਟਰਐਕਟਿਵ ਬਣਾਉਣਾ! ਡੌਕਯੂਮੈਂਟ ਓਬਜੈਕਟ ਮਾਡਲ (DOM) ਤੁਹਾਡੇ HTML ਅਤੇ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੇ ਵਿਚਕਾਰ ਇੱਕ ਪੁਲ ਵਾਂਗ ਹੈ, ਅਤੇ ਅੱਜ ਅਸੀਂ ਇਸਨੂੰ ਤੁਹਾਡੇ ਟੈਰੀਅਰੀਅਮ ਨੂੰ ਜ਼ਿੰਦਾ ਕਰਨ ਲਈ ਵਰਤਾਂਗੇ। ਜਦੋਂ ਟਿਮ ਬਰਨਰਜ਼-ਲੀ ਨੇ ਪਹਿਲਾ ਵੈੱਬ ਬ੍ਰਾਊਜ਼ਰ ਬਣਾਇਆ, ਉਸਨੇ ਇੱਕ ਵੈੱਬ ਦੀ ਕਲਪਨਾ ਕੀਤੀ ਸੀ ਜਿੱਥੇ ਡੌਕਯੂਮੈਂਟ ਡਾਇਨਾਮਿਕ ਅਤੇ ਇੰਟਰਐਕਟਿਵ ਹੋ ਸਕਦੇ ਹਨ - DOM ਉਸ ਦ੍ਰਿਸ਼ਟੀਕੋਣ ਨੂੰ ਸੰਭਵ ਬਣਾਉਂਦਾ ਹੈ। @@ -105,7 +105,7 @@ flowchart TD style Q fill:#ffebee ``` -![DOM ਦਰਖਤ ਦੀ ਪ੍ਰਤੀਨਿਧੀ](../../../../translated_images/pa/dom-tree.7daf0e763cbbba92.png) +![DOM ਦਰਖਤ ਦੀ ਪ੍ਰਤੀਨਿਧੀ](../../../../translated_images/pa/dom-tree.7daf0e763cbbba92.webp) > DOM ਅਤੇ HTML ਮਾਰਕਅੱਪ ਦੀ ਪ੍ਰਤੀਨਿਧੀ ਜੋ ਇਸਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ। [ਓਲਫਾ ਨਸਰਾਊਈ](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) ਤੋਂ @@ -150,7 +150,7 @@ flowchart LR > 💡 **ਕਲੋਜ਼ਰਜ਼ ਨੂੰ ਸਮਝਣਾ**: ਕਲੋਜ਼ਰਜ਼ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਇੱਕ ਮਹੱਤਵਪੂਰਨ ਵਿਸ਼ਾ ਹਨ, ਅਤੇ ਕਈ ਡਿਵੈਲਪਰ ਇਸਨੂੰ ਸਾਲਾਂ ਤੱਕ ਵਰਤਦੇ ਹਨ ਬਿਨਾਂ ਇਸਦੇ ਸਾਰੇ ਸਿਧਾਂਤਕ ਪਹਲੂਆਂ ਨੂੰ ਪੂਰੀ ਤਰ੍ਹਾਂ ਸਮਝਣ ਦੇ। ਅੱਜ, ਅਸੀਂ ਵਿਵਹਾਰਕ ਅਰਜ਼ੀ 'ਤੇ ਧਿਆਨ ਦੇ ਰਹੇ ਹਾਂ - ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ ਕਲੋਜ਼ਰਜ਼ ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਉਭਰਦੇ ਹਨ ਜਦੋਂ ਅਸੀਂ ਆਪਣੀਆਂ ਇੰਟਰਐਕਟਿਵ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਬਣਾਉਂਦੇ ਹਾਂ। ਸਮਝਣਾ ਵਿਕਸਿਤ ਹੋਵੇਗਾ ਜਦੋਂ ਤੁਸੀਂ ਦੇਖੋਗੇ ਕਿ ਇਹ ਅਸਲ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਕਿਵੇਂ ਹੱਲ ਕਰਦੇ ਹਨ। -![DOM ਦਰਖਤ ਦੀ ਪ੍ਰਤੀਨਿਧੀ](../../../../translated_images/pa/dom-tree.7daf0e763cbbba92.png) +![DOM ਦਰਖਤ ਦੀ ਪ੍ਰਤੀਨਿਧੀ](../../../../translated_images/pa/dom-tree.7daf0e763cbbba92.webp) > DOM ਅਤੇ HTML ਮਾਰਕਅੱਪ ਦੀ ਪ੍ਰਤੀਨਿਧੀ ਜੋ ਇਸਨੂੰ ਦਰਸਾਉਂਦੀ ਹੈ। [ਓਲਫਾ ਨਸਰਾਊਈ](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) ਤੋਂ @@ -423,7 +423,7 @@ function stopElementDrag() { - **ਕਰਾਸ-ਡਿਵਾਈਸ ਸਪੋਰਟ**: ਡੈਸਕਟਾਪ ਅਤੇ ਮੋਬਾਈਲ 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ - **ਪਰਫਾਰਮੈਂਸ ਸਚੇਤਤਾ**: ਕੋਈ ਮੈਮੋਰੀ ਲੀਕ ਜਾਂ ਬੇਕਾਰ ਗਣਨਾਵਾਂ ਨਹੀਂ -![ਫਿਨਿਸ਼ਡ ਟੈਰੀਰੀਅਮ](../../../../translated_images/pa/terrarium-final.0920f16e87c13a84.png) +![ਫਿਨਿਸ਼ਡ ਟੈਰੀਰੀਅਮ](../../../../translated_images/pa/terrarium-final.0920f16e87c13a84.webp) --- diff --git a/translations/pa/3-terrarium/solution/README.md b/translations/pa/3-terrarium/solution/README.md index 35e8552e2..e2c0f2b80 100644 --- a/translations/pa/3-terrarium/solution/README.md +++ b/translations/pa/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: ਇੱਕ ਛੋਟਾ ਡ੍ਰੈਗ ਅਤੇ ਡ੍ਰਾਪ ਕੋਡ-ਮੈਡੀਟੇਸ਼ਨ। ਥੋੜ੍ਹਾ ਜਿਹਾ HTML, JS ਅਤੇ CSS ਦੀ ਵਰਤੋਂ ਕਰਕੇ, ਤੁਸੀਂ ਇੱਕ ਵੈੱਬ ਇੰਟਰਫੇਸ ਬਣਾਉਣ, ਇਸਨੂੰ ਸਜਾਉਣ ਅਤੇ ਇਸ ਵਿੱਚ ਇੰਟਰੈਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ। -![ਮੇਰਾ ਟੈਰੀਰੀਅਮ](../../../../translated_images/pa/screenshot_gray.0c796099a1f9f25e.png) +![ਮੇਰਾ ਟੈਰੀਰੀਅਮ](../../../../translated_images/pa/screenshot_gray.0c796099a1f9f25e.webp) ## ਸ਼੍ਰੇਯ diff --git a/translations/pa/5-browser-extension/1-about-browsers/README.md b/translations/pa/5-browser-extension/1-about-browsers/README.md index 67a0b7fc6..33599dd40 100644 --- a/translations/pa/5-browser-extension/1-about-browsers/README.md +++ b/translations/pa/5-browser-extension/1-about-browsers/README.md @@ -26,7 +26,7 @@ journey Polish experience: 5: Student ``` -![ਬ੍ਰਾਊਜ਼ਰ ਸਕੈਚਨੋਟ](../../../../translated_images/pa/browser.60317c9be8b7f84a.jpg) +![ਬ੍ਰਾਊਜ਼ਰ ਸਕੈਚਨੋਟ](../../../../translated_images/pa/browser.60317c9be8b7f84a.webp) > ਸਕੈਚਨੋਟ [ਵਾਸਿਮ ਚੇਘਮ](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ਦੁਆਰਾ ## ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼ @@ -79,7 +79,7 @@ mindmap ✅ **ਥੋੜ੍ਹਾ ਇਤਿਹਾਸ**: ਪਹਿਲਾ ਬ੍ਰਾਊਜ਼ਰ 'ਵਰਲਡਵਾਈਡਵੈੱਬ' ਕਿਹਾ ਜਾਂਦਾ ਸੀ ਅਤੇ ਇਹ 1990 ਵਿੱਚ ਸਰ ਟਿਮੋਥੀ ਬਰਨਰਜ਼-ਲੀ ਦੁਆਰਾ ਬਣਾਇਆ ਗਿਆ ਸੀ। -![ਪੁਰਾਣੇ ਬ੍ਰਾਊਜ਼ਰ](../../../../translated_images/pa/earlybrowsers.d984b711cdf3a42d.jpg) +![ਪੁਰਾਣੇ ਬ੍ਰਾਊਜ਼ਰ](../../../../translated_images/pa/earlybrowsers.d984b711cdf3a42d.webp) > ਕੁਝ ਪੁਰਾਣੇ ਬ੍ਰਾਊਜ਼ਰ, [ਕੈਰਨ ਮੈਕਗ੍ਰੇਨ](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ਦੁਆਰਾ ### ਬ੍ਰਾਊਜ਼ਰ ਵੈੱਬ ਸਮੱਗਰੀ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਕਿਰਿਆ ਕਰਦੇ ਹਨ @@ -198,7 +198,7 @@ quadrantChart ਐਕਸਟੈਂਸ਼ਨ ਇੰਸਟਾਲੇਸ਼ਨ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਸਮਝਣਾ ਤੁਹਾਨੂੰ ਇਹ ਅਨੁਮਾਨ ਲਗਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ ਕਿ ਲੋਕ ਤੁਹਾਡਾ ਐਕਸਟੈਂਸ਼ਨ ਇੰਸਟਾਲ ਕਰਦੇ ਸਮੇਂ ਕਿਹੜਾ ਅਨੁਭਵ ਕਰਦੇ ਹਨ। ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਇੰਸਟਾਲੇਸ਼ਨ ਪ੍ਰਕਿਰਿਆ ਮਿਆਰੀ ਹੈ, ਇੰਟਰਫੇਸ ਡਿਜ਼ਾਈਨ ਵਿੱਚ ਥੋੜ੍ਹੇ ਫਰਕਾਂ ਨਾਲ। -![Edge ਬ੍ਰਾਊਜ਼ਰ ਦਾ ਸਕ੍ਰੀਨਸ਼ਾਟ ਜਿਸ ਵਿੱਚ edge://extensions ਪੇਜ ਅਤੇ ਸੈਟਿੰਗ ਮੈਨੂ ਖੁੱਲ੍ਹਾ ਹੈ](../../../../translated_images/pa/install-on-edge.d68781acaf0b3d3d.png) +![Edge ਬ੍ਰਾਊਜ਼ਰ ਦਾ ਸਕ੍ਰੀਨਸ਼ਾਟ ਜਿਸ ਵਿੱਚ edge://extensions ਪੇਜ ਅਤੇ ਸੈਟਿੰਗ ਮੈਨੂ ਖੁੱਲ੍ਹਾ ਹੈ](../../../../translated_images/pa/install-on-edge.d68781acaf0b3d3d.webp) > **ਮਹੱਤਵਪੂਰਨ**: ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੇ ਐਕਸਟੈਂਸ਼ਨ ਦੀ ਜਾਂਚ ਕਰ ਰਹੇ ਹੋ ਤਾਂ ਡਿਵੈਲਪਰ ਮੋਡ ਨੂੰ ਚਾਲੂ ਕਰਨਾ ਅਤੇ ਹੋਰ ਸਟੋਰਾਂ ਤੋਂ ਐਕਸਟੈਂਸ਼ਨ ਦੀ ਆਗਿਆ ਦੇਣਾ ਯਕੀਨੀ ਬਣਾਓ। diff --git a/translations/pa/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/pa/5-browser-extension/2-forms-browsers-local-storage/README.md index 18b1c82e5..105ec5022 100644 --- a/translations/pa/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/pa/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -268,7 +268,7 @@ stateDiagram-v2 ClearStorage --> FirstTime: Back to setup ``` -![ਲੋਕਲ ਸਟੋਰੇਜ ਪੈਨ](../../../../translated_images/pa/localstorage.472f8147b6a3f8d1.png) +![ਲੋਕਲ ਸਟੋਰੇਜ ਪੈਨ](../../../../translated_images/pa/localstorage.472f8147b6a3f8d1.webp) > ⚠️ **ਸੁਰੱਖਿਆ ਵਿਚਾਰ**: ਉਤਪਾਦਨ ਐਪਲੀਕੇਸ਼ਨਜ਼ ਵਿੱਚ, LocalStorage ਵਿੱਚ API ਕੁੰਜੀਆਂ ਨੂੰ ਸਟੋਰ ਕਰਨਾ ਸੁਰੱਖਿਆ ਖਤਰੇ ਪੈਦਾ ਕਰਦਾ ਹੈ ਕਿਉਂਕਿ ਜਾਵਾਸਕ੍ਰਿਪਟ ਇਸ ਡਾਟਾ ਤੱਕ ਪਹੁੰਚ ਕਰ ਸਕਦਾ ਹੈ। ਸਿੱਖਣ ਦੇ ਉਦੇਸ਼ਾਂ ਲਈ, ਇਹ ਪਹੁੰਚ ਠੀਕ ਹੈ, ਪਰ ਅਸਲ ਐਪਲੀਕੇਸ਼ਨਜ਼ ਨੂੰ ਸੰਵੇਦਨਸ਼ੀਲ ਪ੍ਰਮਾਣਾਂ ਲਈ ਸੁਰੱਖਿਅਤ ਸਰਵਰ-ਸਾਈਡ ਸਟੋਰੇਜ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ। diff --git a/translations/pa/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/pa/5-browser-extension/3-background-tasks-and-performance/README.md index 3c88cb5c8..1bd172031 100644 --- a/translations/pa/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/pa/5-browser-extension/3-background-tasks-and-performance/README.md @@ -126,7 +126,7 @@ Edge ਵਿੱਚ Developer Tools ਖੋਲ੍ਹਣ ਲਈ, ਉੱਪਰ ਸੱ ਆਓ ਇਸਨੂੰ ਅਜ਼ਮਾਈਏ। ਇੱਕ ਵੈੱਬਸਾਈਟ ਖੋਲ੍ਹੋ (Microsoft.com ਇਸ ਲਈ ਚੰਗੀ ਹੈ) ਅਤੇ 'Record' ਬਟਨ 'ਤੇ ਕਲਿਕ ਕਰੋ। ਹੁਣ ਪੇਜ ਨੂੰ ਰੀਫ੍ਰੈਸ਼ ਕਰੋ ਅਤੇ ਪ੍ਰੋਫਾਈਲਰ ਨੂੰ ਜੋ ਕੁਝ ਵੀ ਹੁੰਦਾ ਹੈ ਉਸਨੂੰ ਕੈਪਚਰ ਕਰਦੇ ਦੇਖੋ। ਜਦੋਂ ਤੁਸੀਂ ਰਿਕਾਰਡਿੰਗ ਰੋਕਦੇ ਹੋ, ਤੁਹਾਨੂੰ ਇਹ ਦੇਖਣ ਨੂੰ ਮਿਲੇਗਾ ਕਿ ਬ੍ਰਾਊਜ਼ਰ 'ਸਕ੍ਰਿਪਟ', 'ਰੈਂਡਰ' ਅਤੇ 'ਪੇਂਟ' ਸਾਈਟ ਨੂੰ ਕਿਵੇਂ ਤਿਆਰ ਕਰਦਾ ਹੈ। ਇਹ ਮੈਨੂੰ ਯਾਦ ਦਿਵਾਉਂਦਾ ਹੈ ਕਿ ਮਿਸ਼ਨ ਕੰਟਰੋਲ ਰਾਕਟ ਲਾਂਚ ਦੌਰਾਨ ਹਰ ਸਿਸਟਮ ਦੀ ਨਿਗਰਾਨੀ ਕਰਦਾ ਹੈ - ਤੁਹਾਨੂੰ ਇਹ ਪਤਾ ਲੱਗਦਾ ਹੈ ਕਿ ਅਸਲ ਵਿੱਚ ਕੀ ਹੋ ਰਿਹਾ ਹੈ ਅਤੇ ਕਦੋਂ। -![Edge ਪ੍ਰੋਫਾਈਲਰ](../../../../translated_images/pa/profiler.5a4a62479c5df01c.png) +![Edge ਪ੍ਰੋਫਾਈਲਰ](../../../../translated_images/pa/profiler.5a4a62479c5df01c.webp) ✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) ਵਿੱਚ ਹੋਰ ਬਹੁਤ ਸਾਰੇ ਵੇਰਵੇ ਹਨ ਜੇ ਤੁਸੀਂ ਹੋਰ ਡੂੰਘਾਈ ਵਿੱਚ ਜਾਣਾ ਚਾਹੁੰਦੇ ਹੋ @@ -136,11 +136,11 @@ Edge ਵਿੱਚ Developer Tools ਖੋਲ੍ਹਣ ਲਈ, ਉੱਪਰ ਸੱ ਪ੍ਰੋਫਾਈਲ ਟਾਈਮਲਾਈਨ ਦੇ ਇੱਕ ਹਿੱਸੇ ਨੂੰ ਚੁਣ ਕੇ ਅਤੇ ਸਾਰਾਂ ਪੈਨ ਦੇਖ ਕੇ ਆਪਣੀ ਪੇਜ ਦੇ ਪ੍ਰਦਰਸ਼ਨ ਦੀ ਇੱਕ ਝਲਕ ਪ੍ਰਾਪਤ ਕਰੋ: -![Edge ਪ੍ਰੋਫਾਈਲਰ ਸਨੈਪਸ਼ਾਟ](../../../../translated_images/pa/snapshot.97750180ebcad737.png) +![Edge ਪ੍ਰੋਫਾਈਲਰ ਸਨੈਪਸ਼ਾਟ](../../../../translated_images/pa/snapshot.97750180ebcad737.webp) Event Log ਪੈਨ ਦੀ ਜਾਂਚ ਕਰੋ ਤਾਂ ਜੋ ਦੇਖਿਆ ਜਾ ਸਕੇ ਕਿ ਕੋਈ ਘਟਨਾ 15 ms ਤੋਂ ਵੱਧ ਸਮਾਂ ਲੈਂਦੀ ਹੈ: -![Edge ਇਵੈਂਟ ਲੌਗ](../../../../translated_images/pa/log.804026979f3707e0.png) +![Edge ਇਵੈਂਟ ਲੌਗ](../../../../translated_images/pa/log.804026979f3707e0.webp) ✅ ਆਪਣੇ ਪ੍ਰੋਫਾਈਲਰ ਨੂੰ ਜਾਣੋ! ਇਸ ਸਾਈਟ 'ਤੇ ਡਿਵੈਲਪਰ ਟੂਲਜ਼ ਖੋਲ੍ਹੋ ਅਤੇ ਦੇਖੋ ਕਿ ਕੋਈ ਬੋਤਲਨੈਕ ਹੈ। ਸਭ ਤੋਂ ਹੌਲੀ ਲੋਡ ਹੋਣ ਵਾਲਾ ਐਸੈਟ ਕਿਹੜਾ ਹੈ? ਸਭ ਤੋਂ ਤੇਜ਼? diff --git a/translations/pa/5-browser-extension/README.md b/translations/pa/5-browser-extension/README.md index a49cb9f79..b1b522cb1 100644 --- a/translations/pa/5-browser-extension/README.md +++ b/translations/pa/5-browser-extension/README.md @@ -23,7 +23,7 @@ CO_OP_TRANSLATOR_METADATA: ### ਸ਼੍ਰੇਯ -![ਹਰਾ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ](../../../translated_images/pa/extension-screenshot.0e7f5bfa110e92e3.png) +![ਹਰਾ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ](../../../translated_images/pa/extension-screenshot.0e7f5bfa110e92e3.webp) ## ਸ਼੍ਰੇਯ diff --git a/translations/pa/5-browser-extension/solution/README.md b/translations/pa/5-browser-extension/solution/README.md index 00260e4a9..9e302e520 100644 --- a/translations/pa/5-browser-extension/solution/README.md +++ b/translations/pa/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow ਦੀ CO2 Signal API ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਬਿਜਲੀ ਦੀ ਖਪਤ ਨੂੰ ਟਰੈਕ ਕਰਨ ਲਈ ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਓ, ਤਾਂ ਜੋ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਹੀ ਤੁਹਾਨੂੰ ਯਾਦ ਦਿਵਾਈ ਜਾ ਸਕੇ ਕਿ ਤੁਹਾਡੇ ਖੇਤਰ ਵਿੱਚ ਬਿਜਲੀ ਦੀ ਖਪਤ ਕਿੰਨੀ ਜ਼ਿਆਦਾ ਹੈ। ਇਸ ਐਕਸਟੈਂਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਤੁਸੀਂ ਇਸ ਜਾਣਕਾਰੀ ਦੇ ਆਧਾਰ 'ਤੇ ਆਪਣੇ ਕੰਮਾਂ ਬਾਰੇ ਸੋਚ-ਵਿਚਾਰ ਕਰ ਸਕਦੇ ਹੋ। -![ਐਕਸਟੈਂਸ਼ਨ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../translated_images/pa/extension-screenshot.0e7f5bfa110e92e3.png) +![ਐਕਸਟੈਂਸ਼ਨ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../translated_images/pa/extension-screenshot.0e7f5bfa110e92e3.webp) ## ਸ਼ੁਰੂਆਤ ਕਰਨਾ @@ -31,7 +31,7 @@ npm run build Edge 'ਤੇ ਇੰਸਟਾਲ ਕਰਨ ਲਈ, ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਸੱਜੇ ਉੱਪਰ ਵਾਲੇ 'ਤਿੰਨ ਬਿੰਦੂ' ਮੀਨੂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਐਕਸਟੈਂਸ਼ਨ ਪੈਨਲ ਲੱਭੋ। ਉੱਥੋਂ, 'ਲੋਡ ਅਨਪੈਕਡ' ਚੁਣੋ ਤਾਂ ਜੋ ਨਵਾਂ ਐਕਸਟੈਂਸ਼ਨ ਲੋਡ ਕੀਤਾ ਜਾ ਸਕੇ। ਪ੍ਰਾਂਪਟ 'ਤੇ 'dist' ਫੋਲਡਰ ਖੋਲ੍ਹੋ ਅਤੇ ਐਕਸਟੈਂਸ਼ਨ ਲੋਡ ਹੋ ਜਾਵੇਗਾ। ਇਸਨੂੰ ਵਰਤਣ ਲਈ, ਤੁਹਾਨੂੰ CO2 Signal ਦੀ API ਲਈ ਇੱਕ API ਕੁੰਜੀ ([ਇੱਥੇ ਈਮੇਲ ਰਾਹੀਂ ਪ੍ਰਾਪਤ ਕਰੋ](https://www.co2signal.com/) - ਇਸ ਪੰਨੇ 'ਤੇ ਬਾਕਸ ਵਿੱਚ ਆਪਣਾ ਈਮੇਲ ਦਰਜ ਕਰੋ) ਅਤੇ ਆਪਣੇ ਖੇਤਰ ਲਈ [Electricity Map](https://www.electricitymap.org/map) ਦੇ ਅਨੁਸਾਰ [ਖੇਤਰ ਕੋਡ](http://api.electricitymap.org/v3/zones) ਦੀ ਲੋੜ ਹੋਵੇਗੀ (ਉਦਾਹਰਣ ਵਜੋਂ, ਬੋਸਟਨ ਵਿੱਚ, ਮੈਂ 'US-NEISO' ਵਰਤਦਾ ਹਾਂ)। -![ਇੰਸਟਾਲ ਕਰਨਾ](../../../../translated_images/pa/install-on-edge.78634f02842c4828.png) +![ਇੰਸਟਾਲ ਕਰਨਾ](../../../../translated_images/pa/install-on-edge.78634f02842c4828.webp) ਜਦੋਂ API ਕੁੰਜੀ ਅਤੇ ਖੇਤਰ ਐਕਸਟੈਂਸ਼ਨ ਇੰਟਰਫੇਸ ਵਿੱਚ ਦਰਜ ਕੀਤੇ ਜਾਂਦੇ ਹਨ, ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਬਾਰ ਵਿੱਚ ਰੰਗੀਨ ਬਿੰਦੂ ਤੁਹਾਡੇ ਖੇਤਰ ਦੀ ਊਰਜਾ ਖਪਤ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਬਦਲ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਤੁਹਾਨੂੰ ਇਹ ਸੰਕੇਤ ਦੇਵੇਗਾ ਕਿ ਕਿਹੜੀਆਂ ਊਰਜਾ-ਗਹਿਰੀਆਂ ਗਤੀਵਿਧੀਆਂ ਤੁਹਾਡੇ ਲਈ ਉਚਿਤ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ 'ਬਿੰਦੂ' ਪ੍ਰਣਾਲੀ ਦਾ ਵਿਚਾਰ ਮੈਨੂੰ ਕੈਲੀਫੋਰਨੀਆ ਦੇ ਉਤਸਰਜਨ ਲਈ [Energy Lollipop ਐਕਸਟੈਂਸ਼ਨ](https://energylollipop.com/) ਤੋਂ ਮਿਲਿਆ ਸੀ। diff --git a/translations/pa/5-browser-extension/solution/translation/README.fr.md b/translations/pa/5-browser-extension/solution/translation/README.fr.md index a52840888..d4cabe366 100644 --- a/translations/pa/5-browser-extension/solution/translation/README.fr.md +++ b/translations/pa/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow ਦੀ C02 Signal API ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬਿਜਲੀ ਦੀ ਖਪਤ ਨੂੰ ਟ੍ਰੈਕ ਕਰੋ ਅਤੇ ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਓ ਤਾਂ ਜੋ ਤੁਸੀਂ ਆਪਣੇ ਖੇਤਰ ਦੀ ਬਿਜਲੀ ਦੀ ਖਪਤ ਬਾਰੇ ਸਿੱਧੇ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਯਾਦ ਦਿਵਾਈ ਪ੍ਰਾਪਤ ਕਰ ਸਕੋ। ਇਸ ਐਕਸਟੈਂਸ਼ਨ ਦੀ ਵਰਤੋਂ ਤੁਹਾਨੂੰ ਇਹ ਜਾਣਕਾਰੀ ਦੇ ਆਧਾਰ 'ਤੇ ਆਪਣੀਆਂ ਗਤੀਵਿਧੀਆਂ ਬਾਰੇ ਫੈਸਲਾ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰੇਗੀ। -![ਐਕਸਟੈਂਸ਼ਨ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../../translated_images/pa/extension-screenshot.0e7f5bfa110e92e3.png) +![ਐਕਸਟੈਂਸ਼ਨ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../../translated_images/pa/extension-screenshot.0e7f5bfa110e92e3.webp) ## ਸ਼ੁਰੂਆਤ @@ -31,7 +31,7 @@ npm run build Edge 'ਤੇ ਇੰਸਟਾਲ ਕਰਨ ਲਈ, ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਉੱਪਰਲੇ ਸੱਜੇ ਕੋਨੇ ਵਿੱਚ 'ਤਿੰਨ ਬਿੰਦੂ' ਮੀਨੂ ਦੀ ਵਰਤੋਂ ਕਰੋ ਅਤੇ ਐਕਸਟੈਂਸ਼ਨ ਪੈਨਲ ਲੱਭੋ। ਇੱਥੋਂ 'ਅਨਜ਼ਿਪ ਕੀਤੀ ਐਕਸਟੈਂਸ਼ਨ ਲੋਡ ਕਰੋ' ਚੁਣੋ ਤਾਂ ਜੋ ਨਵੀਂ ਐਕਸਟੈਂਸ਼ਨ ਲੋਡ ਕੀਤੀ ਜਾ ਸਕੇ। ਪ੍ਰੋੰਪਟ 'ਤੇ 'dist' ਫੋਲਡਰ ਖੋਲ੍ਹੋ ਅਤੇ ਐਕਸਟੈਂਸ਼ਨ ਲੋਡ ਹੋ ਜਾਵੇਗੀ। ਇਸਨੂੰ ਵਰਤਣ ਲਈ, ਤੁਹਾਨੂੰ CO2 Signal API ਲਈ ਇੱਕ API ਕੁੰਜੀ ਦੀ ਲੋੜ ਹੋਵੇਗੀ ([ਇੱਥੇ ਈਮੇਲ ਰਾਹੀਂ ਪ੍ਰਾਪਤ ਕਰੋ](https://www.co2signal.com/) - ਇਸ ਪੰਨੇ 'ਤੇ ਬਾਕਸ ਵਿੱਚ ਆਪਣਾ ਈਮੇਲ ਦਰਜ ਕਰੋ) ਅਤੇ [ਤੁਹਾਡੇ ਖੇਤਰ ਲਈ ਕੋਡ](http://api.electricitymap.org/v3/zones) ਜੋ [ਬਿਜਲੀ ਦਾ ਨਕਸ਼ਾ](https://www.electricitymap.org/map) ਨਾਲ ਸਬੰਧਿਤ ਹੈ (ਉਦਾਹਰਨ ਲਈ, ਬੋਸਟਨ ਵਿੱਚ, ਮੈਂ 'US-NEISO' ਵਰਤਦਾ ਹਾਂ)। -![ਇੰਸਟਾਲੇਸ਼ਨ](../../../../../translated_images/pa/install-on-edge.78634f02842c4828.png) +![ਇੰਸਟਾਲੇਸ਼ਨ](../../../../../translated_images/pa/install-on-edge.78634f02842c4828.webp) ਜਦੋਂ API ਕੁੰਜੀ ਅਤੇ ਖੇਤਰ ਐਕਸਟੈਂਸ਼ਨ ਇੰਟਰਫੇਸ ਵਿੱਚ ਦਰਜ ਕੀਤੇ ਜਾਂਦੇ ਹਨ, ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਬਾਰ ਵਿੱਚ ਰੰਗੀ ਬਿੰਦੂ ਤੁਹਾਡੇ ਖੇਤਰ ਦੀ ਬਿਜਲੀ ਦੀ ਖਪਤ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਬਦਲ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਤੁਹਾਨੂੰ ਇਹ ਸੰਕੇਤ ਦੇਵੇਗਾ ਕਿ ਕਿਹੜੀਆਂ ਉੱਚ-ਊਰਜਾ ਗਤੀਵਿਧੀਆਂ ਕਰਨੀ ਉਚਿਤ ਹੋਵੇਗੀ। ਇਸ 'ਪੌਇੰਟ' ਸਿਸਟਮ ਦੇ ਪਿੱਛੇ ਦਾ ਵਿਚਾਰ ਮੈਨੂੰ [Energy Lollipop ਐਕਸਟੈਂਸ਼ਨ](https://energylollipop.com/) ਤੋਂ ਮਿਲਿਆ ਸੀ ਜੋ ਕੈਲੀਫੋਰਨੀਆ ਦੀਆਂ ਉਤਸਰਜਨ ਲਈ ਹੈ। diff --git a/translations/pa/5-browser-extension/solution/translation/README.hi.md b/translations/pa/5-browser-extension/solution/translation/README.hi.md index 29f7c4b70..76e6505ba 100644 --- a/translations/pa/5-browser-extension/solution/translation/README.hi.md +++ b/translations/pa/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: ਬਿਜਲੀ ਦੀ ਵਰਤੋਂ ਨੂੰ ਟਰੈਕ ਕਰਨ ਲਈ tmrow ਦੇ C02 ਸਿਗਨਲ API ਦਾ ਇਸਤੇਮਾਲ ਕਰਦੇ ਹੋਏ, ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਉਣਾ ਤਾਂ ਜੋ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਤੁਹਾਡੇ ਖੇਤਰ ਦੀ ਬਿਜਲੀ ਦੀ ਵਰਤੋਂ ਕਿੰਨੀ ਭਾਰੀ ਹੈ, ਇਸ ਬਾਰੇ ਤੁਹਾਨੂੰ ਇੱਕ ਯਾਦ ਦਿਵਾਈ ਜਾ ਸਕੇ। ਇਸ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਵਰਤਣ ਨਾਲ ਤੁਹਾਨੂੰ ਇਸ ਜਾਣਕਾਰੀ ਦੇ ਆਧਾਰ 'ਤੇ ਆਪਣੀਆਂ ਗਤੀਵਿਧੀਆਂ ਬਾਰੇ ਫੈਸਲੇ ਕਰਨ ਵਿੱਚ ਮਦਦ ਮਿਲੇਗੀ। -![ਐਕਸਟੈਂਸ਼ਨ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../../translated_images/pa/extension-screenshot.0e7f5bfa110e92e3.png) +![ਐਕਸਟੈਂਸ਼ਨ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../../translated_images/pa/extension-screenshot.0e7f5bfa110e92e3.webp) ## ਸ਼ੁਰੂਆਤ ਕਰਨਾ @@ -31,7 +31,7 @@ npm run build Edge 'ਤੇ ਇੰਸਟਾਲ ਕਰਨ ਲਈ, ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਉੱਪਰਲੇ ਸੱਜੇ ਕੋਨੇ 'ਤੇ 'ਤਿੰਨ ਡਾਟ' ਮੀਨੂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਐਕਸਟੈਂਸ਼ਨ ਪੈਨਲ ਨੂੰ ਲੱਭੋ। ਉੱਥੋਂ, ਇੱਕ ਨਵਾਂ ਐਕਸਟੈਂਸ਼ਨ ਲੋਡ ਕਰਨ ਲਈ 'ਲੋਡ ਅਨਪੈਕਡ' ਚੁਣੋ। ਪ੍ਰੌਮਪਟ 'ਤੇ 'dist' ਫੋਲਡਰ ਖੋਲ੍ਹੋ ਅਤੇ ਐਕਸਟੈਂਸ਼ਨ ਲੋਡ ਹੋ ਜਾਵੇਗਾ। ਇਸਦਾ ਇਸਤੇਮਾਲ ਕਰਨ ਲਈ, ਤੁਹਾਨੂੰ CO2 ਸਿਗਨਲ ਦੀ API ([ਈਮੇਲ ਰਾਹੀਂ ਇੱਥੇ ਪ੍ਰਾਪਤ ਕਰੋ](https://www.co2signal.com/) ਲਈ ਇੱਕ API ਕੁੰਜੀ ਦੀ ਲੋੜ ਹੋਵੇਗੀ - ਇਸ ਪੰਨੇ 'ਤੇ ਬਾਕਸ ਵਿੱਚ ਆਪਣਾ ਈਮੇਲ ਦਰਜ ਕਰੋ) ਅਤੇ [ਤੁਹਾਡੇ ਖੇਤਰ ਲਈ ਕੋਡ](http://api.electricitymap.org/v3/zones) [ਇਲੈਕਟ੍ਰਿਸਿਟੀ ਮੈਪ](https://www.electricitymap.org/map) ਤੋਂ (ਉਦਾਹਰਣ ਲਈ, ਬੋਸਟਨ ਵਿੱਚ, ਮੈਂ 'US-NEISO' ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹਾਂ)। -![installing](../../../../../translated_images/pa/install-on-edge.78634f02842c4828.png) +![installing](../../../../../translated_images/pa/install-on-edge.78634f02842c4828.webp) ਜਦੋਂ API ਕੁੰਜੀ ਅਤੇ ਖੇਤਰ ਐਕਸਟੈਂਸ਼ਨ ਇੰਟਰਫੇਸ ਵਿੱਚ ਦਰਜ ਕੀਤੇ ਜਾਂਦੇ ਹਨ, ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਬਾਰ ਵਿੱਚ ਰੰਗੀਨ ਡਾਟ ਤੁਹਾਡੇ ਖੇਤਰ ਦੀ ਊਰਜਾ ਦੀ ਵਰਤੋਂ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਬਦਲ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਤੁਹਾਨੂੰ ਇਹ ਸੰਕੇਤ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ ਕਿ ਊਰਜਾ-ਭਾਰੀ ਗਤੀਵਿਧੀਆਂ ਤੁਹਾਡੇ ਲਈ ਕਦੋਂ ਉਚਿਤ ਹੋਣਗੀਆਂ। ਇਸ 'ਡਾਟ' ਪ੍ਰਣਾਲੀ ਦੇ ਪਿੱਛੇ ਦੀ ਧਾਰਨਾ ਮੈਨੂੰ ਕੈਲੀਫੋਰਨੀਆ ਦੇ ਉਤਸਰਜਨ ਲਈ [ਐਨਰਜੀ ਲੌਲੀਪੌਪ ਐਕਸਟੈਂਸ਼ਨ](https://energylollipop.com/) ਤੋਂ ਮਿਲੀ ਸੀ। diff --git a/translations/pa/5-browser-extension/solution/translation/README.it.md b/translations/pa/5-browser-extension/solution/translation/README.it.md index 1df3e67e9..761664d70 100644 --- a/translations/pa/5-browser-extension/solution/translation/README.it.md +++ b/translations/pa/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: ਤੁਸੀਂ tmrow ਦੀ Signal CO2 API ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬਿਜਲੀ ਦੀ ਖਪਤ ਦੀ ਨਿਗਰਾਨੀ ਕਰਨ ਲਈ ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਉਗੇ, ਤਾਂ ਜੋ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਸਿੱਧੇ ਹੀ ਤੁਹਾਨੂੰ ਇਹ ਯਾਦ ਦਿਵਾਇਆ ਜਾ ਸਕੇ ਕਿ ਤੁਹਾਡੇ ਖੇਤਰ ਵਿੱਚ ਬਿਜਲੀ ਦੀ ਵਰਤੋਂ ਕਿੰਨੀ ਭਾਰੀ ਹੈ। ਇਸ ਐਡ-ਹੌਕ ਐਕਸਟੈਂਸ਼ਨ ਦੀ ਵਰਤੋਂ ਤੁਹਾਨੂੰ ਆਪਣੀਆਂ ਗਤੀਵਿਧੀਆਂ ਨੂੰ ਇਸ ਜਾਣਕਾਰੀ ਦੇ ਆਧਾਰ 'ਤੇ ਮੁਲਾਂਕਣ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰੇਗੀ। -![ਐਕਸਟੈਂਸ਼ਨ ਦਾ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../../translated_images/pa/extension-screenshot.0e7f5bfa110e92e3.png) +![ਐਕਸਟੈਂਸ਼ਨ ਦਾ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../../translated_images/pa/extension-screenshot.0e7f5bfa110e92e3.webp) ## ਸ਼ੁਰੂ ਕਰਨ ਲਈ @@ -31,7 +31,7 @@ npm run build Edge 'ਤੇ ਇੰਸਟਾਲ ਕਰਨ ਲਈ, ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਸੱਜੇ ਉੱਪਰਲੇ ਕੋਨੇ ਵਿੱਚ "ਤਿੰਨ ਬਿੰਦੂ" ਵਾਲੇ ਮੀਨੂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਐਕਸਟੈਂਸ਼ਨ ਪੈਨਲ ਲੱਭੋ। ਜੇਕਰ ਇਹ ਪਹਿਲਾਂ ਤੋਂ ਚਾਲੂ ਨਹੀਂ ਹੈ, ਤਾਂ ਡਿਵੈਲਪਰ ਮੋਡ (ਥੱਲੇ ਖੱਬੇ) ਚਾਲੂ ਕਰੋ। "ਅਨਜ਼ਿੱਪਡ ਲੋਡ ਕਰੋ" ਚੁਣੋ ਤਾਂ ਜੋ ਨਵੀਂ ਐਕਸਟੈਂਸ਼ਨ ਲੋਡ ਕੀਤੀ ਜਾ ਸਕੇ। ਪ੍ਰਾਂਪਟ 'ਤੇ "dist" ਫੋਲਡਰ ਖੋਲ੍ਹੋ ਅਤੇ ਐਕਸਟੈਂਸ਼ਨ ਲੋਡ ਹੋ ਜਾਵੇਗੀ। ਇਸਨੂੰ ਵਰਤਣ ਲਈ, ਤੁਹਾਨੂੰ CO2 Signal API ਲਈ ਇੱਕ API ਕੁੰਜੀ ਦੀ ਲੋੜ ਹੋਵੇਗੀ (ਤੁਸੀਂ ਇਸਨੂੰ [ਇੱਥੇ ਈਮੇਲ ਰਾਹੀਂ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹੋ](https://www.co2signal.com/) - ਇਸ ਪੰਨੇ 'ਤੇ ਬਾਕਸ ਵਿੱਚ ਆਪਣੀ ਈਮੇਲ ਦਰਜ ਕਰੋ) ਅਤੇ ਆਪਣੇ ਖੇਤਰ ਲਈ [ਮਾਪ ਕੋਡ](http://api.electricitymap.org/v3/zones), ਜੋ ਕਿ [ਬਿਜਲੀ ਮਾਪਾ](https://www.electricitymap.org/map) ਨਾਲ ਸਬੰਧਤ ਹੈ (ਉਦਾਹਰਣ ਲਈ, ਬੋਸਟਨ ਵਿੱਚ "US-NEISO")। -![ਇੰਸਟਾਲੇਸ਼ਨ](../../../../../translated_images/pa/install-on-edge.78634f02842c4828.png) +![ਇੰਸਟਾਲੇਸ਼ਨ](../../../../../translated_images/pa/install-on-edge.78634f02842c4828.webp) ਜਦੋਂ API ਕੁੰਜੀ ਅਤੇ ਖੇਤਰ ਐਕਸਟੈਂਸ਼ਨ ਇੰਟਰਫੇਸ ਵਿੱਚ ਦਰਜ ਕੀਤੇ ਜਾਂਦੇ ਹਨ, ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਬਾਰ ਵਿੱਚ ਰੰਗਦਾਰ ਬਿੰਦੂ ਖੇਤਰ ਦੀ ਬਿਜਲੀ ਦੀ ਵਰਤੋਂ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਬਦਲ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਇਹ ਸੰਕੇਤ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ ਕਿ ਕਿਹੜੀਆਂ ਉੱਚ-ਖਪਤ ਵਾਲੀਆਂ ਗਤੀਵਿਧੀਆਂ ਨੂੰ ਅਨੁਕੂਲ ਤੌਰ 'ਤੇ ਅੰਜਾਮ ਦਿੱਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਇਸ "ਬਿੰਦੂ" ਪ੍ਰਣਾਲੀ ਦੇ ਪਿੱਛੇ ਦਾ ਵਿਚਾਰ [Energy Lollipop ਐਕਸਟੈਂਸ਼ਨ](https://energylollipop.com/) ਤੋਂ ਲਿਆ ਗਿਆ ਹੈ, ਜੋ ਕਿ ਕੈਲੀਫੋਰਨੀਆ ਦੀਆਂ ਉਤਸਰਜਨ ਲਈ ਹੈ। diff --git a/translations/pa/5-browser-extension/solution/translation/README.ja.md b/translations/pa/5-browser-extension/solution/translation/README.ja.md index 59526456f..ce5fa65cf 100644 --- a/translations/pa/5-browser-extension/solution/translation/README.ja.md +++ b/translations/pa/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow ਦੀ CO2 ਸਿਗਨਲ API ਦੀ ਵਰਤੋਂ ਕਰਕੇ, ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਓ ਜੋ ਤੁਹਾਡੇ ਖੇਤਰ ਵਿੱਚ ਬਿਜਲੀ ਦੀ ਖਪਤ ਕਿੰਨੀ ਜ਼ਿਆਦਾ ਹੈ, ਇਸਨੂੰ ਬ੍ਰਾਊਜ਼ਰ 'ਤੇ ਇੱਕ ਯਾਦ ਦਿਲਾਉਣ ਵਾਲੇ ਤੌਰ 'ਤੇ ਦਿਖਾ ਸਕੇ। ਇਸ ਐਕਸਟੈਂਸ਼ਨ ਨੂੰ ਵਰਤ ਕੇ, ਤੁਸੀਂ ਇਸ ਜਾਣਕਾਰੀ ਦੇ ਆਧਾਰ 'ਤੇ ਆਪਣੀ ਗਤੀਵਿਧੀ ਬਾਰੇ ਫੈਸਲਾ ਕਰ ਸਕਦੇ ਹੋ। -![extension screenshot](../../../../../translated_images/pa/extension-screenshot.0e7f5bfa110e92e3.png) +![extension screenshot](../../../../../translated_images/pa/extension-screenshot.0e7f5bfa110e92e3.webp) ## ਸ਼ੁਰੂਆਤ @@ -31,7 +31,7 @@ npm run build Edge 'ਤੇ ਇੰਸਟਾਲ ਕਰਨ ਲਈ, ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਸੱਜੇ ਉੱਪਰ "3 ਡਾਟਾਂ" ਵਾਲੇ ਮੀਨੂ 'ਚੋਂ "ਐਕਸਟੈਂਸ਼ਨ" ਪੈਨਲ ਲੱਭੋ। ਉੱਥੇ ਤੋਂ "Load Unpacked" ਚੁਣੋ ਅਤੇ ਨਵਾਂ ਐਕਸਟੈਂਸ਼ਨ ਲੋਡ ਕਰੋ। ਜਦੋਂ ਪ੍ਰੌੰਪਟ ਆਵੇ, ਤਾਂ "dist" ਫੋਲਡਰ ਖੋਲ੍ਹੋ, ਅਤੇ ਐਕਸਟੈਂਸ਼ਨ ਲੋਡ ਹੋ ਜਾਵੇਗਾ। ਇਸਨੂੰ ਵਰਤਣ ਲਈ, ਤੁਹਾਨੂੰ CO2 ਸਿਗਨਲ API ਦੀ API ਕੀ ([ਇੱਥੇ ਈਮੇਲ ਰਾਹੀਂ ਪ੍ਰਾਪਤ ਕਰੋ](https://www.co2signal.com/) - ਇਸ ਪੰਨੇ ਦੇ ਬਾਕਸ ਵਿੱਚ ਆਪਣਾ ਈਮੇਲ ਦਰਜ ਕਰੋ) ਅਤੇ [Electricity Map](https://www.electricitymap.org/map) ਨਾਲ ਮੇਲ ਖਾਂਦੇ [ਤੁਹਾਡੇ ਖੇਤਰ ਲਈ ਕੋਡ](http://api.electricitymap.org/v3/zones) ਦੀ ਲੋੜ ਹੋਵੇਗੀ (ਉਦਾਹਰਣ ਲਈ, ਬੋਸਟਨ ਵਿੱਚ 'US-NEISO' ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ)। -![installing](../../../../../translated_images/pa/install-on-edge.78634f02842c4828.png) +![installing](../../../../../translated_images/pa/install-on-edge.78634f02842c4828.webp) ਜਦੋਂ ਤੁਸੀਂ API ਕੀ ਅਤੇ ਖੇਤਰ ਨੂੰ ਐਕਸਟੈਂਸ਼ਨ ਇੰਟਰਫੇਸ ਵਿੱਚ ਦਰਜ ਕਰਦੇ ਹੋ, ਤਾਂ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਐਕਸਟੈਂਸ਼ਨ ਬਾਰ ਵਿੱਚ ਦਿਖਾਈ ਦੇਣ ਵਾਲਾ ਰੰਗਦਾਰ ਡੌਟ ਬਦਲ ਜਾਂਦਾ ਹੈ। ਇਹ ਤੁਹਾਡੇ ਖੇਤਰ ਦੀ ਬਿਜਲੀ ਦੀ ਖਪਤ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ ਅਤੇ ਇਹ ਸੰਕੇਤ ਦਿੰਦਾ ਹੈ ਕਿ ਕਿਹੜੀਆਂ ਗਤੀਵਿਧੀਆਂ ਲਈ ਬਿਜਲੀ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ। ਇਸ "ਡੌਟ" ਸਿਸਟਮ ਦਾ ਵਿਚਾਰ ਮੈਨੂੰ ਕੈਲੀਫੋਰਨੀਆ ਦੇ ਉਤਸਰਜਨ ਲਈ ਬਣੇ [Energy Lollipop extension](https://energylollipop.com/) ਤੋਂ ਪ੍ਰੇਰਿਤ ਹੋਇਆ। diff --git a/translations/pa/5-browser-extension/solution/translation/README.ms.md b/translations/pa/5-browser-extension/solution/translation/README.ms.md index d93867fbc..577dae7e5 100644 --- a/translations/pa/5-browser-extension/solution/translation/README.ms.md +++ b/translations/pa/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: C02 ਸਿਗਨਲ API ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬਿਜਲੀ ਦੀ ਖਪਤ ਦਾ ਪਤਾ ਲਗਾਉਣ ਲਈ, ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਓ ਤਾਂ ਜੋ ਤੁਸੀਂ ਆਪਣੇ ਖੇਤਰ ਦੀ ਬਿਜਲੀ ਦੀ ਖਪਤ ਦੇ ਬਾਰੇ ਚੇਤਾਵਨੀ ਪ੍ਰਾਪਤ ਕਰ ਸਕੋ। ਇਸ ਐਕਸਟੈਂਸ਼ਨ ਦੀ ਖਾਸ ਤੌਰ 'ਤੇ ਵਰਤੋਂ ਕਰਨ ਨਾਲ ਤੁਹਾਨੂੰ ਆਪਣੀ ਗਤੀਵਿਧੀ ਬਾਰੇ ਜਾਣਕਾਰੀ ਦੇ ਆਧਾਰ 'ਤੇ ਫੈਸਲੇ ਕਰਨ ਵਿੱਚ ਮਦਦ ਮਿਲੇਗੀ। -![ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਦਾ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../../translated_images/pa/extension-screenshot.0e7f5bfa110e92e3.png) +![ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਦਾ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../../translated_images/pa/extension-screenshot.0e7f5bfa110e92e3.webp) ## ਇੱਥੋਂ ਸ਼ੁਰੂ ਕਰੋ @@ -31,7 +31,7 @@ npm run build Edge 'ਤੇ ਇੰਸਟਾਲ ਕਰਨ ਲਈ, ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਸੱਜੇ ਉੱਪਰ ਦੇ ਕੋਨੇ ਵਿੱਚ 'ਤਿੰਨ ਬਿੰਦੂ' ਵਾਲੇ ਮੀਨੂ ਦੀ ਵਰਤੋਂ ਕਰੋ ਅਤੇ ਐਕਸਟੈਂਸ਼ਨ ਪੈਨਲ ਲੱਭੋ। ਉੱਥੇ ਤੋਂ, 'ਲੋਡ ਅਨਪੈਕਡ' ਚੁਣੋ ਤਾਂ ਜੋ ਨਵਾਂ ਐਕਸਟੈਂਸ਼ਨ ਲੋਡ ਕੀਤਾ ਜਾ ਸਕੇ। ਜਦੋਂ ਪੁੱਛਿਆ ਜਾਵੇ, 'dist' ਫੋਲਡਰ ਖੋਲ੍ਹੋ ਅਤੇ ਐਕਸਟੈਂਸ਼ਨ ਲੋਡ ਹੋ ਜਾਵੇਗਾ। ਇਸਨੂੰ ਵਰਤਣ ਲਈ, ਤੁਹਾਨੂੰ CO2 ਸਿਗਨਲ API ਲਈ ਇੱਕ API ਕੁੰਜੀ ਦੀ ਲੋੜ ਹੋਵੇਗੀ ([ਇੱਥੇ ਈਮੇਲ ਰਾਹੀਂ ਪ੍ਰਾਪਤ ਕਰੋ](https://www.co2signal.com/) - ਇਸ ਪੰਨੇ 'ਤੇ ਬਾਕਸ ਵਿੱਚ ਆਪਣਾ ਈਮੇਲ ਦਰਜ ਕਰੋ) ਅਤੇ [ਤੁਹਾਡੇ ਖੇਤਰ ਲਈ ਕੋਡ](http://api.electricitymap.org/v3/zones) ਜੋ [ਇਲੈਕਟ੍ਰਿਸਿਟੀ ਮੈਪ](https://www.electricitymap.org/map) ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਹੋਵੇ (ਉਦਾਹਰਣ ਲਈ, ਬੋਸਟਨ ਵਿੱਚ, ਮੈਂ 'US-NEISO' ਵਰਤਦਾ ਹਾਂ)। -![ਡਾਊਨਲੋਡ ਕਰਦੇ ਹੋਏ](../../../../../translated_images/pa/install-on-edge.78634f02842c4828.png) +![ਡਾਊਨਲੋਡ ਕਰਦੇ ਹੋਏ](../../../../../translated_images/pa/install-on-edge.78634f02842c4828.webp) ਜਦੋਂ API ਕੁੰਜੀ ਅਤੇ ਖੇਤਰ ਐਕਸਟੈਂਸ਼ਨ ਇੰਟਰਫੇਸ ਵਿੱਚ ਦਰਜ ਕੀਤੇ ਜਾਂਦੇ ਹਨ, ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਬਾਰ ਵਿੱਚ ਰੰਗੀਨ ਬਿੰਦੂ ਤੁਹਾਡੇ ਖੇਤਰ ਦੀ ਊਰਜਾ ਦੀ ਖਪਤ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਬਦਲ ਜਾਵੇਗਾ ਅਤੇ ਤੁਹਾਨੂੰ ਇਹ ਸੰਕੇਤ ਦੇਵੇਗਾ ਕਿ ਕਿਹੜੀਆਂ ਗਤੀਵਿਧੀਆਂ ਤੁਹਾਡੇ ਲਈ موزੂ ਹਨ। ਇਸ 'ਡਾਟ' ਸਿਸਟਮ ਦੇ ਪਿੱਛੇ ਦਾ ਵਿਚਾਰ ਮੈਨੂੰ [ਐਨਰਜੀ ਲਾਲੀਪਾਪ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ](https://energylollipop.com/) ਤੋਂ ਮਿਲਿਆ ਸੀ ਜੋ ਕੈਲੀਫੋਰਨੀਆ ਦੇ ਡਾਟਾ ਲਈ ਹੈ। diff --git a/translations/pa/5-browser-extension/start/README.md b/translations/pa/5-browser-extension/start/README.md index 2e448efc4..f891f7ba2 100644 --- a/translations/pa/5-browser-extension/start/README.md +++ b/translations/pa/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow ਦੀ CO2 Signal API ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬਿਜਲੀ ਦੀ ਖਪਤ ਨੂੰ ਟਰੈਕ ਕਰੋ ਅਤੇ ਇੱਕ ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਬਣਾਓ ਤਾਂ ਜੋ ਤੁਹਾਡੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਹੀ ਤੁਹਾਨੂੰ ਯਾਦ ਦਿਵਾਇਆ ਜਾ ਸਕੇ ਕਿ ਤੁਹਾਡੇ ਖੇਤਰ ਵਿੱਚ ਬਿਜਲੀ ਦੀ ਖਪਤ ਕਿੰਨੀ ਜ਼ਿਆਦਾ ਹੈ। ਇਸ ਐਕਸਟੈਂਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਤੁਸੀਂ ਇਸ ਜਾਣਕਾਰੀ ਦੇ ਆਧਾਰ 'ਤੇ ਆਪਣੇ ਕੰਮਾਂ ਬਾਰੇ ਸਹੀ ਫੈਸਲੇ ਲੈ ਸਕਦੇ ਹੋ। -![ਐਕਸਟੈਂਸ਼ਨ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../translated_images/pa/extension-screenshot.0e7f5bfa110e92e3.png) +![ਐਕਸਟੈਂਸ਼ਨ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../translated_images/pa/extension-screenshot.0e7f5bfa110e92e3.webp) ## ਸ਼ੁਰੂਆਤ ਕਰਨਾ @@ -31,7 +31,7 @@ npm run build Edge 'ਤੇ ਇੰਸਟਾਲ ਕਰਨ ਲਈ, ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਸੱਜੇ ਉੱਪਰ ਵਾਲੇ ਕੋਨੇ ਵਿੱਚ 'ਤਿੰਨ ਬਿੰਦੂ' ਮੀਨੂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਐਕਸਟੈਂਸ਼ਨ ਪੈਨਲ ਲੱਭੋ। ਉੱਥੋਂ, 'ਲੋਡ ਅਨਪੈਕਡ' ਚੁਣੋ ਤਾਂ ਜੋ ਨਵਾਂ ਐਕਸਟੈਂਸ਼ਨ ਲੋਡ ਕੀਤਾ ਜਾ ਸਕੇ। ਪ੍ਰਾਂਪਟ 'ਤੇ 'dist' ਫੋਲਡਰ ਖੋਲ੍ਹੋ ਅਤੇ ਐਕਸਟੈਂਸ਼ਨ ਲੋਡ ਹੋ ਜਾਵੇਗਾ। ਇਸਨੂੰ ਵਰਤਣ ਲਈ, ਤੁਹਾਨੂੰ CO2 Signal ਦੀ API ਲਈ ਇੱਕ API ਕੁੰਜੀ ਦੀ ਲੋੜ ਹੋਵੇਗੀ ([ਇੱਥੇ ਈਮੇਲ ਰਾਹੀਂ ਪ੍ਰਾਪਤ ਕਰੋ](https://www.co2signal.com/) - ਇਸ ਪੰਨੇ 'ਤੇ ਬਾਕਸ ਵਿੱਚ ਆਪਣਾ ਈਮੇਲ ਦਰਜ ਕਰੋ) ਅਤੇ ਆਪਣੇ ਖੇਤਰ ਲਈ [Electricity Map](https://www.electricitymap.org/map) ਦੇ ਅਨੁਸਾਰ [ਇਲੈਕਟ੍ਰਿਸਿਟੀ ਮੈਪ ਕੋਡ](http://api.electricitymap.org/v3/zones) ਦੀ ਲੋੜ ਹੋਵੇਗੀ (ਉਦਾਹਰਨ ਵਜੋਂ, ਬੋਸਟਨ ਵਿੱਚ, ਮੈਂ 'US-NEISO' ਵਰਤਦਾ ਹਾਂ)। -![ਇੰਸਟਾਲ ਕਰਨਾ](../../../../translated_images/pa/install-on-edge.78634f02842c4828.png) +![ਇੰਸਟਾਲ ਕਰਨਾ](../../../../translated_images/pa/install-on-edge.78634f02842c4828.webp) ਜਦੋਂ API ਕੁੰਜੀ ਅਤੇ ਖੇਤਰ ਐਕਸਟੈਂਸ਼ਨ ਇੰਟਰਫੇਸ ਵਿੱਚ ਦਰਜ ਕੀਤੇ ਜਾਂਦੇ ਹਨ, ਬ੍ਰਾਊਜ਼ਰ ਐਕਸਟੈਂਸ਼ਨ ਬਾਰ ਵਿੱਚ ਰੰਗੀਨ ਬਿੰਦੂ ਤੁਹਾਡੇ ਖੇਤਰ ਦੀ ਊਰਜਾ ਖਪਤ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਬਦਲ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਤੁਹਾਨੂੰ ਇਹ ਸੰਕੇਤ ਦੇਵੇਗਾ ਕਿ ਕਿਹੜੀਆਂ ਊਰਜਾ-ਗ੍ਰਹਿਣੀ ਗਤੀਵਿਧੀਆਂ ਤੁਹਾਡੇ ਲਈ ਉਚਿਤ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਇਸ 'ਬਿੰਦੂ' ਪ੍ਰਣਾਲੀ ਦਾ ਵਿਚਾਰ ਮੈਨੂੰ ਕੈਲੀਫੋਰਨੀਆ ਦੇ ਉਤਸਰਜਨ ਲਈ [Energy Lollipop ਐਕਸਟੈਂਸ਼ਨ](https://energylollipop.com/) ਤੋਂ ਮਿਲਿਆ ਸੀ। diff --git a/translations/pa/6-space-game/2-drawing-to-canvas/README.md b/translations/pa/6-space-game/2-drawing-to-canvas/README.md index ae791c56a..d613de06a 100644 --- a/translations/pa/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/pa/6-space-game/2-drawing-to-canvas/README.md @@ -108,7 +108,7 @@ quadrantChart UI Elements: [0.9, 0.1] ``` -![ਕੈਨਵਸ ਦਾ ਗ੍ਰਿਡ](../../../../translated_images/pa/canvas_grid.5f209da785ded492.png) +![ਕੈਨਵਸ ਦਾ ਗ੍ਰਿਡ](../../../../translated_images/pa/canvas_grid.5f209da785ded492.webp) > ਚਿੱਤਰ [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) ਤੋਂ ਕੈਨਵਸ ਤੱਤ 'ਤੇ ਡਰਾਇੰਗ ਕਰਨ ਲਈ, ਤੁਸੀਂ ਉਹੀ ਤਿੰਨ-ਕਦਮ ਪ੍ਰਕਿਰਿਆ ਅਪਣਾਉਂਦੇ ਹੋ ਜੋ ਸਾਰੇ ਕੈਨਵਸ ਗ੍ਰਾਫਿਕਸ ਦੀ ਬੁਨਿਆਦ ਬਣਦੀ ਹੈ। ਜਦ ਤੁਸੀਂ ਇਹ ਕੁਝ ਵਾਰ ਕਰਦੇ ਹੋ, ਇਹ ਦੂਸਰੀ ਕੁਦਰਤ ਬਣ ਜਾਂਦੀ ਹੈ: @@ -301,7 +301,7 @@ async function renderGameScreen() { ਅੰਤਮ ਨਤੀਜਾ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਣਾ ਚਾਹੀਦਾ ਹੈ: -![ਕਾਲੀ ਸਕ੍ਰੀਨ ਜਿਸ ਵਿੱਚ ਇੱਕ ਹੀਰੋ ਅਤੇ 5*5 ਮੋਨਸਟਰ ਹਨ](../../../../translated_images/pa/partI-solution.36c53b48c9ffae2a.png) +![ਕਾਲੀ ਸਕ੍ਰੀਨ ਜਿਸ ਵਿੱਚ ਇੱਕ ਹੀਰੋ ਅਤੇ 5*5 ਮੋਨਸਟਰ ਹਨ](../../../../translated_images/pa/partI-solution.36c53b48c9ffae2a.webp) ## ਹੱਲ diff --git a/translations/pa/6-space-game/5-keeping-score/README.md b/translations/pa/6-space-game/5-keeping-score/README.md index 7f3a984f7..c2e201eb6 100644 --- a/translations/pa/6-space-game/5-keeping-score/README.md +++ b/translations/pa/6-space-game/5-keeping-score/README.md @@ -160,7 +160,7 @@ sequenceDiagram ``` - **ਸਕੋਰਿੰਗ ਸਿਸਟਮ**: ਹਰ ਤਬਾਹ ਕੀਤੇ ਗਏ ਦੁਸ਼ਮਨ ਜਹਾਜ਼ ਲਈ 100 ਪੌਇੰਟਸ ਮਿਲਦੇ ਹਨ (ਗੋਲ ਗਿਣਤੀਆਂ ਖਿਡਾਰੀਆਂ ਲਈ ਮਾਨਸਿਕ ਤੌਰ 'ਤੇ ਗਿਣਤੀ ਕਰਨਾ ਆਸਾਨ ਬਣਾਉਂਦੀਆਂ ਹਨ)। ਸਕੋਰ ਨੂੰ ਹੇਠਾਂ ਖੱਬੇ ਕੋਨੇ ਵਿੱਚ ਦਿਖਾਇਆ ਜਾਵੇਗਾ। -- **ਲਾਈਫ ਕਾਊਂਟਰ**: ਤੁਹਾਡਾ ਹੀਰੋ ਤਿੰਨ ਜ਼ਿੰਦਗੀਆਂ ਨਾਲ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ - ਇੱਕ ਮਿਆਰ ਜੋ ਸ਼ੁਰੂਆਤੀ ਆਰਕੇਡ ਗੇਮਾਂ ਦੁਆਰਾ ਚੁਣੌਤੀ ਅਤੇ ਖੇਡਣਯੋਗਤਾ ਦੇ ਸੰਤੁਲਨ ਲਈ ਸਥਾਪਿਤ ਕੀਤਾ ਗਿਆ। ਹਰ ਵਾਰ ਦੁਸ਼ਮਨ ਨਾਲ ਟਕਰਾਉਣ 'ਤੇ ਇੱਕ ਜ਼ਿੰਦਗੀ ਖਤਮ ਹੋ ਜਾਂਦੀ ਹੈ। ਬਾਕੀ ਜ਼ਿੰਦਗੀਆਂ ਨੂੰ ਹੇਠਾਂ ਸੱਜੇ ਕੋਨੇ ਵਿੱਚ ਜਹਾਜ਼ ਦੇ ਆਈਕਾਨਾਂ ਨਾਲ ਦਿਖਾਇਆ ਜਾਵੇਗਾ ![life image](../../../../translated_images/pa/life.6fb9f50d53ee0413.png)। +- **ਲਾਈਫ ਕਾਊਂਟਰ**: ਤੁਹਾਡਾ ਹੀਰੋ ਤਿੰਨ ਜ਼ਿੰਦਗੀਆਂ ਨਾਲ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ - ਇੱਕ ਮਿਆਰ ਜੋ ਸ਼ੁਰੂਆਤੀ ਆਰਕੇਡ ਗੇਮਾਂ ਦੁਆਰਾ ਚੁਣੌਤੀ ਅਤੇ ਖੇਡਣਯੋਗਤਾ ਦੇ ਸੰਤੁਲਨ ਲਈ ਸਥਾਪਿਤ ਕੀਤਾ ਗਿਆ। ਹਰ ਵਾਰ ਦੁਸ਼ਮਨ ਨਾਲ ਟਕਰਾਉਣ 'ਤੇ ਇੱਕ ਜ਼ਿੰਦਗੀ ਖਤਮ ਹੋ ਜਾਂਦੀ ਹੈ। ਬਾਕੀ ਜ਼ਿੰਦਗੀਆਂ ਨੂੰ ਹੇਠਾਂ ਸੱਜੇ ਕੋਨੇ ਵਿੱਚ ਜਹਾਜ਼ ਦੇ ਆਈਕਾਨਾਂ ਨਾਲ ਦਿਖਾਇਆ ਜਾਵੇਗਾ ![life image](../../../../translated_images/pa/life.6fb9f50d53ee0413.webp)। ## ਚਲੋ ਬਣਾਉਣਾ ਸ਼ੁਰੂ ਕਰੀਏ! diff --git a/translations/pa/7-bank-project/2-forms/README.md b/translations/pa/7-bank-project/2-forms/README.md index bc0fce019..147e37e63 100644 --- a/translations/pa/7-bank-project/2-forms/README.md +++ b/translations/pa/7-bank-project/2-forms/README.md @@ -434,7 +434,7 @@ async function register() { 3. **ਕਲਿੱਕ ਕਰੋ** "ਅਕਾਊਂਟ ਬਣਾਓ" 4. **ਨਿਰੀਖਣ ਕਰੋ** ਕਨਸੋਲ ਸੁਨੇਹੇ ਅਤੇ ਯੂਜ਼ਰ ਫੀਡਬੈਕ -![ਬ੍ਰਾਊਜ਼ਰ ਕਨਸੋਲ ਵਿੱਚ ਲਾਗ ਸੁਨੇਹਾ ਦਿਖਾਉਂਦਾ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../translated_images/pa/browser-console.efaf0b51aaaf6778.png) +![ਬ੍ਰਾਊਜ਼ਰ ਕਨਸੋਲ ਵਿੱਚ ਲਾਗ ਸੁਨੇਹਾ ਦਿਖਾਉਂਦਾ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../translated_images/pa/browser-console.efaf0b51aaaf6778.webp) **ਤੁਹਾਨੂੰ ਕੀ ਦੇਖਣਾ ਚਾਹੀਦਾ ਹੈ:** - **ਲੋਡਿੰਗ ਸਥਿਤੀ** ਸਬਮਿਟ ਬਟਨ 'ਤੇ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ @@ -620,7 +620,7 @@ input:focus:invalid { ਇਹ ਹੈ ਇੱਕ ਉਦਾਹਰਨ ਕਿ CSS ਸਟਾਈਲਿੰਗ ਦੇ ਬਾਅਦ ਅੰਤਮ ਲੌਗਇਨ ਪੇਜ ਕਿਵੇਂ ਲੱਗ ਸਕਦਾ ਹੈ: -![CSS ਸਟਾਈਲਾਂ ਜੋੜਨ ਦੇ ਬਾਅਦ ਲੌਗਇਨ ਪੇਜ ਦਾ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../translated_images/pa/result.96ef01f607bf856a.png) +![CSS ਸਟਾਈਲਾਂ ਜੋੜਨ ਦੇ ਬਾਅਦ ਲੌਗਇਨ ਪੇਜ ਦਾ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../translated_images/pa/result.96ef01f607bf856a.webp) ## ਲੈਕਚਰ ਬਾਅਦ ਕਵਿਜ਼ diff --git a/translations/pa/7-bank-project/3-data/README.md b/translations/pa/7-bank-project/3-data/README.md index 82fb1a556..12cbae727 100644 --- a/translations/pa/7-bank-project/3-data/README.md +++ b/translations/pa/7-bank-project/3-data/README.md @@ -160,7 +160,7 @@ sequenceDiagram Browser->>User: Displays new page (flash/reload) ``` -![ਮਲਟੀ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਅਪਡੇਟ ਵਰਕਫਲੋ](../../../../translated_images/pa/mpa.7f7375a1a2d4aa77.png) +![ਮਲਟੀ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਅਪਡੇਟ ਵਰਕਫਲੋ](../../../../translated_images/pa/mpa.7f7375a1a2d4aa77.webp) **ਇਹ ਤਰੀਕਾ ਕਿਉਂ ਅਸੁਵਿਧਾਜਨਕ ਮਹਿਸੂਸ ਹੁੰਦਾ ਸੀ:** - ਹਰ ਕਲਿੱਕ ਦਾ ਮਤਲਬ ਸੀ ਪੂਰੇ ਪੇਜ ਨੂੰ ਮੁੜ ਤੋਂ ਬਣਾਉਣਾ @@ -187,7 +187,7 @@ sequenceDiagram Browser->>User: Shows updated content (no reload) ``` -![ਸਿੰਗਲ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਅਪਡੇਟ ਵਰਕਫਲੋ](../../../../translated_images/pa/spa.268ec73b41f992c2.png) +![ਸਿੰਗਲ-ਪੇਜ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਅਪਡੇਟ ਵਰਕਫਲੋ](../../../../translated_images/pa/spa.268ec73b41f992c2.webp) **SPA ਕਿਉਂ ਬਿਹਤਰ ਮਹਿਸੂਸ ਹੁੰਦੇ ਹਨ:** - ਸਿਰਫ ਉਹ ਹਿੱਸੇ ਜੋ ਵਾਸਤਵ ਵਿੱਚ ਬਦਲੇ ਹਨ, ਅਪਡੇਟ ਹੁੰਦੇ ਹਨ (ਸਮਝਦਾਰ, ਹੈ ਨਾ?) @@ -373,7 +373,7 @@ if (data.error) { ਹੁਣ ਜਦੋਂ ਤੁਸੀਂ ਇੱਕ ਅਵੈਧ ਖਾਤੇ ਨਾਲ ਟੈਸਟ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਪੰਨੇ 'ਤੇ ਇੱਕ ਸਹਾਇਕ ਗਲਤੀ ਸੁਨੇਹਾ ਦਿਖਾਈ ਦੇਵੇਗਾ! -![ਲੌਗਇਨ ਦੌਰਾਨ ਦਿਖਾਈ ਗਈ ਗਲਤੀ ਸੁਨੇਹੇ ਨੂੰ ਦਿਖਾਉਣ ਵਾਲਾ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../translated_images/pa/login-error.416fe019b36a6327.png) +![ਲੌਗਇਨ ਦੌਰਾਨ ਦਿਖਾਈ ਗਈ ਗਲਤੀ ਸੁਨੇਹੇ ਨੂੰ ਦਿਖਾਉਣ ਵਾਲਾ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../translated_images/pa/login-error.416fe019b36a6327.webp) #### ਕਦਮ 4: ਪਹੁੰਚਯੋਗਤਾ ਨਾਲ ਸਮਰਪਿਤ ਹੋਣਾ @@ -626,7 +626,7 @@ Agent ਮੋਡ ਬਾਰੇ ਹੋਰ ਜਾਣੋ [ਇਥੇ](https://code.vis ਇੱਥੇ ਇੱਕ ਪਾਲਿਸ਼ਡ ਡੈਸ਼ਬੋਰਡ ਦਾ ਨਤੀਜਾ ਕਿਵੇਂ ਦਿਖ ਸਕਦਾ ਹੈ: -![ਡੈਸ਼ਬੋਰਡ ਦੇ ਸਟਾਈਲਿੰਗ ਤੋਂ ਬਾਅਦ ਨਤੀਜੇ ਦਾ ਉਦਾਹਰਣ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../translated_images/pa/screen2.123c82a831a1d14a.png) +![ਡੈਸ਼ਬੋਰਡ ਦੇ ਸਟਾਈਲਿੰਗ ਤੋਂ ਬਾਅਦ ਨਤੀਜੇ ਦਾ ਉਦਾਹਰਣ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../translated_images/pa/screen2.123c82a831a1d14a.webp) ਇਸਨੂੰ ਬਿਲਕੁਲ ਇਸੇ ਤਰ੍ਹਾਂ ਮਿਲਾਉਣ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ - ਇਸਨੂੰ ਪ੍ਰੇਰਣਾ ਵਜੋਂ ਵਰਤੋ ਅਤੇ ਇਸਨੂੰ ਆਪਣਾ ਬਣਾਓ! diff --git a/translations/pa/7-bank-project/4-state-management/README.md b/translations/pa/7-bank-project/4-state-management/README.md index 8bfffeae1..906d00df3 100644 --- a/translations/pa/7-bank-project/4-state-management/README.md +++ b/translations/pa/7-bank-project/4-state-management/README.md @@ -190,7 +190,7 @@ mindmap ਅਸੀਂ ਆਪਣੀ ਪੂਛ-ਪੂਛ ਕਰਨ ਦੀ ਬਜਾਏ ਇੱਕ **ਕੇਂਦਰੀਕ੍ਰਿਤ ਸਟੇਟ ਮੈਨੇਜਮੈਂਟ** ਸਿਸਟਮ ਬਣਾਉਣ ਜਾ ਰਹੇ ਹਾਂ। ਇਸਨੂੰ ਇੱਕ ਬਹੁਤ ਹੀ ਸੁਧਰੇ ਹੋਏ ਵਿਅਕਤੀ ਵਾਂਗ ਸੋਚੋ ਜੋ ਸਾਰੇ ਮਹੱਤਵਪੂਰਨ ਚੀਜ਼ਾਂ ਦਾ ਇੰਚਾਰਜ ਹੈ: -![HTML, ਯੂਜ਼ਰ ਕਾਰਵਾਈਆਂ ਅਤੇ ਸਟੇਟ ਦੇ ਵਿਚਕਾਰ ਡਾਟਾ ਫਲੋਜ਼ ਦਿਖਾਉਣ ਵਾਲੀ ਸਕੀਮਾ](../../../../translated_images/pa/data-flow.fa2354e0908fecc8.png) +![HTML, ਯੂਜ਼ਰ ਕਾਰਵਾਈਆਂ ਅਤੇ ਸਟੇਟ ਦੇ ਵਿਚਕਾਰ ਡਾਟਾ ਫਲੋਜ਼ ਦਿਖਾਉਣ ਵਾਲੀ ਸਕੀਮਾ](../../../../translated_images/pa/data-flow.fa2354e0908fecc8.webp) ```mermaid flowchart TD diff --git a/translations/pa/7-bank-project/4-state-management/assignment.md b/translations/pa/7-bank-project/4-state-management/assignment.md index 4abb7cf10..f40304e97 100644 --- a/translations/pa/7-bank-project/4-state-management/assignment.md +++ b/translations/pa/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA: **ਉਮੀਦ ਕੀਤੀ ਨਤੀਜਾ:** ਇਸ ਅਸਾਈਨਮੈਂਟ ਨੂੰ ਪੂਰਾ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਤੁਹਾਡੀ ਬੈਂਕਿੰਗ ਐਪ ਵਿੱਚ ਇੱਕ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕਾਰਗਰ "ਟ੍ਰਾਂਜ਼ੈਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ" ਫੀਚਰ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਜੋ ਪੇਸ਼ੇਵਰ ਤਰੀਕੇ ਨਾਲ ਦਿਖਾਈ ਦੇਵੇ ਅਤੇ ਕੰਮ ਕਰੇ: -![ਟ੍ਰਾਂਜ਼ੈਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ ਡਾਇਲਾਗ ਦਾ ਉਦਾਹਰਨ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../translated_images/pa/dialog.93bba104afeb79f1.png) +![ਟ੍ਰਾਂਜ਼ੈਕਸ਼ਨ ਸ਼ਾਮਲ ਕਰੋ ਡਾਇਲਾਗ ਦਾ ਉਦਾਹਰਨ ਸਕ੍ਰੀਨਸ਼ਾਟ](../../../../translated_images/pa/dialog.93bba104afeb79f1.webp) ## ਤੁਹਾਡੀ ਲਾਗੂ ਕਰਨ ਦੀ ਜਾਂਚ ਕਰਨਾ diff --git a/translations/pa/7-bank-project/README.md b/translations/pa/7-bank-project/README.md index 4cff4699f..6d0d3b927 100644 --- a/translations/pa/7-bank-project/README.md +++ b/translations/pa/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: ਇਸ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ, ਤੁਸੀਂ ਇੱਕ ਕਲਪਨਾਤਮਕ ਬੈਂਕ ਬਣਾਉਣਾ ਸਿੱਖੋਗੇ। ਇਹ ਪਾਠ ਤੁਹਾਨੂੰ ਸਿਖਾਉਣਗੇ ਕਿ ਵੈੱਬ ਐਪ ਦਾ ਲੇਆਉਟ ਕਿਵੇਂ ਬਣਾਉਣਾ ਹੈ ਅਤੇ ਰੂਟਸ ਪ੍ਰਦਾਨ ਕਰਨੇ ਹਨ, ਫਾਰਮ ਬਣਾਉਣੇ ਹਨ, ਸਟੇਟ ਨੂੰ ਮੈਨੇਜ ਕਰਨਾ ਹੈ, ਅਤੇ API ਤੋਂ ਡਾਟਾ ਫੈਚ ਕਰਨਾ ਹੈ ਜਿਸ ਤੋਂ ਤੁਸੀਂ ਬੈਂਕ ਦਾ ਡਾਟਾ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹੋ। -| ![Screen1](../../../translated_images/pa/screen1.baccbba0f1f93364.png) | ![Screen2](../../../translated_images/pa/screen2.123c82a831a1d14a.png) | +| ![Screen1](../../../translated_images/pa/screen1.baccbba0f1f93364.webp) | ![Screen2](../../../translated_images/pa/screen2.123c82a831a1d14a.webp) | |--------------------------------|--------------------------------| ## ਪਾਠ diff --git a/translations/pa/8-code-editor/1-using-a-code-editor/README.md b/translations/pa/8-code-editor/1-using-a-code-editor/README.md index 2b0baed75..62be515ed 100644 --- a/translations/pa/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/pa/8-code-editor/1-using-a-code-editor/README.md @@ -185,7 +185,7 @@ VSCode.dev ਇਹ ਸਮਰੱਥਾਵਾਂ ਤੁਹਾਡੇ ਬ੍ਰਾਊ ਜਦੋਂ ਸਭ ਕੁਝ ਲੋਡ ਹੋ ਜਾਂਦਾ ਹੈ, ਤੁਸੀਂ ਇੱਕ ਸੁੰਦਰ ਤੌਰ 'ਤੇ ਸਾਫ ਕਾਰਜਸਥਾਨ ਦੇਖੋਗੇ ਜੋ ਤੁਹਾਨੂੰ ਤੁਹਾਡੇ ਕੋਡ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਰੱਖਣ ਲਈ ਡਿਜ਼ਾਈਨ ਕੀਤਾ ਗਿਆ ਹੈ! -![Default VSCode.dev interface](../../../../translated_images/pa/default-vscode-dev.5d06881d65c1b323.png) +![Default VSCode.dev interface](../../../../translated_images/pa/default-vscode-dev.5d06881d65c1b323.webp) **ਇਹ ਹੈ ਤੁਹਾਡੇ ਪੜੋਸ ਦਾ ਦੌਰਾ:** - **ਐਕਟਿਵਿਟੀ ਬਾਰ** (ਖੱਬੇ ਪਾਸੇ ਵਾਲੀ ਸਟ੍ਰਿਪ): ਤੁਹਾਡਾ ਮੁੱਖ ਨੈਵੀਗੇਸ਼ਨ ਜਿਸ ਵਿੱਚ Explorer 📁, Search 🔍, Source Control 🌿, Extensions 🧩, ਅਤੇ Settings ⚙️ ਸ਼ਾਮਲ ਹਨ @@ -233,7 +233,7 @@ flowchart TB 1. [vscode.dev](https://vscode.dev) 'ਤੇ ਜਾਓ ਜੇ ਤੁਸੀਂ ਪਹਿਲਾਂ ਹੀ ਉੱਥੇ ਨਹੀਂ ਹੋ 2. ਵੈਲਕਮ ਸਕ੍ਰੀਨ 'ਤੇ "Open Remote Repository" ਬਟਨ ਲੱਭੋ ਅਤੇ ਇਸ 'ਤੇ ਕਲਿੱਕ ਕਰੋ - ![Open remote repository](../../../../translated_images/pa/open-remote-repository.bd9c2598b8949e7f.png) + ![Open remote repository](../../../../translated_images/pa/open-remote-repository.bd9c2598b8949e7f.webp) 3. ਕਿਸੇ ਵੀ GitHub ਰਿਪੋਜ਼ਿਟਰੀ URL ਨੂੰ ਪੇਸਟ ਕਰੋ (ਇਸ ਨੂੰ ਕੋਸ਼ਿਸ਼ ਕਰੋ: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. Enter ਦਬਾਓ ਅਤੇ ਜਾਦੂ ਦੇਖੋ! @@ -242,7 +242,7 @@ flowchart TB ਤੁਹਾਨੂੰ ਕੋਡਿੰਗ ਜਾਦੂਗਰ ਵਾਂਗ ਮਹਿਸੂਸ ਕਰਨਾ ਹੈ? ਇਹ ਕੀਬੋਰਡ ਸ਼ਾਰਟਕਟ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ: Ctrl+Shift+P (ਜਾਂ Mac 'ਤੇ Cmd+Shift+P) ਕਮਾਂਡ ਪੈਲੇਟ ਖੋਲ੍ਹਣ ਲਈ: -![Command Palette](../../../../translated_images/pa/palette-menu.4946174e07f42622.png) +![Command Palette](../../../../translated_images/pa/palette-menu.4946174e07f42622.webp) **ਕਮਾਂਡ ਪੈਲੇਟ ਇਹ ਹੈ ਜਿਵੇਂ ਤੁਹਾਡੇ ਲਈ ਹਰ ਚੀਜ਼ ਲਈ ਇੱਕ ਖੋਜ ਇੰਜਨ ਹੋਵੇ:** - "open remote" ਟਾਈਪ ਕਰੋ ਅਤੇ ਇਹ ਤੁਹਾਡੇ ਲਈ ਰਿਪੋਜ਼ਿਟਰੀ ਓਪਨਰ ਲੱਭੇਗਾ diff --git a/translations/pa/8-code-editor/1-using-a-code-editor/assignment.md b/translations/pa/8-code-editor/1-using-a-code-editor/assignment.md index 363e0b709..41394c805 100644 --- a/translations/pa/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/pa/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ CO_OP_TRANSLATOR_METADATA: 4. ਇੱਕ ਕਮਿਟ ਸੁਨੇਹਾ ਲਿਖੋ: "Add initial HTML structure" 5. "Commit new file" 'ਤੇ ਕਲਿਕ ਕਰਕੇ ਆਪਣੇ ਬਦਲਾਅ ਸੇਵ ਕਰੋ -![GitHub 'ਤੇ ਸ਼ੁਰੂਆਤੀ ਫਾਈਲ ਬਣਾਉਣਾ](../../../../translated_images/pa/new-file-github.com.c886796d800e8056.png) +![GitHub 'ਤੇ ਸ਼ੁਰੂਆਤੀ ਫਾਈਲ ਬਣਾਉਣਾ](../../../../translated_images/pa/new-file-github.com.c886796d800e8056.webp) **ਇਹ ਸ਼ੁਰੂਆਤੀ ਸੈਟਅਪ ਕੀ ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ:** - **ਸਥਾਪਿਤ ਕਰਦਾ ਹੈ** ਸਹੀ HTML5 ਦਸਤਾਵੇਜ਼ ਸੰਰਚਨਾ ਸੈਮਾਂਟਿਕ ਤੱਤਾਂ ਨਾਲ @@ -104,7 +104,7 @@ CO_OP_TRANSLATOR_METADATA: ✅ **ਸਫਲਤਾ ਸੂਚਕ**: ਤੁਹਾਨੂੰ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਫਾਈਲਾਂ Explorer ਸਾਈਡਬਾਰ ਵਿੱਚ ਅਤੇ `index.html` ਮੁੱਖ ਐਡੀਟਰ ਖੇਤਰ ਵਿੱਚ ਐਡੀਟ ਕਰਨ ਲਈ ਉਪਲਬਧ ਹੋਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ। -![VSCode.dev ਵਿੱਚ ਪ੍ਰੋਜੈਕਟ ਲੋਡ ਕੀਤਾ](../../../../translated_images/pa/project-on-vscode.dev.e79815a9a95ee7fe.png) +![VSCode.dev ਵਿੱਚ ਪ੍ਰੋਜੈਕਟ ਲੋਡ ਕੀਤਾ](../../../../translated_images/pa/project-on-vscode.dev.e79815a9a95ee7fe.webp) **ਇੰਟਰਫੇਸ ਵਿੱਚ ਤੁਸੀਂ ਕੀ ਦੇਖੋਗੇ:** - **Explorer sidebar**: **ਤੁਹਾਡੇ ਰਿਪੋਜ਼ਟਰੀ ਫਾਈਲਾਂ ਅਤੇ ਫੋਲਡਰ ਸੰਰਚਨਾ ਦਿਖਾਉਂਦਾ ਹੈ** diff --git a/translations/pa/9-chat-project/README.md b/translations/pa/9-chat-project/README.md index db0171ea2..6b92443e9 100644 --- a/translations/pa/9-chat-project/README.md +++ b/translations/pa/9-chat-project/README.md @@ -61,7 +61,7 @@ print(response.choices[0].message.content) ਤੁਹਾਡਾ ਤਿਆਰ ਪ੍ਰੋਜੈਕਟ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਦੇਖਾਈ ਦੇਵੇਗਾ: -![ਚੈਟ ਐਪ ਇੰਟਰਫੇਸ ਜੋ ਯੂਜ਼ਰ ਅਤੇ AI ਅਸਿਸਟੈਂਟ ਦੇ ਵਿਚਕਾਰ ਗੱਲਬਾਤ ਦਿਖਾਉਂਦਾ ਹੈ](../../../translated_images/pa/screenshot.0a1ee0d123df681b.png) +![ਚੈਟ ਐਪ ਇੰਟਰਫੇਸ ਜੋ ਯੂਜ਼ਰ ਅਤੇ AI ਅਸਿਸਟੈਂਟ ਦੇ ਵਿਚਕਾਰ ਗੱਲਬਾਤ ਦਿਖਾਉਂਦਾ ਹੈ](../../../translated_images/pa/screenshot.0a1ee0d123df681b.webp) ## 🗺️ AI ਐਪਲੀਕੇਸ਼ਨ ਡਿਵੈਲਪਮੈਂਟ ਦੁਆਰਾ ਤੁਹਾਡਾ ਸਿੱਖਣ ਦਾ ਸਫਰ @@ -194,7 +194,7 @@ mindmap **ਮੁੱਖ ਸਿਧਾਂਤ**: AI ਐਪਲੀਕੇਸ਼ਨ ਡਿਵੈਲਪਮੈਂਟ ਰਵਾਇਤੀ ਵੈੱਬ ਡਿਵੈਲਪਮੈਂਟ ਹੁਨਰਾਂ ਨੂੰ AI ਸੇਵਾ ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਨਾਲ ਜੋੜਦਾ ਹੈ, ਬੁੱਧੀਮਾਨ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਯੂਜ਼ਰਾਂ ਲਈ ਕੁਦਰਤੀ ਅਤੇ ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਮਹਿਸੂਸ ਹੁੰਦੇ ਹਨ। -![GitHub Models AI Playground ਇੰਟਰਫੇਸ ਮਾਡਲ ਚੋਣ ਅਤੇ ਟੈਸਟਿੰਗ ਖੇਤਰ ਨਾਲ](../../../translated_images/pa/playground.d2b927122224ff8f.png) +![GitHub Models AI Playground ਇੰਟਰਫੇਸ ਮਾਡਲ ਚੋਣ ਅਤੇ ਟੈਸਟਿੰਗ ਖੇਤਰ ਨਾਲ](../../../translated_images/pa/playground.d2b927122224ff8f.webp) **ਇਹ ਪਲੇਗਰਾਊਂਡ ਨੂੰ ਕਿੰਨਾ ਲਾਭਕਾਰੀ ਬਣਾਉਂਦਾ ਹੈ:** - **ਵੱਖ-ਵੱਖ AI ਮਾਡਲਾਂ ਦੀ ਜਾਂਚ ਕਰੋ** ਜਿਵੇਂ GPT-4o-mini, Claude, ਅਤੇ ਹੋਰ (ਸਭ ਮੁਫ਼ਤ!) @@ -204,7 +204,7 @@ mindmap ਜਦੋਂ ਤੁਸੀਂ ਕੁਝ ਖੇਡ ਲੈਂਦੇ ਹੋ, ਸਿਰਫ਼ "Code" ਟੈਬ 'ਤੇ ਕਲਿਕ ਕਰੋ ਅਤੇ ਆਪਣੀ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾ ਚੁਣੋ ਤਾਂ ਜੋ ਤੁਹਾਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਲੋੜੀਂਦਾ ਕੋਡ ਮਿਲੇ। -![ਪਲੇਗਰਾਊਂਡ ਚੋਣ ਜੋ ਵੱਖ-ਵੱਖ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਲਈ ਕੋਡ ਜਨਰੇਸ਼ਨ ਵਿਕਲਪ ਦਿਖਾਉਂਦੀ ਹੈ](../../../translated_images/pa/playground-choice.1d23ba7d407f4758.png) +![ਪਲੇਗਰਾਊਂਡ ਚੋਣ ਜੋ ਵੱਖ-ਵੱਖ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਲਈ ਕੋਡ ਜਨਰੇਸ਼ਨ ਵਿਕਲਪ ਦਿਖਾਉਂਦੀ ਹੈ](../../../translated_images/pa/playground-choice.1d23ba7d407f4758.webp) ## Python ਬੈਕਐਂਡ ਇੰਟੀਗ੍ਰੇਸ਼ਨ ਸੈਟਅਪ ਕਰਨਾ @@ -1638,14 +1638,14 @@ mindmap - **[Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners)** 'ਤੇ ਜਾਓ - **"Use this template"** ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰੋ (ਸੁਨਿਸ਼ਚਿਤ ਕਰੋ ਕਿ ਤੁਸੀਂ GitHub ਵਿੱਚ ਲੌਗਇਨ ਹੋ) -![ਟੈਂਪਲੇਟ ਇੰਟਰਫੇਸ ਜਿਸ ਵਿੱਚ ਹਰਾ "Use this template" ਬਟਨ ਦਿਖਾਇਆ ਗਿਆ ਹੈ](../../../translated_images/pa/template.67ad477109d29a2b.png) +![ਟੈਂਪਲੇਟ ਇੰਟਰਫੇਸ ਜਿਸ ਵਿੱਚ ਹਰਾ "Use this template" ਬਟਨ ਦਿਖਾਇਆ ਗਿਆ ਹੈ](../../../translated_images/pa/template.67ad477109d29a2b.webp) **ਦੂਜਾ ਕਦਮ: Codespaces ਲਾਂਚ ਕਰੋ** - **ਆਪਣੇ ਨਵੇਂ ਬਣਾਏ ਗਏ ਰਿਪੋਜ਼ਟਰੀ ਨੂੰ ਖੋਲ੍ਹੋ** - **ਹਰੇ "Code" ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰੋ ਅਤੇ "Codespaces" ਚੁਣੋ** - **"Create codespace on main" ਚੁਣੋ** ਆਪਣੇ ਵਿਕਾਸ ਵਾਤਾਵਰਣ ਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਲਈ -![ਕੋਡਸਪੇਸ ਇੰਟਰਫੇਸ ਜਿਸ ਵਿੱਚ ਕਲਾਉਡ ਵਿਕਾਸ ਵਾਤਾਵਰਣ ਸ਼ੁਰੂ ਕਰਨ ਦੇ ਵਿਕਲਪ ਦਿਖਾਏ ਗਏ ਹਨ](../../../translated_images/pa/codespace.bcecbdf5d2747d3d.png) +![ਕੋਡਸਪੇਸ ਇੰਟਰਫੇਸ ਜਿਸ ਵਿੱਚ ਕਲਾਉਡ ਵਿਕਾਸ ਵਾਤਾਵਰਣ ਸ਼ੁਰੂ ਕਰਨ ਦੇ ਵਿਕਲਪ ਦਿਖਾਏ ਗਏ ਹਨ](../../../translated_images/pa/codespace.bcecbdf5d2747d3d.webp) **ਤੀਜਾ ਕਦਮ: ਵਾਤਾਵਰਣ ਕਨਫਿਗਰੇਸ਼ਨ** ਜਦੋਂ ਤੁਹਾਡਾ Codespace ਲੋਡ ਹੁੰਦਾ ਹੈ, ਤੁਹਾਨੂੰ ਪਹੁੰਚ ਮਿਲੇਗੀ: diff --git a/translations/pa/README.md b/translations/pa/README.md index f2267e512..bcd7ca4be 100644 --- a/translations/pa/README.md +++ b/translations/pa/README.md @@ -72,13 +72,13 @@ Azure AI Foundry Discord Community ਵਿੱਚ ਸ਼ਾਮਿਲ ਹੋਵੋ ਸ਼ੁਰੂਆਤ ਕਰਨ ਲਈ [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) ਤੇ ਜਾਓ! -![Background](../../translated_images/pa/background.148a8d43afde5730.png) +![Background](../../translated_images/pa/background.148a8d43afde5730.webp) - ਬੁਨਿਆਦੀਂ ਤੱਕ RAG ਤੱਕ ਸਾਰੇ ਪਾਠ ਸ਼ਾਮਲ ਹਨ। - ਇਤিহাসਕ ਪਾਤਰਾਂ ਨਾਲ GenAI ਅਤੇ ਸਾਡੇ ਸਾਥੀ ਐਪ ਵਰਤ ਕੇ ਇੰਤrotateੈਕਟ ਕਰੋ। - ਮਨੋਰੰਜਕ ਅਤੇ ਦਿਲਚਸਪ ਕਹਾਣੀ, ਤੁਸੀਂ ਸਮੇਂ ਦਾ ਯਾਤਰੀ ਹੋਵੋ! -![character](../../translated_images/pa/character.5c0dd8e067ffd693.png) +![character](../../translated_images/pa/character.5c0dd8e067ffd693.webp) ਹਰ ਪਾਠ ਵਿੱਚ ਅਸਾਈਨਮੈਂਟ, ਗਿਆਨ ਜਾਂਚ ਅਤੇ ਚੈਲੰਜ ਸ਼ਾਮਲ ਹੁੰਦੇ ਹਨ ਜਿਹੜੇ ਤੁਹਾਨੂੰ ਸਿੱਖਣ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ ਜਿਵੇਂ: - ਪ੍ਰੌਂਪਟਿੰਗ ਅਤੇ ਪ੍ਰੌਂਪਟ ਇੰਜੀਨੀਅਰਿੰਗ @@ -114,7 +114,7 @@ Azure AI Foundry Discord Community ਵਿੱਚ ਸ਼ਾਮਿਲ ਹੋਵੋ ਆਪਣੇ ਬਣਾਏ ਕਾਪੀ ਵਿੱਚ, **Code** ਬਟਨ 'ਤੇ ਕਲਿੱਕ ਕਰੋ ਅਤੇ **Open with Codespaces** ਚੁਣੋ। ਇਹ ਤੁਹਾਡੇ ਲਈ ਨਵਾਂ Codespace ਬਣਾ ਦੇਵੇਗਾ ਜਿਸ ਵਿੱਚ ਤੁਸੀਂ ਕੰਮ ਕਰ ਸਕਦੇ ਹੋ। -![Codespace](../../translated_images/pa/createcodespace.0238bbf4d7a8d955.png) +![Codespace](../../translated_images/pa/createcodespace.0238bbf4d7a8d955.webp) #### ਆਪਣੇ ਕੰਪਿਊਟਰ 'ਤੇ ਕੋਰਸ ਚਲਾਉਣਾ diff --git a/translations/pa/for-teachers.md b/translations/pa/for-teachers.md index 9c1307b3c..73e2f9bac 100644 --- a/translations/pa/for-teachers.md +++ b/translations/pa/for-teachers.md @@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA: - Moodle Cloud ਵਿੱਚ Common Cartridge ਸਹਾਇਤਾ ਸੀਮਿਤ ਹੈ। ਉਪਰੋਕਤ Moodle ਫਾਈਲ ਨੂੰ ਤਰਜੀਹ ਦਿਓ, ਜਿਸਨੂੰ Canvas ਵਿੱਚ ਵੀ ਅੱਪਲੋਡ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। - ਇੰਪੋਰਟ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਮਾਡਿਊਲ, ਮਿਆਦ ਦੀਆਂ ਮਿਤੀਆਂ, ਅਤੇ ਕਵਿਜ਼ ਸੈਟਿੰਗਾਂ ਦੀ ਸਮੀਖਾ ਕਰੋ ਤਾਂ ਜੋ ਇਹ ਤੁਹਾਡੇ ਟਰਮ ਸ਼ਡਿਊਲ ਨਾਲ ਮੇਲ ਖਾਂਦੇ ਹੋਣ। -![Moodle](../../translated_images/pa/moodle.94eb93d714a50cb2.png) +![Moodle](../../translated_images/pa/moodle.94eb93d714a50cb2.webp) > Moodle ਕਲਾਸਰੂਮ ਵਿੱਚ ਪਾਠਕ੍ਰਮ -![Canvas](../../translated_images/pa/canvas.fbd605ff8e5b8aff.png) +![Canvas](../../translated_images/pa/canvas.fbd605ff8e5b8aff.webp) > Canvas ਵਿੱਚ ਪਾਠਕ੍ਰਮ ### ਰਿਪੋ ਨੂੰ ਸਿੱਧੇ ਤੌਰ 'ਤੇ ਵਰਤੋ (ਕੋਈ Classroom ਨਹੀਂ) diff --git a/translations/pl/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/pl/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 5162fbb23..7024be8fd 100644 --- a/translations/pl/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/pl/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ Słuchaj, całkowicie rozumiem, jeśli programowanie wydaje się teraz przeraża Dziś poznamy niesamowite narzędzia, które sprawiają, że nowoczesne tworzenie stron internetowych jest nie tylko możliwe, ale też niesamowicie wciągające. Mówię o tych samych edytorach, przeglądarkach i przepływach pracy, z których korzystają programiści Netflixa, Spotify oraz Twojego ulubionego studia indie tworzącego aplikacje każdego dnia. I oto część, która sprawi, że zatańczysz z radości: większość tych profesjonalnych, standardowych narzędzi jest całkowicie darmowa! -![Intro Programming](../../../../translated_images/pl/webdev101-programming.d6e3f98e61ac4bff.png) +![Intro Programming](../../../../translated_images/pl/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote autorstwa [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/pl/1-getting-started-lessons/2-github-basics/README.md b/translations/pl/1-getting-started-lessons/2-github-basics/README.md index 7ebf82470..97df0b7bc 100644 --- a/translations/pl/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/pl/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ Wiem, że na początku może to wydać się dużo – pamiętam, jak patrzyłem Przejdziemy przez tę podróż razem, krok po kroku. Bez pośpiechu, bez presji – tylko Ty, ja i naprawdę fajne narzędzia, które wkrótce staną się Twoimi nowymi najlepszymi przyjaciółmi! -![Intro to GitHub](../../../../translated_images/pl/webdev101-github.8846d7971abef6f9.png) +![Intro to GitHub](../../../../translated_images/pl/webdev101-github.8846d7971abef6f9.webp) > Sketchnote autorstwa [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -606,7 +606,7 @@ Najpierw znajdź repozytorium (**repo**) na GitHub, które cię interesuje i do ✅ Dobrym sposobem na znalezienie repozytoriów „przyjaznych początkującym” jest [wyszukiwanie po tagu 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Skopiuj repozytorium lokalnie](../../../../translated_images/pl/clone_repo.5085c48d666ead57.png) +![Skopiuj repozytorium lokalnie](../../../../translated_images/pl/clone_repo.5085c48d666ead57.webp) Istnieje kilka sposobów na skopiowanie kodu. Jednym z nich jest „klonowanie” zawartości repozytorium za pomocą HTTPS, SSH lub wykorzystując GitHub CLI (interfejs wiersza poleceń). diff --git a/translations/pl/1-getting-started-lessons/3-accessibility/README.md b/translations/pl/1-getting-started-lessons/3-accessibility/README.md index fb4e8486c..711905a37 100644 --- a/translations/pl/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/pl/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Tworzenie dostępnych stron internetowych -![Wszystko o dostępności](../../../../translated_images/pl/webdev101-a11y.8ef3025c858d897a.png) +![Wszystko o dostępności](../../../../translated_images/pl/webdev101-a11y.8ef3025c858d897a.webp) > Sketchnote autorstwa [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/pl/2-js-basics/1-data-types/README.md b/translations/pl/2-js-basics/1-data-types/README.md index 3314e49c3..2c5069044 100644 --- a/translations/pl/2-js-basics/1-data-types/README.md +++ b/translations/pl/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Podstawy JavaScript: Typy danych -![JavaScript Basics - Data types](../../../../translated_images/pl/webdev101-js-datatypes.4cc470179730702c.png) +![JavaScript Basics - Data types](../../../../translated_images/pl/webdev101-js-datatypes.4cc470179730702c.webp) > Sketchnote autorstwa [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/pl/2-js-basics/2-functions-methods/README.md b/translations/pl/2-js-basics/2-functions-methods/README.md index d8e78f7ea..bf943da5a 100644 --- a/translations/pl/2-js-basics/2-functions-methods/README.md +++ b/translations/pl/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Podstawy JavaScript: Metody i funkcje -![JavaScript Basics - Functions](../../../../translated_images/pl/webdev101-js-functions.be049c4726e94f8b.png) +![JavaScript Basics - Functions](../../../../translated_images/pl/webdev101-js-functions.be049c4726e94f8b.webp) > Sketchnota autorstwa [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/pl/2-js-basics/3-making-decisions/README.md b/translations/pl/2-js-basics/3-making-decisions/README.md index 339cfaf0b..e4c3006c8 100644 --- a/translations/pl/2-js-basics/3-making-decisions/README.md +++ b/translations/pl/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Podstawy JavaScript: Podejmowanie decyzji -![JavaScript Basics - Podejmowanie decyzji](../../../../translated_images/pl/webdev101-js-decisions.69e1b20f272dd1f0.png) +![JavaScript Basics - Podejmowanie decyzji](../../../../translated_images/pl/webdev101-js-decisions.69e1b20f272dd1f0.webp) > Sketchnote autorstwa [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/pl/2-js-basics/4-arrays-loops/README.md b/translations/pl/2-js-basics/4-arrays-loops/README.md index a88197932..43b558b12 100644 --- a/translations/pl/2-js-basics/4-arrays-loops/README.md +++ b/translations/pl/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript Basics: Tablice i Pętle -![JavaScript Basics - Arrays](../../../../translated_images/pl/webdev101-js-arrays.439d7528b8a29455.png) +![JavaScript Basics - Arrays](../../../../translated_images/pl/webdev101-js-arrays.439d7528b8a29455.webp) > Sketchnote autorstwa [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/pl/3-terrarium/1-intro-to-html/README.md b/translations/pl/3-terrarium/1-intro-to-html/README.md index 428444653..7d69037d1 100644 --- a/translations/pl/3-terrarium/1-intro-to-html/README.md +++ b/translations/pl/3-terrarium/1-intro-to-html/README.md @@ -25,7 +25,7 @@ journey Enhance accessibility: 5: Student Build terrarium: 5: Student ``` -![Wprowadzenie do HTML](../../../../translated_images/pl/webdev101-html.4389c2067af68e98.png) +![Wprowadzenie do HTML](../../../../translated_images/pl/webdev101-html.4389c2067af68e98.webp) > Sketchnote autorstwa [Tomomi Imura](https://twitter.com/girlie_mac) HTML, czyli HyperText Markup Language, to fundament każdej odwiedzanej witryny. Pomyśl o HTML jak o szkielecie nadającym strukturę stronom internetowym – definiuje, gdzie trafia zawartość, jak jest zorganizowana i co reprezentuje każdy element. Podczas gdy CSS później "ubrać" Twój HTML kolorami i układami, a JavaScript tchnie w niego życie dzięki interaktywności, HTML zapewnia niezbędną strukturę, która umożliwia wszystko inne. @@ -86,7 +86,7 @@ Stworzysz dedykowany folder dla projektu terrarium i dodasz pierwszy plik HTML. 4. W panelu Eksploratora kliknij ikonę „Nowy plik” 5. Nazwij swój plik `index.html` -![Eksplorator VS Code pokazujący tworzenie nowego pliku](../../../../translated_images/pl/vs-code-index.e2986cf919471eb9.png) +![Eksplorator VS Code pokazujący tworzenie nowego pliku](../../../../translated_images/pl/vs-code-index.e2986cf919471eb9.webp) **Opcja 2: Korzystanie z poleceń terminala** ```bash diff --git a/translations/pl/3-terrarium/2-intro-to-css/README.md b/translations/pl/3-terrarium/2-intro-to-css/README.md index 0065c705f..973a25eb4 100644 --- a/translations/pl/3-terrarium/2-intro-to-css/README.md +++ b/translations/pl/3-terrarium/2-intro-to-css/README.md @@ -29,7 +29,7 @@ journey Responsywny projekt: 5: Student Odbicia na szkle: 5: Student ``` -![Wprowadzenie do CSS](../../../../translated_images/pl/webdev101-css.3f7af5991bf53a20.png) +![Wprowadzenie do CSS](../../../../translated_images/pl/webdev101-css.3f7af5991bf53a20.webp) > Notatka graficzna autorstwa [Tomomi Imura](https://twitter.com/girlie_mac) Pamiętasz, jak twoje terrarium HTML wyglądało dość prosto? CSS to miejsce, gdzie przekształcamy tę prostą strukturę w coś wizualnie atrakcyjnego. @@ -202,7 +202,7 @@ body { Otwórz narzędzia deweloperskie przeglądarki (F12), przejdź do zakładki Elements i zbadaj swój element `

`. Zobaczysz, że dziedziczy rodzinę czcionki po body: -![dziedziczona czcionka](../../../../translated_images/pl/1.cc07a5cbe114ad1d.png) +![dziedziczona czcionka](../../../../translated_images/pl/1.cc07a5cbe114ad1d.webp) ✅ **Czas na eksperyment**: Spróbuj ustawić inne właściwości dziedziczone na ``, jak `color`, `line-height` lub `text-align`. Co się stanie z nagłówkiem i innymi elementami? @@ -594,7 +594,7 @@ Gotowy, by wzbogacić terrarium o realistyczne refleksy szklane? Ta technika dod Stworzysz subtelne refleksy, które symulują odbicie światła od powierzchni szkła. Podejście to jest podobne do metody, jaką stosowali renesansowi malarze tacy jak Jan van Eyck, używając światła i odbić, aby nadać szkłu trójwymiarowy wygląd. Oto, do czego dążysz: -![finished terrarium](../../../../translated_images/pl/terrarium-final.2f07047ffc597d0a.png) +![finished terrarium](../../../../translated_images/pl/terrarium-final.2f07047ffc597d0a.webp) **Twoje zadanie:** - **Stwórz** subtelne białe lub jasne owalne kształty dla refleksów szklanych diff --git a/translations/pl/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/pl/3-terrarium/3-intro-to-DOM-and-closures/README.md index ac54bb357..2adb801dc 100644 --- a/translations/pl/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/pl/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -25,7 +25,7 @@ journey Testuj funkcjonalność: 5: Student Ukończ terrarium: 5: Student ``` -![DOM i zamknięcie](../../../../translated_images/pl/webdev101-js.10280393044d7eaa.png) +![DOM i zamknięcie](../../../../translated_images/pl/webdev101-js.10280393044d7eaa.webp) > Sketchnotka autorstwa [Tomomi Imura](https://twitter.com/girlie_mac) Witamy w jednym z najbardziej angażujących aspektów tworzenia stron internetowych – tworzeniu interaktywności! Model Obiektowy Dokumentu (DOM) jest jak most łączący twój HTML z JavaScript, a dziś użyjemy go, aby ożywić twoje terrarium. Gdy Tim Berners-Lee stworzył pierwszą przeglądarkę internetową, wyobrażał sobie sieć, gdzie dokumenty mogą być dynamiczne i interaktywne – to właśnie DOM sprawia, że ta wizja jest możliwa. @@ -102,7 +102,7 @@ flowchart TD style P fill:#ffebee style Q fill:#ffebee ``` -![Reprezentacja drzewa DOM](../../../../translated_images/pl/dom-tree.7daf0e763cbbba92.png) +![Reprezentacja drzewa DOM](../../../../translated_images/pl/dom-tree.7daf0e763cbbba92.webp) > Reprezentacja DOM i powiązanego znacznika HTML. Źródło: [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -146,7 +146,7 @@ flowchart LR ``` > 💡 **Zrozumienie zamknięć**: Zamknięcia to istotny temat w JavaScript i wielu programistów używa ich przez lata, zanim w pełni zrozumie teoretyczne aspekty. Dzisiaj skupimy się na praktycznym zastosowaniu – zobaczysz, jak zamknięcia naturalnie pojawiają się podczas budowania interaktywnych funkcji. Zrozumienie rozwinie się, gdy zobaczysz, jak rozwiązują rzeczywiste problemy. -![Reprezentacja drzewa DOM](../../../../translated_images/pl/dom-tree.7daf0e763cbbba92.png) +![Reprezentacja drzewa DOM](../../../../translated_images/pl/dom-tree.7daf0e763cbbba92.webp) > Reprezentacja DOM i powiązanego znacznika HTML. Źródło: [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -591,7 +591,7 @@ Teraz przetestuj swoje interaktywne terrarium! Otwórz plik `index.html` w przeg - **Wsparcie wieloplatformowe**: Działa na desktopie i urządzeniach mobilnych - **Uważność na wydajność**: Brak wycieków pamięci lub zbędnych obliczeń -![finished terrarium](../../../../translated_images/pl/terrarium-final.0920f16e87c13a84.png) +![finished terrarium](../../../../translated_images/pl/terrarium-final.0920f16e87c13a84.webp) --- diff --git a/translations/pl/5-browser-extension/1-about-browsers/README.md b/translations/pl/5-browser-extension/1-about-browsers/README.md index d8318603a..27ea14776 100644 --- a/translations/pl/5-browser-extension/1-about-browsers/README.md +++ b/translations/pl/5-browser-extension/1-about-browsers/README.md @@ -25,7 +25,7 @@ journey Debuguj problemy: 4: Student Dopieszczaj doświadczenie: 5: Student ``` -![Browser sketchnote](../../../../translated_images/pl/browser.60317c9be8b7f84a.jpg) +![Browser sketchnote](../../../../translated_images/pl/browser.60317c9be8b7f84a.webp) > Sketchnote autorstwa [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## Quiz przed wykładem @@ -77,7 +77,7 @@ Proces ten odzwierciedla sposób, w jaki pierwsza przeglądarka internetowa, Wor ✅ **Trochę historii**: Pierwsza przeglądarka nazywała się „WorldWideWeb” i została stworzona przez Sir Timothy’ego Berners-Lee w 1990 roku. -![early browsers](../../../../translated_images/pl/earlybrowsers.d984b711cdf3a42d.jpg) +![early browsers](../../../../translated_images/pl/earlybrowsers.d984b711cdf3a42d.webp) > Niektóre wczesne przeglądarki, za [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### Jak przeglądarki przetwarzają zawartość sieci @@ -194,7 +194,7 @@ quadrantChart Zrozumienie procesu instalacji rozszerzenia pomaga przewidzieć, jak doświadczenie użytkownika będzie wyglądać podczas instalacji Twojego rozszerzenia. Proces instalacji jest ustandaryzowany we wszystkich nowoczesnych przeglądarkach, z drobnymi różnicami w designie interfejsu. -![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/pl/install-on-edge.d68781acaf0b3d3d.png) +![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/pl/install-on-edge.d68781acaf0b3d3d.webp) > **Ważne**: Upewnij się, że włączyłeś tryb dewelopera i zezwoliłeś na rozszerzenia z innych sklepów podczas testowania swoich własnych rozszerzeń. @@ -308,10 +308,10 @@ Zasada ta odpowiada regule stopniowego ujawniania informacji, stosowanej w proje ### Przegląd widoków rozszerzenia **Widok konfiguracji** – konfiguracja dla pierwszych użytkowników: -![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/pl/1.b6da8c1394b07491.png) +![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/pl/1.b6da8c1394b07491.webp) **Widok wyników** – wyświetlanie danych o śladzie węglowym: -![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/pl/2.1dae52ff08042246.png) +![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/pl/2.1dae52ff08042246.webp) ### Tworzenie formularza konfiguracji diff --git a/translations/pl/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/pl/5-browser-extension/2-forms-browsers-local-storage/README.md index c171c6c00..5c3542494 100644 --- a/translations/pl/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/pl/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -263,7 +263,7 @@ stateDiagram-v2 Reset --> ClearStorage: Usuń zapisane dane ClearStorage --> FirstTime: Powrót do konfiguracji ``` -![Panel local storage](../../../../translated_images/pl/localstorage.472f8147b6a3f8d1.png) +![Panel local storage](../../../../translated_images/pl/localstorage.472f8147b6a3f8d1.webp) > ⚠️ **Kwestie bezpieczeństwa**: W aplikacjach produkcyjnych przechowywanie kluczy API w LocalStorage niesie ryzyko bezpieczeństwa, ponieważ JavaScript ma do nich dostęp. Dla celów edukacyjnych jest to w porządku, ale prawdziwe aplikacje powinny korzystać z bezpiecznego przechowywania po stronie serwera dla poufnych danych. diff --git a/translations/pl/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/pl/5-browser-extension/3-background-tasks-and-performance/README.md index 48bd2f35f..17a2a0353 100644 --- a/translations/pl/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/pl/5-browser-extension/3-background-tasks-and-performance/README.md @@ -123,7 +123,7 @@ Aby otworzyć Narzędzia deweloperskie w Edge, kliknij trzy kropki w prawym gór Wypróbujmy to. Otwórz jakąś stronę (Microsoft.com świetnie się sprawdzi) i kliknij 'Nagraj'. Teraz odśwież stronę i obserwuj, jak profiler rejestruje wszystko, co się dzieje. Po zatrzymaniu nagrywania zobaczysz szczegółowy rozkład tego, jak przeglądarka 'skryptuje', 'renderuje' i 'maluje' witrynę. Przypomina mi to, jak centrum kontroli misji monitoruje każdy system podczas startu rakiety – masz dane w czasie rzeczywistym o tym, co i kiedy się dzieje. -![Edge profiler](../../../../translated_images/pl/profiler.5a4a62479c5df01c.png) +![Edge profiler](../../../../translated_images/pl/profiler.5a4a62479c5df01c.webp) ✅ [Dokumentacja Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) zawiera dużo więcej szczegółów, jeśli chcesz zgłębić temat @@ -133,11 +133,11 @@ Wybierz elementy linii czasu profilu, aby przybliżyć zdarzenia zachodzące pod Zyskaj migawkę wydajności strony, wybierając fragment linii czasu profilu i patrząc na panel podsumowania: -![Edge profiler snapshot](../../../../translated_images/pl/snapshot.97750180ebcad737.png) +![Edge profiler snapshot](../../../../translated_images/pl/snapshot.97750180ebcad737.webp) Sprawdź panel Dziennika zdarzeń, aby zobaczyć, czy jakieś zdarzenie trwało dłużej niż 15 ms: -![Edge event log](../../../../translated_images/pl/log.804026979f3707e0.png) +![Edge event log](../../../../translated_images/pl/log.804026979f3707e0.webp) ✅ Poznaj swój profiler! Otwórz narzędzia deweloperskie na tej stronie i sprawdź, czy są jakieś wąskie gardła. Jaki zasób ładuje się najwolniej? Najszybciej? diff --git a/translations/pl/6-space-game/2-drawing-to-canvas/README.md b/translations/pl/6-space-game/2-drawing-to-canvas/README.md index 5d902f811..673fcc2dc 100644 --- a/translations/pl/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/pl/6-space-game/2-drawing-to-canvas/README.md @@ -105,7 +105,7 @@ quadrantChart Power-up: [0.7, 0.6] UI Elements: [0.9, 0.1] ``` -![siatka canvas](../../../../translated_images/pl/canvas_grid.5f209da785ded492.png) +![siatka canvas](../../../../translated_images/pl/canvas_grid.5f209da785ded492.webp) > Obraz z [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) Aby rysować na elemencie canvas, wykonasz ten sam trzyetapowy proces, który jest podstawą całej grafiki na canvasie. Po kilku próbach stanie się to drugą naturą: @@ -323,11 +323,11 @@ Zbudujesz stronę internetową z elementem Canvas. Powinna wyświetlać czarny e - Statek bohatera - ![Statek bohatera](../../../../translated_images/pl/player.dd24c1afa8c71e9b.png) + ![Statek bohatera](../../../../translated_images/pl/player.dd24c1afa8c71e9b.webp) - 5×5 potworów - ![Statek potwora](../../../../translated_images/pl/enemyShip.5df2a822c16650c2.png) + ![Statek potwora](../../../../translated_images/pl/enemyShip.5df2a822c16650c2.webp) ### Zalecane kroki rozpoczęcia pracy @@ -463,7 +463,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { Gotowy efekt powinien wyglądać tak: -![Czarny ekran z bohaterem i 5*5 potworów](../../../../translated_images/pl/partI-solution.36c53b48c9ffae2a.png) +![Czarny ekran z bohaterem i 5*5 potworów](../../../../translated_images/pl/partI-solution.36c53b48c9ffae2a.webp) ## Rozwiązanie diff --git a/translations/pl/6-space-game/5-keeping-score/README.md b/translations/pl/6-space-game/5-keeping-score/README.md index 28a105ef9..95d848149 100644 --- a/translations/pl/6-space-game/5-keeping-score/README.md +++ b/translations/pl/6-space-game/5-keeping-score/README.md @@ -155,7 +155,7 @@ sequenceDiagram end ``` - **System punktacji**: Każdy zniszczony statek wroga nagradza 100 punktów (okrągłe liczby są łatwiejsze do mentalnego liczenia dla graczy). Wynik wyświetlany jest w lewym dolnym rogu. -- **Licznik żyć**: Twój bohater rozpoczyna z trzema życiami - standard ustalony przez wczesne gry arcade, by zbalansować wyzwanie z grywalnością. Każda kolizja z wrogiem kosztuje jedno życie. Pokażemy pozostałe życia w prawym dolnym rogu za pomocą ikon statków ![life image](../../../../translated_images/pl/life.6fb9f50d53ee0413.png). +- **Licznik żyć**: Twój bohater rozpoczyna z trzema życiami - standard ustalony przez wczesne gry arcade, by zbalansować wyzwanie z grywalnością. Każda kolizja z wrogiem kosztuje jedno życie. Pokażemy pozostałe życia w prawym dolnym rogu za pomocą ikon statków ![life image](../../../../translated_images/pl/life.6fb9f50d53ee0413.webp). ## Zaczynamy budować! diff --git a/translations/pl/7-bank-project/1-template-route/README.md b/translations/pl/7-bank-project/1-template-route/README.md index b3dd55936..f6bb83a1b 100644 --- a/translations/pl/7-bank-project/1-template-route/README.md +++ b/translations/pl/7-bank-project/1-template-route/README.md @@ -644,7 +644,7 @@ sequenceDiagram Użycie `history.pushState` tworzy nowe wpisy w historii nawigacji przeglądarki. Możesz to sprawdzić, przytrzymując *przycisk wstecz* w przeglądarce — powinno się pokazać coś takiego: -![Screenshot of navigation history](../../../../translated_images/pl/history.7fdabbafa521e064.png) +![Screenshot of navigation history](../../../../translated_images/pl/history.7fdabbafa521e064.webp) Jeśli spróbujesz kilka razy kliknąć przycisk wstecz, zauważysz, że aktualny URL się zmienia, a historia jest aktualizowana, ale nadal wyświetlany jest ten sam szablon. diff --git a/translations/pl/7-bank-project/2-forms/README.md b/translations/pl/7-bank-project/2-forms/README.md index 43f385560..837dffcec 100644 --- a/translations/pl/7-bank-project/2-forms/README.md +++ b/translations/pl/7-bank-project/2-forms/README.md @@ -292,7 +292,7 @@ Najpierw obserwujmy, co się dzieje przy podstawowym wysyłaniu formularza: 2. Zwróć uwagę na zmiany w pasku adresu przeglądarki 3. Zauważ jak strona odświeża się i dane pojawiają się w URL -![Zrzut ekranu zmiany URL przeglądarki po kliknięciu przycisku Zarejestruj się](../../../../translated_images/pl/click-register.e89a30bf0d4bc9ca.png) +![Zrzut ekranu zmiany URL przeglądarki po kliknięciu przycisku Zarejestruj się](../../../../translated_images/pl/click-register.e89a30bf0d4bc9ca.webp) ### Porównanie metod HTTP @@ -346,7 +346,7 @@ Skonfiguruj swój formularz rejestracji tak, aby poprawnie komunikował się z b 2. **Kliknij** przycisk "Utwórz konto" 3. **Obserwuj** odpowiedź serwera w przeglądarce -![Okno przeglądarki pod adresem localhost:5000/api/accounts, pokazujące ciąg JSON z danymi użytkownika](../../../../translated_images/pl/form-post.61de4ca1b964d91a.png) +![Okno przeglądarki pod adresem localhost:5000/api/accounts, pokazujące ciąg JSON z danymi użytkownika](../../../../translated_images/pl/form-post.61de4ca1b964d91a.webp) **Co powinieneś zobaczyć:** - **Przeglądarka przekierowuje** na adres endpointu API @@ -609,7 +609,7 @@ async function register() { 3. **Kliknij** "Utwórz konto" 4. **Obserwuj** komunikaty w konsoli i informacje zwrotne dla użytkownika -![Screenshot showing log message in the browser console](../../../../translated_images/pl/browser-console.efaf0b51aaaf6778.png) +![Screenshot showing log message in the browser console](../../../../translated_images/pl/browser-console.efaf0b51aaaf6778.webp) **Co powinno się pojawić:** - **Stan ładowania** na przycisku wysyłania @@ -783,7 +783,7 @@ Dodajmy do twojego formularza rejestracji solidną walidację, oferującą dosko 3. **Użyj** znaków specjalnych w polu nazwy użytkownika 4. **Wpisz** ujemną kwotę salda -![Screenshot showing the validation error when trying to submit the form](../../../../translated_images/pl/validation-error.8bd23e98d416c22f.png) +![Screenshot showing the validation error when trying to submit the form](../../../../translated_images/pl/validation-error.8bd23e98d416c22f.webp) **Co zauważysz:** - **Przeglądarka wyświetla** natywne komunikaty walidacji @@ -943,7 +943,7 @@ Pokaż komunikat o błędzie w HTML, jeśli użytkownik już istnieje. Oto przykład, jak może wyglądać końcowa strona logowania po dodaniu stylów: -![Zrzut ekranu strony logowania po dodaniu stylów CSS](../../../../translated_images/pl/result.96ef01f607bf856a.png) +![Zrzut ekranu strony logowania po dodaniu stylów CSS](../../../../translated_images/pl/result.96ef01f607bf856a.webp) ## Quiz po wykładzie diff --git a/translations/pl/7-bank-project/3-data/README.md b/translations/pl/7-bank-project/3-data/README.md index 8e13e6a69..28e76b3c9 100644 --- a/translations/pl/7-bank-project/3-data/README.md +++ b/translations/pl/7-bank-project/3-data/README.md @@ -156,7 +156,7 @@ sequenceDiagram Server->>Browser: Zwraca kompletną stronę HTML Browser->>User: Wyświetla nową stronę (flash/przeładowanie) ``` -![Proces aktualizacji w aplikacji wielostronicowej](../../../../translated_images/pl/mpa.7f7375a1a2d4aa77.png) +![Proces aktualizacji w aplikacji wielostronicowej](../../../../translated_images/pl/mpa.7f7375a1a2d4aa77.webp) **Dlaczego to było niewygodne:** - Każde kliknięcie powodowało całkowite przeładowanie strony @@ -182,7 +182,7 @@ sequenceDiagram JavaScript->>Browser: Aktualizuje konkretne elementy strony Browser->>User: Wyświetla zaktualizowaną zawartość (bez przeładowania) ``` -![Proces aktualizacji w aplikacji jednowstronicowej](../../../../translated_images/pl/spa.268ec73b41f992c2.png) +![Proces aktualizacji w aplikacji jednowstronicowej](../../../../translated_images/pl/spa.268ec73b41f992c2.webp) **Dlaczego SPAs działają dużo lepiej:** - Aktualizują tylko zmienione fragmenty (sprytne, prawda?) @@ -516,7 +516,7 @@ if (data.error) { Teraz, gdy przetestujesz z nieprawidłowym kontem, zobaczysz pomocny komunikat o błędzie bezpośrednio na stronie! -![Zrzut ekranu pokazujący komunikat o błędzie podczas logowania](../../../../translated_images/pl/login-error.416fe019b36a6327.png) +![Zrzut ekranu pokazujący komunikat o błędzie podczas logowania](../../../../translated_images/pl/login-error.416fe019b36a6327.webp) #### Krok 4: Być inkluzywnym dzięki dostępności @@ -950,7 +950,7 @@ Gotowy podnieść swoją aplikację bankową na wyższy poziom? Sprawmy, żeby w Tak może wyglądać dopracowany panel: -![Zrzut ekranu przykładowego wyniku panelu po stylizacji](../../../../translated_images/pl/screen2.123c82a831a1d14a.png) +![Zrzut ekranu przykładowego wyniku panelu po stylizacji](../../../../translated_images/pl/screen2.123c82a831a1d14a.webp) Nie czuj presji, by dokładnie to odwzorować – użyj tego jako inspiracji i dostosuj do siebie! diff --git a/translations/pl/7-bank-project/4-state-management/README.md b/translations/pl/7-bank-project/4-state-management/README.md index 0cf1d9e2f..fc92345a4 100644 --- a/translations/pl/7-bank-project/4-state-management/README.md +++ b/translations/pl/7-bank-project/4-state-management/README.md @@ -187,7 +187,7 @@ Podobnie jak projekt Titanica z podziałem na przedziały, który wydawał się Zamiast biegać w kółko, stworzymy system **scentralizowanego zarządzania stanem**. Wyobraź to sobie jak jedną naprawdę zorganizowaną osobę odpowiedzialną za wszystko, co ważne: -![Schemat pokazujący przepływ danych między HTML, akcjami użytkownika i stanem](../../../../translated_images/pl/data-flow.fa2354e0908fecc8.png) +![Schemat pokazujący przepływ danych między HTML, akcjami użytkownika i stanem](../../../../translated_images/pl/data-flow.fa2354e0908fecc8.webp) ```mermaid flowchart TD @@ -798,7 +798,7 @@ To wyzwanie pomoże Ci myśleć jak profesjonalny programista, który bierze pod Oto przykładowy efekt po ukończeniu zadania: -![Zrzut ekranu pokazujący przykładowy dialog „Dodaj transakcję”](../../../../translated_images/pl/dialog.93bba104afeb79f1.png) +![Zrzut ekranu pokazujący przykładowy dialog „Dodaj transakcję”](../../../../translated_images/pl/dialog.93bba104afeb79f1.webp) --- diff --git a/translations/pl/7-bank-project/4-state-management/assignment.md b/translations/pl/7-bank-project/4-state-management/assignment.md index 191f936de..70079e385 100644 --- a/translations/pl/7-bank-project/4-state-management/assignment.md +++ b/translations/pl/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ Odniesienie do [dokumentacji API serwera](../api/README.md) zawierającej: **Oczekiwany rezultat:** Po ukończeniu tego zadania Twoja aplikacja bankowa powinna mieć w pełni funkcjonalną funkcję "Dodaj transakcję", która wygląda i działa profesjonalnie: -![Zrzut ekranu pokazujący przykładowy dialog "Dodaj transakcję"](../../../../translated_images/pl/dialog.93bba104afeb79f1.png) +![Zrzut ekranu pokazujący przykładowy dialog "Dodaj transakcję"](../../../../translated_images/pl/dialog.93bba104afeb79f1.webp) ## Testowanie implementacji diff --git a/translations/pl/8-code-editor/1-using-a-code-editor/README.md b/translations/pl/8-code-editor/1-using-a-code-editor/README.md index bbb79a750..660a9f6f3 100644 --- a/translations/pl/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/pl/8-code-editor/1-using-a-code-editor/README.md @@ -182,7 +182,7 @@ Jak telefon Alexandra Grahama Bella łączył odległe miejsca, tak połączenie Gdy wszystko się załaduje, zobaczysz czyste i uporządkowane środowisko, które pozwoli Ci skupić się na tym, co ważne – na Twoim kodzie! -![Domyślny interfejs VSCode.dev](../../../../translated_images/pl/default-vscode-dev.5d06881d65c1b323.png) +![Domyślny interfejs VSCode.dev](../../../../translated_images/pl/default-vscode-dev.5d06881d65c1b323.webp) **Oto wycieczka po okolicy:** - **Pasek aktywności** (ta pionowa listwa po lewej): Twoja główna nawigacja z eksploratorem 📁, wyszukiwaniem 🔍, kontrolą źródła 🌿, rozszerzeniami 🧩 i ustawieniami ⚙️ @@ -229,7 +229,7 @@ Idealna, gdy zaczynasz w VSCode.dev i chcesz otworzyć konkretne repozytorium. P 1. Wejdź na [vscode.dev](https://vscode.dev) jeśli jeszcze tam nie jesteś 2. Znajdź przycisk „Open Remote Repository” na ekranie powitalnym i kliknij go - ![Otwórz zdalne repozytorium](../../../../translated_images/pl/open-remote-repository.bd9c2598b8949e7f.png) + ![Otwórz zdalne repozytorium](../../../../translated_images/pl/open-remote-repository.bd9c2598b8949e7f.webp) 3. Wklej dowolny adres repozytorium GitHub (np. `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. Naciśnij Enter i zobacz, jak działa magia! @@ -238,7 +238,7 @@ Idealna, gdy zaczynasz w VSCode.dev i chcesz otworzyć konkretne repozytorium. P Chcesz poczuć się jak czarodziej kodu? Wypróbuj skrót klawiszowy: Ctrl+Shift+P (lub Cmd+Shift+P na Macu) by otworzyć Command Palette: -![Command Palette](../../../../translated_images/pl/palette-menu.4946174e07f42622.png) +![Command Palette](../../../../translated_images/pl/palette-menu.4946174e07f42622.webp) **Command Palette to jak wyszukiwarka wszystkiego, co możesz zrobić:** - Wpisz "open remote", a znajdzie otwieracz repozytoriów @@ -300,7 +300,7 @@ Analogicznie do organizacji planów architektonicznych, tworzenie plików w VSCo 3. Wpisz nazwę pliku wraz z odpowiednim rozszerzeniem (`style.css`, `script.js`, `index.html`) 4. Naciśnij Enter, aby utworzyć plik -![Tworzenie nowego pliku](../../../../translated_images/pl/create-new-file.2814e609c2af9aeb.png) +![Tworzenie nowego pliku](../../../../translated_images/pl/create-new-file.2814e609c2af9aeb.webp) **Zasady nazewnictwa:** - Używaj opisowych nazw wskazujących cel pliku @@ -318,7 +318,7 @@ Tu zaczyna się prawdziwa zabawa! Edytor VSCode.dev jest wyposażony w funkcje u 2. Zacznij pisać i zobacz, jak VSCode.dev pomaga kolorami, podpowiedziami i wykrywaniem błędów 3. Zapisz pracę skrótem Ctrl+S (Windows/Linux) lub Cmd+S (Mac) – chociaż edytor zapisuje też automatycznie! -![Edycja pliku w VSCode.dev](../../../../translated_images/pl/edit-a-file.52c0ee665ef19f08.png) +![Edycja pliku w VSCode.dev](../../../../translated_images/pl/edit-a-file.52c0ee665ef19f08.webp) **Co się dzieje podczas pisania:** - Twój kod jest pięknie kolorowany dla lepszej czytelności @@ -339,7 +339,7 @@ Tak jak archeolodzy tworzą dokładne zapisy warstw wykopalisk, Git rejestruje z 2. Zmodyfikowane pliki pojawiają się w sekcji „Changes” (Zmiany) 3. Kolory wskazują typ zmian: zielony dla dodatków, czerwony dla usunięć -![Podgląd zmian w Kontroli Źródła](../../../../translated_images/pl/working-tree.c58eec08e6335c79.png) +![Podgląd zmian w Kontroli Źródła](../../../../translated_images/pl/working-tree.c58eec08e6335c79.webp) **Zapisywanie pracy (workflow commit):** @@ -431,7 +431,7 @@ Marketplace rozszerzeń jest naprawdę dobrze zorganizowany, więc nie zgubisz s 2. Przeglądaj lub wyszukaj coś konkretnego 3. Kliknij na wszystko, co wygląda ciekawie, żeby dowiedzieć się więcej -![Interfejs marketplace rozszerzeń](../../../../translated_images/pl/extensions.eca0e0c7f59a10b5.png) +![Interfejs marketplace rozszerzeń](../../../../translated_images/pl/extensions.eca0e0c7f59a10b5.webp) **Co tam zobaczysz:** @@ -484,7 +484,7 @@ Większość rozszerzeń ma ustawienia, które możesz zmieniać, aby działały 3. Wybierz „Extension Settings” z rozwijanego menu 4. Dostosuj ustawienia, aż poczujesz, że odpowiadają Twojemu workflow -![Dostosowywanie ustawień rozszerzeń](../../../../translated_images/pl/extension-settings.21c752ae4f4cdb78.png) +![Dostosowywanie ustawień rozszerzeń](../../../../translated_images/pl/extension-settings.21c752ae4f4cdb78.webp) **Typowe rzeczy, które możesz chcieć zmienić:** - Jak formatowany jest kod (tabulatory vs spacje, długość linii itd.) diff --git a/translations/pl/8-code-editor/1-using-a-code-editor/assignment.md b/translations/pl/8-code-editor/1-using-a-code-editor/assignment.md index b78a5dd67..8d56480b5 100644 --- a/translations/pl/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/pl/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ Ponieważ VSCode.dev wymaga co najmniej jednego pliku do otwarcia repozytorium, 4. **Napisz** komunikat commita: "Add initial HTML structure" 5. **Kliknij** "Commit new file", aby zapisać zmiany -![Tworzenie pliku początkowego na GitHub](../../../../translated_images/pl/new-file-github.com.c886796d800e8056.png) +![Tworzenie pliku początkowego na GitHub](../../../../translated_images/pl/new-file-github.com.c886796d800e8056.webp) **Co osiąga ta początkowa konfiguracja:** - **Ustala** poprawną strukturę dokumentu HTML5 z semantycznymi elementami @@ -104,7 +104,7 @@ Gdy podstawy repozytorium są już gotowe, przejdźmy do VSCode.dev aby wykonać ✅ **Wskaźnik sukcesu**: Powinieneś zobaczyć pliki projektu w panelu Explorer oraz `index.html` dostępny do edycji na głównym ekranie. -![Projekt załadowany w VSCode.dev](../../../../translated_images/pl/project-on-vscode.dev.e79815a9a95ee7fe.png) +![Projekt załadowany w VSCode.dev](../../../../translated_images/pl/project-on-vscode.dev.e79815a9a95ee7fe.webp) **Co zobaczysz w interfejsie:** - **Panel Explorer**: **Wyświetla** pliki i strukturę folderów repozytorium @@ -448,7 +448,7 @@ Rozszerzenia wzbogacają Twoje środowisko pracy, oferując m.in. podgląd na ż **Natychmiastowe efekty po instalacji:** Po zainstalowaniu CodeSwing zobaczysz podgląd swojego CV na żywo w edytorze. Pozwala to dokładnie widzieć, jak wygląda strona podczas wprowadzania zmian. -![Rozszerzenie CodeSwing pokazujące podgląd na żywo](../../../../translated_images/pl/after-codeswing-extension-pb.0ebddddcf73b5509.png) +![Rozszerzenie CodeSwing pokazujące podgląd na żywo](../../../../translated_images/pl/after-codeswing-extension-pb.0ebddddcf73b5509.webp) **Zrozumienie ulepszonego interfejsu:** - **Widok podzielony**: **Pokazuje** kod po jednej stronie i podgląd na żywo po drugiej diff --git a/translations/pl/9-chat-project/README.md b/translations/pl/9-chat-project/README.md index b6be76751..4f82a0c44 100644 --- a/translations/pl/9-chat-project/README.md +++ b/translations/pl/9-chat-project/README.md @@ -60,7 +60,7 @@ print(response.choices[0].message.content) Oto jak będzie wyglądał Twój ukończony projekt: -![Interfejs aplikacji czatu pokazujący rozmowę między użytkownikiem a asystentem AI](../../../translated_images/pl/screenshot.0a1ee0d123df681b.png) +![Interfejs aplikacji czatu pokazujący rozmowę między użytkownikiem a asystentem AI](../../../translated_images/pl/screenshot.0a1ee0d123df681b.webp) ## 🗺️ Twoja podróż edukacyjna przez rozwój aplikacji AI @@ -189,7 +189,7 @@ mindmap ``` **Główna zasada**: rozwój aplikacji AI łączy tradycyjne umiejętności tworzenia stron internetowych z integracją usług AI, tworząc inteligentne aplikacje, które są naturalne i responsywne dla użytkowników. -![Interfejs GitHub Models AI Playground z wyborem modeli i obszarem testowym](../../../translated_images/pl/playground.d2b927122224ff8f.png) +![Interfejs GitHub Models AI Playground z wyborem modeli i obszarem testowym](../../../translated_images/pl/playground.d2b927122224ff8f.webp) **Co sprawia, że playground jest tak przydatny:** - **Wypróbuj** różne modele AI, takie jak GPT-4o-mini, Claude i inne (wszystkie darmowe!) @@ -199,7 +199,7 @@ mindmap Po zabawie po prostu kliknij zakładkę „Code” i wybierz język programowania, aby otrzymać potrzebny kod implementacyjny. -![Wybór w playground pokazujący opcje generowania kodu dla różnych języków programowania](../../../translated_images/pl/playground-choice.1d23ba7d407f4758.png) +![Wybór w playground pokazujący opcje generowania kodu dla różnych języków programowania](../../../translated_images/pl/playground-choice.1d23ba7d407f4758.webp) ## Konfiguracja integracji backendowej w Pythonie @@ -2352,14 +2352,14 @@ Chcesz wypróbować ten projekt w chmurowym środowisku deweloperskim? GitHub Co - **Przejdź** do repozytorium [Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners) - **Kliknij** "Use this template" w prawym górnym rogu (upewnij się, że jesteś zalogowany do GitHub) -![Create from template interface showing the green "Use this template" button](../../../translated_images/pl/template.67ad477109d29a2b.png) +![Create from template interface showing the green "Use this template" button](../../../translated_images/pl/template.67ad477109d29a2b.webp) **Krok 2: Uruchom Codespaces** - **Otwórz** utworzone repozytorium - **Kliknij** zielony przycisk "Code" i wybierz "Codespaces" - **Wybierz** "Create codespace on main", aby rozpocząć środowisko deweloperskie -![Create codespace interface with options for launching cloud development environment](../../../translated_images/pl/codespace.bcecbdf5d2747d3d.png) +![Create codespace interface with options for launching cloud development environment](../../../translated_images/pl/codespace.bcecbdf5d2747d3d.webp) **Krok 3: Konfiguracja środowiska** Po załadowaniu Codespace uzyskasz dostęp do: diff --git a/translations/pl/README.md b/translations/pl/README.md index 668b9168b..2f0f7767d 100644 --- a/translations/pl/README.md +++ b/translations/pl/README.md @@ -72,13 +72,13 @@ Nie przegap naszego nowego programu Generatywnej AI! Odwiedź [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), aby zacząć! -![Tło](../../translated_images/pl/background.148a8d43afde5730.png) +![Tło](../../translated_images/pl/background.148a8d43afde5730.webp) - Lekcje obejmujące wszystko od podstaw po RAG. - Interakcje z postaciami historycznymi za pomocą GenAI i naszej aplikacji towarzyszącej. - Zabawna i angażująca narracja, będziesz podróżować w czasie! -![postać](../../translated_images/pl/character.5c0dd8e067ffd693.png) +![postać](../../translated_images/pl/character.5c0dd8e067ffd693.webp) Każda lekcja zawiera zadanie do wykonania, sprawdzanie wiedzy oraz wyzwanie, które poprowadzą Cię po tematach takich jak: - Tworzenie i inżynieria promptów @@ -112,7 +112,7 @@ Wykonaj następujące kroki: W swojej kopii tego repozytorium, którą utworzyłeś, kliknij przycisk **Code** i wybierz **Open with Codespaces**. To utworzy nowy Codespace do pracy. -![Codespace](../../translated_images/pl/createcodespace.0238bbf4d7a8d955.png) +![Codespace](../../translated_images/pl/createcodespace.0238bbf4d7a8d955.webp) #### Uruchamianie programu lokalnie na komputerze diff --git a/translations/pl/for-teachers.md b/translations/pl/for-teachers.md index 09f2bcfe0..2e76deb82 100644 --- a/translations/pl/for-teachers.md +++ b/translations/pl/for-teachers.md @@ -42,10 +42,10 @@ Ten program nauczania zawiera pakiety do importowania dla popularnych przepływ - Moodle Cloud ma ograniczone wsparcie dla Common Cartridge. Preferuj powyższy plik Moodle, który można również przesłać do Canvas. - Po zaimportowaniu przejrzyj moduły, terminy i ustawienia quizów, aby dopasować je do harmonogramu semestru. -![Moodle](../../translated_images/pl/moodle.94eb93d714a50cb2.png) +![Moodle](../../translated_images/pl/moodle.94eb93d714a50cb2.webp) > Program nauczania w klasie Moodle -![Canvas](../../translated_images/pl/canvas.fbd605ff8e5b8aff.png) +![Canvas](../../translated_images/pl/canvas.fbd605ff8e5b8aff.webp) > Program nauczania w Canvas ### Korzystanie bezpośrednio z repozytorium (bez Classroom) diff --git a/translations/pt/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/pt/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 347e9cfe8..2782388b9 100644 --- a/translations/pt/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/pt/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ Olha, eu entendo perfeitamente se a programação te parecer intimidante neste m Hoje, vamos explorar as ferramentas incríveis que tornam o desenvolvimento web moderno não só possível, mas mesmo viciante. Estou a falar dos mesmos editores, browsers e fluxos de trabalho que os programadores da Netflix, Spotify e do teu estúdio indie favorito usam todos os dias. E aqui está a parte que te vai fazer dançar de alegria: a maioria destas ferramentas profissionais e padrão na indústria é completamente gratuita! -![Intro Programming](../../../../translated_images/pt/webdev101-programming.d6e3f98e61ac4bff.png) +![Intro Programming](../../../../translated_images/pt/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/pt/1-getting-started-lessons/2-github-basics/README.md b/translations/pt/1-getting-started-lessons/2-github-basics/README.md index cb1ad0e8b..b38b7cd0f 100644 --- a/translations/pt/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/pt/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ Sei que isto pode parecer muito no início – até eu me lembro de olhar para a Vamos fazer esta viagem juntos, passo a passo. Sem pressas, sem pressão – só tu, eu, e algumas ferramentas realmente fixes que vão passar a ser os teus novos melhores amigos! -![Intro to GitHub](../../../../translated_images/pt/webdev101-github.8846d7971abef6f9.png) +![Intro to GitHub](../../../../translated_images/pt/webdev101-github.8846d7971abef6f9.webp) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -605,7 +605,7 @@ Primeiro, vamos encontrar um repositório (ou **repo**) no GitHub que seja do se ✅ Uma boa forma de encontrar repositórios 'amigáveis para iniciantes' é [pesquisar pela tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Copiar um repo localmente](../../../../translated_images/pt/clone_repo.5085c48d666ead57.png) +![Copiar um repo localmente](../../../../translated_images/pt/clone_repo.5085c48d666ead57.webp) Existem várias formas de copiar código. Uma forma é "clonar" o conteúdo do repositório, usando HTTPS, SSH, ou usando o GitHub CLI (Interface de Linha de Comandos do GitHub). diff --git a/translations/pt/1-getting-started-lessons/3-accessibility/README.md b/translations/pt/1-getting-started-lessons/3-accessibility/README.md index 68abeee07..4a145d6a0 100644 --- a/translations/pt/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/pt/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Criar Páginas Web Acessíveis -![Tudo sobre Acessibilidade](../../../../translated_images/pt/webdev101-a11y.8ef3025c858d897a.png) +![Tudo sobre Acessibilidade](../../../../translated_images/pt/webdev101-a11y.8ef3025c858d897a.webp) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/pt/2-js-basics/1-data-types/README.md b/translations/pt/2-js-basics/1-data-types/README.md index b2bdb482b..85215e2df 100644 --- a/translations/pt/2-js-basics/1-data-types/README.md +++ b/translations/pt/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Fundamentos de JavaScript: Tipos de Dados -![JavaScript Basics - Data types](../../../../translated_images/pt/webdev101-js-datatypes.4cc470179730702c.png) +![JavaScript Basics - Data types](../../../../translated_images/pt/webdev101-js-datatypes.4cc470179730702c.webp) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/pt/2-js-basics/2-functions-methods/README.md b/translations/pt/2-js-basics/2-functions-methods/README.md index c4664aacd..b9420900b 100644 --- a/translations/pt/2-js-basics/2-functions-methods/README.md +++ b/translations/pt/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Fundamentos do JavaScript: Métodos e Funções -![Fundamentos do JavaScript - Funções](../../../../translated_images/pt/webdev101-js-functions.be049c4726e94f8b.png) +![Fundamentos do JavaScript - Funções](../../../../translated_images/pt/webdev101-js-functions.be049c4726e94f8b.webp) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/pt/2-js-basics/3-making-decisions/README.md b/translations/pt/2-js-basics/3-making-decisions/README.md index 0ff812b22..2cb8b33b3 100644 --- a/translations/pt/2-js-basics/3-making-decisions/README.md +++ b/translations/pt/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Conceitos Básicos de JavaScript: Tomando Decisões -![JavaScript Basics - Making decisions](../../../../translated_images/pt/webdev101-js-decisions.69e1b20f272dd1f0.png) +![JavaScript Basics - Making decisions](../../../../translated_images/pt/webdev101-js-decisions.69e1b20f272dd1f0.webp) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/pt/2-js-basics/4-arrays-loops/README.md b/translations/pt/2-js-basics/4-arrays-loops/README.md index 0c56b5de8..e12d3ca92 100644 --- a/translations/pt/2-js-basics/4-arrays-loops/README.md +++ b/translations/pt/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript Básico: Arrays e Loops -![JavaScript Básico - Arrays](../../../../translated_images/pt/webdev101-js-arrays.439d7528b8a29455.png) +![JavaScript Básico - Arrays](../../../../translated_images/pt/webdev101-js-arrays.439d7528b8a29455.webp) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/pt/3-terrarium/1-intro-to-html/README.md b/translations/pt/3-terrarium/1-intro-to-html/README.md index afc2d7a85..9281f49de 100644 --- a/translations/pt/3-terrarium/1-intro-to-html/README.md +++ b/translations/pt/3-terrarium/1-intro-to-html/README.md @@ -25,7 +25,7 @@ journey Enhance accessibility: 5: Student Build terrarium: 5: Student ``` -![Introdução ao HTML](../../../../translated_images/pt/webdev101-html.4389c2067af68e98.png) +![Introdução ao HTML](../../../../translated_images/pt/webdev101-html.4389c2067af68e98.webp) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) HTML, ou HyperText Markup Language, é a base de todos os websites que alguma vez visitou. Pense no HTML como o esqueleto que dá estrutura às páginas web – define onde o conteúdo vai, como está organizado e o que cada parte representa. Enquanto o CSS mais tarde vai "vestir" o seu HTML com cores e layouts, e o JavaScript dará vida com interatividade, o HTML fornece a estrutura essencial que torna tudo o resto possível. @@ -86,7 +86,7 @@ Vai criar uma pasta dedicada para o seu projeto terrário e adicionar o seu prim 4. No painel Explorer, clique no ícone "New File" 5. Dê ao seu ficheiro o nome `index.html` -![Explorador do VS Code a mostrar criação de novo ficheiro](../../../../translated_images/pt/vs-code-index.e2986cf919471eb9.png) +![Explorador do VS Code a mostrar criação de novo ficheiro](../../../../translated_images/pt/vs-code-index.e2986cf919471eb9.webp) **Opção 2: Usar Comandos de Terminal** ```bash diff --git a/translations/pt/3-terrarium/2-intro-to-css/README.md b/translations/pt/3-terrarium/2-intro-to-css/README.md index 0587b97d2..4bb99f500 100644 --- a/translations/pt/3-terrarium/2-intro-to-css/README.md +++ b/translations/pt/3-terrarium/2-intro-to-css/README.md @@ -29,7 +29,7 @@ journey Design responsivo: 5: Student Reflexos em vidro: 5: Student ``` -![Introdução ao CSS](../../../../translated_images/pt/webdev101-css.3f7af5991bf53a20.png) +![Introdução ao CSS](../../../../translated_images/pt/webdev101-css.3f7af5991bf53a20.webp) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) Lembras-te como o teu terrário HTML parecia bastante básico? O CSS é onde transformamos essa estrutura simples numa coisa visualmente apelativa. @@ -202,7 +202,7 @@ body { Abre as ferramentas de desenvolvedor do teu navegador (F12), vai ao separador Elements (Elementos) e inspeciona o teu elemento `

`. Vais ver que herda a família de fontes do body: -![font herdada](../../../../translated_images/pt/1.cc07a5cbe114ad1d.png) +![font herdada](../../../../translated_images/pt/1.cc07a5cbe114ad1d.webp) ✅ **Hora do Experimento**: Experimenta definir outras propriedades herdáveis no `` como `color`, `line-height` ou `text-align`. O que acontece ao teu título e a outros elementos? @@ -594,7 +594,7 @@ Preparado para melhorar o teu terrário com reflexos realistas de vidro? Esta t Vais criar destaques subtis que simulam como a luz se reflete em superfícies de vidro. Esta abordagem é semelhante à utilizada por pintores renascentistas como Jan van Eyck, que usavam luz e reflexão para tornar o vidro pintado tridimensional. Eis o que queres alcançar: -![terrário acabado](../../../../translated_images/pt/terrarium-final.2f07047ffc597d0a.png) +![terrário acabado](../../../../translated_images/pt/terrarium-final.2f07047ffc597d0a.webp) **O teu desafio:** - **Criar** formas ovais subtis brancas ou de cores claras para os reflexos no vidro diff --git a/translations/pt/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/pt/3-terrarium/3-intro-to-DOM-and-closures/README.md index 1cec6e652..7f8b910df 100644 --- a/translations/pt/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/pt/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -25,7 +25,7 @@ journey Testar funcionalidade: 5: Student Completar terrário: 5: Student ``` -![DOM e um closure](../../../../translated_images/pt/webdev101-js.10280393044d7eaa.png) +![DOM e um closure](../../../../translated_images/pt/webdev101-js.10280393044d7eaa.webp) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) Bem-vindo a um dos aspetos mais envolventes do desenvolvimento web - tornar as coisas interativas! O Modelo de Objeto de Documento (DOM) é como uma ponte entre o seu HTML e JavaScript, e hoje iremos usá-lo para dar vida ao seu terrário. Quando Tim Berners-Lee criou o primeiro navegador web, ele imaginou uma web onde os documentos poderiam ser dinâmicos e interativos - o DOM torna essa visão possível. @@ -102,7 +102,7 @@ flowchart TD style P fill:#ffebee style Q fill:#ffebee ``` -![Representação da árvore DOM](../../../../translated_images/pt/dom-tree.7daf0e763cbbba92.png) +![Representação da árvore DOM](../../../../translated_images/pt/dom-tree.7daf0e763cbbba92.webp) > Uma representação do DOM e da marcação HTML que o referencia. De [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -146,7 +146,7 @@ flowchart LR ``` > 💡 **Compreender Closures**: Closures são um tema importante em JavaScript, e muitos programadores usam-nas durante anos antes de entenderem completamente todos os aspetos teóricos. Hoje, estamos focados na aplicação prática - verá as closures surgir naturalmente enquanto construímos as funcionalidades interativas. A compreensão desenvolver-se-á à medida que perceber como resolvem problemas reais. -![Representação da árvore DOM](../../../../translated_images/pt/dom-tree.7daf0e763cbbba92.png) +![Representação da árvore DOM](../../../../translated_images/pt/dom-tree.7daf0e763cbbba92.webp) > Uma representação do DOM e da marcação HTML que o referencia. De [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -591,7 +591,7 @@ Agora teste o seu terrário interativo! Abra o ficheiro `index.html` num browser - **Suporte multi-dispositivo**: Funciona em desktop e móvel - **Consciência de desempenho**: Sem fugas de memória ou cálculos redundantes -![terrário terminado](../../../../translated_images/pt/terrarium-final.0920f16e87c13a84.png) +![terrário terminado](../../../../translated_images/pt/terrarium-final.0920f16e87c13a84.webp) --- diff --git a/translations/pt/5-browser-extension/1-about-browsers/README.md b/translations/pt/5-browser-extension/1-about-browsers/README.md index 0628bcd9f..570f95f4a 100644 --- a/translations/pt/5-browser-extension/1-about-browsers/README.md +++ b/translations/pt/5-browser-extension/1-about-browsers/README.md @@ -25,7 +25,7 @@ journey Depurar problemas: 4: Student Aperfeiçoar experiência: 5: Student ``` -![Browser sketchnote](../../../../translated_images/pt/browser.60317c9be8b7f84a.jpg) +![Browser sketchnote](../../../../translated_images/pt/browser.60317c9be8b7f84a.webp) > Sketchnote por [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## Questionário Pré-Aula @@ -77,7 +77,7 @@ Este processo reflete como o primeiro navegador web, WorldWideWeb, foi criado po ✅ **Um pouco de história**: O primeiro navegador chamou-se 'WorldWideWeb' e foi criado por Sir Timothy Berners-Lee em 1990. -![early browsers](../../../../translated_images/pt/earlybrowsers.d984b711cdf3a42d.jpg) +![early browsers](../../../../translated_images/pt/earlybrowsers.d984b711cdf3a42d.webp) > Alguns navegadores iniciais, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### Como os Navegadores Processam o Conteúdo Web @@ -194,7 +194,7 @@ quadrantChart Compreender o processo de instalação de extensões ajuda a antecipar a experiência do utilizador ao instalar a sua extensão. O processo de instalação está padronizado nos navegadores modernos, com pequenas variações no design da interface. -![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/pt/install-on-edge.d68781acaf0b3d3d.png) +![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/pt/install-on-edge.d68781acaf0b3d3d.webp) > **Importante**: Certifique-se de ativar o modo de desenvolvedor e permitir extensões de outras lojas ao testar as suas próprias extensões. @@ -308,10 +308,10 @@ Isto segue o princípio da divulgação progressiva utilizado no design de inter ### Visão Geral das Vistas da Extensão **Vista de Configuração** – Configuração do utilizador pela primeira vez: -![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/pt/1.b6da8c1394b07491.png) +![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/pt/1.b6da8c1394b07491.webp) **Vista de Resultados** – Exibição dos dados da pegada de carbono: -![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/pt/2.1dae52ff08042246.png) +![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/pt/2.1dae52ff08042246.webp) ### Construir o Formulário de Configuração diff --git a/translations/pt/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/pt/5-browser-extension/2-forms-browsers-local-storage/README.md index 7f52a64a4..ac56f5550 100644 --- a/translations/pt/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/pt/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -263,7 +263,7 @@ stateDiagram-v2 Reset --> ClearStorage: Remover dados guardados ClearStorage --> FirstTime: Voltar à configuração ``` -![Painel de armazenamento local](../../../../translated_images/pt/localstorage.472f8147b6a3f8d1.png) +![Painel de armazenamento local](../../../../translated_images/pt/localstorage.472f8147b6a3f8d1.webp) > ⚠️ **Consideração de Segurança**: Em aplicações de produção, armazenar chaves API no LocalStorage implica riscos de segurança, pois o JavaScript pode aceder a estes dados. Para fins de aprendizagem, esta abordagem funciona bem, mas aplicações reais devem usar armazenamento seguro do lado do servidor para credenciais sensíveis. diff --git a/translations/pt/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/pt/5-browser-extension/3-background-tasks-and-performance/README.md index 0da27c859..448a5709a 100644 --- a/translations/pt/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/pt/5-browser-extension/3-background-tasks-and-performance/README.md @@ -123,7 +123,7 @@ Para abrir as Ferramentas de Desenvolvimento no Edge, clique nos três pontos no Vamos experimentar. Abra um website (o Microsoft.com funciona bem para isto) e clique no botão 'Gravar'. Agora recarregue a página e observe o perfilador capturar tudo o que acontece. Quando parar a gravação, verá uma descrição detalhada de como o navegador 'script', 'renderiza' e 'pinta' o site. Lembra-me de como o centro de controlo da missão monitoriza todos os sistemas durante o lançamento de um foguetão – obtém dados em tempo real exatamente sobre o que está a acontecer e quando. -![Edge profiler](../../../../translated_images/pt/profiler.5a4a62479c5df01c.png) +![Edge profiler](../../../../translated_images/pt/profiler.5a4a62479c5df01c.webp) ✅ A [Documentação da Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) tem muitos mais detalhes se quiser aprofundar @@ -133,11 +133,11 @@ Selecione elementos da linha do tempo do perfil para ampliar eventos que acontec Obtenha um instantâneo do desempenho da sua página selecionando uma parte da linha do tempo do perfil e olhando para o painel de resumo: -![Edge profiler snapshot](../../../../translated_images/pt/snapshot.97750180ebcad737.png) +![Edge profiler snapshot](../../../../translated_images/pt/snapshot.97750180ebcad737.webp) Verifique o painel do Registo de Eventos para ver se algum evento demorou mais de 15 ms: -![Edge event log](../../../../translated_images/pt/log.804026979f3707e0.png) +![Edge event log](../../../../translated_images/pt/log.804026979f3707e0.webp) ✅ Conheça o seu perfilador! Abra as ferramentas de desenvolvimento neste site e veja se há algum estrangulamento. Qual o recurso que demora mais a carregar? E o mais rápido? diff --git a/translations/pt/6-space-game/2-drawing-to-canvas/README.md b/translations/pt/6-space-game/2-drawing-to-canvas/README.md index 97ba79c54..12b73111f 100644 --- a/translations/pt/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/pt/6-space-game/2-drawing-to-canvas/README.md @@ -105,7 +105,7 @@ quadrantChart Power-up: [0.7, 0.6] UI Elements: [0.9, 0.1] ``` -![a grelha do canvas](../../../../translated_images/pt/canvas_grid.5f209da785ded492.png) +![a grelha do canvas](../../../../translated_images/pt/canvas_grid.5f209da785ded492.webp) > Imagem de [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) Para desenhar no elemento canvas, vai seguir o mesmo processo em três passos que forma a base de todos os gráficos em canvas. Depois de o fazer algumas vezes, torna-se natural: @@ -323,11 +323,11 @@ Vai construir uma página web com um elemento Canvas. Deve renderizar um ecrã p - Nave herói - ![Nave herói](../../../../translated_images/pt/player.dd24c1afa8c71e9b.png) + ![Nave herói](../../../../translated_images/pt/player.dd24c1afa8c71e9b.webp) - Monstro 5*5 - ![Nave monstro](../../../../translated_images/pt/enemyShip.5df2a822c16650c2.png) + ![Nave monstro](../../../../translated_images/pt/enemyShip.5df2a822c16650c2.webp) ### Passos recomendados para começar o desenvolvimento @@ -463,7 +463,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { O resultado final deve parecer assim: -![Ecrã preto com um herói e 5*5 monstros](../../../../translated_images/pt/partI-solution.36c53b48c9ffae2a.png) +![Ecrã preto com um herói e 5*5 monstros](../../../../translated_images/pt/partI-solution.36c53b48c9ffae2a.webp) ## Solução diff --git a/translations/pt/6-space-game/5-keeping-score/README.md b/translations/pt/6-space-game/5-keeping-score/README.md index 1489c838f..744b2be3b 100644 --- a/translations/pt/6-space-game/5-keeping-score/README.md +++ b/translations/pt/6-space-game/5-keeping-score/README.md @@ -155,7 +155,7 @@ sequenceDiagram end ``` - **Sistema de pontuação**: Cada nave inimiga destruída atribui 100 pontos (números arredondados são mais fáceis para os jogadores calcularem mentalmente). A pontuação é mostrada no canto inferior esquerdo. -- **Contador de vidas**: O teu herói começa com três vidas - um padrão estabelecido pelos primeiros jogos arcade para equilibrar desafio e jogabilidade. Cada colisão com um inimigo custa uma vida. Vamos mostrar as vidas restantes no canto inferior direito usando ícones de navio ![life image](../../../../translated_images/pt/life.6fb9f50d53ee0413.png). +- **Contador de vidas**: O teu herói começa com três vidas - um padrão estabelecido pelos primeiros jogos arcade para equilibrar desafio e jogabilidade. Cada colisão com um inimigo custa uma vida. Vamos mostrar as vidas restantes no canto inferior direito usando ícones de navio ![life image](../../../../translated_images/pt/life.6fb9f50d53ee0413.webp). ## Vamos Construir! diff --git a/translations/pt/7-bank-project/1-template-route/README.md b/translations/pt/7-bank-project/1-template-route/README.md index 7dbcca081..526716be7 100644 --- a/translations/pt/7-bank-project/1-template-route/README.md +++ b/translations/pt/7-bank-project/1-template-route/README.md @@ -644,7 +644,7 @@ sequenceDiagram Usar `history.pushState` cria novas entradas no histórico de navegação do browser. Pode verificar isso segurando o *botão de retrocesso* do seu browser, deverá aparecer algo assim: -![Screenshot of navigation history](../../../../translated_images/pt/history.7fdabbafa521e064.png) +![Screenshot of navigation history](../../../../translated_images/pt/history.7fdabbafa521e064.webp) Se tentar clicar várias vezes no botão de retrocesso, verá que a URL atual muda e o histórico é atualizado, mas o mesmo template continua a ser mostrado. diff --git a/translations/pt/7-bank-project/2-forms/README.md b/translations/pt/7-bank-project/2-forms/README.md index 0fcb9adf9..564547cc9 100644 --- a/translations/pt/7-bank-project/2-forms/README.md +++ b/translations/pt/7-bank-project/2-forms/README.md @@ -292,7 +292,7 @@ Primeiro, observe o que acontece com a submissão básica do formulário: 2. Observe as mudanças na barra de endereço do navegador 3. Repare como a página recarrega e os dados aparecem na URL -![Captura de ecrã da alteração da URL do navegador após clicar no botão Registar](../../../../translated_images/pt/click-register.e89a30bf0d4bc9ca.png) +![Captura de ecrã da alteração da URL do navegador após clicar no botão Registar](../../../../translated_images/pt/click-register.e89a30bf0d4bc9ca.webp) ### Comparação dos Métodos HTTP @@ -346,7 +346,7 @@ Vamos configurar o seu formulário de registo para comunicar corretamente com a 2. **Clique** no botão "Criar Conta" 3. **Observe** a resposta do servidor no seu navegador -![Janela do navegador com o endereço localhost:5000/api/accounts, mostrando uma string JSON com dados do utilizador](../../../../translated_images/pt/form-post.61de4ca1b964d91a.png) +![Janela do navegador com o endereço localhost:5000/api/accounts, mostrando uma string JSON com dados do utilizador](../../../../translated_images/pt/form-post.61de4ca1b964d91a.webp) **O que deverá ver:** - **O navegador redireciona** para a URL do endpoint da API @@ -609,7 +609,7 @@ async function register() { 3. **Clique** em "Criar Conta" 4. **Observe** as mensagens na consola e o feedback ao utilizador -![Screenshot mostrando mensagem de registo na consola do navegador](../../../../translated_images/pt/browser-console.efaf0b51aaaf6778.png) +![Screenshot mostrando mensagem de registo na consola do navegador](../../../../translated_images/pt/browser-console.efaf0b51aaaf6778.webp) **O que deve observar:** - **Estado de carregamento** aparece no botão de envio @@ -783,7 +783,7 @@ Vamos reforçar o seu formulário de registo com validação robusta que fornece 3. **Tente** caracteres especiais no campo do nome de utilizador 4. **Introduza** um valor negativo no saldo -![Captura de ecrã mostrando erro de validação ao tentar submeter o formulário](../../../../translated_images/pt/validation-error.8bd23e98d416c22f.png) +![Captura de ecrã mostrando erro de validação ao tentar submeter o formulário](../../../../translated_images/pt/validation-error.8bd23e98d416c22f.webp) **O que irá observar:** - **O navegador exibe** mensagens de validação nativas @@ -943,7 +943,7 @@ Mostre uma mensagem de erro no HTML se o utilizador já existir. Aqui está um exemplo de como pode ficar a página de login final após alguma estilização: -![Screenshot da página de login após adicionar estilos CSS](../../../../translated_images/pt/result.96ef01f607bf856a.png) +![Screenshot da página de login após adicionar estilos CSS](../../../../translated_images/pt/result.96ef01f607bf856a.webp) ## Quiz Pós-Lição diff --git a/translations/pt/7-bank-project/3-data/README.md b/translations/pt/7-bank-project/3-data/README.md index 541cf87a9..fe274703b 100644 --- a/translations/pt/7-bank-project/3-data/README.md +++ b/translations/pt/7-bank-project/3-data/README.md @@ -156,7 +156,7 @@ sequenceDiagram Server->>Browser: Devolve página HTML completa Browser->>User: Mostra nova página (flash/recarregamento) ``` -![Fluxo de atualização numa aplicação de múltiplas páginas](../../../../translated_images/pt/mpa.7f7375a1a2d4aa77.png) +![Fluxo de atualização numa aplicação de múltiplas páginas](../../../../translated_images/pt/mpa.7f7375a1a2d4aa77.webp) **Porque este método parecia pesado:** - Cada clique implicava reconstruir a página inteira do zero @@ -182,7 +182,7 @@ sequenceDiagram JavaScript->>Browser: Actualiza elementos específicos da página Browser->>User: Mostra conteúdo actualizado (sem recarregar) ``` -![Fluxo de atualização numa aplicação de página única](../../../../translated_images/pt/spa.268ec73b41f992c2.png) +![Fluxo de atualização numa aplicação de página única](../../../../translated_images/pt/spa.268ec73b41f992c2.webp) **Porque é que as SPAs parecem muito melhores:** - Só as partes que realmente mudaram são atualizadas (inteligente, certo?) @@ -516,7 +516,7 @@ if (data.error) { Agora, quando testar com uma conta inválida, verá uma mensagem de erro útil diretamente na página! -![Screenshot mostrando a mensagem de erro exibida durante o login](../../../../translated_images/pt/login-error.416fe019b36a6327.png) +![Screenshot mostrando a mensagem de erro exibida durante o login](../../../../translated_images/pt/login-error.416fe019b36a6327.webp) #### Passo 4: Ser Inclusivo com Acessibilidade @@ -950,7 +950,7 @@ Pronto para levar a sua aplicação bancária para o próximo nível? Vamos torn Aqui está como um painel polido poderia parecer: -![Screenshot of an example result of the dashboard after styling](../../../../translated_images/pt/screen2.123c82a831a1d14a.png) +![Screenshot of an example result of the dashboard after styling](../../../../translated_images/pt/screen2.123c82a831a1d14a.webp) Não sinta que tem de corresponder exatamente a isto – use como inspiração e torne-o seu! diff --git a/translations/pt/7-bank-project/4-state-management/README.md b/translations/pt/7-bank-project/4-state-management/README.md index 351edea26..b3a00cffc 100644 --- a/translations/pt/7-bank-project/4-state-management/README.md +++ b/translations/pt/7-bank-project/4-state-management/README.md @@ -187,7 +187,7 @@ Como o design compartimentado do Titanic, que parecia robusto até múltiplos co Em vez de correr atrás do rabo, vamos criar um sistema **centralizado de gestão de estado**. Imagine uma pessoa muito organizada responsável por toda a informação importante: -![Schema mostrando os fluxos de dados entre o HTML, ações do utilizador e estado](../../../../translated_images/pt/data-flow.fa2354e0908fecc8.png) +![Schema mostrando os fluxos de dados entre o HTML, ações do utilizador e estado](../../../../translated_images/pt/data-flow.fa2354e0908fecc8.webp) ```mermaid flowchart TD @@ -800,7 +800,7 @@ Este desafio ajudará a pensar como um desenvolvedor profissional que considera Aqui está um exemplo do resultado após completar o trabalho: -![Screenshot mostrando um exemplo do diálogo "Adicionar transação"](../../../../translated_images/pt/dialog.93bba104afeb79f1.png) +![Screenshot mostrando um exemplo do diálogo "Adicionar transação"](../../../../translated_images/pt/dialog.93bba104afeb79f1.webp) --- diff --git a/translations/pt/7-bank-project/4-state-management/assignment.md b/translations/pt/7-bank-project/4-state-management/assignment.md index d1a066c7d..ed3818a21 100644 --- a/translations/pt/7-bank-project/4-state-management/assignment.md +++ b/translations/pt/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ Consulte a [documentação da API do servidor](../api/README.md) para: **Resultado Esperado:** Depois de concluir este exercício, a sua aplicação bancária deve ter uma funcionalidade "Adicionar Transação" totalmente funcional, com aparência e comportamento profissionais: -![Screenshot showing an example "Add transaction" dialog](../../../../translated_images/pt/dialog.93bba104afeb79f1.png) +![Screenshot showing an example "Add transaction" dialog](../../../../translated_images/pt/dialog.93bba104afeb79f1.webp) ## Testar a Sua Implementação diff --git a/translations/pt/8-code-editor/1-using-a-code-editor/README.md b/translations/pt/8-code-editor/1-using-a-code-editor/README.md index 3eb0632f2..a0c9d4032 100644 --- a/translations/pt/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/pt/8-code-editor/1-using-a-code-editor/README.md @@ -182,7 +182,7 @@ Tal como o telefone de Alexander Graham Bell ligou locais distantes, ligar a tua Quando tudo carregar, vais ver um espaço de trabalho lindamente limpo, desenhado para que te concentres no que realmente interessa – o teu código! -![Interface padrão do VSCode.dev](../../../../translated_images/pt/default-vscode-dev.5d06881d65c1b323.png) +![Interface padrão do VSCode.dev](../../../../translated_images/pt/default-vscode-dev.5d06881d65c1b323.webp) **Aqui está a tua visita guiada ao bairro:** - **Barra de Atividades** (aquela faixa à esquerda): A tua navegação principal com Explorador 📁, Pesquisa 🔍, Controlo de Código-Fonte 🌿, Extensões 🧩, e Definições ⚙️ @@ -229,7 +229,7 @@ Este método é perfeito quando estiveres a começar no VSCode.dev e quiseres ab 1. Vai a [vscode.dev](https://vscode.dev), se ainda não estiveres lá 2. Procura o botão "Open Remote Repository" na tela de boas-vindas e clica nele - ![Abrir repositório remoto](../../../../translated_images/pt/open-remote-repository.bd9c2598b8949e7f.png) + ![Abrir repositório remoto](../../../../translated_images/pt/open-remote-repository.bd9c2598b8949e7f.webp) 3. Cola qualquer URL de repositório GitHub (experimenta este: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. Pressiona Enter e vê a magia acontecer! @@ -238,7 +238,7 @@ Este método é perfeito quando estiveres a começar no VSCode.dev e quiseres ab Quer sentir-te um mago da programação? Experimenta este atalho de teclado: Ctrl+Shift+P (ou Cmd+Shift+P no Mac) para abrir o Command Palette: -![Command Palette](../../../../translated_images/pt/palette-menu.4946174e07f42622.png) +![Command Palette](../../../../translated_images/pt/palette-menu.4946174e07f42622.webp) **O Command Palette é como ter um motor de busca para tudo o que podes fazer:** - Escreve "open remote" e ele encontra a opção para abrir repositórios remotamente @@ -300,7 +300,7 @@ Tal como organizar plantas no escritório de um arquiteto, a criação de fichei 3. Introduz o nome do ficheiro incluindo a extensão apropriada (`style.css`, `script.js`, `index.html`) 4. Pressiona Enter para criar o ficheiro -![Criar um novo ficheiro](../../../../translated_images/pt/create-new-file.2814e609c2af9aeb.png) +![Criar um novo ficheiro](../../../../translated_images/pt/create-new-file.2814e609c2af9aeb.webp) **Convenções de nomes:** - Usa nomes descritivos que indiquem a finalidade do ficheiro @@ -318,7 +318,7 @@ Aqui começa a verdadeira diversão! O editor do VSCode.dev está recheado de fu 2. Começa a escrever e vê o VSCode.dev a ajudar-te com cores, sugestões e deteção de erros 3. Guarda o teu trabalho com Ctrl+S (Windows/Linux) ou Cmd+S (Mac) – embora também tenha gravação automática! -![Editar ficheiros no VSCode.dev](../../../../translated_images/pt/edit-a-file.52c0ee665ef19f08.png) +![Editar ficheiros no VSCode.dev](../../../../translated_images/pt/edit-a-file.52c0ee665ef19f08.webp) **As coisas fixes que acontecem enquanto codificas:** - O teu código fica lindamente colorido para facilitar a leitura @@ -339,7 +339,7 @@ Tal como arqueólogos criam registos detalhados das camadas de escavação, o Gi 2. Os ficheiros modificados aparecem na secção "Changes" 3. A codificação por cores indica tipos de alteração: verde para adições, vermelho para eliminações -![Ver alterações no Controlo de Código-Fonte](../../../../translated_images/pt/working-tree.c58eec08e6335c79.png) +![Ver alterações no Controlo de Código-Fonte](../../../../translated_images/pt/working-tree.c58eec08e6335c79.webp) **Guardar o teu trabalho (fluxo de trabalho de commit):** @@ -431,7 +431,7 @@ O mercado de extensões está muito bem organizado, por isso não se vai perder 2. Navegue ou procure algo específico 3. Clique em qualquer coisa que pareça interessante para saber mais -![Interface do mercado de extensões](../../../../translated_images/pt/extensions.eca0e0c7f59a10b5.png) +![Interface do mercado de extensões](../../../../translated_images/pt/extensions.eca0e0c7f59a10b5.webp) **O que vai encontrar lá:** @@ -484,7 +484,7 @@ A maioria das extensões vem com definições que pode ajustar para que funcione 3. Escolha "Definições da Extensão" no menu dropdown 4. Ajuste as opções até que se adequem perfeitamente ao seu fluxo de trabalho -![Personalizar definições da extensão](../../../../translated_images/pt/extension-settings.21c752ae4f4cdb78.png) +![Personalizar definições da extensão](../../../../translated_images/pt/extension-settings.21c752ae4f4cdb78.webp) **Coisas comuns que pode querer ajustar:** - Como o seu código fica formatado (tabs vs espaços, comprimento de linhas, etc.) diff --git a/translations/pt/8-code-editor/1-using-a-code-editor/assignment.md b/translations/pt/8-code-editor/1-using-a-code-editor/assignment.md index 9a17f3c2d..9e4fdf2e0 100644 --- a/translations/pt/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/pt/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ Como o VSCode.dev requer pelo menos um ficheiro para abrir um repositório, vamo 4. **Escreva** uma mensagem de commit: "Add initial HTML structure" 5. **Clique** em "Commit new file" para guardar as alterações -![Creating initial file on GitHub](../../../../translated_images/pt/new-file-github.com.c886796d800e8056.png) +![Creating initial file on GitHub](../../../../translated_images/pt/new-file-github.com.c886796d800e8056.webp) **Isto estabelece:** - **Uma estrutura** correta de documento HTML5 com elementos semânticos @@ -104,7 +104,7 @@ Agora que a base do seu repositório está estabelecida, vamos transitar para o ✅ **Indicador de sucesso**: Deve ver os ficheiros do projeto na barra lateral do Explorer e `index.html` disponível para edição na área principal do editor. -![Project loaded in VSCode.dev](../../../../translated_images/pt/project-on-vscode.dev.e79815a9a95ee7fe.png) +![Project loaded in VSCode.dev](../../../../translated_images/pt/project-on-vscode.dev.e79815a9a95ee7fe.webp) **O que verá na interface:** - **Barra lateral Explorer**: **Exibe** os ficheiros e pastas do seu repositório @@ -448,7 +448,7 @@ As extensões melhoram a sua experiência de desenvolvimento oferecendo capacida **Resultados imediatos após a instalação:** Assim que o CodeSwing estiver instalado, verá uma pré-visualização ao vivo do seu website de currículo surgir no editor. Isto permite que veja exatamente como o seu site aparece enquanto faz alterações. -![CodeSwing extension showing live preview](../../../../translated_images/pt/after-codeswing-extension-pb.0ebddddcf73b5509.png) +![CodeSwing extension showing live preview](../../../../translated_images/pt/after-codeswing-extension-pb.0ebddddcf73b5509.webp) **Compreender a interface melhorada:** - **Vista dividida**: **Mostra** o seu código de um lado e a pré-visualização do outro diff --git a/translations/pt/9-chat-project/README.md b/translations/pt/9-chat-project/README.md index db228134b..d041ff96a 100644 --- a/translations/pt/9-chat-project/README.md +++ b/translations/pt/9-chat-project/README.md @@ -60,7 +60,7 @@ print(response.choices[0].message.content) Eis como ficará o teu projeto terminado: -![Chat app interface showing conversation between user and AI assistant](../../../translated_images/pt/screenshot.0a1ee0d123df681b.png) +![Chat app interface showing conversation between user and AI assistant](../../../translated_images/pt/screenshot.0a1ee0d123df681b.webp) ## 🗺️ A Tua Jornada de Aprendizagem no Desenvolvimento de Aplicações com IA @@ -189,7 +189,7 @@ mindmap ``` **Princípio Fundamental**: O desenvolvimento de aplicações com IA combina competências tradicionais de desenvolvimento web com integração de serviços de IA, criando aplicações inteligentes que parecem naturais e responsivas para os utilizadores. -![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/pt/playground.d2b927122224ff8f.png) +![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/pt/playground.d2b927122224ff8f.webp) **Isto é o que torna o playground tão útil:** - **Experimenta** diferentes modelos de IA como GPT-4o-mini, Claude e outros (todos grátis!) @@ -199,7 +199,7 @@ mindmap Depois de brincares um pouco, basta clicares no separador "Code" e escolheres a tua linguagem de programação para obter o código de implementação que precisarás. -![Playground choice showing code generation options for different programming languages](../../../translated_images/pt/playground-choice.1d23ba7d407f4758.png) +![Playground choice showing code generation options for different programming languages](../../../translated_images/pt/playground-choice.1d23ba7d407f4758.webp) ## Configurar a Integração Backend em Python @@ -2351,14 +2351,14 @@ Quer experimentar este projeto num ambiente de desenvolvimento na nuvem? O GitHu - **Navegue** até ao [repositório Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners) - **Clique** em "Use this template" no canto superior direito (certifique-se que está autenticado no GitHub) -![Create from template interface showing the green "Use this template" button](../../../translated_images/pt/template.67ad477109d29a2b.png) +![Create from template interface showing the green "Use this template" button](../../../translated_images/pt/template.67ad477109d29a2b.webp) **Passo 2: Lançar Codespaces** - **Abra** o repositório recém-criado - **Clique** no botão verde "Code" e selecione "Codespaces" - **Escolha** "Create codespace on main" para iniciar o seu ambiente de desenvolvimento -![Create codespace interface with options for launching cloud development environment](../../../translated_images/pt/codespace.bcecbdf5d2747d3d.png) +![Create codespace interface with options for launching cloud development environment](../../../translated_images/pt/codespace.bcecbdf5d2747d3d.webp) **Passo 3: Configuração do Ambiente** Quando o seu Codespace carregar, terá acesso a: diff --git a/translations/pt/README.md b/translations/pt/README.md index ff5e0069e..6192cb2e9 100644 --- a/translations/pt/README.md +++ b/translations/pt/README.md @@ -72,13 +72,13 @@ Não percas o nosso novo currículo de IA Generativa! Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para começar! -![Background](../../translated_images/pt/background.148a8d43afde5730.png) +![Background](../../translated_images/pt/background.148a8d43afde5730.webp) - Lições cobrindo tudo desde o básico até RAG. - Interage com personagens históricos usando GenAI e a nossa aplicação acompanhante. - Narrativa divertida e envolvente, vais viajar no tempo! -![character](../../translated_images/pt/character.5c0dd8e067ffd693.png) +![character](../../translated_images/pt/character.5c0dd8e067ffd693.webp) Cada lição inclui uma tarefa para completares, um teste de conhecimento e um desafio para te guiar na aprendizagem de tópicos como: - Prompting e engenharia de prompts @@ -114,7 +114,7 @@ Segue estes passos: Na tua cópia deste repositório que criaste, clica no botão **Code** e seleciona **Open with Codespaces**. Isto criará um novo Codespace onde poderás trabalhar. -![Codespace](../../translated_images/pt/createcodespace.0238bbf4d7a8d955.png) +![Codespace](../../translated_images/pt/createcodespace.0238bbf4d7a8d955.webp) #### Executar o currículo localmente no teu computador diff --git a/translations/pt/for-teachers.md b/translations/pt/for-teachers.md index bf18247b9..4270ce220 100644 --- a/translations/pt/for-teachers.md +++ b/translations/pt/for-teachers.md @@ -42,10 +42,10 @@ Este currículo inclui pacotes importáveis para fluxos de trabalho comuns em LM - O Moodle Cloud tem suporte limitado para Common Cartridge. Prefira o ficheiro do Moodle acima, que também pode ser carregado no Canvas. - Após a importação, reveja os módulos, datas de entrega e configurações de questionários para ajustar ao calendário do seu período letivo. -![Moodle](../../translated_images/pt/moodle.94eb93d714a50cb2.png) +![Moodle](../../translated_images/pt/moodle.94eb93d714a50cb2.webp) > O currículo numa sala de aula Moodle -![Canvas](../../translated_images/pt/canvas.fbd605ff8e5b8aff.png) +![Canvas](../../translated_images/pt/canvas.fbd605ff8e5b8aff.webp) > O currículo no Canvas ### Utilizar o repositório diretamente (sem Classroom) diff --git a/translations/ro/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/ro/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 5b1a351d7..e3fa80f4a 100644 --- a/translations/ro/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/ro/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ Uite, înțeleg perfect dacă programarea pare intimidantă acum. Când am înce Astăzi, vom explora uneltele incredibile care fac dezvoltarea web modernă nu doar posibilă, ci și foarte captivantă. Vorbesc despre exact aceiași editori, browsere și workflow-uri pe care le folosesc zilnic dezvoltatorii de la Netflix, Spotify și studioul tău indie preferat de aplicații. Și iată partea care te va face să dansezi de bucurie: majoritatea acestor unelte profesionale, standard în industrie, sunt complet gratuite! -![Intro Programming](../../../../translated_images/ro/webdev101-programming.d6e3f98e61ac4bff.png) +![Intro Programming](../../../../translated_images/ro/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote de [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/ro/1-getting-started-lessons/2-github-basics/README.md b/translations/ro/1-getting-started-lessons/2-github-basics/README.md index 00926187d..eab621110 100644 --- a/translations/ro/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/ro/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ Iată ce mă uimește total: fiecare aplicație de pe telefonul tău, fiecare si Vom parcurge acest drum împreună, pas cu pas. Fără grabă, fără presiune – doar tu, eu și niște unelte super tari care urmează să devină cei mai buni prieteni ai tăi! -![Intro to GitHub](../../../../translated_images/ro/webdev101-github.8846d7971abef6f9.png) +![Intro to GitHub](../../../../translated_images/ro/webdev101-github.8846d7971abef6f9.webp) > Schiță realizată de [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -605,7 +605,7 @@ Mai întâi, hai să găsim un repository (sau **repo**) pe GitHub care să te i ✅ Un mod bun de a găsi repo-uri „prietenoase pentru începători” este să [cauți după eticheta 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Copiază un repo local](../../../../translated_images/ro/clone_repo.5085c48d666ead57.png) +![Copiază un repo local](../../../../translated_images/ro/clone_repo.5085c48d666ead57.webp) Există mai multe modalități de a copia codul. Un mod este să „clonezi” conținutul repository-ului, folosind HTTPS, SSH sau folosind GitHub CLI (interfața de linie de comandă GitHub). diff --git a/translations/ro/1-getting-started-lessons/3-accessibility/README.md b/translations/ro/1-getting-started-lessons/3-accessibility/README.md index 15a7fde47..2fb3ac673 100644 --- a/translations/ro/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/ro/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Crearea Paginilor Web Accesibile -![Totul Despre Accesibilitate](../../../../translated_images/ro/webdev101-a11y.8ef3025c858d897a.png) +![Totul Despre Accesibilitate](../../../../translated_images/ro/webdev101-a11y.8ef3025c858d897a.webp) > Sketchnote de [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/ro/2-js-basics/1-data-types/README.md b/translations/ro/2-js-basics/1-data-types/README.md index dda7e34e7..585e2c26c 100644 --- a/translations/ro/2-js-basics/1-data-types/README.md +++ b/translations/ro/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Bazele JavaScript: Tipuri de date -![JavaScript Basics - Data types](../../../../translated_images/ro/webdev101-js-datatypes.4cc470179730702c.png) +![JavaScript Basics - Data types](../../../../translated_images/ro/webdev101-js-datatypes.4cc470179730702c.webp) > Sketchnote realizat de [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/ro/2-js-basics/2-functions-methods/README.md b/translations/ro/2-js-basics/2-functions-methods/README.md index 6fac17254..73d6f29df 100644 --- a/translations/ro/2-js-basics/2-functions-methods/README.md +++ b/translations/ro/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Noțiuni de bază JavaScript: Metode și Funcții -![Noțiuni de bază JavaScript - Funcții](../../../../translated_images/ro/webdev101-js-functions.be049c4726e94f8b.png) +![Noțiuni de bază JavaScript - Funcții](../../../../translated_images/ro/webdev101-js-functions.be049c4726e94f8b.webp) > Sketchnote de [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/ro/2-js-basics/3-making-decisions/README.md b/translations/ro/2-js-basics/3-making-decisions/README.md index 56c66cf05..f2a02140b 100644 --- a/translations/ro/2-js-basics/3-making-decisions/README.md +++ b/translations/ro/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Bazele JavaScript: Luarea Deciziilor -![JavaScript Basics - Making decisions](../../../../translated_images/ro/webdev101-js-decisions.69e1b20f272dd1f0.png) +![JavaScript Basics - Making decisions](../../../../translated_images/ro/webdev101-js-decisions.69e1b20f272dd1f0.webp) > Sketchnote de [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/ro/2-js-basics/4-arrays-loops/README.md b/translations/ro/2-js-basics/4-arrays-loops/README.md index a9f4c7ed2..8f7f131e8 100644 --- a/translations/ro/2-js-basics/4-arrays-loops/README.md +++ b/translations/ro/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Bazele JavaScript: Array-uri și Bucla -![Bazele JavaScript - Array-uri](../../../../translated_images/ro/webdev101-js-arrays.439d7528b8a29455.png) +![Bazele JavaScript - Array-uri](../../../../translated_images/ro/webdev101-js-arrays.439d7528b8a29455.webp) > Sketchnote de [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/ro/3-terrarium/1-intro-to-html/README.md b/translations/ro/3-terrarium/1-intro-to-html/README.md index fd74d6d75..c0807d691 100644 --- a/translations/ro/3-terrarium/1-intro-to-html/README.md +++ b/translations/ro/3-terrarium/1-intro-to-html/README.md @@ -25,7 +25,7 @@ journey Îmbunătățește accesibilitatea: 5: Student Construiește terariu: 5: Student ``` -![Introducere în HTML](../../../../translated_images/ro/webdev101-html.4389c2067af68e98.png) +![Introducere în HTML](../../../../translated_images/ro/webdev101-html.4389c2067af68e98.webp) > Sketchnote de [Tomomi Imura](https://twitter.com/girlie_mac) HTML, sau HyperText Markup Language, este fundația fiecărui site web pe care l-ai vizitat vreodată. Gândește-te la HTML ca scheletul care oferă structură paginilor web – definește unde merge conținutul, cum este organizat și ce reprezintă fiecare element. În timp ce CSS va „îmbrăca” mai târziu HTML-ul tău cu culori și layout-uri, iar JavaScript îl va anima cu interactivitate, HTML oferă structura esențială care face tot restul posibil. @@ -86,7 +86,7 @@ Vei crea un folder dedicat pentru proiectul terrarium și vei adăuga primul tă 4. În panoul Explorer, apasă pe pictograma "New File" 5. Denumește fișierul `index.html` -![Explorator VS Code arătând crearea unui fișier nou](../../../../translated_images/ro/vs-code-index.e2986cf919471eb9.png) +![Explorator VS Code arătând crearea unui fișier nou](../../../../translated_images/ro/vs-code-index.e2986cf919471eb9.webp) **Opțiunea 2: Folosind Comenzi în Terminal** ```bash diff --git a/translations/ro/3-terrarium/2-intro-to-css/README.md b/translations/ro/3-terrarium/2-intro-to-css/README.md index 6c5493802..03bbe9d5d 100644 --- a/translations/ro/3-terrarium/2-intro-to-css/README.md +++ b/translations/ro/3-terrarium/2-intro-to-css/README.md @@ -29,7 +29,7 @@ journey Design responsiv: 5: Student Reflexii pe sticlă: 5: Student ``` -![Introducere în CSS](../../../../translated_images/ro/webdev101-css.3f7af5991bf53a20.png) +![Introducere în CSS](../../../../translated_images/ro/webdev101-css.3f7af5991bf53a20.webp) > Sketchnote realizat de [Tomomi Imura](https://twitter.com/girlie_mac) Îți amintești cum arăta terrariul tău HTML destul de simplu? CSS este locul unde transformăm acea structură simplă într-un ceva atrăgător vizual. @@ -202,7 +202,7 @@ body { Deschide unelte pentru dezvoltatori în browserul tău (F12), navighează la fila Elements, și inspectează elementul `

`. Vei vedea că acesta moștenește familia fontului de la body: -![font moștenit](../../../../translated_images/ro/1.cc07a5cbe114ad1d.png) +![font moștenit](../../../../translated_images/ro/1.cc07a5cbe114ad1d.webp) ✅ **Experiment**: Încearcă să setezi alte proprietăți moștenitoare pe `` precum `color`, `line-height` sau `text-align`. Ce se întâmplă cu titlul și celelalte elemente? @@ -594,7 +594,7 @@ Ești gata să îmbunătățești terrariul cu reflecții realiste de sticlă? A Vei crea accente subtile care simulează modul în care lumina se reflectă pe suprafețele de sticlă. Această abordare este similară cu modul în care pictorii Renașterii, precum Jan van Eyck, foloseau lumina și reflectarea pentru a face sticla pictată să pară tridimensională. Iată ce vizezi: -![finished terrarium](../../../../translated_images/ro/terrarium-final.2f07047ffc597d0a.png) +![finished terrarium](../../../../translated_images/ro/terrarium-final.2f07047ffc597d0a.webp) **Provocarea ta:** - **Creează** forme ovale albe sau deschise la culoare pentru reflexiile sticlei diff --git a/translations/ro/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/ro/3-terrarium/3-intro-to-DOM-and-closures/README.md index 4de5f84c7..1c57e1253 100644 --- a/translations/ro/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/ro/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -25,7 +25,7 @@ journey Test functionality: 5: Student Complete terrarium: 5: Student ``` -![DOM și o închidere](../../../../translated_images/ro/webdev101-js.10280393044d7eaa.png) +![DOM și o închidere](../../../../translated_images/ro/webdev101-js.10280393044d7eaa.webp) > Sketchnote de [Tomomi Imura](https://twitter.com/girlie_mac) Bine ați venit la unul dintre cele mai atractive aspecte ale dezvoltării web - a face lucrurile interactive! Document Object Model (DOM) este ca un pod între HTML-ul tău și JavaScript, iar astăzi îl vom folosi pentru a da viață terariului tău. Când Tim Berners-Lee a creat primul browser web, și-a imaginat o web unde documentele pot fi dinamice și interactive - DOM face această viziune posibilă. @@ -102,7 +102,7 @@ flowchart TD style P fill:#ffebee style Q fill:#ffebee ``` -![Reprezentare arbore DOM](../../../../translated_images/ro/dom-tree.7daf0e763cbbba92.png) +![Reprezentare arbore DOM](../../../../translated_images/ro/dom-tree.7daf0e763cbbba92.webp) > O reprezentare a DOM și a marcajului HTML care îl referențiază. De la [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -146,7 +146,7 @@ flowchart LR ``` > 💡 **Înțelegerea închiderilor**: Închiderile sunt un subiect important în JavaScript, iar mulți dezvoltatori le folosesc ani de zile înainte să înțeleagă pe deplin toate aspectele teoretice. Astăzi ne concentrăm pe aplicația practică - vei vedea cum închiderile apar natural pe măsură ce construim caracteristicile noastre interactive. Înțelegerea va crește pe măsură ce vezi cum rezolvă probleme reale. -![Reprezentare arbore DOM](../../../../translated_images/ro/dom-tree.7daf0e763cbbba92.png) +![Reprezentare arbore DOM](../../../../translated_images/ro/dom-tree.7daf0e763cbbba92.webp) > O reprezentare a DOM și a marcajului HTML care îl referențiază. De la [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -591,7 +591,7 @@ Acum testează-ți terariul interactiv! Deschide fișierul `index.html` într-un - **Suport cross-device**: Funcționează pe desktop și pe mobil - **Conștientizare a performanței**: Fără scurgeri de memorie sau calcule redundante -![terrariu finalizat](../../../../translated_images/ro/terrarium-final.0920f16e87c13a84.png) +![terrariu finalizat](../../../../translated_images/ro/terrarium-final.0920f16e87c13a84.webp) --- diff --git a/translations/ro/3-terrarium/solution/README.md b/translations/ro/3-terrarium/solution/README.md index ac5eca99a..66face950 100644 --- a/translations/ro/3-terrarium/solution/README.md +++ b/translations/ro/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Un mic exercițiu de tip drag and drop. Cu puțin HTML, JS și CSS, poți construi o interfață web, să o stilizezi și să adaugi interacțiuni. -![terariul meu](../../../../translated_images/ro/screenshot_gray.0c796099a1f9f25e.png) +![terariul meu](../../../../translated_images/ro/screenshot_gray.0c796099a1f9f25e.webp) ## Credite diff --git a/translations/ro/5-browser-extension/1-about-browsers/README.md b/translations/ro/5-browser-extension/1-about-browsers/README.md index fe6b18b60..55d9c76b5 100644 --- a/translations/ro/5-browser-extension/1-about-browsers/README.md +++ b/translations/ro/5-browser-extension/1-about-browsers/README.md @@ -25,7 +25,7 @@ journey Depanează problemele: 4: Student Perfecționează experiența: 5: Student ``` -![Browser sketchnote](../../../../translated_images/ro/browser.60317c9be8b7f84a.jpg) +![Browser sketchnote](../../../../translated_images/ro/browser.60317c9be8b7f84a.webp) > Sketchnote de [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## Chestionar Pre-Prelegere @@ -77,7 +77,7 @@ Acest proces reflectă modul în care primul browser web, WorldWideWeb, a fost p ✅ **Puțină istorie**: Primul browser se numea 'WorldWideWeb' și a fost creat de Sir Timothy Berners-Lee în 1990. -![early browsers](../../../../translated_images/ro/earlybrowsers.d984b711cdf3a42d.jpg) +![early browsers](../../../../translated_images/ro/earlybrowsers.d984b711cdf3a42d.webp) > Unele browsere timpurii, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### Cum Processează Browserele Conținutul Web @@ -194,7 +194,7 @@ quadrantChart Înțelegerea procesului de instalare a extensiilor te ajută să anticipezi experiența utilizatorului când oamenii își instalează extensia ta. Procesul de instalare este standardizat în browserele moderne, cu variații minore în designul interfeței. -![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/ro/install-on-edge.d68781acaf0b3d3d.png) +![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/ro/install-on-edge.d68781acaf0b3d3d.webp) > **Important**: Asigură-te că activezi modul dezvoltator și permiți extensiile din alte magazine când testezi extensiile proprii. @@ -308,10 +308,10 @@ Aceasta urmează principiul dezvăluirii progresive folosit în designul interfe ### Prezentarea Vederilor Extensiei **Vederea de configurare** - Configurare inițială pentru utilizatorii noi: -![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/ro/1.b6da8c1394b07491.png) +![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/ro/1.b6da8c1394b07491.webp) **Vederea de rezultate** - Afișarea datelor despre amprenta de carbon: -![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/ro/2.1dae52ff08042246.png) +![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/ro/2.1dae52ff08042246.webp) ### Construirea Formularului de Configurare diff --git a/translations/ro/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/ro/5-browser-extension/2-forms-browsers-local-storage/README.md index 738a062e5..403d543f0 100644 --- a/translations/ro/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/ro/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -263,7 +263,7 @@ stateDiagram-v2 Reset --> ClearStorage: Șterge datele salvate ClearStorage --> FirstTime: Înapoi la configurare ``` -![Local storage pane](../../../../translated_images/ro/localstorage.472f8147b6a3f8d1.png) +![Local storage pane](../../../../translated_images/ro/localstorage.472f8147b6a3f8d1.webp) > ⚠️ **Considerație de Securitate**: În aplicațiile de producție, stocarea cheilor API în LocalStorage poate reprezenta un risc de securitate, deoarece JavaScript poate accesa aceste date. Pentru scopuri educaționale, această metodă este acceptabilă, dar aplicațiile reale ar trebui să folosească stocare sigură pe server pentru credențiale sensibile. diff --git a/translations/ro/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/ro/5-browser-extension/3-background-tasks-and-performance/README.md index 9c4f5e6bc..6dbacdbca 100644 --- a/translations/ro/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/ro/5-browser-extension/3-background-tasks-and-performance/README.md @@ -123,7 +123,7 @@ Pentru a deschide Developer Tools în Edge, fă clic pe cele trei puncte din col Hai să încercăm asta. Deschide un site (Microsoft.com este potrivit pentru asta) și apasă butonul 'Record'. Acum reîncarcă pagina și urmărește cum profilatorul surprinde tot ce se întâmplă. Când oprești înregistrarea, vei vedea o defalcare detaliată a modului în care browserul 'scriptuiește', 'randează' și 'pictează' site-ul. Îmi amintește cum centrul de comandă monitorizează fiecare sistem în timpul lansării unei rachete – primești date în timp real despre exact ce se întâmplă și când. -![Edge profiler](../../../../translated_images/ro/profiler.5a4a62479c5df01c.png) +![Edge profiler](../../../../translated_images/ro/profiler.5a4a62479c5df01c.webp) ✅ Documentația [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) are o mulțime de detalii dacă vrei să explorezi mai mult. @@ -133,11 +133,11 @@ Selectează elemente din cronologia profilului pentru a mări evenimentele care Obține o imagine de ansamblu a performanței paginii tale selectând o parte din cronologia profilului și uitându-te în panoul de sumar: -![Edge profiler snapshot](../../../../translated_images/ro/snapshot.97750180ebcad737.png) +![Edge profiler snapshot](../../../../translated_images/ro/snapshot.97750180ebcad737.webp) Verifică panoul Event Log pentru a vedea dacă vreun eveniment a durat mai mult de 15 ms: -![Edge event log](../../../../translated_images/ro/log.804026979f3707e0.png) +![Edge event log](../../../../translated_images/ro/log.804026979f3707e0.webp) ✅ Familiarizează-te cu profilatorul tău! Deschide uneltele pentru dezvoltatori pe acest site și vezi dacă există blocaje. Care este elementul cel mai lent la încărcare? Cel mai rapid? diff --git a/translations/ro/5-browser-extension/README.md b/translations/ro/5-browser-extension/README.md index 90c80426b..0f449c2e7 100644 --- a/translations/ro/5-browser-extension/README.md +++ b/translations/ro/5-browser-extension/README.md @@ -23,7 +23,7 @@ Această extensie poate fi utilizată ad-hoc de un utilizator, odată ce o cheie ### Credite -![o extensie verde pentru browser](../../../translated_images/ro/extension-screenshot.0e7f5bfa110e92e3.png) +![o extensie verde pentru browser](../../../translated_images/ro/extension-screenshot.0e7f5bfa110e92e3.webp) ## Credite diff --git a/translations/ro/5-browser-extension/solution/README.md b/translations/ro/5-browser-extension/solution/README.md index fc0e40f3d..a277ad21e 100644 --- a/translations/ro/5-browser-extension/solution/README.md +++ b/translations/ro/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Folosind API-ul C02 Signal de la tmrow pentru a monitoriza consumul de electricitate, construiește o extensie de browser care să îți ofere un memento direct în browser despre cât de intens este consumul de electricitate în regiunea ta. Utilizarea acestei extensii în mod ad-hoc te va ajuta să iei decizii informate cu privire la activitățile tale bazate pe aceste informații. -![captură de ecran extensie](../../../../translated_images/ro/extension-screenshot.0e7f5bfa110e92e3.png) +![captură de ecran extensie](../../../../translated_images/ro/extension-screenshot.0e7f5bfa110e92e3.webp) ## Începe @@ -31,7 +31,7 @@ npm run build Pentru a instala pe Edge, folosește meniul „trei puncte” din colțul din dreapta sus al browserului pentru a găsi panoul Extensii. De acolo, selectează „Load Unpacked” pentru a încărca o extensie nouă. Deschide folderul „dist” la prompt și extensia va fi încărcată. Pentru a o utiliza, vei avea nevoie de o cheie API pentru API-ul CO2 Signal ([obține una aici prin email](https://www.co2signal.com/) - introdu adresa ta de email în caseta de pe această pagină) și de [codul pentru regiunea ta](http://api.electricitymap.org/v3/zones) corespunzător [Electricity Map](https://www.electricitymap.org/map) (în Boston, de exemplu, folosesc „US-NEISO”). -![instalare](../../../../translated_images/ro/install-on-edge.78634f02842c4828.png) +![instalare](../../../../translated_images/ro/install-on-edge.78634f02842c4828.webp) După ce cheia API și regiunea sunt introduse în interfața extensiei, punctul colorat din bara extensiei browserului ar trebui să se schimbe pentru a reflecta consumul de energie din regiunea ta și să îți ofere o sugestie despre ce activități consumatoare de energie ar fi potrivite să desfășori. Conceptul din spatele acestui sistem de „puncte” mi-a fost inspirat de extensia [Energy Lollipop](https://energylollipop.com/) pentru emisiile din California. diff --git a/translations/ro/5-browser-extension/solution/translation/README.fr.md b/translations/ro/5-browser-extension/solution/translation/README.fr.md index d5bbf9ae5..2e4ea5db0 100644 --- a/translations/ro/5-browser-extension/solution/translation/README.fr.md +++ b/translations/ro/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Folosind API-ul CO2 Signal de la tmrow pentru a monitoriza consumul de electricitate, creați o extensie de browser care să vă ofere un memento direct în browser despre consumul de electricitate din regiunea dumneavoastră. Utilizarea acestei extensii ad-hoc vă va ajuta să luați decizii informate cu privire la activitățile dumneavoastră pe baza acestor informații. -![captură de extensie](../../../../../translated_images/ro/extension-screenshot.0e7f5bfa110e92e3.png) +![captură de extensie](../../../../../translated_images/ro/extension-screenshot.0e7f5bfa110e92e3.webp) ## Începeți @@ -31,7 +31,7 @@ npm run build Pentru a instala pe Edge, utilizați meniul „trei puncte” din colțul din dreapta sus al browserului pentru a găsi panoul Extensii. De acolo, selectați „Încărcați extensia dezarhivată” pentru a adăuga o nouă extensie. La solicitare, deschideți folderul „dist” și extensia va fi încărcată. Pentru a o utiliza, veți avea nevoie de o cheie API pentru API-ul CO2 Signal ([obțineți una aici prin e-mail](https://www.co2signal.com/) - introduceți adresa dumneavoastră de e-mail în câmpul de pe această pagină) și de [codul pentru regiunea dumneavoastră](http://api.electricitymap.org/v3/zones) corespunzător [Hărții electricității](https://www.electricitymap.org/map) (de exemplu, în Boston, folosesc „US-NEISO”). -![instalare](../../../../../translated_images/ro/install-on-edge.78634f02842c4828.png) +![instalare](../../../../../translated_images/ro/install-on-edge.78634f02842c4828.webp) Odată ce cheia API și regiunea sunt introduse în interfața extensiei, punctul colorat din bara de extensii a browserului ar trebui să se schimbe pentru a reflecta consumul de energie din regiunea dumneavoastră și să vă ofere un indicator despre activitățile consumatoare de energie pe care ar fi potrivit să le desfășurați. Conceptul din spatele acestui sistem de „puncte” mi-a fost inspirat de [extensia Energy Lollipop](https://energylollipop.com/) pentru emisiile din California. diff --git a/translations/ro/5-browser-extension/solution/translation/README.hi.md b/translations/ro/5-browser-extension/solution/translation/README.hi.md index fb1961f93..9d9da527d 100644 --- a/translations/ro/5-browser-extension/solution/translation/README.hi.md +++ b/translations/ro/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Construirea unei extensii de browser care utilizează API-ul CO2 Signal de la tmrow pentru a urmări consumul de energie electrică, astfel încât să primiți un memento în browser despre cât de intens este consumul de energie electrică în zona dumneavoastră. Utilizarea acestei extensii vă poate ajuta să luați decizii informate cu privire la activitățile dumneavoastră pe baza acestor informații. -![Captură de ecran a extensiei](../../../../../translated_images/ro/extension-screenshot.0e7f5bfa110e92e3.png) +![Captură de ecran a extensiei](../../../../../translated_images/ro/extension-screenshot.0e7f5bfa110e92e3.webp) ## Început @@ -31,7 +31,7 @@ npm run build Pentru a instala pe Edge, utilizați meniul „trei puncte” din colțul din dreapta sus al browserului pentru a găsi panoul de extensii. De acolo, selectați „Load unpacked” pentru a încărca o extensie nouă. La prompt, deschideți folderul „dist” și extensia va fi încărcată. Pentru a o utiliza, veți avea nevoie de o cheie API pentru CO2 Signal ([obțineți-o prin e-mail aici](https://www.co2signal.com/) - introduceți adresa dumneavoastră de e-mail în caseta de pe această pagină) și de [codul zonei dumneavoastră](http://api.electricitymap.org/v3/zones) de pe [Electricity Map](https://www.electricitymap.org/map) (de exemplu, pentru Boston, eu folosesc „US-NEISO”). -![instalare](../../../../../translated_images/ro/install-on-edge.78634f02842c4828.png) +![instalare](../../../../../translated_images/ro/install-on-edge.78634f02842c4828.webp) Odată ce cheia API și codul zonei sunt introduse în interfața extensiei, punctul colorat din bara extensiei browserului ar trebui să se schimbe pentru a reflecta consumul de energie din zona dumneavoastră și să vă ofere un indicator despre ce activități consumatoare de energie sunt potrivite pentru moment. Conceptul din spatele acestui sistem de „puncte” mi-a fost inspirat de extensia [Energy Lollipop](https://energylollipop.com/) pentru emisiile din California. diff --git a/translations/ro/5-browser-extension/solution/translation/README.it.md b/translations/ro/5-browser-extension/solution/translation/README.it.md index 33dc7140c..2d0ecdc96 100644 --- a/translations/ro/5-browser-extension/solution/translation/README.it.md +++ b/translations/ro/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Se va utiliza API-ul Signal CO2 de la tmrow pentru a monitoriza utilizarea energiei electrice, cu scopul de a crea o extensie de browser care să ofere un memento direct în browser despre cât de intensă este utilizarea energiei electrice în regiunea ta. Utilizarea acestei extensii personalizate va ajuta la evaluarea activităților proprii pe baza acestor informații. -![captură de ecran a extensiei](../../../../../translated_images/ro/extension-screenshot.0e7f5bfa110e92e3.png) +![captură de ecran a extensiei](../../../../../translated_images/ro/extension-screenshot.0e7f5bfa110e92e3.webp) ## Pentru a începe @@ -31,7 +31,7 @@ npm run build Pentru a instala pe Edge, folosește meniul „trei puncte” din colțul din dreapta sus al browserului pentru a accesa panoul Extensii. Dacă nu este deja activată, activează Modul dezvoltator (în partea de jos, stânga). Selectează „Încarcă necomprimat” pentru a adăuga o nouă extensie. Deschide folderul „dist” la prompt, iar extensia va fi încărcată. Pentru a o utiliza, vei avea nevoie de o cheie API pentru API-ul CO2 Signal (poți [obține una prin e-mail aici](https://www.co2signal.com/) - introdu adresa ta de e-mail în caseta de pe această pagină) și de [codul pentru regiunea ta](http://api.electricitymap.org/v3/zones) corespunzător [hărții electrice](https://www.electricitymap.org/map) (de exemplu, pentru Boston, „US-NEISO”). -![instalare](../../../../../translated_images/ro/install-on-edge.78634f02842c4828.png) +![instalare](../../../../../translated_images/ro/install-on-edge.78634f02842c4828.webp) După ce cheia API și regiunea au fost introduse în interfața extensiei, punctul colorat din bara extensiei browserului ar trebui să se schimbe pentru a reflecta utilizarea energiei din regiune și să ofere o sugestie despre ce activități cu consum ridicat de energie ar fi potrivite de realizat. Conceptul din spatele acestui sistem de „puncte” a fost inspirat de [extensia Energy Lollipop](https://energylollipop.com/) pentru emisiile din California. diff --git a/translations/ro/5-browser-extension/solution/translation/README.ja.md b/translations/ro/5-browser-extension/solution/translation/README.ja.md index 928a4416e..fdd19651e 100644 --- a/translations/ro/5-browser-extension/solution/translation/README.ja.md +++ b/translations/ro/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Construiește o extensie de browser care utilizează API-ul CO2 Signal de la tmrow pentru a urmări consumul de energie și pentru a afișa, ca un memento, cât de intens este consumul de energie în regiunea ta. Folosind această extensie în mod ad-hoc, poți lua decizii informate cu privire la activitățile tale pe baza acestor informații. -![extension screenshot](../../../../../translated_images/ro/extension-screenshot.0e7f5bfa110e92e3.png) +![extension screenshot](../../../../../translated_images/ro/extension-screenshot.0e7f5bfa110e92e3.webp) ## Introducere @@ -31,7 +31,7 @@ npm run build Pentru a instala pe Edge, găsește panoul „Extensii” din meniul „trei puncte” din colțul din dreapta sus al browserului. De acolo, selectează „Load Unpacked” pentru a încărca noua extensie. Când apare promptul, deschide folderul „dist” și extensia va fi încărcată. Pentru utilizare, vei avea nevoie de o cheie API pentru CO2 Signal ([obține una aici prin email](https://www.co2signal.com/) - introdu adresa ta de email în caseta de pe această pagină) și de [codul corespunzător regiunii tale](http://api.electricitymap.org/v3/zones) de pe [Electricity Map](https://www.electricitymap.org/map) (de exemplu, pentru Boston, folosește 'US-NEISO'). -![installing](../../../../../translated_images/ro/install-on-edge.78634f02842c4828.png) +![installing](../../../../../translated_images/ro/install-on-edge.78634f02842c4828.webp) După ce introduci cheia API și regiunea în interfața extensiei, punctul colorat afișat în bara extensiei browserului se va schimba pentru a reflecta consumul de energie din regiunea ta. Acesta îți va indica ce tip de activități care necesită energie sunt potrivite în acel moment. Conceptul acestui sistem de „puncte” mi-a fost inspirat de extensia [Energy Lollipop](https://energylollipop.com/) pentru emisiile din California. diff --git a/translations/ro/5-browser-extension/solution/translation/README.ms.md b/translations/ro/5-browser-extension/solution/translation/README.ms.md index 039089b88..e92c37843 100644 --- a/translations/ro/5-browser-extension/solution/translation/README.ms.md +++ b/translations/ro/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Folosind API-ul CO2 Signal de la tmrow pentru a monitoriza consumul de electricitate, construiește o extensie de browser care să te alerteze în legătură cu nivelul de utilizare a energiei electrice din regiunea ta. Utilizarea acestei extensii te va ajuta să iei decizii mai informate cu privire la activitățile tale, bazându-te pe aceste informații. -![captură de ecran a extensiei de browser](../../../../../translated_images/ro/extension-screenshot.0e7f5bfa110e92e3.png) +![captură de ecran a extensiei de browser](../../../../../translated_images/ro/extension-screenshot.0e7f5bfa110e92e3.webp) ## Începe de Aici @@ -31,7 +31,7 @@ npm run build Pentru a o instala în Edge, folosește meniul cu „trei puncte” din colțul din dreapta sus al browserului pentru a accesa panoul Extensii. De acolo, selectează „Load Unpacked” pentru a încărca o extensie nouă. Deschide folderul „dist” când ți se cere, iar extensia va fi încărcată. Pentru a o utiliza, vei avea nevoie de o cheie API pentru API-ul CO2 Signal ([obține una aici prin e-mail](https://www.co2signal.com/) - introdu adresa ta de e-mail în câmpul de pe această pagină) și de [codul regiunii tale](http://api.electricitymap.org/v3/zones), care corespunde cu [Electricity Map](https://www.electricitymap.org/map) (de exemplu, în Boston, eu folosesc „US-NEISO”). -![descărcare în curs](../../../../../translated_images/ro/install-on-edge.78634f02842c4828.png) +![descărcare în curs](../../../../../translated_images/ro/install-on-edge.78634f02842c4828.webp) După ce introduci cheia API și regiunea în interfața extensiei, punctul colorat din bara extensiei browserului se va schimba pentru a reflecta consumul de energie din regiunea ta și îți va oferi sugestii despre activitățile potrivite pe care le poți desfășura. Conceptul din spatele acestui sistem de „puncte” mi-a fost inspirat de [extensia de browser Energy Lollipop](https://energylollipop.com/) pentru emisiile din California. diff --git a/translations/ro/5-browser-extension/start/README.md b/translations/ro/5-browser-extension/start/README.md index fa7618464..e914cdf35 100644 --- a/translations/ro/5-browser-extension/start/README.md +++ b/translations/ro/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Folosind API-ul CO2 Signal de la tmrow pentru a monitoriza consumul de energie electrică, construiește o extensie de browser astfel încât să ai un memento direct în browser despre cât de intens este consumul de energie electrică în regiunea ta. Utilizarea acestei extensii în mod ad-hoc te va ajuta să iei decizii informate cu privire la activitățile tale, bazându-te pe aceste informații. -![captură de ecran a extensiei](../../../../translated_images/ro/extension-screenshot.0e7f5bfa110e92e3.png) +![captură de ecran a extensiei](../../../../translated_images/ro/extension-screenshot.0e7f5bfa110e92e3.webp) ## Începe @@ -31,7 +31,7 @@ npm run build Pentru a instala pe Edge, folosește meniul „trei puncte” din colțul din dreapta sus al browserului pentru a găsi panoul Extensii. De acolo, selectează „Load Unpacked” pentru a încărca o extensie nouă. La prompt, deschide folderul „dist” și extensia va fi încărcată. Pentru a o utiliza, vei avea nevoie de o cheie API pentru API-ul CO2 Signal ([obține una aici prin email](https://www.co2signal.com/) - introdu adresa ta de email în căsuța de pe această pagină) și de [codul pentru regiunea ta](http://api.electricitymap.org/v3/zones) corespunzător [Electricity Map](https://www.electricitymap.org/map) (de exemplu, în Boston, folosesc „US-NEISO”). -![instalare](../../../../translated_images/ro/install-on-edge.78634f02842c4828.png) +![instalare](../../../../translated_images/ro/install-on-edge.78634f02842c4828.webp) Odată ce cheia API și regiunea sunt introduse în interfața extensiei, punctul colorat din bara extensiei browserului ar trebui să se schimbe pentru a reflecta consumul de energie din regiunea ta și să îți ofere o sugestie despre ce activități consumatoare de energie ar fi potrivite să le desfășori. Conceptul din spatele acestui sistem de „puncte” mi-a fost inspirat de [extensia Energy Lollipop](https://energylollipop.com/) pentru emisiile din California. diff --git a/translations/ro/6-space-game/2-drawing-to-canvas/README.md b/translations/ro/6-space-game/2-drawing-to-canvas/README.md index 6d7ad8d8b..a4101ae69 100644 --- a/translations/ro/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/ro/6-space-game/2-drawing-to-canvas/README.md @@ -105,7 +105,7 @@ quadrantChart Power-up: [0.7, 0.6] UI Elements: [0.9, 0.1] ``` -![grila canvas-ului](../../../../translated_images/ro/canvas_grid.5f209da785ded492.png) +![grila canvas-ului](../../../../translated_images/ro/canvas_grid.5f209da785ded492.webp) > Imagine de la [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) Pentru a desena pe elementul canvas, vei urma același proces în trei pași care formează baza tuturor graficilor canvas. Odată ce îl faci de câteva ori, devine ceva natural: @@ -323,11 +323,11 @@ Vei construi o pagină web cu un element Canvas. Aceasta ar trebui să redea un - Nava eroului - ![Nava eroului](../../../../translated_images/ro/player.dd24c1afa8c71e9b.png) + ![Nava eroului](../../../../translated_images/ro/player.dd24c1afa8c71e9b.webp) - Monstru 5*5 - ![Nava monstrului](../../../../translated_images/ro/enemyShip.5df2a822c16650c2.png) + ![Nava monstrului](../../../../translated_images/ro/enemyShip.5df2a822c16650c2.webp) ### Pași Recomandați pentru a începe dezvoltarea @@ -463,7 +463,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { Rezultatul final ar trebui să arate astfel: -![Black screen with a hero and 5*5 monsters](../../../../translated_images/ro/partI-solution.36c53b48c9ffae2a.png) +![Black screen with a hero and 5*5 monsters](../../../../translated_images/ro/partI-solution.36c53b48c9ffae2a.webp) ## Soluție diff --git a/translations/ro/6-space-game/5-keeping-score/README.md b/translations/ro/6-space-game/5-keeping-score/README.md index 33151060e..d510c9f5f 100644 --- a/translations/ro/6-space-game/5-keeping-score/README.md +++ b/translations/ro/6-space-game/5-keeping-score/README.md @@ -155,7 +155,7 @@ sequenceDiagram end ``` - **Sistem de punctaj**: Fiecare navă inamic distrusă acordă 100 de puncte (numere rotunde sunt mai ușor de calculat mental pentru jucători). Scorul se afișează în colțul din stânga jos. -- **Contor de vieți**: Eroul tău începe cu trei vieți - un standard stabilit de jocurile arcade timpurii pentru a echilibra provocarea cu jucabilitatea. Fiecare coliziune cu un inamic costă o viață. Vom afișa viețile rămase în colțul din dreapta jos folosind icoane de navă ![life image](../../../../translated_images/ro/life.6fb9f50d53ee0413.png). +- **Contor de vieți**: Eroul tău începe cu trei vieți - un standard stabilit de jocurile arcade timpurii pentru a echilibra provocarea cu jucabilitatea. Fiecare coliziune cu un inamic costă o viață. Vom afișa viețile rămase în colțul din dreapta jos folosind icoane de navă ![life image](../../../../translated_images/ro/life.6fb9f50d53ee0413.webp). ## Să începem construcția! diff --git a/translations/ro/7-bank-project/1-template-route/README.md b/translations/ro/7-bank-project/1-template-route/README.md index dc7d1575b..57fa802ba 100644 --- a/translations/ro/7-bank-project/1-template-route/README.md +++ b/translations/ro/7-bank-project/1-template-route/README.md @@ -644,7 +644,7 @@ sequenceDiagram Folosirea `history.pushState` creează intrări noi în istoricul de navigare al browserului. Poți verifica ținând apăsat *butonul înapoi* al browserului, ar trebui să afișeze ceva de genul: -![Screenshot of navigation history](../../../../translated_images/ro/history.7fdabbafa521e064.png) +![Screenshot of navigation history](../../../../translated_images/ro/history.7fdabbafa521e064.webp) Dacă apeși butonul înapoi de câteva ori, vei vedea că URL-ul se schimbă și istoricul este actualizat, dar același șablon continuă să fie afișat. diff --git a/translations/ro/7-bank-project/2-forms/README.md b/translations/ro/7-bank-project/2-forms/README.md index a10b961ed..4821479bc 100644 --- a/translations/ro/7-bank-project/2-forms/README.md +++ b/translations/ro/7-bank-project/2-forms/README.md @@ -292,7 +292,7 @@ Mai întâi, să observăm ce se întâmplă cu o trimitere simplă a formularul 2. Observă schimbările din bara de adrese a browserului 3. Observă cum pagina se reîncarcă și apar date în URL -![Captură de ecran cu schimbarea URL-ului în browser după ce s-a apăsat butonul Înregistrează](../../../../translated_images/ro/click-register.e89a30bf0d4bc9ca.png) +![Captură de ecran cu schimbarea URL-ului în browser după ce s-a apăsat butonul Înregistrează](../../../../translated_images/ro/click-register.e89a30bf0d4bc9ca.webp) ### Compararea metodelor HTTP @@ -346,7 +346,7 @@ Să configurăm formularul tău de înregistrare să comunice corect cu API-ul b 2. **Apasă** butonul „Creare Cont” 3. **Observă** răspunsul serverului în browser -![Fereastră de browser la adresa localhost:5000/api/accounts, arătând un șir JSON cu datele utilizatorului](../../../../translated_images/ro/form-post.61de4ca1b964d91a.png) +![Fereastră de browser la adresa localhost:5000/api/accounts, arătând un șir JSON cu datele utilizatorului](../../../../translated_images/ro/form-post.61de4ca1b964d91a.webp) **Ce ar trebui să vezi:** - **Browserul redirecționează** către URL-ul endpoint-ului API @@ -609,7 +609,7 @@ async function register() { 3. **Apasă** pe "Creează cont" 4. **Observă** mesajele din consolă și feedback-ul utilizatorului -![Screenshot showing log message in the browser console](../../../../translated_images/ro/browser-console.efaf0b51aaaf6778.png) +![Screenshot showing log message in the browser console](../../../../translated_images/ro/browser-console.efaf0b51aaaf6778.webp) **Ce ar trebui să vezi:** - **Stare de încărcare** apare pe butonul de trimitere @@ -783,7 +783,7 @@ Să îmbunătățim formularul tău de înregistrare cu o validare robustă care 3. **Încearcă** caractere speciale în câmpul de nume utilizator 4. **Introdu** o sumă negativă în sold -![Screenshot showing the validation error when trying to submit the form](../../../../translated_images/ro/validation-error.8bd23e98d416c22f.png) +![Screenshot showing the validation error when trying to submit the form](../../../../translated_images/ro/validation-error.8bd23e98d416c22f.webp) **Ce vei observa:** - **Browserul afișează** mesaje native de validare @@ -943,7 +943,7 @@ Afișează un mesaj de eroare în HTML dacă utilizatorul există deja. Iată un exemplu de cum poate arăta pagina finală de login după un pic de stilizare: -![Screenshot of the login page after adding CSS styles](../../../../translated_images/ro/result.96ef01f607bf856a.png) +![Screenshot of the login page after adding CSS styles](../../../../translated_images/ro/result.96ef01f607bf856a.webp) ## Chestionar Post-Lecție diff --git a/translations/ro/7-bank-project/3-data/README.md b/translations/ro/7-bank-project/3-data/README.md index 4e12d2cb1..b9ab11e87 100644 --- a/translations/ro/7-bank-project/3-data/README.md +++ b/translations/ro/7-bank-project/3-data/README.md @@ -156,7 +156,7 @@ sequenceDiagram Server->>Browser: Returnează pagina HTML completă Browser->>User: Afișează pagina nouă (clipire/reîncărcare) ``` -![Fluxul de actualizare într-o aplicație multi-pagină](../../../../translated_images/ro/mpa.7f7375a1a2d4aa77.png) +![Fluxul de actualizare într-o aplicație multi-pagină](../../../../translated_images/ro/mpa.7f7375a1a2d4aa77.webp) **De ce această abordare părea stângace:** - Fiecare clic implica reconstruirea completă a paginii de la zero @@ -182,7 +182,7 @@ sequenceDiagram JavaScript->>Browser: Actualizează elemente specifice ale paginii Browser->>User: Afișează conținut actualizat (fără reîncărcare) ``` -![Fluxul de actualizare într-o aplicație single-page](../../../../translated_images/ro/spa.268ec73b41f992c2.png) +![Fluxul de actualizare într-o aplicație single-page](../../../../translated_images/ro/spa.268ec73b41f992c2.webp) **De ce SPA-urile se simt mult mai bine:** - Doar părțile care s-au schimbat de fapt sunt actualizate (inteligent, nu?) @@ -516,7 +516,7 @@ if (data.error) { Acum, când testezi cu un cont invalid, vei vedea un mesaj de eroare util chiar pe pagină! -![Screenshot showing the error message displayed during login](../../../../translated_images/ro/login-error.416fe019b36a6327.png) +![Screenshot showing the error message displayed during login](../../../../translated_images/ro/login-error.416fe019b36a6327.webp) #### Pasul 4: Incluzivitate și Accesibilitate @@ -950,7 +950,7 @@ Ești gata să duci aplicația ta bancară la nivelul următor? Hai să o facem Iată cum ar putea arăta un dashboard finisat: -![Screenshot of an example result of the dashboard after styling](../../../../translated_images/ro/screen2.123c82a831a1d14a.png) +![Screenshot of an example result of the dashboard after styling](../../../../translated_images/ro/screen2.123c82a831a1d14a.webp) Nu trebuie să se potrivească exact - folosește-l ca inspirație și fă-l să fie al tău! diff --git a/translations/ro/7-bank-project/4-state-management/README.md b/translations/ro/7-bank-project/4-state-management/README.md index e2da536e3..95ced84c2 100644 --- a/translations/ro/7-bank-project/4-state-management/README.md +++ b/translations/ro/7-bank-project/4-state-management/README.md @@ -187,7 +187,7 @@ Ca designul compartimentalizat al Titanicului care părea robust până când ma În loc să ne învârtim în cerc, vom crea un sistem **centralizat de gestionare a stării**. Gândește-te la asta ca la o persoană foarte organizată care răspunde de toate lucrurile importante: -![Schema care arată fluxurile de date între HTML, acțiunile utilizatorului și stare](../../../../translated_images/ro/data-flow.fa2354e0908fecc8.png) +![Schema care arată fluxurile de date între HTML, acțiunile utilizatorului și stare](../../../../translated_images/ro/data-flow.fa2354e0908fecc8.webp) ```mermaid flowchart TD @@ -798,7 +798,7 @@ Această provocare vă va ajuta să gândiți ca un dezvoltator profesionist, ca Iată un exemplu de rezultat după finalizarea temei: -![Captură de ecran care arată un exemplu de dialog „Adaugă tranzacție”](../../../../translated_images/ro/dialog.93bba104afeb79f1.png) +![Captură de ecran care arată un exemplu de dialog „Adaugă tranzacție”](../../../../translated_images/ro/dialog.93bba104afeb79f1.webp) --- diff --git a/translations/ro/7-bank-project/4-state-management/assignment.md b/translations/ro/7-bank-project/4-state-management/assignment.md index f5686c339..2a0909758 100644 --- a/translations/ro/7-bank-project/4-state-management/assignment.md +++ b/translations/ro/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ Consultă [documentația API-ului serverului](../api/README.md) pentru: **Rezultat așteptat:** După finalizarea acestei teme, aplicația ta bancară ar trebui să aibă o funcționalitate completă "Adaugă tranzacție" care să arate și să funcționeze profesional: -![Captură de ecran care arată un exemplu de dialog "Adaugă tranzacție"](../../../../translated_images/ro/dialog.93bba104afeb79f1.png) +![Captură de ecran care arată un exemplu de dialog "Adaugă tranzacție"](../../../../translated_images/ro/dialog.93bba104afeb79f1.webp) ## Testarea implementării diff --git a/translations/ro/7-bank-project/README.md b/translations/ro/7-bank-project/README.md index 55216a85e..3b4304cc5 100644 --- a/translations/ro/7-bank-project/README.md +++ b/translations/ro/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: În acest proiect, vei învăța cum să construiești o bancă fictivă. Aceste lecții includ instrucțiuni despre cum să creezi structura unei aplicații web și să oferi rute, să construiești formulare, să gestionezi starea, și să obții date de la un API de unde poți prelua informațiile băncii. -| ![Screen1](../../../translated_images/ro/screen1.baccbba0f1f93364.png) | ![Screen2](../../../translated_images/ro/screen2.123c82a831a1d14a.png) | +| ![Screen1](../../../translated_images/ro/screen1.baccbba0f1f93364.webp) | ![Screen2](../../../translated_images/ro/screen2.123c82a831a1d14a.webp) | |--------------------------------|--------------------------------| ## Lecții diff --git a/translations/ro/8-code-editor/1-using-a-code-editor/README.md b/translations/ro/8-code-editor/1-using-a-code-editor/README.md index b8f9a7e2f..a62684f9f 100644 --- a/translations/ro/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/ro/8-code-editor/1-using-a-code-editor/README.md @@ -182,7 +182,7 @@ Așa cum telefonul lui Alexander Graham Bell conecta locații îndepărtate, con Odată ce totul s-a încărcat, vei vedea un spațiu de lucru frumos curat, conceput să te mențină concentrat pe ceea ce contează – codul tău! -![Interfața implicită VSCode.dev](../../../../translated_images/ro/default-vscode-dev.5d06881d65c1b323.png) +![Interfața implicită VSCode.dev](../../../../translated_images/ro/default-vscode-dev.5d06881d65c1b323.webp) **Iată un tur al cartierului:** - **Bară de Activitate** (această bandă din stânga): Navigarea ta principală cu Explorer 📁, Search 🔍, Source Control 🌿, Extensions 🧩 și Settings ⚙️ @@ -229,7 +229,7 @@ Perfectă când începi în VSCode.dev și vrei să deschizi un depozit specific 1. Mergi la [vscode.dev](https://vscode.dev) dacă nu ești deja acolo 2. Caută butonul "Open Remote Repository" pe ecranul de bun venit și dă click pe el - ![Deschide depozit la distanță](../../../../translated_images/ro/open-remote-repository.bd9c2598b8949e7f.png) + ![Deschide depozit la distanță](../../../../translated_images/ro/open-remote-repository.bd9c2598b8949e7f.webp) 3. Lipsește orice URL GitHub de depozit (încearcă asta: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. Apasă Enter și privește magia! @@ -238,7 +238,7 @@ Perfectă când începi în VSCode.dev și vrei să deschizi un depozit specific Vrei să te simți ca un vrăjitor al codului? Încearcă comanda rapidă Ctrl+Shift+P (sau Cmd+Shift+P pe Mac) pentru a deschide Command Palette: -![Command Palette](../../../../translated_images/ro/palette-menu.4946174e07f42622.png) +![Command Palette](../../../../translated_images/ro/palette-menu.4946174e07f42622.webp) **Command Palette este ca un motor de căutare pentru tot ce poți face:** - Tastează „open remote” și va găsi deschizătorul de depozite pentru tine @@ -300,7 +300,7 @@ Ca atunci când organizezi planuri într-un birou de arhitect, crearea fișierel 3. Introdu numele fișierului cu extensia potrivită (`style.css`, `script.js`, `index.html`) 4. Apasă Enter pentru a crea fișierul -![Crearea unui fișier nou](../../../../translated_images/ro/create-new-file.2814e609c2af9aeb.png) +![Crearea unui fișier nou](../../../../translated_images/ro/create-new-file.2814e609c2af9aeb.webp) **Convenții de denumire:** - Folosește nume descriptive care indică scopul fișierului @@ -318,7 +318,7 @@ Aici începe distracția adevărată! Editorul VSCode.dev este plin de caracteri 2. Începe să tastezi și privește cum VSCode.dev te ajută cu culori, sugestii și detectarea erorilor 3. Salvează-ți munca cu Ctrl+S (Windows/Linux) sau Cmd+S (Mac) – deși editorul salvează automat! -![Editarea unui fișier în VSCode.dev](../../../../translated_images/ro/edit-a-file.52c0ee665ef19f08.png) +![Editarea unui fișier în VSCode.dev](../../../../translated_images/ro/edit-a-file.52c0ee665ef19f08.webp) **Ce se întâmplă în timp ce codezi:** - Codul tău este frumos colorat pentru o lectură ușoară @@ -339,7 +339,7 @@ Așa cum arheologii creează înregistrări detaliate ale straturilor de săpăt 2. Fișierele modificate apar în secțiunea „Changes” 3. Codarea color indică tipurile de schimbări: verde pentru adaosuri, roșu pentru ștergeri -![Vizualizarea modificărilor în Source Control](../../../../translated_images/ro/working-tree.c58eec08e6335c79.png) +![Vizualizarea modificărilor în Source Control](../../../../translated_images/ro/working-tree.c58eec08e6335c79.webp) **Salvarea muncii tale (fluxul de commit):** @@ -431,7 +431,7 @@ Marketplace-ul extensiilor este foarte bine organizat, astfel încât să nu te 2. Răsfoiește sau caută ceva anume 3. Apasă pe orice arată interesant ca să afli mai multe -![Interfața marketplace-ului de extensii](../../../../translated_images/ro/extensions.eca0e0c7f59a10b5.png) +![Interfața marketplace-ului de extensii](../../../../translated_images/ro/extensions.eca0e0c7f59a10b5.webp) **Ce vei vedea acolo:** @@ -484,7 +484,7 @@ Majoritatea extensiilor vin cu setări pe care le poți ajusta ca să funcțione 3. Alege „Extension Settings” din meniul derulant 4. Ajustează ce trebuie până când se potrivește perfect fluxului tău de lucru -![Personalizarea setărilor extensiei](../../../../translated_images/ro/extension-settings.21c752ae4f4cdb78.png) +![Personalizarea setărilor extensiei](../../../../translated_images/ro/extension-settings.21c752ae4f4cdb78.webp) **Setări comune pe care s-ar putea să vrei să le modifici:** - Cum este formatat codul tău (taburi vs spații, lungimea liniei etc.) diff --git a/translations/ro/8-code-editor/1-using-a-code-editor/assignment.md b/translations/ro/8-code-editor/1-using-a-code-editor/assignment.md index dd02bbfa7..73e35ebfe 100644 --- a/translations/ro/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/ro/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ Deoarece VSCode.dev necesită cel puțin un fișier pentru a deschide un depozit 4. **Scrie** un mesaj de commit: "Adaugă structura HTML inițială" 5. **Apasă** "Commit new file" pentru a salva modificările -![Crearea fișierului inițial pe GitHub](../../../../translated_images/ro/new-file-github.com.c886796d800e8056.png) +![Crearea fișierului inițial pe GitHub](../../../../translated_images/ro/new-file-github.com.c886796d800e8056.webp) **Iată ce realizează această configurare inițială:** - **Stabilește** structura corectă a documentului HTML5 cu elemente semantice @@ -104,7 +104,7 @@ Acum că fundația depozitului tău este stabilită, să trecem la VSCode.dev pe ✅ **Indicator de succes**: Ar trebui să vezi fișierele proiectului tău în bara laterală Explorer și `index.html` disponibil pentru editare în zona principală a editorului. -![Proiect încărcat în VSCode.dev](../../../../translated_images/ro/project-on-vscode.dev.e79815a9a95ee7fe.png) +![Proiect încărcat în VSCode.dev](../../../../translated_images/ro/project-on-vscode.dev.e79815a9a95ee7fe.webp) **Ce vei vedea în interfață:** - **Bara laterală Explorer**: **Afișează** fișierele și structura folderelor depozitului tău @@ -448,7 +448,7 @@ Extensiile îmbunătățesc experiența de dezvoltare oferind capabilități de **Rezultate imediate după instalare:** Odată ce CodeSwing este instalat, vei vedea o previzualizare live a site-ului tău de CV apărând în editor. Acest lucru îți permite să vezi exact cum arată site-ul tău pe măsură ce faci modificări. -![Extensia CodeSwing afișând previzualizarea live](../../../../translated_images/ro/after-codeswing-extension-pb.0ebddddcf73b5509.png) +![Extensia CodeSwing afișând previzualizarea live](../../../../translated_images/ro/after-codeswing-extension-pb.0ebddddcf73b5509.webp) **Înțelegerea interfeței îmbunătățite:** - **Vizualizare divizată**: **Afișează** codul pe o parte și previzualizarea live pe cealaltă diff --git a/translations/ro/9-chat-project/README.md b/translations/ro/9-chat-project/README.md index 95d45fc7a..b63ed9e83 100644 --- a/translations/ro/9-chat-project/README.md +++ b/translations/ro/9-chat-project/README.md @@ -60,7 +60,7 @@ print(response.choices[0].message.content) Iată cum va arăta proiectul tău finalizat: -![Interfață aplicație de chat arătând conversație între utilizator și asistentul AI](../../../translated_images/ro/screenshot.0a1ee0d123df681b.png) +![Interfață aplicație de chat arătând conversație între utilizator și asistentul AI](../../../translated_images/ro/screenshot.0a1ee0d123df681b.webp) ## 🗺️ Călătoria ta de învățare prin dezvoltarea aplicațiilor AI @@ -189,7 +189,7 @@ mindmap ``` **Principiu de bază**: dezvoltarea aplicațiilor AI combină abilități tradiționale de dezvoltare web cu integrarea serviciilor AI, creând aplicații inteligente care par naturale și responsive pentru utilizatori. -![Interfață GitHub Models AI Playground cu selecție de model și zonă de testare](../../../translated_images/ro/playground.d2b927122224ff8f.png) +![Interfață GitHub Models AI Playground cu selecție de model și zonă de testare](../../../translated_images/ro/playground.d2b927122224ff8f.webp) **Ce face playground-ul atât de util:** - **Încearcă** diferite modele AI precum GPT-4o-mini, Claude și altele (toate gratuite!) @@ -199,7 +199,7 @@ mindmap După ce te joci puțin, apasă pe fila „Code” și alege limbajul de programare pentru a obține codul de implementare de care ai nevoie. -![Alegerea în Playground arătând opțiuni de generare cod pentru diferite limbaje de programare](../../../translated_images/ro/playground-choice.1d23ba7d407f4758.png) +![Alegerea în Playground arătând opțiuni de generare cod pentru diferite limbaje de programare](../../../translated_images/ro/playground-choice.1d23ba7d407f4758.webp) ## Configurarea Integrației Backend în Python @@ -2353,14 +2353,14 @@ Vrei să încerci acest proiect într-un mediu de dezvoltare în cloud? GitHub C - **Navighează** la [depozitul Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners) - **Apasă** pe „Use this template” în colțul din dreapta sus (asigură-te că ești logat în GitHub) -![Create from template interface showing the green "Use this template" button](../../../translated_images/ro/template.67ad477109d29a2b.png) +![Create from template interface showing the green "Use this template" button](../../../translated_images/ro/template.67ad477109d29a2b.webp) **Pasul 2: Pornește Codespaces** - **Deschide** depozitul proaspăt creat - **Apasă** pe butonul verde „Code” și selectează „Codespaces” - **Alege** „Create codespace on main” pentru a începe mediul de dezvoltare -![Create codespace interface with options for launching cloud development environment](../../../translated_images/ro/codespace.bcecbdf5d2747d3d.png) +![Create codespace interface with options for launching cloud development environment](../../../translated_images/ro/codespace.bcecbdf5d2747d3d.webp) **Pasul 3: Configurarea Mediului** Odată ce Codespace-ul tău este gata, vei avea acces la: diff --git a/translations/ro/README.md b/translations/ro/README.md index a5c018ed8..1baee294b 100644 --- a/translations/ro/README.md +++ b/translations/ro/README.md @@ -72,13 +72,13 @@ Nu rata noul nostru curriculum pentru Generative AI! Vizitează [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) pentru a începe! -![Background](../../translated_images/ro/background.148a8d43afde5730.png) +![Background](../../translated_images/ro/background.148a8d43afde5730.webp) - Lecții acoperind totul, de la elementele de bază până la RAG. - Interacționează cu personaje istorice folosind GenAI și aplicația noastră companion. - Narațiune distractivă și captivantă, vei călători în timp! -![character](../../translated_images/ro/character.5c0dd8e067ffd693.png) +![character](../../translated_images/ro/character.5c0dd8e067ffd693.webp) Fiecare lecție include o temă de completat, o verificare a cunoștințelor și o provocare pentru a te ghida în învățarea unor subiecte precum: @@ -115,7 +115,7 @@ Urmărește acești pași: În copia ta de repository pe care ai creat-o, dă click pe butonul **Code** și selectează **Open with Codespaces**. Aceasta va crea un nou Codespace pentru tine unde să lucrezi. -![Codespace](../../translated_images/ro/createcodespace.0238bbf4d7a8d955.png) +![Codespace](../../translated_images/ro/createcodespace.0238bbf4d7a8d955.webp) #### Rularea curriculum-ului local pe calculatorul tău diff --git a/translations/ro/for-teachers.md b/translations/ro/for-teachers.md index a6229a169..4bb8e2333 100644 --- a/translations/ro/for-teachers.md +++ b/translations/ro/for-teachers.md @@ -42,10 +42,10 @@ Acest curriculum include pachete importabile pentru fluxuri de lucru comune LMS. - Moodle Cloud are suport limitat pentru Common Cartridge. Preferabil să utilizați fișierul Moodle de mai sus, care poate fi încărcat și în Canvas. - După import, revizuiți modulele, termenele limită și setările chestionarelor pentru a se potrivi cu programul dvs. de semestru. -![Moodle](../../translated_images/ro/moodle.94eb93d714a50cb2.png) +![Moodle](../../translated_images/ro/moodle.94eb93d714a50cb2.webp) > Curriculumul într-o clasă Moodle -![Canvas](../../translated_images/ro/canvas.fbd605ff8e5b8aff.png) +![Canvas](../../translated_images/ro/canvas.fbd605ff8e5b8aff.webp) > Curriculumul în Canvas ### Utilizare directă a depozitului (fără Classroom) diff --git a/translations/sk/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/sk/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 4120e65bd..3d8179313 100644 --- a/translations/sk/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/sk/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ Pozri, úplne chápem, ak sa ti programovanie teraz zdá zastrašujúce. Keď so Dnes preskúmame úžasné nástroje, ktoré robia moderný webový vývoj nielen možným, ale aj vážne návykovým. Hovorím o presne tých editorech, prehliadačoch a pracovných postupoch, ktoré denno-denne používajú vývojári v Netflixe, Spotify a tvojej obľúbenej indie app štúdiu. A tu je časť, ktorá ťa rozveselí: väčšina týchto profesionálnych, priemyselných nástrojov je úplne zadarmo! -![Intro Programming](../../../../translated_images/sk/webdev101-programming.d6e3f98e61ac4bff.png) +![Intro Programming](../../../../translated_images/sk/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/sk/1-getting-started-lessons/2-github-basics/README.md b/translations/sk/1-getting-started-lessons/2-github-basics/README.md index eadebc512..db6f8b3e4 100644 --- a/translations/sk/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/sk/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ Vieme, že to môže byť spočiatku veľa – ja si pamätám, ako som prvýkr Túto cestu prejdeme spolu, krok za krokom. Bez naháňania, bez stresu – len ty, ja a niekoľko fakt skvelých nástrojov, ktoré sa stanú tvojimi novými najlepšími priateľmi! -![Úvod do GitHubu](../../../../translated_images/sk/webdev101-github.8846d7971abef6f9.png) +![Úvod do GitHubu](../../../../translated_images/sk/webdev101-github.8846d7971abef6f9.webp) > Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -605,7 +605,7 @@ Najskôr nájdeme repozitár (alebo **repo**) na GitHub, ktorý vás zaujíma a ✅ Dobrou cestou, ako nájsť 'začiatočníkom priateľské' repozitáre, je [vyhľadávanie podľa značky 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Copy a repo locally](../../../../translated_images/sk/clone_repo.5085c48d666ead57.png) +![Copy a repo locally](../../../../translated_images/sk/clone_repo.5085c48d666ead57.webp) Existuje niekoľko spôsobov, ako kód skopírovať. Jedným zo spôsobov je „klonovať“ obsah repozitára pomocou HTTPS, SSH alebo pomocou GitHub CLI (Command Line Interface). diff --git a/translations/sk/1-getting-started-lessons/3-accessibility/README.md b/translations/sk/1-getting-started-lessons/3-accessibility/README.md index 81d8ca63c..2bcb15552 100644 --- a/translations/sk/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/sk/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Vytváranie prístupných webstránok -![Všetko o prístupnosti](../../../../translated_images/sk/webdev101-a11y.8ef3025c858d897a.png) +![Všetko o prístupnosti](../../../../translated_images/sk/webdev101-a11y.8ef3025c858d897a.webp) > Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/sk/2-js-basics/1-data-types/README.md b/translations/sk/2-js-basics/1-data-types/README.md index c67320eac..3685acd1d 100644 --- a/translations/sk/2-js-basics/1-data-types/README.md +++ b/translations/sk/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript Základy: Dátové Typy -![JavaScript Základy - Dátové typy](../../../../translated_images/sk/webdev101-js-datatypes.4cc470179730702c.png) +![JavaScript Základy - Dátové typy](../../../../translated_images/sk/webdev101-js-datatypes.4cc470179730702c.webp) > Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/sk/2-js-basics/2-functions-methods/README.md b/translations/sk/2-js-basics/2-functions-methods/README.md index 43d59a065..5ee165373 100644 --- a/translations/sk/2-js-basics/2-functions-methods/README.md +++ b/translations/sk/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Základy JavaScriptu: Metódy a funkcie -![JavaScript Basics - Functions](../../../../translated_images/sk/webdev101-js-functions.be049c4726e94f8b.png) +![JavaScript Basics - Functions](../../../../translated_images/sk/webdev101-js-functions.be049c4726e94f8b.webp) > Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/sk/2-js-basics/3-making-decisions/README.md b/translations/sk/2-js-basics/3-making-decisions/README.md index 523d182d0..d47f7a7af 100644 --- a/translations/sk/2-js-basics/3-making-decisions/README.md +++ b/translations/sk/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript základy: Robenie rozhodnutí -![JavaScript Basics - Making decisions](../../../../translated_images/sk/webdev101-js-decisions.69e1b20f272dd1f0.png) +![JavaScript Basics - Making decisions](../../../../translated_images/sk/webdev101-js-decisions.69e1b20f272dd1f0.webp) > Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/sk/2-js-basics/4-arrays-loops/README.md b/translations/sk/2-js-basics/4-arrays-loops/README.md index e8e953880..d034c8d16 100644 --- a/translations/sk/2-js-basics/4-arrays-loops/README.md +++ b/translations/sk/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript základy: Polia a slučky -![JavaScript základy - Polia](../../../../translated_images/sk/webdev101-js-arrays.439d7528b8a29455.png) +![JavaScript základy - Polia](../../../../translated_images/sk/webdev101-js-arrays.439d7528b8a29455.webp) > Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/sk/3-terrarium/1-intro-to-html/README.md b/translations/sk/3-terrarium/1-intro-to-html/README.md index da0fe4cdf..55cdc43b3 100644 --- a/translations/sk/3-terrarium/1-intro-to-html/README.md +++ b/translations/sk/3-terrarium/1-intro-to-html/README.md @@ -25,7 +25,7 @@ journey Zlepšiť prístupnosť: 5: Student Vytvoriť terárium: 5: Student ``` -![Úvod do HTML](../../../../translated_images/sk/webdev101-html.4389c2067af68e98.png) +![Úvod do HTML](../../../../translated_images/sk/webdev101-html.4389c2067af68e98.webp) > Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac) HTML, alebo HyperText Markup Language, je základom každej webovej stránky, ktorú ste kedy navštívili. Predstavte si HTML ako kostru, ktorá dáva štruktúru webovým stránkam – určuje, kam obsah patrí, ako je usporiadaný a čo každý prvok predstavuje. Zatiaľ čo CSS neskôr „oblečie“ vašu HTML stránku farbami a rozloženiami, a JavaScript ju oživí interaktivitou, HTML poskytuje základnú štruktúru, ktorá robí všetko ostatné možným. @@ -86,7 +86,7 @@ Vytvoríte si vyhradenú zložku pre váš projekt terária a pridáte prvý HTM 4. V paneli Explorer kliknite na ikonu „Nový súbor“ 5. Pomenujte svoj súbor `index.html` -![VS Code Explorer ukazujúci vytvorenie nového súboru](../../../../translated_images/sk/vs-code-index.e2986cf919471eb9.png) +![VS Code Explorer ukazujúci vytvorenie nového súboru](../../../../translated_images/sk/vs-code-index.e2986cf919471eb9.webp) **Možnosť 2: Použitie terminálových príkazov** ```bash diff --git a/translations/sk/3-terrarium/2-intro-to-css/README.md b/translations/sk/3-terrarium/2-intro-to-css/README.md index 0ed3b3e13..3c62c2f6b 100644 --- a/translations/sk/3-terrarium/2-intro-to-css/README.md +++ b/translations/sk/3-terrarium/2-intro-to-css/README.md @@ -29,7 +29,7 @@ journey Responzívny dizajn: 5: Student Sklenené odrazy: 5: Student ``` -![Úvod do CSS](../../../../translated_images/sk/webdev101-css.3f7af5991bf53a20.png) +![Úvod do CSS](../../../../translated_images/sk/webdev101-css.3f7af5991bf53a20.webp) > Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac) Pamätáš si, ako tvoje HTML terárium vyzeralo celkom jednoducho? CSS je miesto, kde túto základnú štruktúru premeníme na niečo vizuálne príťažlivé. @@ -202,7 +202,7 @@ body { Otvori si nástroje pre vývojárov v prehliadači (F12), prejdí do záložky Elements a pozri si element `

`. Uvidíš, že zdedil rodinu písma z body: -![dedičné písmo](../../../../translated_images/sk/1.cc07a5cbe114ad1d.png) +![dedičné písmo](../../../../translated_images/sk/1.cc07a5cbe114ad1d.webp) ✅ **Čas na experiment**: Skús nastaviť na `` iné dedičné vlastnosti ako `color`, `line-height` alebo `text-align`. Čo sa stane s nadpisom a ďalšími elementmi? @@ -594,7 +594,7 @@ Ste pripravení vylepšiť svoj terárium realistickými odrazmi skla? Táto tec Vytvoríte jemné svetlé zvýraznenia, ktoré simulujú, ako sa svetlo odráža od sklenených plôch. Tento prístup je podobný tomu, ako renesanční maliari ako Jan van Eyck používali svetlo a odraz na vytvorenie trojrozmerného dojmu maľovaného skla. Tu je cieľ: -![hotové terárium](../../../../translated_images/sk/terrarium-final.2f07047ffc597d0a.png) +![hotové terárium](../../../../translated_images/sk/terrarium-final.2f07047ffc597d0a.webp) **Vaša výzva:** - **Vytvorte** jemné biele alebo svetlé oválne tvary pre odrazy skla diff --git a/translations/sk/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/sk/3-terrarium/3-intro-to-DOM-and-closures/README.md index 47557ca9b..ba696c157 100644 --- a/translations/sk/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/sk/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -25,7 +25,7 @@ journey Test functionality: 5: Student Complete terrarium: 5: Student ``` -![DOM a closure](../../../../translated_images/sk/webdev101-js.10280393044d7eaa.png) +![DOM a closure](../../../../translated_images/sk/webdev101-js.10280393044d7eaa.webp) > Sketchnote od [Tomomi Imura](https://twitter.com/girlie_mac) Vitajte v jednej z najpútavejších oblastí webového vývoja – robíme veci interaktívnymi! Document Object Model (DOM) je ako most medzi vaším HTML a JavaScriptom, a dnes ho použijeme na oživenie vášho terrária. Keď Tim Berners-Lee vytvoril prvý webový prehliadač, predstavoval si web, kde môžu byť dokumenty dynamické a interaktívne – DOM túto víziu umožňuje. @@ -102,7 +102,7 @@ flowchart TD style P fill:#ffebee style Q fill:#ffebee ``` -![Reprezentácia DOM stromu](../../../../translated_images/sk/dom-tree.7daf0e763cbbba92.png) +![Reprezentácia DOM stromu](../../../../translated_images/sk/dom-tree.7daf0e763cbbba92.webp) > Reprezentácia DOM a HTML značkovania, ktoré naň odkazuje. Od [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -146,7 +146,7 @@ flowchart LR ``` > 💡 **Pochopenie Closures**: Closures sú významnou témou v JavaScripte a mnoho vývojárov ich používa roky, než úplne pochopia všetky teoretické aspekty. Dnes sa zameriame na praktickú aplikáciu – closures prirodzene uvidíte vzniknúť počas budovania našich interaktívnych funkcií. Pochopenie sa vyvinie, ako uvidíte, ako riešia skutočné problémy. -![Reprezentácia DOM stromu](../../../../translated_images/sk/dom-tree.7daf0e763cbbba92.png) +![Reprezentácia DOM stromu](../../../../translated_images/sk/dom-tree.7daf0e763cbbba92.webp) > Reprezentácia DOM a HTML značkovania, ktoré naň odkazuje. Od [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -591,7 +591,7 @@ Teraz otestujte svoje interaktívne terárium! Otvorte súbor `index.html` vo we - **Podpora zariadení**: Funguje na desktopoch aj mobiloch - **Výkonová uvedomelosť**: Žiadne úniky pamäte alebo nadbytočné výpočty -![finished terrarium](../../../../translated_images/sk/terrarium-final.0920f16e87c13a84.png) +![finished terrarium](../../../../translated_images/sk/terrarium-final.0920f16e87c13a84.webp) --- diff --git a/translations/sk/3-terrarium/solution/README.md b/translations/sk/3-terrarium/solution/README.md index 5b8560627..47bc13df2 100644 --- a/translations/sk/3-terrarium/solution/README.md +++ b/translations/sk/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Malá meditácia s kódom na princípe drag and drop. S trochou HTML, JS a CSS môžete vytvoriť webové rozhranie, upraviť jeho štýl a pridať interakciu. -![moje terárium](../../../../translated_images/sk/screenshot_gray.0c796099a1f9f25e.png) +![moje terárium](../../../../translated_images/sk/screenshot_gray.0c796099a1f9f25e.webp) ## Poďakovania diff --git a/translations/sk/5-browser-extension/1-about-browsers/README.md b/translations/sk/5-browser-extension/1-about-browsers/README.md index 76700e41a..3a2818955 100644 --- a/translations/sk/5-browser-extension/1-about-browsers/README.md +++ b/translations/sk/5-browser-extension/1-about-browsers/README.md @@ -25,7 +25,7 @@ journey Debug issues: 4: Student Polish experience: 5: Student ``` -![Browser sketchnote](../../../../translated_images/sk/browser.60317c9be8b7f84a.jpg) +![Browser sketchnote](../../../../translated_images/sk/browser.60317c9be8b7f84a.webp) > Sketchnote od [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## Kvíz pred prednáškou @@ -77,7 +77,7 @@ Tento proces odráža spôsob, akým bol prvý webový prehliadač WorldWideWeb ✅ **Trocha histórie**: Prvý prehliadač sa volal 'WorldWideWeb' a vytvoril ho Sir Timothy Berners-Lee v roku 1990. -![early browsers](../../../../translated_images/sk/earlybrowsers.d984b711cdf3a42d.jpg) +![early browsers](../../../../translated_images/sk/earlybrowsers.d984b711cdf3a42d.webp) > Niektoré skoré prehliadače, podľa [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### Ako prehliadače spracovávajú webový obsah @@ -194,7 +194,7 @@ quadrantChart Pochopenie procesu inštalácie rozšírenia vám pomôže predvídať používateľský zážitok, keď si ľudia inštalujú vaše rozšírenie. Proces inštalácie je štandardizovaný vo väčšine moderných prehliadačov, s drobnými rozdielmi v dizajne rozhrania. -![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/sk/install-on-edge.d68781acaf0b3d3d.png) +![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/sk/install-on-edge.d68781acaf0b3d3d.webp) > **Dôležité**: Uistite sa, že máte zapnutý režim vývojára a povolené rozšírenia z iných obchodov, keď testujete vlastné rozšírenia. @@ -308,10 +308,10 @@ Toto nasleduje princíp postupného odhaľovania, ktorý sa používa v dizajne ### Prehľad pohľadov rozšírenia **Zobrazenie nastavenia** – Konfigurácia pre používateľov pri prvom použití: -![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/sk/1.b6da8c1394b07491.png) +![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/sk/1.b6da8c1394b07491.webp) **Zobrazenie výsledkov** – Zobrazenie údajov uhlíkovej stopy: -![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/sk/2.1dae52ff08042246.png) +![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/sk/2.1dae52ff08042246.webp) ### Vytvorenie konfiguračného formulára diff --git a/translations/sk/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/sk/5-browser-extension/2-forms-browsers-local-storage/README.md index ec644a0ea..5936e1600 100644 --- a/translations/sk/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/sk/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -263,7 +263,7 @@ stateDiagram-v2 Reset --> ClearStorage: Odstrániť uložené údaje ClearStorage --> FirstTime: Späť na nastavenie ``` -![Panel lokálneho úložiska](../../../../translated_images/sk/localstorage.472f8147b6a3f8d1.png) +![Panel lokálneho úložiska](../../../../translated_images/sk/localstorage.472f8147b6a3f8d1.webp) > ⚠️ **Bezpečnostné upozornenie**: V produkčných aplikáciách predstavuje uloženie API kľúčov v LocalStorage bezpečnostné riziko, pretože JavaScript k nim môže pristupovať. Pre vzdelávacie účely to funguje, ale reálne aplikácie by mali citlivé poverenia ukladať bezpečne na serverovej strane. diff --git a/translations/sk/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/sk/5-browser-extension/3-background-tasks-and-performance/README.md index a55adb6e2..8cc3f7246 100644 --- a/translations/sk/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/sk/5-browser-extension/3-background-tasks-and-performance/README.md @@ -123,7 +123,7 @@ Ak chcete otvoriť Nástroje vývojára v Edge, kliknite na tie tri bodky v prav Poďme to vyskúšať. Otvorte nejakú webovú stránku (napríklad Microsoft.com funguje dobre) a kliknite na tlačidlo 'Nahrávanie'. Teraz obnovte stránku a sledujte, ako profiler zaznamenáva všetko, čo sa deje. Keď zastavíte nahrávanie, uvidíte podrobný rozpis, ako prehliadač 'spúšťa skripty', 'vykresľuje' a 'maľuje' stránku. Pripomína mi to, ako riadiace stredisko monitoruje každý systém počas štartu rakety – máte dáta v reálnom čase o tom, čo sa presne deje a kedy. -![Edge profiler](../../../../translated_images/sk/profiler.5a4a62479c5df01c.png) +![Edge profiler](../../../../translated_images/sk/profiler.5a4a62479c5df01c.webp) ✅ Dokumentácia [Microsoftu](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) obsahuje množstvo detailov, ak chcete ísť viac do hĺbky @@ -133,11 +133,11 @@ Vyberte prvky časovej osi profilu, aby ste sa priblížili na udalosti, ktoré Získajte rýchly prehľad o výkone stránky výberom časti časovej osi profilu a zobrazením sumárneho panelu: -![Edge profiler snapshot](../../../../translated_images/sk/snapshot.97750180ebcad737.png) +![Edge profiler snapshot](../../../../translated_images/sk/snapshot.97750180ebcad737.webp) Skontrolujte panel Záznam udalostí, či sa niektorá udalosť nepretiahla nad 15 ms: -![Edge event log](../../../../translated_images/sk/log.804026979f3707e0.png) +![Edge event log](../../../../translated_images/sk/log.804026979f3707e0.webp) ✅ Spoznajte svoj profiler! Otvorte nástroje vývojára na tejto stránke a zistite, či sú nejaké úzke miesta. Ktorý zdroj sa načítava najpomalšie? Ktorý najsrýchlejšie? diff --git a/translations/sk/5-browser-extension/README.md b/translations/sk/5-browser-extension/README.md index 523351080..170db678e 100644 --- a/translations/sk/5-browser-extension/README.md +++ b/translations/sk/5-browser-extension/README.md @@ -23,7 +23,7 @@ Toto rozšírenie môže byť používateľom spustené ad hoc po zadaní API k ### Kredity -![zelené rozšírenie prehliadača](../../../translated_images/sk/extension-screenshot.0e7f5bfa110e92e3.png) +![zelené rozšírenie prehliadača](../../../translated_images/sk/extension-screenshot.0e7f5bfa110e92e3.webp) ## Kredity diff --git a/translations/sk/5-browser-extension/solution/README.md b/translations/sk/5-browser-extension/solution/README.md index c73e2542b..1166f06eb 100644 --- a/translations/sk/5-browser-extension/solution/README.md +++ b/translations/sk/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Použitím API C02 Signal od tmrow na sledovanie spotreby elektriny vytvorte rozšírenie prehliadača, aby ste mali pripomienku priamo vo svojom prehliadači o tom, aká náročná je spotreba elektriny vo vašom regióne. Používanie tohto rozšírenia ad hoc vám pomôže robiť rozhodnutia o vašich aktivitách na základe týchto informácií. -![screenshot rozšírenia](../../../../translated_images/sk/extension-screenshot.0e7f5bfa110e92e3.png) +![screenshot rozšírenia](../../../../translated_images/sk/extension-screenshot.0e7f5bfa110e92e3.webp) ## Začíname @@ -31,7 +31,7 @@ npm run build Na inštaláciu v Edge použite menu „tri bodky“ v pravom hornom rohu prehliadača, aby ste našli panel Rozšírenia. Odtiaľ vyberte „Načítať nebalené“ na načítanie nového rozšírenia. Pri výzve otvorte priečinok „dist“ a rozšírenie sa načíta. Na jeho používanie budete potrebovať API kľúč pre API CO2 Signal ([získajte ho tu cez email](https://www.co2signal.com/) - zadajte svoj email do políčka na tejto stránke) a [kód pre váš región](http://api.electricitymap.org/v3/zones) zodpovedajúci [Electricity Map](https://www.electricitymap.org/map) (napríklad v Bostone používam 'US-NEISO'). -![inštalácia](../../../../translated_images/sk/install-on-edge.78634f02842c4828.png) +![inštalácia](../../../../translated_images/sk/install-on-edge.78634f02842c4828.webp) Keď zadáte API kľúč a región do rozhrania rozšírenia, farebná bodka v paneli rozšírenia prehliadača by sa mala zmeniť tak, aby odrážala spotrebu energie vo vašom regióne a poskytla vám odporúčanie, aké energeticky náročné aktivity by boli vhodné vykonať. Koncept za týmto systémom „bodky“ mi bol inšpirovaný rozšírením [Energy Lollipop](https://energylollipop.com/) pre emisie v Kalifornii. diff --git a/translations/sk/5-browser-extension/solution/translation/README.fr.md b/translations/sk/5-browser-extension/solution/translation/README.fr.md index 77ef4b3ca..5cec651d5 100644 --- a/translations/sk/5-browser-extension/solution/translation/README.fr.md +++ b/translations/sk/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Pomocou API C02 Signal od tmrow na sledovanie spotreby elektriny vytvorte rozšírenie prehliadača, aby ste mohli mať priamo vo svojom prehliadači pripomienku o spotrebe elektriny vo vašom regióne. Používanie tohto ad hoc rozšírenia vám pomôže robiť rozhodnutia o vašich aktivitách na základe týchto informácií. -![snímka rozšírenia](../../../../../translated_images/sk/extension-screenshot.0e7f5bfa110e92e3.png) +![snímka rozšírenia](../../../../../translated_images/sk/extension-screenshot.0e7f5bfa110e92e3.webp) ## Začíname @@ -31,7 +31,7 @@ npm run build Na inštaláciu v prehliadači Edge použite menu „tri bodky“ v pravom hornom rohu prehliadača na otvorenie panela Rozšírenia. Odtiaľ vyberte „Načítať rozbalené rozšírenie“ na pridanie nového rozšírenia. Pri výzve otvorte priečinok „dist“ a rozšírenie sa načíta. Na jeho používanie budete potrebovať API kľúč pre API CO2 Signal ([získajte ho tu e-mailom](https://www.co2signal.com/) – zadajte svoj e-mail do poľa na tejto stránke) a [kód pre váš región](http://api.electricitymap.org/v3/zones) zodpovedajúci [mape elektriny](https://www.electricitymap.org/map) (napríklad v Bostone používam 'US-NEISO'). -![inštalácia](../../../../../translated_images/sk/install-on-edge.78634f02842c4828.png) +![inštalácia](../../../../../translated_images/sk/install-on-edge.78634f02842c4828.webp) Keď zadáte API kľúč a región do rozhrania rozšírenia, farebný bod v paneli rozšírení prehliadača by sa mal zmeniť tak, aby odrážal spotrebu energie vo vašom regióne, a poskytol vám indikátor, ktoré energeticky náročné aktivity by bolo vhodné vykonávať. Koncept tohto systému „bodov“ mi bol inšpirovaný [rozšírením Energy Lollipop](https://energylollipop.com/) pre kalifornské emisie. diff --git a/translations/sk/5-browser-extension/solution/translation/README.hi.md b/translations/sk/5-browser-extension/solution/translation/README.hi.md index 3866d40e8..7b4ac07cb 100644 --- a/translations/sk/5-browser-extension/solution/translation/README.hi.md +++ b/translations/sk/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Použitie API CO2 Signal od tmrow na sledovanie spotreby elektriny, vytvorenie rozšírenia prehliadača, ktoré vám pripomenie, aká náročná je spotreba elektriny vo vašej oblasti. Používanie tohto rozšírenia vám pomôže robiť rozhodnutia o vašich aktivitách na základe týchto informácií. -![Screenshot rozšírenia](../../../../../translated_images/sk/extension-screenshot.0e7f5bfa110e92e3.png) +![Screenshot rozšírenia](../../../../../translated_images/sk/extension-screenshot.0e7f5bfa110e92e3.webp) ## Začíname @@ -31,7 +31,7 @@ npm run build Na inštaláciu v Edge použite menu „tri bodky“ v pravom hornom rohu prehliadača na vyhľadanie panelu rozšírení. Odtiaľ vyberte „Načítať nebalené“ na načítanie nového rozšírenia. V zobrazenom okne otvorte priečinok „dist“ a rozšírenie sa načíta. Na jeho používanie budete potrebovať API kľúč CO2 Signal ([získajte ho e-mailom tu](https://www.co2signal.com/) – zadajte svoj e-mail do políčka na tejto stránke) a [kód pre vašu oblasť](http://api.electricitymap.org/v3/zones) z [Electricity Map](https://www.electricitymap.org/map) (napríklad v Bostone používam „US-NEISO“). -![Inštalácia](../../../../../translated_images/sk/install-on-edge.78634f02842c4828.png) +![Inštalácia](../../../../../translated_images/sk/install-on-edge.78634f02842c4828.webp) Keď zadáte API kľúč a kód oblasti do rozhrania rozšírenia, farebný bod v paneli rozšírenia prehliadača by sa mal zmeniť tak, aby odrážal spotrebu energie vo vašej oblasti. Poskytne vám indikátor, ktoré energeticky náročné aktivity sú vhodné pre váš výkon. Koncept tejto „bodovej“ systému mi bol inšpirovaný rozšírením [Energy Lollipop](https://energylollipop.com/) pre emisie v Kalifornii. diff --git a/translations/sk/5-browser-extension/solution/translation/README.it.md b/translations/sk/5-browser-extension/solution/translation/README.it.md index c51f3c35b..d78747d72 100644 --- a/translations/sk/5-browser-extension/solution/translation/README.it.md +++ b/translations/sk/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Použije sa API Signal CO2 od tmrow na sledovanie spotreby elektriny, aby sa vytvorilo rozšírenie pre prehliadač, ktoré poskytne pripomienku priamo v prehliadači o tom, aká náročná je spotreba elektriny vo vašom regióne. Používanie tohto rozšírenia pomôže lepšie zhodnotiť svoje aktivity na základe týchto informácií. -![screenshot rozšírenia](../../../../../translated_images/sk/extension-screenshot.0e7f5bfa110e92e3.png) +![screenshot rozšírenia](../../../../../translated_images/sk/extension-screenshot.0e7f5bfa110e92e3.webp) ## Začíname @@ -31,7 +31,7 @@ npm run build Na inštaláciu v Edge použite menu "tri bodky" v pravom hornom rohu prehliadača a vyhľadajte panel Rozšírenia. Ak ešte nie je aktívny, zapnite režim vývojára (v dolnej časti). Vyberte "Načítať rozbalené" na načítanie nového rozšírenia. Otvorte priečinok "dist" v zobrazenom okne a rozšírenie sa načíta. Na jeho používanie budete potrebovať API kľúč pre CO2 Signal API (môžete ho [získať tu e-mailom](https://www.co2signal.com/) - zadajte svoju e-mailovú adresu do políčka na tejto stránke) a [kód pre váš región](http://api.electricitymap.org/v3/zones) zodpovedajúci [elektrickej mape](https://www.electricitymap.org/map) (napríklad v Bostone "US-NEISO"). -![inštalácia](../../../../../translated_images/sk/install-on-edge.78634f02842c4828.png) +![inštalácia](../../../../../translated_images/sk/install-on-edge.78634f02842c4828.webp) Keď zadáte API kľúč a región do rozhrania rozšírenia, farebný bod v paneli rozšírenia prehliadača by sa mal zmeniť tak, aby odrážal spotrebu energie vo vašom regióne. Poskytne tiež návod na to, ktoré aktivity s vysokou spotrebou energie by boli vhodné vykonať. Koncept tohto systému "bodov" bol inšpirovaný [rozšírením Energy Lollipop](https://energylollipop.com/) pre emisie v Kalifornii. diff --git a/translations/sk/5-browser-extension/solution/translation/README.ja.md b/translations/sk/5-browser-extension/solution/translation/README.ja.md index 869d8f6f4..c82ff17c2 100644 --- a/translations/sk/5-browser-extension/solution/translation/README.ja.md +++ b/translations/sk/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Pomocou API CO2 Signal od tmrow môžete sledovať spotrebu elektrickej energie vo vašej oblasti a zobrazovať pripomienky priamo v prehliadači. Toto rozšírenie vám umožní rozhodovať sa na základe týchto informácií o vašich aktivitách. -![screenshot rozšírenia](../../../../../translated_images/sk/extension-screenshot.0e7f5bfa110e92e3.png) +![screenshot rozšírenia](../../../../../translated_images/sk/extension-screenshot.0e7f5bfa110e92e3.webp) ## Začíname @@ -31,7 +31,7 @@ npm run build Ak chcete rozšírenie nainštalovať do Edge, otvorte panel „Rozšírenia“ cez menu „tri bodky“ v pravom hornom rohu prehliadača. Vyberte možnosť „Load Unpacked“ a načítajte nové rozšírenie. Keď sa zobrazí výzva, otvorte priečinok „dist“ a rozšírenie sa načíta. Na používanie budete potrebovať API kľúč CO2 Signal ([získajte ho tu cez e-mail](https://www.co2signal.com/) - zadajte svoj e-mail do políčka na stránke) a [kód pre vašu oblasť](http://api.electricitymap.org/v3/zones) zodpovedajúci [Electricity Map](https://www.electricitymap.org/map) (napríklad pre Boston použite 'US-NEISO'). -![inštalácia](../../../../../translated_images/sk/install-on-edge.78634f02842c4828.png) +![inštalácia](../../../../../translated_images/sk/install-on-edge.78634f02842c4828.webp) Po zadaní API kľúča a oblasti do rozhrania rozšírenia sa farba bodky v rozšírenej lište prehliadača zmení, aby odrážala energetickú spotrebu vo vašej oblasti. Táto bodka vám pomôže rozhodnúť, aké aktivity vyžadujúce energiu sú vhodné. Koncept systému „bodky“ som si osvojil z rozšírenia [Energy Lollipop](https://energylollipop.com/) pre emisie v Kalifornii. diff --git a/translations/sk/5-browser-extension/solution/translation/README.ms.md b/translations/sk/5-browser-extension/solution/translation/README.ms.md index 55a885630..7cc775326 100644 --- a/translations/sk/5-browser-extension/solution/translation/README.ms.md +++ b/translations/sk/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Použitím API CO2 Signal od tmrow na sledovanie spotreby elektrickej energie vytvorte rozšírenie prehliadača, ktoré vám umožní dostávať upozornenia o aktuálnej záťaži spotreby elektrickej energie vo vašom regióne. Používanie tohto rozšírenia vám pomôže robiť informované rozhodnutia o vašich aktivitách na základe týchto údajov. -![screenshot rozšírenia prehliadača](../../../../../translated_images/sk/extension-screenshot.0e7f5bfa110e92e3.png) +![screenshot rozšírenia prehliadača](../../../../../translated_images/sk/extension-screenshot.0e7f5bfa110e92e3.webp) ## Začíname @@ -31,7 +31,7 @@ npm run build Na inštaláciu v Edge použite menu „tri bodky“ v pravom hornom rohu prehliadača a vyhľadajte panel Rozšírenia. Odtiaľ vyberte „Load Unpacked“ na načítanie nového rozšírenia. Otvorte priečinok „dist“ na požiadanie a rozšírenie sa načíta. Na jeho používanie budete potrebovať API kľúč pre CO2 Signal ([získajte ho tu cez e-mail](https://www.co2signal.com/) - zadajte svoj e-mail do políčka na stránke) a [kód pre váš región](http://api.electricitymap.org/v3/zones), ktorý zodpovedá [Elektrickej mape](https://www.electricitymap.org/map) (napríklad v Bostone používam 'US-NEISO'). -![sťahovanie](../../../../../translated_images/sk/install-on-edge.78634f02842c4828.png) +![sťahovanie](../../../../../translated_images/sk/install-on-edge.78634f02842c4828.webp) Po zadaní API kľúča a regiónu do rozhrania rozšírenia sa farebný bod na paneli rozšírenia prehliadača zmení, aby odrážal spotrebu energie vo vašom regióne, a poskytne vám odporúčania ohľadom vhodných aktivít. Koncept systému „bodov“ mi bol inšpiráciou od [rozšírenia prehliadača Energy Lollipop](https://energylollipop.com/) pre Kaliforniu. diff --git a/translations/sk/5-browser-extension/start/README.md b/translations/sk/5-browser-extension/start/README.md index 1fe3e95bc..6cf9e593f 100644 --- a/translations/sk/5-browser-extension/start/README.md +++ b/translations/sk/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Použitím API C02 Signal od tmrow na sledovanie spotreby elektriny vytvorte rozšírenie prehliadača, aby ste mali pripomienku priamo vo svojom prehliadači o tom, aká náročná je spotreba elektriny vo vašom regióne. Používanie tohto rozšírenia ad hoc vám pomôže robiť rozhodnutia o vašich aktivitách na základe týchto informácií. -![screenshot rozšírenia](../../../../translated_images/sk/extension-screenshot.0e7f5bfa110e92e3.png) +![screenshot rozšírenia](../../../../translated_images/sk/extension-screenshot.0e7f5bfa110e92e3.webp) ## Začíname @@ -31,7 +31,7 @@ npm run build Na inštaláciu v Edge použite menu „tri bodky“ v pravom hornom rohu prehliadača na nájdenie panelu Rozšírenia. Odtiaľ vyberte „Načítať nebalené“ na načítanie nového rozšírenia. Pri výzve otvorte priečinok „dist“ a rozšírenie sa načíta. Na jeho používanie budete potrebovať API kľúč pre API CO2 Signal ([získajte ho tu cez e-mail](https://www.co2signal.com/) - zadajte svoj e-mail do políčka na tejto stránke) a [kód pre váš región](http://api.electricitymap.org/v3/zones) zodpovedajúci [Electricity Map](https://www.electricitymap.org/map) (napríklad v Bostone používam 'US-NEISO'). -![inštalácia](../../../../translated_images/sk/install-on-edge.78634f02842c4828.png) +![inštalácia](../../../../translated_images/sk/install-on-edge.78634f02842c4828.webp) Keď zadáte API kľúč a región do rozhrania rozšírenia, farebná bodka v paneli rozšírenia prehliadača by sa mala zmeniť tak, aby odrážala spotrebu energie vo vašom regióne a poskytla vám návod, aké energeticky náročné aktivity by boli vhodné vykonať. Koncept za týmto systémom „bodky“ mi bol inšpirovaný rozšírením [Energy Lollipop](https://energylollipop.com/) pre emisie v Kalifornii. diff --git a/translations/sk/6-space-game/2-drawing-to-canvas/README.md b/translations/sk/6-space-game/2-drawing-to-canvas/README.md index 330c201d1..8ab974dbb 100644 --- a/translations/sk/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/sk/6-space-game/2-drawing-to-canvas/README.md @@ -105,7 +105,7 @@ quadrantChart Power-up: [0.7, 0.6] UI Elements: [0.9, 0.1] ``` -![mriežka canvasu](../../../../translated_images/sk/canvas_grid.5f209da785ded492.png) +![mriežka canvasu](../../../../translated_images/sk/canvas_grid.5f209da785ded492.webp) > Obrázok z [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) Na kreslenie na prvok canvas nasledujete rovnaký trojkrokový proces, ktorý tvorí základ všetkých canvas grafík. Keď to urobíte niekoľkokrát, stane sa to pre vás prirodzené: @@ -323,11 +323,11 @@ Vytvoríte webovú stránku s prvkom Canvas. Mali by ste vykresliť čiernu obra - Hrdina loď - ![Hrdina loď](../../../../translated_images/sk/player.dd24c1afa8c71e9b.png) + ![Hrdina loď](../../../../translated_images/sk/player.dd24c1afa8c71e9b.webp) - 5×5 príšery - ![Loď príšery](../../../../translated_images/sk/enemyShip.5df2a822c16650c2.png) + ![Loď príšery](../../../../translated_images/sk/enemyShip.5df2a822c16650c2.webp) ### Odporúčané kroky na začiatok vývoja @@ -463,7 +463,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { Hotový výsledok by mal vyzerať takto: -![Čierna obrazovka s hrdinom a 5*5 príšerami](../../../../translated_images/sk/partI-solution.36c53b48c9ffae2a.png) +![Čierna obrazovka s hrdinom a 5*5 príšerami](../../../../translated_images/sk/partI-solution.36c53b48c9ffae2a.webp) ## Riešenie diff --git a/translations/sk/6-space-game/5-keeping-score/README.md b/translations/sk/6-space-game/5-keeping-score/README.md index ab57f7836..0b157e8a0 100644 --- a/translations/sk/6-space-game/5-keeping-score/README.md +++ b/translations/sk/6-space-game/5-keeping-score/README.md @@ -155,7 +155,7 @@ sequenceDiagram end ``` - **Systém bodovania**: Každá zničená nepriateľská loď udeľuje 100 bodov (okrúhle čísla sa hráčom ľahšie počítajú v hlave). Skóre sa zobrazuje v ľavom dolnom rohu. -- **Počítadlo životov**: Tvoj hrdina začína s tromi životmi - štandard, ktorý stanovali rané arkádové hry pre rovnováhu výzvy a hrateľnosti. Každá kolízia s nepriateľom stojí jeden život. Zostávajúce životy zobrazíme v pravom dolnom rohu pomocou ikon lodí ![life image](../../../../translated_images/sk/life.6fb9f50d53ee0413.png). +- **Počítadlo životov**: Tvoj hrdina začína s tromi životmi - štandard, ktorý stanovali rané arkádové hry pre rovnováhu výzvy a hrateľnosti. Každá kolízia s nepriateľom stojí jeden život. Zostávajúce životy zobrazíme v pravom dolnom rohu pomocou ikon lodí ![life image](../../../../translated_images/sk/life.6fb9f50d53ee0413.webp). ## Let's Get Building! diff --git a/translations/sk/7-bank-project/1-template-route/README.md b/translations/sk/7-bank-project/1-template-route/README.md index e804352df..49c40266a 100644 --- a/translations/sk/7-bank-project/1-template-route/README.md +++ b/translations/sk/7-bank-project/1-template-route/README.md @@ -644,7 +644,7 @@ sequenceDiagram Použitie `history.pushState` vytvára nové zápisy v histórii prehliadača. Môžete to overiť podržaním *tlačidla späť* vo vašom prehliadači, malo by vám to zobraziť niečo takéto: -![Screenshot of navigation history](../../../../translated_images/sk/history.7fdabbafa521e064.png) +![Screenshot of navigation history](../../../../translated_images/sk/history.7fdabbafa521e064.webp) Ak kliknete na tlačidlo späť niekoľkokrát, uvidíte, že sa mení aktuálna URL a história sa aktualizuje, ale stále sa zobrazuje tá istá šablóna. diff --git a/translations/sk/7-bank-project/2-forms/README.md b/translations/sk/7-bank-project/2-forms/README.md index 0af8453bb..ff3e58776 100644 --- a/translations/sk/7-bank-project/2-forms/README.md +++ b/translations/sk/7-bank-project/2-forms/README.md @@ -292,7 +292,7 @@ Najprv si všimnime, čo sa deje pri základnom odoslaní formulára: 2. Sledujte zmenu URL v adresnom riadku prehliadača 3. Všimnite si, ako stránka obnoví a údaje sa zobrazia v URL -![Screenshot zmeny URL v prehliadači po kliknutí na tlačidlo Register](../../../../translated_images/sk/click-register.e89a30bf0d4bc9ca.png) +![Screenshot zmeny URL v prehliadači po kliknutí na tlačidlo Register](../../../../translated_images/sk/click-register.e89a30bf0d4bc9ca.webp) ### Porovnanie HTTP metód @@ -346,7 +346,7 @@ Nakonfigurujme váš registračný formulár tak, aby správne komunikoval so ba 2. **Kliknite** na tlačidlo "Create Account" 3. **Sledujte** odpoveď servera v prehliadači -![Okno prehliadača na adrese localhost:5000/api/accounts s JSON reťazcom obsahujúcim údaje o používateľovi](../../../../translated_images/sk/form-post.61de4ca1b964d91a.png) +![Okno prehliadača na adrese localhost:5000/api/accounts s JSON reťazcom obsahujúcim údaje o používateľovi](../../../../translated_images/sk/form-post.61de4ca1b964d91a.webp) **Čo by ste mali vidieť:** - **Prehliadač sa presmeruje** na URL API endpointu @@ -609,7 +609,7 @@ async function register() { 3. **Kliknite** na "Vytvoriť účet" 4. **Sledujte** správy v konzole a spätnú väzbu používateľa -![Screenshot showing log message in the browser console](../../../../translated_images/sk/browser-console.efaf0b51aaaf6778.png) +![Screenshot showing log message in the browser console](../../../../translated_images/sk/browser-console.efaf0b51aaaf6778.webp) **Čo by ste mali vidieť:** - **Stav načítavania** sa zobrazí na tlačidle odoslania @@ -783,7 +783,7 @@ Vylepšime váš registračný formulár robustnou validáciou, ktorá zabezpeč 3. **Vyskúšajte** špeciálne znaky v poli užívateľského mena 4. **Zadajte** zápornú hodnotu zostatku -![Screenshot showing the validation error when trying to submit the form](../../../../translated_images/sk/validation-error.8bd23e98d416c22f.png) +![Screenshot showing the validation error when trying to submit the form](../../../../translated_images/sk/validation-error.8bd23e98d416c22f.webp) **Čo uvidíte:** - **Prehliadač zobrazí** natívne validačné správy @@ -943,7 +943,7 @@ Zobrazte chybové hlásenie v HTML, ak užívateľ už existuje. Tu je príklad, ako môže konečná prihlasovacia stránka vyzerať po miernom úprave štýlov: -![Snímka obrazovky prihlasovacej stránky po pridaní CSS štýlov](../../../../translated_images/sk/result.96ef01f607bf856a.png) +![Snímka obrazovky prihlasovacej stránky po pridaní CSS štýlov](../../../../translated_images/sk/result.96ef01f607bf856a.webp) ## Kvíz po prednáške diff --git a/translations/sk/7-bank-project/3-data/README.md b/translations/sk/7-bank-project/3-data/README.md index 9ce506792..eae672101 100644 --- a/translations/sk/7-bank-project/3-data/README.md +++ b/translations/sk/7-bank-project/3-data/README.md @@ -156,7 +156,7 @@ sequenceDiagram Server->>Browser: Vráti kompletnú HTML stránku Browser->>User: Zobrazí novú stránku (bliknutie/obnovenie) ``` -![Pracovný postup aktualizácie vo viacstránkovej aplikácii](../../../../translated_images/sk/mpa.7f7375a1a2d4aa77.png) +![Pracovný postup aktualizácie vo viacstránkovej aplikácii](../../../../translated_images/sk/mpa.7f7375a1a2d4aa77.webp) **Prečo tento prístup pôsobil neohrabane:** - Každým kliknutím sa celé znovu načítavala stránka @@ -182,7 +182,7 @@ sequenceDiagram JavaScript->>Browser: Aktualizuje konkrétne prvky stránky Browser->>User: Zobrazuje aktualizovaný obsah (bez obnovenia) ``` -![Pracovný postup aktualizácie v jednostránkovej aplikácii](../../../../translated_images/sk/spa.268ec73b41f992c2.png) +![Pracovný postup aktualizácie v jednostránkovej aplikácii](../../../../translated_images/sk/spa.268ec73b41f992c2.webp) **Prečo sa SPA cítia omnoho lepšie:** - Aktualizujú sa len zmenené časti (šikovné, však?) @@ -516,7 +516,7 @@ if (data.error) { Teraz, keď otestujete s neplatným účtom, uvidíte na stránke užitočnú chybovú správu! -![Screenshot zobrazujúci chybovú správu počas prihlásenia](../../../../translated_images/sk/login-error.416fe019b36a6327.png) +![Screenshot zobrazujúci chybovú správu počas prihlásenia](../../../../translated_images/sk/login-error.416fe019b36a6327.webp) #### Krok 4: Buďte inkluzívni v prístupnosti @@ -950,7 +950,7 @@ Ste pripravený posunúť svoju bankovú aplikáciu o úroveň vyššie? Spravme Takto by mohol vyzerať vyleštený dashboard: -![Screenshot of an example result of the dashboard after styling](../../../../translated_images/sk/screen2.123c82a831a1d14a.png) +![Screenshot of an example result of the dashboard after styling](../../../../translated_images/sk/screen2.123c82a831a1d14a.webp) Nemusíte to presne kopírovať - použite to ako inšpiráciu a spravte si to po svojom! diff --git a/translations/sk/7-bank-project/4-state-management/README.md b/translations/sk/7-bank-project/4-state-management/README.md index 0aff96781..2668b5f3a 100644 --- a/translations/sk/7-bank-project/4-state-management/README.md +++ b/translations/sk/7-bank-project/4-state-management/README.md @@ -187,7 +187,7 @@ Ako konštrukcia Titanicu s oddeleniami, ktorá vyzerala pevne, kým sa nezalial Namiesto pobehovania za vlastným chvostom vytvoríme **centralizovaný systém správy stavu**. Predstavte si to ako mať jedného veľmi organizovaného človeka, ktorý má na starosti všetko dôležité: -![Schéma zobrazujúca datové prúdy medzi HTML, užívateľskými akciami a stavom](../../../../translated_images/sk/data-flow.fa2354e0908fecc8.png) +![Schéma zobrazujúca datové prúdy medzi HTML, užívateľskými akciami a stavom](../../../../translated_images/sk/data-flow.fa2354e0908fecc8.webp) ```mermaid flowchart TD @@ -798,7 +798,7 @@ Táto výzva vám pomôže myslieť ako profesionálny vývojár, ktorý zvažuj Tu je príklad výsledku po dokončení zadania: -![Screenshot zobrazujúci príklad dialógu „Pridať transakciu“](../../../../translated_images/sk/dialog.93bba104afeb79f1.png) +![Screenshot zobrazujúci príklad dialógu „Pridať transakciu“](../../../../translated_images/sk/dialog.93bba104afeb79f1.webp) --- diff --git a/translations/sk/7-bank-project/4-state-management/assignment.md b/translations/sk/7-bank-project/4-state-management/assignment.md index 5462f000e..94cb0c7c4 100644 --- a/translations/sk/7-bank-project/4-state-management/assignment.md +++ b/translations/sk/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ Pozrite si [dokumentáciu serverového API](../api/README.md) pre: **Očakávaný výsledok:** Po dokončení tejto úlohy by vaša banková aplikácia mala mať plne funkčnú funkciu "Pridať transakciu", ktorá vyzerá a správa sa profesionálne: -![Screenshot zobrazujúci príklad dialógu "Pridať transakciu"](../../../../translated_images/sk/dialog.93bba104afeb79f1.png) +![Screenshot zobrazujúci príklad dialógu "Pridať transakciu"](../../../../translated_images/sk/dialog.93bba104afeb79f1.webp) ## Testovanie vašej implementácie diff --git a/translations/sk/7-bank-project/README.md b/translations/sk/7-bank-project/README.md index 2fa33e969..5a70f1405 100644 --- a/translations/sk/7-bank-project/README.md +++ b/translations/sk/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: V tomto projekte sa naučíte, ako vytvoriť fiktívnu banku. Tieto lekcie obsahujú pokyny, ako navrhnúť webovú aplikáciu a poskytnúť trasy, vytvoriť formuláre, spravovať stav a získavať údaje z API, z ktorého môžete načítať údaje banky. -| ![Screen1](../../../translated_images/sk/screen1.baccbba0f1f93364.png) | ![Screen2](../../../translated_images/sk/screen2.123c82a831a1d14a.png) | +| ![Screen1](../../../translated_images/sk/screen1.baccbba0f1f93364.webp) | ![Screen2](../../../translated_images/sk/screen2.123c82a831a1d14a.webp) | |--------------------------------|--------------------------------| ## Lekcie diff --git a/translations/sk/8-code-editor/1-using-a-code-editor/README.md b/translations/sk/8-code-editor/1-using-a-code-editor/README.md index df5c93efd..2a55bf8f2 100644 --- a/translations/sk/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/sk/8-code-editor/1-using-a-code-editor/README.md @@ -182,7 +182,7 @@ Rovnako ako telefón Alexandra Grahama Bella spojil vzdialené lokality, prepoje Keď sa všetko načíta, uvidíte krásne čisté pracovisko navrhnuté tak, aby ste sa mohli sústrediť na to najdôležitejšie – váš kód! -![Default VSCode.dev interface](../../../../translated_images/sk/default-vscode-dev.5d06881d65c1b323.png) +![Default VSCode.dev interface](../../../../translated_images/sk/default-vscode-dev.5d06881d65c1b323.webp) **Tu je prehliadka vašej štvrte:** - **Aktivitný panel** (ten pásik naľavo): Hlavná navigácia s Explorer 📁, Hľadaním 🔍, Zdrojovým ovládaním 🌿, Rozšíreniami 🧩 a Nastaveniami ⚙️ @@ -229,7 +229,7 @@ Táto je ideálna, keď začínate vo VSCode.dev a chcete otvoriť konkrétny re 1. Choďte na [vscode.dev](https://vscode.dev), ak tam ešte nie ste 2. Na uvítacej obrazovke kliknite na tlačidlo „Open Remote Repository“ - ![Open remote repository](../../../../translated_images/sk/open-remote-repository.bd9c2598b8949e7f.png) + ![Open remote repository](../../../../translated_images/sk/open-remote-repository.bd9c2598b8949e7f.webp) 3. Vložte URL ľubovoľného GitHub repozitára (vyskúšajte napríklad: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. Stlačte Enter a sledujte, ako sa otvorí! @@ -238,7 +238,7 @@ Táto je ideálna, keď začínate vo VSCode.dev a chcete otvoriť konkrétny re Chcete sa cítiť ako kúzelník kódovania? Vyskúšajte túto klávesovú skratku: Ctrl+Shift+P (alebo Cmd+Shift+P na Macu) pre otvorenie Command Paletty: -![Command Palette](../../../../translated_images/sk/palette-menu.4946174e07f42622.png) +![Command Palette](../../../../translated_images/sk/palette-menu.4946174e07f42622.webp) **Command Palette je ako vyhľadávač na všetko, čo môžete urobiť:** - Napíšte „open remote“ a nájde vám otvárač repozitárov @@ -300,7 +300,7 @@ Rovnako ako organizovanie plánov v kancelárii architekta, tvorba súborov vo V 3. Zadajte názov súboru vrátane prípony (`style.css`, `script.js`, `index.html`) 4. Stlačte Enter pre vytvorenie súboru -![Creating a new file](../../../../translated_images/sk/create-new-file.2814e609c2af9aeb.png) +![Creating a new file](../../../../translated_images/sk/create-new-file.2814e609c2af9aeb.webp) **Názvoslovie:** - Používajte popisné mená, ktoré naznačujú účel súboru @@ -318,7 +318,7 @@ Tu začína pravé zábavné kódovanie! Editor VSCode.dev je nabitý užitočn 2. Začnite písať a sledujte, ako vám VSCode.dev pomáha farbami, návrhmi a odhaľovaním chýb 3. Uložte svoju prácu pomocou Ctrl+S (Windows/Linux) alebo Cmd+S (Mac) – aj keď editor automaticky ukladá! -![Editing files in VSCode.dev](../../../../translated_images/sk/edit-a-file.52c0ee665ef19f08.png) +![Editing files in VSCode.dev](../../../../translated_images/sk/edit-a-file.52c0ee665ef19f08.webp) **Skvelé veci, ktoré sa dejú počas kódovania:** - Váš kód je krásne farebne zvýraznený, takže sa ľahko číta @@ -339,7 +339,7 @@ Rovnako ako archeológovia vytvárajú detailné záznamy o vrstvách vykopávok 2. Upravené súbory sa zobrazujú v sekcii „Changes“ 3. Farebné kódovanie označuje typ zmien: zelená pre prírastky, červená pre zmazania -![Viewing changes in Source Control](../../../../translated_images/sk/working-tree.c58eec08e6335c79.png) +![Viewing changes in Source Control](../../../../translated_images/sk/working-tree.c58eec08e6335c79.webp) **Ukladanie práce (workflow commitovania):** @@ -431,7 +431,7 @@ Trhovisko rozšírení je veľmi dobre usporiadané, takže sa nestratíte pri h 2. Prehliadajte si alebo vyhľadajte niečo konkrétne 3. Kliknite na čokoľvek zaujímavé, aby ste sa o tom dozvedeli viac -![Rozhranie trhoviska rozšírení](../../../../translated_images/sk/extensions.eca0e0c7f59a10b5.png) +![Rozhranie trhoviska rozšírení](../../../../translated_images/sk/extensions.eca0e0c7f59a10b5.webp) **Čo tam uvidíte:** @@ -484,7 +484,7 @@ Väčšina rozšírení má nastavenia, ktoré môžete upraviť, aby fungovali 3. Vyberte „Nastavenia rozšírenia“ z rozbaľovacej ponuky 4. Upravte veci, kým nebude pracovný tok presne podľa vás -![Prispôsobenie nastavení rozšírenia](../../../../translated_images/sk/extension-settings.21c752ae4f4cdb78.png) +![Prispôsobenie nastavení rozšírenia](../../../../translated_images/sk/extension-settings.21c752ae4f4cdb78.webp) **Bežné veci, ktoré možno budete chcieť upraviť:** - Ako sa formátuje váš kód (taby vs medzery, dĺžka riadkov a pod.) diff --git a/translations/sk/8-code-editor/1-using-a-code-editor/assignment.md b/translations/sk/8-code-editor/1-using-a-code-editor/assignment.md index 98c356841..5bb93a195 100644 --- a/translations/sk/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/sk/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ Keďže VSCode.dev vyžaduje aspoň jeden súbor na otvorenie repozitára, vytvo 4. **Napíšte** správu o potvrdení: „Pridať počiatočnú HTML štruktúru“ 5. **Kliknite** na „Commit new file“, aby ste uložili svoje zmeny -![Vytvorenie počiatočného súboru na GitHube](../../../../translated_images/sk/new-file-github.com.c886796d800e8056.png) +![Vytvorenie počiatočného súboru na GitHube](../../../../translated_images/sk/new-file-github.com.c886796d800e8056.webp) **Čo tento počiatočný setup dosahuje:** - **Zavádza** správnu štruktúru dokumentu HTML5 so semantickými prvkami @@ -104,7 +104,7 @@ Teraz, keď je základ vášho repozitára nastavený, prejdime na VSCode.dev pr ✅ **Indikátor úspechu**: Mali by ste vidieť súbory vášho projektu v bočnom paneli Explorer a `index.html` dostupný na úpravu v hlavnej oblasti editora. -![Projekt načítaný vo VSCode.dev](../../../../translated_images/sk/project-on-vscode.dev.e79815a9a95ee7fe.png) +![Projekt načítaný vo VSCode.dev](../../../../translated_images/sk/project-on-vscode.dev.e79815a9a95ee7fe.webp) **Čo uvidíte v rozhraní:** - **Bočný panel Explorer**: **Zobrazuje** súbory a štruktúru priečinkov vášho repozitára @@ -448,7 +448,7 @@ Rozšírenia zlepšujú váš vývojový zážitok poskytovaním funkcií ako ž **Okamžité výsledky po inštalácii:** Po inštalácii CodeSwing sa v editore zobrazí živý náhľad vašej webovej stránky životopisu. To vám umožní presne vidieť, ako vaša stránka vyzerá, keď robíte zmeny. -![Rozšírenie CodeSwing zobrazujúce živý náhľad](../../../../translated_images/sk/after-codeswing-extension-pb.0ebddddcf73b5509.png) +![Rozšírenie CodeSwing zobrazujúce živý náhľad](../../../../translated_images/sk/after-codeswing-extension-pb.0ebddddcf73b5509.webp) **Pochopenie vylepšeného rozhrania:** - **Rozdelený pohľad**: **Zobrazuje** váš kód na jednej strane a živý náhľad na druhej diff --git a/translations/sk/9-chat-project/README.md b/translations/sk/9-chat-project/README.md index 71f1683f7..da5e3f610 100644 --- a/translations/sk/9-chat-project/README.md +++ b/translations/sk/9-chat-project/README.md @@ -60,7 +60,7 @@ print(response.choices[0].message.content) Takto bude vyzerať váš hotový projekt: -![Chat app interface showing conversation between user and AI assistant](../../../translated_images/sk/screenshot.0a1ee0d123df681b.png) +![Chat app interface showing conversation between user and AI assistant](../../../translated_images/sk/screenshot.0a1ee0d123df681b.webp) ## 🗺️ Vaša cesta učenia sa vývoja AI aplikácií @@ -189,7 +189,7 @@ mindmap ``` **Základný princíp**: Vývoj AI aplikácií kombinuje tradičné webové vývojárske zručnosti s integráciou AI služieb, čím vytvára inteligentné aplikácie, ktoré pôsobia prirodzene a reagujú na používateľov. -![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/sk/playground.d2b927122224ff8f.png) +![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/sk/playground.d2b927122224ff8f.webp) **Čo robí playground tak užitočným:** - **Vyskúšajte** rôzne AI modely ako GPT-4o-mini, Claude a ďalšie (všetky zadarmo!) @@ -199,7 +199,7 @@ mindmap Keď si trošku pohrajete, stačí kliknúť na záložku "Code" a vybrať programovací jazyk, aby ste získali implementačný kód, ktorý budete potrebovať. -![Playground choice showing code generation options for different programming languages](../../../translated_images/sk/playground-choice.1d23ba7d407f4758.png) +![Playground choice showing code generation options for different programming languages](../../../translated_images/sk/playground-choice.1d23ba7d407f4758.webp) ## Nastavenie backendovej integrácie v Pythone @@ -2354,14 +2354,14 @@ Chcete si tento projekt vyskúšať v cloudovom vývojovom prostredí? GitHub Co - **Prejdite** na [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) - **Kliknite** na "Use this template" v pravom hornom rohu (uistite sa, že ste prihlásení do GitHubu) -![Create from template interface showing the green "Use this template" button](../../../translated_images/sk/template.67ad477109d29a2b.png) +![Create from template interface showing the green "Use this template" button](../../../translated_images/sk/template.67ad477109d29a2b.webp) **Krok 2: Spustite Codespaces** - **Otvorte** práve vytvorený repozitár - **Kliknite** na zelené tlačidlo "Code" a vyberte "Codespaces" - **Zvoľte** "Create codespace on main" pre spustenie vývojového prostredia -![Create codespace interface with options for launching cloud development environment](../../../translated_images/sk/codespace.bcecbdf5d2747d3d.png) +![Create codespace interface with options for launching cloud development environment](../../../translated_images/sk/codespace.bcecbdf5d2747d3d.webp) **Krok 3: Konfigurácia prostredia** Po načítaní Codespace budete mať prístup k: diff --git a/translations/sk/README.md b/translations/sk/README.md index bc03498ef..40abfc75b 100644 --- a/translations/sk/README.md +++ b/translations/sk/README.md @@ -72,13 +72,13 @@ Nezmeškajte náš nový učebný plán Generatívnej AI! Začnite na [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)! -![Background](../../translated_images/sk/background.148a8d43afde5730.png) +![Background](../../translated_images/sk/background.148a8d43afde5730.webp) - Lekcie pokrývajú všetko od základov po RAG. - Interakcia s historickými postavami pomocou GenAI a našej sprievodnej aplikácie. - Zábavný a pútavý príbeh, budete cestovať časom! -![character](../../translated_images/sk/character.5c0dd8e067ffd693.png) +![character](../../translated_images/sk/character.5c0dd8e067ffd693.webp) Každá lekcia obsahuje úlohu na dokončenie, kontrolu vedomostí aj výzvu, ktoré vás prevedú učením tém ako: - Promptovanie a inžinierstvo promptov @@ -114,7 +114,7 @@ Postupujte podľa krokov: Vo vašej skopírovanej verzii repozitára kliknite na tlačidlo **Code** a vyberte **Open with Codespaces**. Toto vytvorí nový Codespace, kde budete pracovať. -![Codespace](../../translated_images/sk/createcodespace.0238bbf4d7a8d955.png) +![Codespace](../../translated_images/sk/createcodespace.0238bbf4d7a8d955.webp) #### Spustenie učebného plánu lokálne na počítači diff --git a/translations/sk/for-teachers.md b/translations/sk/for-teachers.md index 49427b809..91606d92f 100644 --- a/translations/sk/for-teachers.md +++ b/translations/sk/for-teachers.md @@ -42,10 +42,10 @@ Tento učebný plán obsahuje importovateľné balíky pre bežné pracovné pos - Moodle Cloud má obmedzenú podporu Common Cartridge. Uprednostnite vyššie uvedený súbor Moodle, ktorý je možné nahrať aj do Canvas. - Po importe skontrolujte moduly, termíny a nastavenia kvízov, aby zodpovedali vášmu rozvrhu. -![Moodle](../../translated_images/sk/moodle.94eb93d714a50cb2.png) +![Moodle](../../translated_images/sk/moodle.94eb93d714a50cb2.webp) > Učebný plán v Moodle triede -![Canvas](../../translated_images/sk/canvas.fbd605ff8e5b8aff.png) +![Canvas](../../translated_images/sk/canvas.fbd605ff8e5b8aff.webp) > Učebný plán v Canvas ### Použitie úložiska priamo (bez Classroom) diff --git a/translations/sl/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/sl/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 2f32ec27a..b6948fe64 100644 --- a/translations/sl/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/sl/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ Poglej, popolnoma razumem, če se ti programiranje zdaj zdi strašljivo. Ko sem Danes bomo raziskali neverjetna orodja, zaradi katerih sodobni spletni razvoj ni le mogoč, ampak tudi resnično zasvojen. Govorim o točno teh urejevalnikih, brskalnikih in potekih dela, ki jih razvijalci pri Netflixu, Spotifyju in tvoji najljubši indie aplikacijski študiii uporabljajo vsak dan. In tukaj je del, ki te bo spravil v veselo plesanje: večina teh profesionalnih, industrijsko standardnih orodij je popolnoma brezplačnih! -![Intro Programming](../../../../translated_images/sl/webdev101-programming.d6e3f98e61ac4bff.png) +![Intro Programming](../../../../translated_images/sl/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote avtorja [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/sl/1-getting-started-lessons/2-github-basics/README.md b/translations/sl/1-getting-started-lessons/2-github-basics/README.md index 847132be2..8c42eac1e 100644 --- a/translations/sl/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/sl/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ Vem, da je na začetku morda precej, spomnim se, kako sem strmel v svojo prvo Gi To pot bomo prehodili skupaj, korak za korakom. Brez hitenja, brez pritiska – samo ti, jaz in nekaj res kul orodij, ki bodo postali tvoji novi najboljši prijatelji! -![Uvod v GitHub](../../../../translated_images/sl/webdev101-github.8846d7971abef6f9.png) +![Uvod v GitHub](../../../../translated_images/sl/webdev101-github.8846d7971abef6f9.webp) > Sketchnote avtorja [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -606,7 +606,7 @@ Najprej poišči repozitorij (ali **repo**) na GitHub, ki te zanima in v katereg ✅ Dober način za iskanje 'prijaznih za začetnike' repozitorijev je [iskanje po oznaki 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Kopiraj repo lokalno](../../../../translated_images/sl/clone_repo.5085c48d666ead57.png) +![Kopiraj repo lokalno](../../../../translated_images/sl/clone_repo.5085c48d666ead57.webp) Obstaja več načinov za kopiranje kode. Eden izmed načinov je "kloniranje" vsebine repozitorija, preko HTTPS, SSH ali z uporabo GitHub CLI (ukazne vrstice). diff --git a/translations/sl/1-getting-started-lessons/3-accessibility/README.md b/translations/sl/1-getting-started-lessons/3-accessibility/README.md index db7321676..82f03ae7b 100644 --- a/translations/sl/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/sl/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Ustvarjanje dostopnih spletnih strani -![Vse o dostopnosti](../../../../translated_images/sl/webdev101-a11y.8ef3025c858d897a.png) +![Vse o dostopnosti](../../../../translated_images/sl/webdev101-a11y.8ef3025c858d897a.webp) > Sketchnote avtorice [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/sl/2-js-basics/1-data-types/README.md b/translations/sl/2-js-basics/1-data-types/README.md index 57696db10..6f170f95e 100644 --- a/translations/sl/2-js-basics/1-data-types/README.md +++ b/translations/sl/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Osnove JavaScripta: podatkovne vrste -![Osnove JavaScripta - podatkovne vrste](../../../../translated_images/sl/webdev101-js-datatypes.4cc470179730702c.png) +![Osnove JavaScripta - podatkovne vrste](../../../../translated_images/sl/webdev101-js-datatypes.4cc470179730702c.webp) > Sketchnote avtorice [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/sl/2-js-basics/2-functions-methods/README.md b/translations/sl/2-js-basics/2-functions-methods/README.md index 4018bf30d..800de886e 100644 --- a/translations/sl/2-js-basics/2-functions-methods/README.md +++ b/translations/sl/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Osnove JavaScript: Metode in funkcije -![Osnove JavaScript - Funkcije](../../../../translated_images/sl/webdev101-js-functions.be049c4726e94f8b.png) +![Osnove JavaScript - Funkcije](../../../../translated_images/sl/webdev101-js-functions.be049c4726e94f8b.webp) > Sketchnote avtorice [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/sl/2-js-basics/3-making-decisions/README.md b/translations/sl/2-js-basics/3-making-decisions/README.md index aaab3d46d..6a0c8754b 100644 --- a/translations/sl/2-js-basics/3-making-decisions/README.md +++ b/translations/sl/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Osnove JavaScript-a: Sprejemanje odločitev -![JavaScript Basics - Making decisions](../../../../translated_images/sl/webdev101-js-decisions.69e1b20f272dd1f0.png) +![JavaScript Basics - Making decisions](../../../../translated_images/sl/webdev101-js-decisions.69e1b20f272dd1f0.webp) > Sketchnote avtorice [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/sl/2-js-basics/4-arrays-loops/README.md b/translations/sl/2-js-basics/4-arrays-loops/README.md index 1f7e7a5dc..51a0e629f 100644 --- a/translations/sl/2-js-basics/4-arrays-loops/README.md +++ b/translations/sl/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Osnove JavaScripta: Tabele in zanke -![JavaScript Basics - Arrays](../../../../translated_images/sl/webdev101-js-arrays.439d7528b8a29455.png) +![JavaScript Basics - Arrays](../../../../translated_images/sl/webdev101-js-arrays.439d7528b8a29455.webp) > Sketchnote avtorice [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/sl/3-terrarium/1-intro-to-html/README.md b/translations/sl/3-terrarium/1-intro-to-html/README.md index 6d31bfabb..a7ae4d2bc 100644 --- a/translations/sl/3-terrarium/1-intro-to-html/README.md +++ b/translations/sl/3-terrarium/1-intro-to-html/README.md @@ -25,7 +25,7 @@ journey Izboljšaj dostopnost: 5: Študent Zgradi terarij: 5: Študent ``` -![Uvod v HTML](../../../../translated_images/sl/webdev101-html.4389c2067af68e98.png) +![Uvod v HTML](../../../../translated_images/sl/webdev101-html.4389c2067af68e98.webp) > Sketchnote avtorja [Tomomi Imura](https://twitter.com/girlie_mac) HTML oziroma HyperText Markup Language je temelj vsake spletne strani, ki ste jo kdaj obiskali. HTML si predstavljajte kot ogrodje, ki daje strukturo spletnim stranem – določa, kam gre vsebina, kako je organizirana in kaj vsak del predstavlja. Medtem ko bo CSS kasneje "oblekel" vaš HTML z barvami in postavitvami, bo JavaScript prinesel interaktivnost, HTML pa zagotavlja osnovno strukturo, ki omogoča vse ostalo. @@ -86,7 +86,7 @@ Ustvarili boste namensko mapo za vaš terarijski projekt in dodali prvo HTML dat 4. V Explorer oknu kliknite na ikono "New File" 5. Vaši datoteki dajte ime `index.html` -![Explorer Visual Studio Code prikazuje ustvarjanje nove datoteke](../../../../translated_images/sl/vs-code-index.e2986cf919471eb9.png) +![Explorer Visual Studio Code prikazuje ustvarjanje nove datoteke](../../../../translated_images/sl/vs-code-index.e2986cf919471eb9.webp) **Možnost 2: Uporaba terminalskih ukazov** ```bash diff --git a/translations/sl/3-terrarium/2-intro-to-css/README.md b/translations/sl/3-terrarium/2-intro-to-css/README.md index 8ea6c4401..15339d488 100644 --- a/translations/sl/3-terrarium/2-intro-to-css/README.md +++ b/translations/sl/3-terrarium/2-intro-to-css/README.md @@ -29,7 +29,7 @@ journey Prilagodljiva zasnova: 5: Student Odsevi na steklu: 5: Student ``` -![Uvod v CSS](../../../../translated_images/sl/webdev101-css.3f7af5991bf53a20.png) +![Uvod v CSS](../../../../translated_images/sl/webdev101-css.3f7af5991bf53a20.webp) > Sketchnote avtorja [Tomomi Imura](https://twitter.com/girlie_mac) Se spomnite, kako je vaš HTML terrarij izgledal precej osnovno? CSS je tisto, kjer to preprosto strukturo spremenimo v nekaj vizualno privlačnega. @@ -202,7 +202,7 @@ body { Odprite orodja za razvijalce v brskalniku (F12), pojdite na zavihek Elements in preverite `

` element. Videli boste, da podeduje pisavo od `body`: -![podedovana pisava](../../../../translated_images/sl/1.cc07a5cbe114ad1d.png) +![podedovana pisava](../../../../translated_images/sl/1.cc07a5cbe114ad1d.webp) ✅ **Čas za eksperiment**: Poskusite nastaviti druge dedljive lastnosti na ``, kot so `color`, `line-height` ali `text-align`. Kaj se zgodi z vašim naslovom in drugimi elementi? @@ -594,7 +594,7 @@ Pripravljen, da izboljšaš svoj terarij z realističnimi steklenimi odsevi? Ta Ustvaril boš subtilne poudarke, ki simulirajo, kako se svetloba odbija od steklenih površin. Ta pristop je podoben, kot so renesančni slikarji, kot je Jan van Eyck, uporabljali svetlobo in odseve, da so naslikano steklo naredili tridimenzionalno. Tukaj je tisto, kar ciljaš: -![finished terrarium](../../../../translated_images/sl/terrarium-final.2f07047ffc597d0a.png) +![finished terrarium](../../../../translated_images/sl/terrarium-final.2f07047ffc597d0a.webp) **Tvoj izziv:** - **Ustvari** subtilne bele ali svetle ovalne oblike za steklene odseve diff --git a/translations/sl/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/sl/3-terrarium/3-intro-to-DOM-and-closures/README.md index 7058abce4..ccfda2833 100644 --- a/translations/sl/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/sl/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -25,7 +25,7 @@ journey Testirati funkcionalnost: 5: Student Dokončati terarij: 5: Student ``` -![DOM in zaprtje](../../../../translated_images/sl/webdev101-js.10280393044d7eaa.png) +![DOM in zaprtje](../../../../translated_images/sl/webdev101-js.10280393044d7eaa.webp) > Sketchnote avtorja [Tomomi Imura](https://twitter.com/girlie_mac) Dobrodošli v eni najbolj zanimivih vidikov spletnega razvoja - ustvarjanje interaktivnosti! Model dokumenta (DOM) je kot most med vašo HTML in JavaScript, danes ga bomo uporabili, da vašemu terrariju vdihnemo življenje. Ko je Tim Berners-Lee ustvaril prvi spletni brskalnik, si je zamislil splet, kjer so lahko dokumenti dinamični in interaktivni – DOM omogoča uresničitev te vizije. @@ -102,7 +102,7 @@ flowchart TD style P fill:#ffebee style Q fill:#ffebee ``` -![Predstavitev DOM drevesa](../../../../translated_images/sl/dom-tree.7daf0e763cbbba92.png) +![Predstavitev DOM drevesa](../../../../translated_images/sl/dom-tree.7daf0e763cbbba92.webp) > Predstavitev DOM in HTML označbe, ki nanj kaže. Avtor: [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -146,7 +146,7 @@ flowchart LR ``` > 💡 **Razumevanje zaprtij**: Zaprtja so pomembna tema v JavaScriptu in veliko razvijalcev jih uporablja več let, preden v celoti razume vse teoretične vidike. Danes se osredotočamo na prakso – zaprtja boste razumeli naravno, ko bomo gradili interaktivne funkcije. Razumevanje se bo razvijalo, ko boste videli, kako rešujejo resnične probleme. -![Predstavitev DOM drevesa](../../../../translated_images/sl/dom-tree.7daf0e763cbbba92.png) +![Predstavitev DOM drevesa](../../../../translated_images/sl/dom-tree.7daf0e763cbbba92.webp) > Predstavitev DOM in HTML označbe, ki nanj kaže. Avtor: [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -591,7 +591,7 @@ Zdaj preizkusite svoj interaktivni terarij! Odprite datoteko `index.html` v sple - **Podpora različnim napravam**: Deluje na namizju in mobilnih napravah - **Zavedanje o zmogljivosti**: Brez uhajanja pomnilnika ali odvečnih izračunov -![finished terrarium](../../../../translated_images/sl/terrarium-final.0920f16e87c13a84.png) +![finished terrarium](../../../../translated_images/sl/terrarium-final.0920f16e87c13a84.webp) --- diff --git a/translations/sl/3-terrarium/solution/README.md b/translations/sl/3-terrarium/solution/README.md index 336248d5c..ece4422cf 100644 --- a/translations/sl/3-terrarium/solution/README.md +++ b/translations/sl/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Majhna vaja z vlečenjem in spuščanjem. Z nekaj HTML, JS in CSS lahko zgradite spletni vmesnik, ga oblikujete in dodate interakcijo. -![moj terarij](../../../../translated_images/sl/screenshot_gray.0c796099a1f9f25e.png) +![moj terarij](../../../../translated_images/sl/screenshot_gray.0c796099a1f9f25e.webp) ## Zasluge diff --git a/translations/sl/5-browser-extension/1-about-browsers/README.md b/translations/sl/5-browser-extension/1-about-browsers/README.md index a9bb8a0d2..1bbfed218 100644 --- a/translations/sl/5-browser-extension/1-about-browsers/README.md +++ b/translations/sl/5-browser-extension/1-about-browsers/README.md @@ -25,7 +25,7 @@ journey Odpravljajte napake: 4: Student Izboljšajte izkušnjo: 5: Student ``` -![Browser sketchnote](../../../../translated_images/sl/browser.60317c9be8b7f84a.jpg) +![Browser sketchnote](../../../../translated_images/sl/browser.60317c9be8b7f84a.webp) > Sketchnote avtorja [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## Predpredavanje Kviz @@ -77,7 +77,7 @@ Ta proces odraža, kako je prvi spletni brskalnik, WorldWideWeb, načrtoval Tim ✅ **Malo zgodovine**: Prvi brskalnik se je imenoval 'WorldWideWeb' in ga je leta 1990 ustvaril Sir Timothy Berners-Lee. -![early browsers](../../../../translated_images/sl/earlybrowsers.d984b711cdf3a42d.jpg) +![early browsers](../../../../translated_images/sl/earlybrowsers.d984b711cdf3a42d.webp) > Nekateri zgodnji brskalniki, preko [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### Kako brskalniki obdelujejo spletno vsebino @@ -194,7 +194,7 @@ quadrantChart Razumevanje procesa namestitve razširitev vam pomaga predvideti uporabniško izkušnjo, ko ljudje namestijo vašo razširitev. Proces namestitve je standardiziran v sodobnih brskalnikih, z manjšimi razlikami v oblikovanju vmesnika. -![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/sl/install-on-edge.d68781acaf0b3d3d.png) +![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/sl/install-on-edge.d68781acaf0b3d3d.webp) > **Pomembno**: Prepričajte se, da pri testiranju svojih razširitev omogočite razvojni način in dovolite razširitve iz drugih trgovin. @@ -308,10 +308,10 @@ To sledi principu postopnega razkrivanja, ki se uporablja že od zgodnjih dni ra ### Pregled pogledov razširitve **Pogled nastavitve** - konfiguracija ob prvi uporabi: -![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/sl/1.b6da8c1394b07491.png) +![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/sl/1.b6da8c1394b07491.webp) **Pogled rezultatov** - prikaz podatkov o ogljičnem odtisu: -![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/sl/2.1dae52ff08042246.png) +![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/sl/2.1dae52ff08042246.webp) ### Izdelava obrazca za nastavitve diff --git a/translations/sl/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/sl/5-browser-extension/2-forms-browsers-local-storage/README.md index b6a214ab0..4e1a9504d 100644 --- a/translations/sl/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/sl/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -263,7 +263,7 @@ stateDiagram-v2 Reset --> ClearStorage: Odstrani shranjene podatke ClearStorage --> FirstTime: Nazaj na nastavitev ``` -![Local storage pane](../../../../translated_images/sl/localstorage.472f8147b6a3f8d1.png) +![Local storage pane](../../../../translated_images/sl/localstorage.472f8147b6a3f8d1.webp) > ⚠️ **Varnostno opozorilo**: V produkcijskih aplikacijah hranjenje API ključev v LocalStorage predstavlja varnostno tveganje, saj lahko JavaScript dostopa do teh podatkov. Za namene učenja je ta pristop sprejemljiv, v resničnih aplikacijah pa je treba občutljive poverilnice hraniti varno na strežniški strani. diff --git a/translations/sl/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/sl/5-browser-extension/3-background-tasks-and-performance/README.md index 9d61ca4ae..37f80770c 100644 --- a/translations/sl/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/sl/5-browser-extension/3-background-tasks-and-performance/README.md @@ -123,7 +123,7 @@ flowchart LR Poskusimo to. Odprite spletno stran (Microsoft.com je primerna) in kliknite tisti gumb 'Record'. Zdaj osvežite stran in opazujte, kako profiler zajema vse, kar se dogaja. Ko prenehate snemati, boste videli podroben pregled, kako brskalnik 'skriptira', 'renderira' in 'riše' stran. Spomni me na to, kako nadzor misije spremlja vsak sistem med izstrelitvijo rakete - dobite podatke v realnem času o tem, kaj se dogaja in kdaj. -![Edge profiler](../../../../translated_images/sl/profiler.5a4a62479c5df01c.png) +![Edge profiler](../../../../translated_images/sl/profiler.5a4a62479c5df01c.webp) ✅ [Microsoftova dokumentacija](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) ima še veliko več podrobnosti, če želite poglobiti znanje @@ -133,11 +133,11 @@ Izberite elemente časovnice profila, da povečate dogodke, ki se zgodijo med na Dobite posnetek zmogljivosti strani tako, da izberete del časovnice in pogledate povzetek: -![Edge profiler snapshot](../../../../translated_images/sl/snapshot.97750180ebcad737.png) +![Edge profiler snapshot](../../../../translated_images/sl/snapshot.97750180ebcad737.webp) Preverite podokno Dnevnik dogodkov, da vidite, ali je kateri dogodek trajal dlje od 15 ms: -![Edge event log](../../../../translated_images/sl/log.804026979f3707e0.png) +![Edge event log](../../../../translated_images/sl/log.804026979f3707e0.webp) ✅ Spoznajte svoj profiler! Odprite orodja za razvijalce na tej strani in preverite, ali obstajajo ozka grla. Katera datoteka se nalaga najpočasneje? Najhitrejše? diff --git a/translations/sl/5-browser-extension/README.md b/translations/sl/5-browser-extension/README.md index 9c71d2df0..0c93311dc 100644 --- a/translations/sl/5-browser-extension/README.md +++ b/translations/sl/5-browser-extension/README.md @@ -23,7 +23,7 @@ To razširitev lahko uporabnik po potrebi pokliče, ko v obrazec vnese ključ AP ### Zasluge -![zelena razširitev za brskalnik](../../../translated_images/sl/extension-screenshot.0e7f5bfa110e92e3.png) +![zelena razširitev za brskalnik](../../../translated_images/sl/extension-screenshot.0e7f5bfa110e92e3.webp) ## Zasluge diff --git a/translations/sl/5-browser-extension/solution/README.md b/translations/sl/5-browser-extension/solution/README.md index 83d4b7f63..2245fef01 100644 --- a/translations/sl/5-browser-extension/solution/README.md +++ b/translations/sl/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Z uporabo tmrow-ovega API-ja C02 Signal za sledenje porabi električne energije ustvarite razširitev za brskalnik, ki vam bo omogočila opomnik neposredno v brskalniku o tem, kako obremenjena je poraba električne energije v vaši regiji. Občasna uporaba te razširitve vam bo pomagala sprejemati odločitve o svojih dejavnostih na podlagi teh informacij. -![posnetek zaslona razširitve](../../../../translated_images/sl/extension-screenshot.0e7f5bfa110e92e3.png) +![posnetek zaslona razširitve](../../../../translated_images/sl/extension-screenshot.0e7f5bfa110e92e3.webp) ## Začetek @@ -31,7 +31,7 @@ npm run build Za namestitev v Edge uporabite meni s tremi pikami v zgornjem desnem kotu brskalnika, da odprete ploščo z razširitvami. Tam izberite možnost 'Naloži nepakirano' za nalaganje nove razširitve. Na poziv odprite mapo 'dist' in razširitev se bo naložila. Za uporabo boste potrebovali API ključ za CO2 Signal API ([pridobite ga tukaj preko e-pošte](https://www.co2signal.com/) - vnesite svoj e-poštni naslov v polje na tej strani) in [kodo za vašo regijo](http://api.electricitymap.org/v3/zones), ki ustreza [Electricity Map](https://www.electricitymap.org/map) (na primer, v Bostonu uporabljam 'US-NEISO'). -![nameščanje](../../../../translated_images/sl/install-on-edge.78634f02842c4828.png) +![nameščanje](../../../../translated_images/sl/install-on-edge.78634f02842c4828.webp) Ko vmesnik razširitve vnesete API ključ in regijo, bi se morala barvna pika v vrstici razširitev brskalnika spremeniti, da odraža porabo energije v vaši regiji, ter vam dati namig, katere dejavnosti, ki porabijo veliko energije, bi bile primerne za izvedbo. Koncept tega sistema 'pik' sem dobil pri [Energy Lollipop razširitvi](https://energylollipop.com/) za emisije v Kaliforniji. diff --git a/translations/sl/5-browser-extension/solution/translation/README.fr.md b/translations/sl/5-browser-extension/solution/translation/README.fr.md index 3b5a21174..481b47190 100644 --- a/translations/sl/5-browser-extension/solution/translation/README.fr.md +++ b/translations/sl/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Z uporabo API-ja C02 Signal podjetja tmrow za spremljanje porabe električne energije ustvarite razširitev za brskalnik, ki vam omogoča, da imate neposreden opomnik v brskalniku o porabi električne energije v vaši regiji. Uporaba te namensko razvite razširitve vam bo pomagala sprejemati odločitve o svojih dejavnostih na podlagi teh informacij. -![posnetek razširitve](../../../../../translated_images/sl/extension-screenshot.0e7f5bfa110e92e3.png) +![posnetek razširitve](../../../../../translated_images/sl/extension-screenshot.0e7f5bfa110e92e3.webp) ## Začetek @@ -31,7 +31,7 @@ npm run build Za namestitev na Edge uporabite meni s 'tremi pikami' v zgornjem desnem kotu brskalnika, da odprete ploščo z razširitvami. Tam izberite 'Naloži razširitev iz razpakirane mape', da naložite novo razširitev. Na poziv odprite mapo 'dist' in razširitev se bo naložila. Za uporabo boste potrebovali API ključ za API CO2 Signal ([pridobite ga tukaj po e-pošti](https://www.co2signal.com/) - vnesite svoj e-poštni naslov v polje na tej strani) in [kodo za vašo regijo](http://api.electricitymap.org/v3/zones), ki ustreza [zemljevidu električne energije](https://www.electricitymap.org/map) (na primer v Bostonu uporabljam 'US-NEISO'). -![namestitev](../../../../../translated_images/sl/install-on-edge.78634f02842c4828.png) +![namestitev](../../../../../translated_images/sl/install-on-edge.78634f02842c4828.webp) Ko vmesnik razširitve vnesete API ključ in regijo, bi se morala barvna pika v orodni vrstici razširitve brskalnika spremeniti, da odraža porabo energije v vaši regiji, in vam dati indikator za energijsko intenzivne dejavnosti, ki bi jih bilo smiselno izvajati. Koncept za ta sistem 'pik' sem dobil pri [razširitvi Energy Lollipop](https://energylollipop.com/) za emisije v Kaliforniji. diff --git a/translations/sl/5-browser-extension/solution/translation/README.hi.md b/translations/sl/5-browser-extension/solution/translation/README.hi.md index 8aae936e4..d6cd4e203 100644 --- a/translations/sl/5-browser-extension/solution/translation/README.hi.md +++ b/translations/sl/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Uporaba tmrow API-ja C02 Signal za sledenje porabi električne energije, izdelava brskalnega vtičnika, ki vas opomni, kako obremenjena je poraba električne energije v vašem območju. Uporaba tega vtičnika vam bo pomagala sprejemati odločitve o vaših dejavnostih na podlagi teh informacij. -![Posnetek zaslona vtičnika](../../../../../translated_images/sl/extension-screenshot.0e7f5bfa110e92e3.png) +![Posnetek zaslona vtičnika](../../../../../translated_images/sl/extension-screenshot.0e7f5bfa110e92e3.webp) ## Začetek @@ -31,7 +31,7 @@ npm run build Za namestitev v Edge uporabite meni 'tri pike' v zgornjem desnem kotu brskalnika, da poiščete ploščo za vtičnike. Od tam izberite 'Naloži nepakiran' za nalaganje novega vtičnika. V pozivu odprite mapo 'dist' in vtičnik bo naložen. Za uporabo boste potrebovali API ključ za CO2 Signal ([pridobite ga tukaj preko e-pošte](https://www.co2signal.com/) - vnesite svoj e-poštni naslov v polje na tej strani) in [kodo za vaše območje](http://api.electricitymap.org/v3/zones) [električni zemljevid](https://www.electricitymap.org/map) (na primer, v Bostonu uporabljam 'US-NEISO'). -![nameščanje](../../../../../translated_images/sl/install-on-edge.78634f02842c4828.png) +![nameščanje](../../../../../translated_images/sl/install-on-edge.78634f02842c4828.webp) Ko so API ključ in območje vneseni v vmesnik vtičnika, bi se morala barvna pika v vrstici brskalnega vtičnika spremeniti, da odraža porabo energije v vašem območju, in vam dati indikator, katere energijsko intenzivne dejavnosti so primerne za vaše delovanje. Koncept te 'pikaste' sistema mi je bil navdihnjen z [Energy Lollipop vtičnikom](https://energylollipop.com/) za emisije v Kaliforniji. diff --git a/translations/sl/5-browser-extension/solution/translation/README.it.md b/translations/sl/5-browser-extension/solution/translation/README.it.md index 5350fab90..89aacc78c 100644 --- a/translations/sl/5-browser-extension/solution/translation/README.it.md +++ b/translations/sl/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Uporabili bomo API Signal CO2 od tmrow za spremljanje porabe električne energije, da ustvarimo razširitev za brskalnik, ki bo omogočala neposreden opomnik v brskalniku o tem, kako obremenjujoča je poraba električne energije v vaši regiji. Uporaba te prilagojene razširitve bo pomagala oceniti vaše dejavnosti na podlagi teh informacij. -![posnetek zaslona razširitve](../../../../../translated_images/sl/extension-screenshot.0e7f5bfa110e92e3.png) +![posnetek zaslona razširitve](../../../../../translated_images/sl/extension-screenshot.0e7f5bfa110e92e3.webp) ## Za začetek @@ -31,7 +31,7 @@ npm run build Za namestitev na Edge uporabite meni "tri pike" v zgornjem desnem kotu brskalnika, da odprete ploščo Razširitve. Če še ni aktivirana, omogočite Način razvijalca (spodaj levo). Izberite "Naloži nepakirano", da naložite novo razširitev. Na poziv odprite mapo "dist" in razširitev bo naložena. Za uporabo boste potrebovali API ključ za CO2 Signal API (lahko ga [pridobite tukaj preko e-pošte](https://www.co2signal.com/) - vnesite svoj e-poštni naslov v polje na tej strani) ter [kodo za svojo regijo](http://api.electricitymap.org/v3/zones), ki ustreza [električni karti](https://www.electricitymap.org/map) (na primer v Bostonu "US-NEISO"). -![namestitev](../../../../../translated_images/sl/install-on-edge.78634f02842c4828.png) +![namestitev](../../../../../translated_images/sl/install-on-edge.78634f02842c4828.webp) Ko vmesnik razširitve vsebuje API ključ in regijo, bi se morala barvna pika v vrstici razširitve brskalnika spremeniti, da odraža porabo energije v regiji, ter podati namig, katere dejavnosti z visoko porabo energije bi bile primerne za izvedbo. Koncept za ta sistem "pik" je bil navdihnjen z [razširitvijo Energy Lollipop](https://energylollipop.com/) za emisije v Kaliforniji. diff --git a/translations/sl/5-browser-extension/solution/translation/README.ja.md b/translations/sl/5-browser-extension/solution/translation/README.ja.md index 259b8030e..b887e34ae 100644 --- a/translations/sl/5-browser-extension/solution/translation/README.ja.md +++ b/translations/sl/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Z uporabo API-ja C02 Signal podjetja tmrow lahko zgradite razširitev brskalnika, ki kot opomnik prikazuje, kako intenzivna je poraba električne energije v vaši regiji. To vam omogoča, da na podlagi teh informacij sprejemate odločitve o svojih dejavnostih. -![posnetek zaslona razširitve](../../../../../translated_images/sl/extension-screenshot.0e7f5bfa110e92e3.png) +![posnetek zaslona razširitve](../../../../../translated_images/sl/extension-screenshot.0e7f5bfa110e92e3.webp) ## Začetek @@ -31,7 +31,7 @@ npm run build Za namestitev v Edge poiščite ploščo »Razširitve« prek menija »tri pike« v zgornjem desnem kotu brskalnika. Nato izberite »Load Unpacked« in naložite novo razširitev. Ko se prikaže poziv, odprite mapo »dist«, da se razširitev naloži. Za uporabo boste potrebovali API ključ CO2 Signal ([pridobite ga tukaj prek e-pošte](https://www.co2signal.com/) - vnesite svoj e-poštni naslov v polje na tej strani) ter [kodo za vašo regijo](http://api.electricitymap.org/v3/zones), ki ustreza [Electricity Map](https://www.electricitymap.org/map) (na primer, za Boston uporabite 'US-NEISO'). -![nameščanje](../../../../../translated_images/sl/install-on-edge.78634f02842c4828.png) +![nameščanje](../../../../../translated_images/sl/install-on-edge.78634f02842c4828.webp) Ko vmesnik razširitve vnesete API ključ in regijo, se bo barvna pika, ki se prikaže v razširitveni vrstici brskalnika, spremenila glede na porabo energije v vaši regiji. To vam bo pokazalo, katere dejavnosti, ki zahtevajo energijo, so primerne. Koncept sistema »pik« mi je dal [Energy Lollipop extension](https://energylollipop.com/) za emisije v Kaliforniji. diff --git a/translations/sl/5-browser-extension/solution/translation/README.ms.md b/translations/sl/5-browser-extension/solution/translation/README.ms.md index 7fd4118c2..33630bca6 100644 --- a/translations/sl/5-browser-extension/solution/translation/README.ms.md +++ b/translations/sl/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Z uporabo API-ja CO2 Signal od tmrow za spremljanje porabe električne energije lahko ustvarite razširitev brskalnika, ki vas opozori na obremenjenost porabe električne energije v vaši regiji. Uporaba te razširitve vam bo pomagala sprejemati bolj premišljene odločitve glede vaših dejavnosti na podlagi teh informacij. -![posnetek zaslona razširitve brskalnika](../../../../../translated_images/sl/extension-screenshot.0e7f5bfa110e92e3.png) +![posnetek zaslona razširitve brskalnika](../../../../../translated_images/sl/extension-screenshot.0e7f5bfa110e92e3.webp) ## Začetek @@ -31,7 +31,7 @@ npm run build Za namestitev v brskalnik Edge uporabite meni s 'tremi pikami' v zgornjem desnem kotu brskalnika, da odprete ploščo Razširitve. Tam izberite 'Naloži nepakirano' za dodajanje nove razširitve. Odprite mapo 'dist', ko vas sistem pozove, in razširitev bo naložena. Za uporabo boste potrebovali API ključ za CO2 Signal API ([pridobite ga tukaj prek e-pošte](https://www.co2signal.com/) - vnesite svoj e-poštni naslov v polje na tej strani) in [kodo za vašo regijo](http://api.electricitymap.org/v3/zones), ki ustreza [zemljevidu električne energije](https://www.electricitymap.org/map) (na primer, v Bostonu uporabljam 'US-NEISO'). -![prenos](../../../../../translated_images/sl/install-on-edge.78634f02842c4828.png) +![prenos](../../../../../translated_images/sl/install-on-edge.78634f02842c4828.webp) Ko vmesnik razširitve vsebuje vaš API ključ in regijo, se bo barvna pika v vrstici razširitve brskalnika spremenila, da bo odražala porabo energije v vaši regiji, in vam dala namige o tem, katere dejavnosti so primerne za izvajanje. Koncept sistema 'pik' sem povzel po [razširitvi brskalnika Energy Lollipop](https://energylollipop.com/) za emisije v Kaliforniji. diff --git a/translations/sl/5-browser-extension/start/README.md b/translations/sl/5-browser-extension/start/README.md index 295927e16..c31966d02 100644 --- a/translations/sl/5-browser-extension/start/README.md +++ b/translations/sl/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Z uporabo tmrow API-ja C02 Signal za spremljanje porabe električne energije ustvarite razširitev za brskalnik, ki vam bo v brskalniku služila kot opomnik o tem, kako obremenjena je poraba električne energije v vaši regiji. Občasna uporaba te razširitve vam bo pomagala sprejemati odločitve o vaših dejavnostih na podlagi teh informacij. -![posnetek zaslona razširitve](../../../../translated_images/sl/extension-screenshot.0e7f5bfa110e92e3.png) +![posnetek zaslona razširitve](../../../../translated_images/sl/extension-screenshot.0e7f5bfa110e92e3.webp) ## Začetek @@ -31,7 +31,7 @@ npm run build Za namestitev v Edge uporabite meni 'tri pike' v zgornjem desnem kotu brskalnika, da odprete ploščo z razširitvami. Tam izberite 'Naloži nepakirano', da naložite novo razširitev. Na pozivu odprite mapo 'dist' in razširitev se bo naložila. Za uporabo boste potrebovali API ključ za CO2 Signal API ([pridobite ga tukaj preko e-pošte](https://www.co2signal.com/) - vnesite svoj e-poštni naslov v polje na tej strani) in [kodo za vašo regijo](http://api.electricitymap.org/v3/zones), ki ustreza [Electricity Map](https://www.electricitymap.org/map) (na primer v Bostonu uporabljam 'US-NEISO'). -![namestitev](../../../../translated_images/sl/install-on-edge.78634f02842c4828.png) +![namestitev](../../../../translated_images/sl/install-on-edge.78634f02842c4828.webp) Ko vmesnik razširitve vnesete API ključ in regijo, bi se morala barvna pika v vrstici razširitev brskalnika spremeniti, da odraža porabo energije v vaši regiji, ter vam dati namig, katere dejavnosti, ki porabijo veliko energije, bi bile primerne za izvedbo. Koncept za ta sistem 'pik' sem dobil pri [Energy Lollipop razširitvi](https://energylollipop.com/) za emisije v Kaliforniji. diff --git a/translations/sl/6-space-game/2-drawing-to-canvas/README.md b/translations/sl/6-space-game/2-drawing-to-canvas/README.md index 9afe9c3e3..e5a0dfb9d 100644 --- a/translations/sl/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/sl/6-space-game/2-drawing-to-canvas/README.md @@ -105,7 +105,7 @@ quadrantChart Power-up: [0.7, 0.6] UI Elements: [0.9, 0.1] ``` -![mreža platna](../../../../translated_images/sl/canvas_grid.5f209da785ded492.png) +![mreža platna](../../../../translated_images/sl/canvas_grid.5f209da785ded492.webp) > Slika iz [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) Za risanje na element platna boste sledili istemu tristožnemu postopku, ki tvori osnovo vse grafike na platnu. Ko to storite nekajkrat, postane druga narava: @@ -323,11 +323,11 @@ Zgradili boste spletno stran z elementom Canvas. Prikazal bo črno ozadje veliko - Ladja junaka - ![Ladja junaka](../../../../translated_images/sl/player.dd24c1afa8c71e9b.png) + ![Ladja junaka](../../../../translated_images/sl/player.dd24c1afa8c71e9b.webp) - 5×5 pošasti - ![Ladja pošasti](../../../../translated_images/sl/enemyShip.5df2a822c16650c2.png) + ![Ladja pošasti](../../../../translated_images/sl/enemyShip.5df2a822c16650c2.webp) ### Priporočeni koraki za začetek razvoja @@ -463,7 +463,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { Končni rezultat naj bo videti tako: -![Črn zaslon s junakom in 5*5 pošasti](../../../../translated_images/sl/partI-solution.36c53b48c9ffae2a.png) +![Črn zaslon s junakom in 5*5 pošasti](../../../../translated_images/sl/partI-solution.36c53b48c9ffae2a.webp) ## Rešitev diff --git a/translations/sl/6-space-game/5-keeping-score/README.md b/translations/sl/6-space-game/5-keeping-score/README.md index ffd29674a..7640ad292 100644 --- a/translations/sl/6-space-game/5-keeping-score/README.md +++ b/translations/sl/6-space-game/5-keeping-score/README.md @@ -155,7 +155,7 @@ sequenceDiagram end ``` - **Sistem točkovanja**: Vsaka uničena sovražna ladja prinese 100 točk (zaokrožene številke so igralcem lažje za mentalni izračun). Rezultat se prikazuje v spodnjem levem kotu. -- **Števec življenj**: Vaš junak začne s tremi življenji – standard, ki so ga vzpostavile zgodnje arkadne igre za uravnoteženje izziva s igranjem. Vsak srečanje z nasprotnikom stane eno življenje. Preostala življenja bodo prikazana v spodnjem desnem kotu z ikonami ladij ![life image](../../../../translated_images/sl/life.6fb9f50d53ee0413.png). +- **Števec življenj**: Vaš junak začne s tremi življenji – standard, ki so ga vzpostavile zgodnje arkadne igre za uravnoteženje izziva s igranjem. Vsak srečanje z nasprotnikom stane eno življenje. Preostala življenja bodo prikazana v spodnjem desnem kotu z ikonami ladij ![life image](../../../../translated_images/sl/life.6fb9f50d53ee0413.webp). ## Začnimo! diff --git a/translations/sl/7-bank-project/1-template-route/README.md b/translations/sl/7-bank-project/1-template-route/README.md index 8d10292fc..786fbf194 100644 --- a/translations/sl/7-bank-project/1-template-route/README.md +++ b/translations/sl/7-bank-project/1-template-route/README.md @@ -644,7 +644,7 @@ sequenceDiagram Uporaba `history.pushState` ustvarja nove vnose v zgodovini brskalnika. To lahko preveriš tako, da pritisneš in držiš *gumb nazaj* v brskalniku, kjer boš videl nekaj takega: -![Posnetek zaslona zgodovine navigacije](../../../../translated_images/sl/history.7fdabbafa521e064.png) +![Posnetek zaslona zgodovine navigacije](../../../../translated_images/sl/history.7fdabbafa521e064.webp) Če poskusiš nekajkrat klikniti gumb nazaj, boš videl, da se trenutni URL spreminja in da je zgodovina posodobljena, ampak ista predloga se še vedno prikazuje. diff --git a/translations/sl/7-bank-project/2-forms/README.md b/translations/sl/7-bank-project/2-forms/README.md index 52869308e..c37581d14 100644 --- a/translations/sl/7-bank-project/2-forms/README.md +++ b/translations/sl/7-bank-project/2-forms/README.md @@ -292,7 +292,7 @@ Najprej opazimo, kaj se zgodi pri osnovni oddaji obrazca: 2. Opazujte spremembe v naslovni vrstici brskalnika 3. Ugotovite, kako se stran osveži in podatki pokažejo v URL-ju -![Posnetek zaslona spremembe URL-ja v brskalniku po kliku na gumb Registriraj](../../../../translated_images/sl/click-register.e89a30bf0d4bc9ca.png) +![Posnetek zaslona spremembe URL-ja v brskalniku po kliku na gumb Registriraj](../../../../translated_images/sl/click-register.e89a30bf0d4bc9ca.webp) ### Primerjava HTTP metod @@ -346,7 +346,7 @@ Nastavimo vaš registracijski obrazec, da komunicira pravilno z backend API z up 2. **Kliknite** gumb "Ustvari račun" 3. **Opazujte** odgovor strežnika v brskalniku -![Okno brskalnika na naslovu localhost:5000/api/accounts, prikazuje JSON niz z uporabniškimi podatki](../../../../translated_images/sl/form-post.61de4ca1b964d91a.png) +![Okno brskalnika na naslovu localhost:5000/api/accounts, prikazuje JSON niz z uporabniškimi podatki](../../../../translated_images/sl/form-post.61de4ca1b964d91a.webp) **Kaj bi morali videti:** - **Brskalnik preusmeri** na URL API končne točke @@ -609,7 +609,7 @@ async function register() { 3. **Kliknite** "Create Account" 4. **Opazujte** sporočila v konzoli in povratne informacije za uporabnika -![Posnetek zaslona z log sporočilom v konzoli brskalnika](../../../../translated_images/sl/browser-console.efaf0b51aaaf6778.png) +![Posnetek zaslona z log sporočilom v konzoli brskalnika](../../../../translated_images/sl/browser-console.efaf0b51aaaf6778.webp) **Kaj bi morali videti:** - **Stanje nalaganja** se pojavi na gumbu za oddajo @@ -783,7 +783,7 @@ Izboljšajmo vaš registracijski obrazec z robustno validacijo, ki zagotavlja od 3. **Poskusite** posebne znake v polju za uporabniško ime 4. **Vnesite** negativno stanje računa -![Posnetek zaslona s sporočilom o napaki validacije pri poskusu oddaje obrazca](../../../../translated_images/sl/validation-error.8bd23e98d416c22f.png) +![Posnetek zaslona s sporočilom o napaki validacije pri poskusu oddaje obrazca](../../../../translated_images/sl/validation-error.8bd23e98d416c22f.webp) **Kaj boste opazili:** - **Brskalnik prikaže** izvorna validacijska sporočila @@ -943,7 +943,7 @@ V HTML prikažite sporočilo o napaki, če uporabnik že obstaja. Tukaj je primer, kako lahko končna prijavna stran izgleda po dodani nekaj oblikovalskih spremembah: -![Screenshot of the login page after adding CSS styles](../../../../translated_images/sl/result.96ef01f607bf856a.png) +![Screenshot of the login page after adding CSS styles](../../../../translated_images/sl/result.96ef01f607bf856a.webp) ## Kvize po predavanju diff --git a/translations/sl/7-bank-project/3-data/README.md b/translations/sl/7-bank-project/3-data/README.md index c5ca822c9..31b321739 100644 --- a/translations/sl/7-bank-project/3-data/README.md +++ b/translations/sl/7-bank-project/3-data/README.md @@ -156,7 +156,7 @@ sequenceDiagram Server->>Browser: Vrne popolno HTML stran Browser->>User: Prikaže novo stran (utrip/osvežitev) ``` -![Delovni proces posodobitve v večstranični aplikaciji](../../../../translated_images/sl/mpa.7f7375a1a2d4aa77.png) +![Delovni proces posodobitve v večstranični aplikaciji](../../../../translated_images/sl/mpa.7f7375a1a2d4aa77.webp) **Zakaj je ta pristop deloval nerodno:** - Vsak klik je pomenil, da je bilo treba znova zgraditi celotno stran od začetka @@ -182,7 +182,7 @@ sequenceDiagram JavaScript->>Browser: Posodobi specifične elemente strani Browser->>User: Prikaže posodobljeno vsebino (brez osvežitve) ``` -![Delovni proces posodobitve v enostranični aplikaciji](../../../../translated_images/sl/spa.268ec73b41f992c2.png) +![Delovni proces posodobitve v enostranični aplikaciji](../../../../translated_images/sl/spa.268ec73b41f992c2.webp) **Zakaj so SPA tako prijetne:** - Posodobijo se samo deli, ki so se dejansko spremenili (pametno, kajne?) @@ -516,7 +516,7 @@ if (data.error) { Zdaj, ko testirate z neveljavnim računom, boste na strani videli uporabno sporočilo o napaki! -![Posnetek zaslona, ki prikazuje sporočilo o napaki pri prijavi](../../../../translated_images/sl/login-error.416fe019b36a6327.png) +![Posnetek zaslona, ki prikazuje sporočilo o napaki pri prijavi](../../../../translated_images/sl/login-error.416fe019b36a6327.webp) #### Korak 4: Vključevanje dostopnosti @@ -950,7 +950,7 @@ Pripravljeni, da svojo bančno aplikacijo popeljete na naslednjo raven? Poskrbim Tako bi lahko izgledala dodelana nadzorna plošča: -![Posnetek zaslona primernega rezultata nadzorne plošče po stiliranju](../../../../translated_images/sl/screen2.123c82a831a1d14a.png) +![Posnetek zaslona primernega rezultata nadzorne plošče po stiliranju](../../../../translated_images/sl/screen2.123c82a831a1d14a.webp) Ne čutite obveznosti, da morate natančno ujemati ta izgled – uporabite ga kot navdih in naredite svojo različico! diff --git a/translations/sl/7-bank-project/4-state-management/README.md b/translations/sl/7-bank-project/4-state-management/README.md index 229ea2a74..8a701548a 100644 --- a/translations/sl/7-bank-project/4-state-management/README.md +++ b/translations/sl/7-bank-project/4-state-management/README.md @@ -187,7 +187,7 @@ Kot potop Titanica, ki je bil zasnovan z več ločenimi predelki, ki so naenkrat Namesto da bi se lovili v začaranem krogu, bomo ustvarili **centraliziran sistem upravljanja stanja**. Predstavljajte si, da imate eno zelo organizirano osebo, ki je odgovorna za vse pomembne stvari: -![Shema, ki prikazuje podatkovne tokove med HTML, uporabniškimi dejanji in stanjem](../../../../translated_images/sl/data-flow.fa2354e0908fecc8.png) +![Shema, ki prikazuje podatkovne tokove med HTML, uporabniškimi dejanji in stanjem](../../../../translated_images/sl/data-flow.fa2354e0908fecc8.webp) ```mermaid flowchart TD @@ -798,7 +798,7 @@ Ta izziv vam bo pomagal razmišljati kot profesionalni razvijalec, ki upošteva Tukaj je primer rezultata po dokončani domači nalogi: -![Posnetek zaslona, ki prikazuje primer dialoga "Dodaj transakcijo"](../../../../translated_images/sl/dialog.93bba104afeb79f1.png) +![Posnetek zaslona, ki prikazuje primer dialoga "Dodaj transakcijo"](../../../../translated_images/sl/dialog.93bba104afeb79f1.webp) --- diff --git a/translations/sl/7-bank-project/4-state-management/assignment.md b/translations/sl/7-bank-project/4-state-management/assignment.md index 103779256..38750c9a6 100644 --- a/translations/sl/7-bank-project/4-state-management/assignment.md +++ b/translations/sl/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ Oglejte si [dokumentacijo strežniškega API-ja](../api/README.md) za: **Pričakovani rezultat:** Po dokončanju te naloge bi morala vaša bančna aplikacija imeti popolnoma funkcionalno funkcijo "Dodaj transakcijo", ki izgleda profesionalno in se obnaša ustrezno: -![Posnetek zaslona, ki prikazuje primer pogovornega okna "Dodaj transakcijo"](../../../../translated_images/sl/dialog.93bba104afeb79f1.png) +![Posnetek zaslona, ki prikazuje primer pogovornega okna "Dodaj transakcijo"](../../../../translated_images/sl/dialog.93bba104afeb79f1.webp) ## Testiranje vaše implementacije diff --git a/translations/sl/7-bank-project/README.md b/translations/sl/7-bank-project/README.md index 30e840663..d3461a63b 100644 --- a/translations/sl/7-bank-project/README.md +++ b/translations/sl/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: V tem projektu se boste naučili, kako zgraditi izmišljeno banko. Te lekcije vključujejo navodila za postavitev spletne aplikacije in zagotavljanje poti, izdelavo obrazcev, upravljanje stanja ter pridobivanje podatkov iz API-ja, iz katerega lahko pridobite podatke banke. -| ![Screen1](../../../translated_images/sl/screen1.baccbba0f1f93364.png) | ![Screen2](../../../translated_images/sl/screen2.123c82a831a1d14a.png) | +| ![Screen1](../../../translated_images/sl/screen1.baccbba0f1f93364.webp) | ![Screen2](../../../translated_images/sl/screen2.123c82a831a1d14a.webp) | |--------------------------------|--------------------------------| ## Lekcije diff --git a/translations/sl/8-code-editor/1-using-a-code-editor/README.md b/translations/sl/8-code-editor/1-using-a-code-editor/README.md index 4691eec00..59f7f85c6 100644 --- a/translations/sl/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/sl/8-code-editor/1-using-a-code-editor/README.md @@ -182,7 +182,7 @@ Tako kot je telefon Alexandra Grahama Bella povezoval oddaljene lokacije, se s p Ko se vse naloži, boste videli lepo urejeno delovno okolje, zasnovano tako, da vas osredotoči na tisto, kar šteje – vašo kodo! -![Privzeti vmesnik VSCode.dev](../../../../translated_images/sl/default-vscode-dev.5d06881d65c1b323.png) +![Privzeti vmesnik VSCode.dev](../../../../translated_images/sl/default-vscode-dev.5d06881d65c1b323.webp) **Tukaj je vaš ogled po bližnji okolici:** - **Vrstica aktivnosti** (ta trak na levi): vaša glavna navigacija z Explorerjem 📁, Iskanjem 🔍, Source Control 🌿, Razširitvami 🧩 in Nastavitvami ⚙️ @@ -229,7 +229,7 @@ Popolno, kadar začnete v VSCode.dev in želite odpreti določeno skladišče. J 1. Obiščite [vscode.dev](https://vscode.dev), če še niste tam 2. Poiščite gumb »Open Remote Repository« na uvodnem zaslonu in kliknite nanj - ![Odpri oddaljeno skladišče](../../../../translated_images/sl/open-remote-repository.bd9c2598b8949e7f.png) + ![Odpri oddaljeno skladišče](../../../../translated_images/sl/open-remote-repository.bd9c2598b8949e7f.webp) 3. Prilepite katerikoli URL GitHub skladišča (poskusite tega: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. Pritisnite Enter in opazujte čarovnijo! @@ -238,7 +238,7 @@ Popolno, kadar začnete v VSCode.dev in želite odpreti določeno skladišče. J Želite se počutiti kot čarovnik kodiranja? Poskusite to bližnjico na tipkovnici: Ctrl+Shift+P (ali Cmd+Shift+P na Macu), da odprete Ukazno paleto: -![Ukazna paleta](../../../../translated_images/sl/palette-menu.4946174e07f42622.png) +![Ukazna paleta](../../../../translated_images/sl/palette-menu.4946174e07f42622.webp) **Ukazna paleta je kot iskalnik za vse, kar zmorete:** - Vtipkajte »open remote« in našel vam bo odpiranje skladišč @@ -300,7 +300,7 @@ Tako kot arhitekt ureja načrte v pisarni, ustvarjanje datotek v VSCode.dev sled 3. Vnesite ime datoteke skupaj z ustrezno pripono (`style.css`, `script.js`, `index.html`) 4. Pritisnite Enter za ustvarjanje datoteke -![Ustvarjanje nove datoteke](../../../../translated_images/sl/create-new-file.2814e609c2af9aeb.png) +![Ustvarjanje nove datoteke](../../../../translated_images/sl/create-new-file.2814e609c2af9aeb.webp) **Pravila poimenovanja:** - Uporabljajte opisna imena, ki povedo namen datoteke @@ -318,7 +318,7 @@ Tu se začne prava zabava! Urejevalnik VSCode.dev je poln koristnih funkcij, ki 2. Začnite tipkati in opazujte, kako vam VSCode.dev pomaga z barvami, predlogi in zaznavanjem napak 3. Shranite delo s Ctrl+S (Windows/Linux) ali Cmd+S (Mac) – pa vendar se tudi samodejno shranjuje! -![Urejanje datotek v VSCode.dev](../../../../translated_images/sl/edit-a-file.52c0ee665ef19f08.png) +![Urejanje datotek v VSCode.dev](../../../../translated_images/sl/edit-a-file.52c0ee665ef19f08.webp) **Kul stvari, ki se dogajajo med kodiranjem:** - Vaša koda je lepo barvno označena, kar olajša branje @@ -339,7 +339,7 @@ Tako kot arheologi ustvarjajo podrobne zapise plasti izkopavanj, Git spremlja sp 2. Spremenjene datoteke so prikazane v razdelku »Changes« 3. Barvno označevanje kaže vrste sprememb: zeleno za dodatke, rdeče za odstranitve -![Pregled sprememb v Source Control](../../../../translated_images/sl/working-tree.c58eec08e6335c79.png) +![Pregled sprememb v Source Control](../../../../translated_images/sl/working-tree.c58eec08e6335c79.webp) **Shranjevanje dela (postopek commitiranja):** @@ -431,7 +431,7 @@ Trgovina z razširitvami je zelo dobro organizirana, zato se ne boste izgubili, 2. Brskajte ali poiščite kaj konkretnega 3. Kliknite karkoli, kar vam je zanimivo, da izveste več -![Uporabniški vmesnik trgovine z razširitvami](../../../../translated_images/sl/extensions.eca0e0c7f59a10b5.png) +![Uporabniški vmesnik trgovine z razširitvami](../../../../translated_images/sl/extensions.eca0e0c7f59a10b5.webp) **Kaj boste tam videli:** @@ -484,7 +484,7 @@ Večina razširitev ima nastavitve, ki jih lahko prilagodite, da delujejo točno 3. Izberite "Extension Settings" iz spustnega menija 4. Nastavite stvari, dokler ne bo vse točno tako, kot želite za svoj potek dela -![Prilagajanje nastavitev razširitve](../../../../translated_images/sl/extension-settings.21c752ae4f4cdb78.png) +![Prilagajanje nastavitev razširitve](../../../../translated_images/sl/extension-settings.21c752ae4f4cdb78.webp) **Pogoste stvari, ki jih boste morda želeli prilagoditi:** - Kako se vaša koda oblikuje (tabulatorji proti presledkom, dolžina vrstic itd.) diff --git a/translations/sl/8-code-editor/1-using-a-code-editor/assignment.md b/translations/sl/8-code-editor/1-using-a-code-editor/assignment.md index a25239ad6..b95d06ff6 100644 --- a/translations/sl/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/sl/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ Ker VSCode.dev zahteva vsaj eno datoteko za odpiranje repozitorija, bomo glavno 4. **Napišite** sporočilo za commit: "Dodaj začetno HTML strukturo" 5. **Kliknite** "Commit new file", da shranite spremembe -![Ustvarjanje začetne datoteke na GitHubu](../../../../translated_images/sl/new-file-github.com.c886796d800e8056.png) +![Ustvarjanje začetne datoteke na GitHubu](../../../../translated_images/sl/new-file-github.com.c886796d800e8056.webp) **Kaj doseže ta začetna nastavitev:** - **Vzpostavi** pravilno strukturo dokumenta HTML5 s semantičnimi elementi @@ -104,7 +104,7 @@ Zdaj, ko je temelj vašega repozitorija vzpostavljen, preidimo na VSCode.dev za ✅ **Indikator uspeha**: Videti bi morali datoteke svojega projekta v stranski vrstici Explorer in `index.html`, ki je na voljo za urejanje v glavnem urejevalnem območju. -![Projekt naložen v VSCode.dev](../../../../translated_images/sl/project-on-vscode.dev.e79815a9a95ee7fe.png) +![Projekt naložen v VSCode.dev](../../../../translated_images/sl/project-on-vscode.dev.e79815a9a95ee7fe.webp) **Kaj boste videli v vmesniku:** - **Stranska vrstica Explorer**: **Prikazuje** datoteke vašega repozitorija in strukturo map @@ -448,7 +448,7 @@ Razširitve izboljšajo vašo izkušnjo razvoja z omogočanjem funkcij, kot so p **Takojšnji rezultati po namestitvi:** Ko je CodeSwing nameščen, se bo v urejevalniku prikazal predogled vaše spletne strani z življenjepisom v živo. To vam omogoča, da vidite, kako vaša stran izgleda, medtem ko jo spreminjate. -![Razširitev CodeSwing prikazuje predogled v živo](../../../../translated_images/sl/after-codeswing-extension-pb.0ebddddcf73b5509.png) +![Razširitev CodeSwing prikazuje predogled v živo](../../../../translated_images/sl/after-codeswing-extension-pb.0ebddddcf73b5509.webp) **Razumevanje izboljšanega vmesnika:** - **Razdeljen pogled**: **Prikazuje** vašo kodo na eni strani in predogled v živo na drugi diff --git a/translations/sl/9-chat-project/README.md b/translations/sl/9-chat-project/README.md index eb51a79e1..3c8960cab 100644 --- a/translations/sl/9-chat-project/README.md +++ b/translations/sl/9-chat-project/README.md @@ -60,7 +60,7 @@ print(response.choices[0].message.content) Tako bo videti vaš končni projekt: -![Chat app interface showing conversation between user and AI assistant](../../../translated_images/sl/screenshot.0a1ee0d123df681b.png) +![Chat app interface showing conversation between user and AI assistant](../../../translated_images/sl/screenshot.0a1ee0d123df681b.webp) ## 🗺️ Vaša pot učenja razvoja AI aplikacij @@ -189,7 +189,7 @@ mindmap ``` **Osnovno načelo**: Razvoj AI aplikacij združuje tradicionalne spletne razvojne veščine s integracijo AI storitev, ustvarjajoč inteligentne aplikacije, ki se uporabnikom zdijo naravne in odzivne. -![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/sl/playground.d2b927122224ff8f.png) +![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/sl/playground.d2b927122224ff8f.webp) **Zakaj je playground tako uporaben:** - **Preizkusite** različne AI modele, kot so GPT-4o-mini, Claude in drugi (vsi brezplačni!) @@ -199,7 +199,7 @@ mindmap Ko se poigrate, kliknite zavihek "Code" in izberite programski jezik za pridobitev potrebne implementacijske kode. -![Playground choice showing code generation options for different programming languages](../../../translated_images/sl/playground-choice.1d23ba7d407f4758.png) +![Playground choice showing code generation options for different programming languages](../../../translated_images/sl/playground-choice.1d23ba7d407f4758.webp) ## Nastavitev Python backend integracije @@ -2352,14 +2352,14 @@ Veščine, ki ste jih razvili v tem tečaju, so neposredno uporabne v sodobnih k - **Odprite** [Web Dev For Beginners repozitorij](https://github.com/microsoft/Web-Dev-For-Beginners) - **Kliknite** "Use this template" v zgornjem desnem kotu (preverite, da ste prijavljeni v GitHub) -![Create from template interface showing the green "Use this template" button](../../../translated_images/sl/template.67ad477109d29a2b.png) +![Create from template interface showing the green "Use this template" button](../../../translated_images/sl/template.67ad477109d29a2b.webp) **Korak 2: Zaženite Codespaces** - **Odprite** novoustanovljeni repozitorij - **Kliknite** zeleno tipko "Code" in izberite "Codespaces" - **Izberite** "Create codespace on main", da začnete razvojno okolje -![Create codespace interface with options for launching cloud development environment](../../../translated_images/sl/codespace.bcecbdf5d2747d3d.png) +![Create codespace interface with options for launching cloud development environment](../../../translated_images/sl/codespace.bcecbdf5d2747d3d.webp) **Korak 3: Konfiguracija okolja** Ko se vaš Codespace naloži, boste imeli dostop do: diff --git a/translations/sl/README.md b/translations/sl/README.md index 374210ab8..a1634a9b3 100644 --- a/translations/sl/README.md +++ b/translations/sl/README.md @@ -72,13 +72,13 @@ Ne zamudi našega novega kurikuluma o Generativni AI! Obišči [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) za začetek! -![Background](../../translated_images/sl/background.148a8d43afde5730.png) +![Background](../../translated_images/sl/background.148a8d43afde5730.webp) - Lekcije obsegajo vse od osnov do RAG. - Komuniciraj z zgodovinskimi liki s pomočjo GenAI in naše spremljevalne aplikacije. - Zabavna in privlačna pripoved, potoval boš skozi čas! -![character](../../translated_images/sl/character.5c0dd8e067ffd693.png) +![character](../../translated_images/sl/character.5c0dd8e067ffd693.webp) Vsaka lekcija vključuje nalogo za dokončanje, preverjanje znanja in izziv, ki te vodi pri učenju tem, kot so: @@ -115,7 +115,7 @@ Sledite tem korakom: V svoji kopiji tega repozitorija, ki ste jo ustvarili, kliknite na gumb **Code** in izberite **Open with Codespaces**. To bo ustvarilo nov Codespace za vaše delo. -![Codespace](../../translated_images/sl/createcodespace.0238bbf4d7a8d955.png) +![Codespace](../../translated_images/sl/createcodespace.0238bbf4d7a8d955.webp) #### Izvajanje kurikuluma lokalno na računalniku diff --git a/translations/sl/for-teachers.md b/translations/sl/for-teachers.md index 9790d35e5..8215f61ac 100644 --- a/translations/sl/for-teachers.md +++ b/translations/sl/for-teachers.md @@ -42,10 +42,10 @@ Ta učni načrt vključuje uvozne pakete za običajne LMS delovne tokove. - Moodle Cloud ima omejeno podporo za Common Cartridge. Raje uporabite zgornjo datoteko Moodle, ki jo lahko naložite tudi v Canvas. - Po uvozu pregledajte module, roke in nastavitve kvizov, da se ujemajo z vašim urnikom semestra. -![Moodle](../../translated_images/sl/moodle.94eb93d714a50cb2.png) +![Moodle](../../translated_images/sl/moodle.94eb93d714a50cb2.webp) > Učni načrt v učilnici Moodle -![Canvas](../../translated_images/sl/canvas.fbd605ff8e5b8aff.png) +![Canvas](../../translated_images/sl/canvas.fbd605ff8e5b8aff.webp) > Učni načrt v Canvas ### Neposredna uporaba repozitorija (brez Classroom) diff --git a/translations/sr/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/sr/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 175223d39..52d0dd795 100644 --- a/translations/sr/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/sr/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: Данас ћемо истражити невероватне алате који савремени веб развој чине не само могућим, већ и озбиљно заразним. Причам о управо тим иста којима програмирају у Netflix, Spotify и твојој омиљеној инди апликационој студији сваки дан. И ево дела који ће те натерати да заиграш од радости: већина ових професионалних, индустријских алата је у потпуности бесплатна! -![Intro Programming](../../../../translated_images/sr/webdev101-programming.d6e3f98e61ac4bff.png) +![Intro Programming](../../../../translated_images/sr/webdev101-programming.d6e3f98e61ac4bff.webp) > Скечнот од [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/sr/1-getting-started-lessons/2-github-basics/README.md b/translations/sr/1-getting-started-lessons/2-github-basics/README.md index 6beff971c..a2a29fb54 100644 --- a/translations/sr/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/sr/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: Ову ћемо авантуру проћи заједно, корак по корак. Без журбе, без притиска – само ти, ја и неки стварно кул алати који ће ускоро постати твоји нови најбољи пријатељи! -![Intro to GitHub](../../../../translated_images/sr/webdev101-github.8846d7971abef6f9.png) +![Intro to GitHub](../../../../translated_images/sr/webdev101-github.8846d7971abef6f9.webp) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -606,7 +606,7 @@ flowchart TD ✅ Добар начин за проналажење „пријатељских за почетнике“ репозиторијума је да [претражите по тагу 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Copy a repo locally](../../../../translated_images/sr/clone_repo.5085c48d666ead57.png) +![Copy a repo locally](../../../../translated_images/sr/clone_repo.5085c48d666ead57.webp) Постоји више начина да копирате код. Један од начина је да „клонирате“ садржај репозиторијума, користећи HTTPS, SSH или GitHub CLI (Command Line Interface). diff --git a/translations/sr/1-getting-started-lessons/3-accessibility/README.md b/translations/sr/1-getting-started-lessons/3-accessibility/README.md index c672b61e2..977a8950d 100644 --- a/translations/sr/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/sr/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Креирање приступачних веб страница -![Све о приступачности](../../../../translated_images/sr/webdev101-a11y.8ef3025c858d897a.png) +![Све о приступачности](../../../../translated_images/sr/webdev101-a11y.8ef3025c858d897a.webp) > Скетчнот од [Томоми Имура](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/sr/2-js-basics/1-data-types/README.md b/translations/sr/2-js-basics/1-data-types/README.md index fbfe24d7e..7fb741b76 100644 --- a/translations/sr/2-js-basics/1-data-types/README.md +++ b/translations/sr/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Основе ЈаваСкрипта: Типови података -![JavaScript Basics - Data types](../../../../translated_images/sr/webdev101-js-datatypes.4cc470179730702c.png) +![JavaScript Basics - Data types](../../../../translated_images/sr/webdev101-js-datatypes.4cc470179730702c.webp) > Скетчнот од [Томоми Имура](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/sr/2-js-basics/2-functions-methods/README.md b/translations/sr/2-js-basics/2-functions-methods/README.md index 05c042d66..2dcda39c7 100644 --- a/translations/sr/2-js-basics/2-functions-methods/README.md +++ b/translations/sr/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Основи JavaScript-а: Методи и функције -![JavaScript Basics - Functions](../../../../translated_images/sr/webdev101-js-functions.be049c4726e94f8b.png) +![JavaScript Basics - Functions](../../../../translated_images/sr/webdev101-js-functions.be049c4726e94f8b.webp) > Скетчнот аутора [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/sr/2-js-basics/3-making-decisions/README.md b/translations/sr/2-js-basics/3-making-decisions/README.md index 520537dc0..cced24cbd 100644 --- a/translations/sr/2-js-basics/3-making-decisions/README.md +++ b/translations/sr/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Основе ЈаваСкрипта: Доношење одлука -![Основе ЈаваСкрипта - Доношење одлука](../../../../translated_images/sr/webdev101-js-decisions.69e1b20f272dd1f0.png) +![Основе ЈаваСкрипта - Доношење одлука](../../../../translated_images/sr/webdev101-js-decisions.69e1b20f272dd1f0.webp) > Скетчнот од [Томоми Имура](https://twitter.com/girlie_mac) diff --git a/translations/sr/2-js-basics/4-arrays-loops/README.md b/translations/sr/2-js-basics/4-arrays-loops/README.md index 066815e76..7591c3bb2 100644 --- a/translations/sr/2-js-basics/4-arrays-loops/README.md +++ b/translations/sr/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Основе JavaScript-а: Низови и Петље -![JavaScript Basics - Arrays](../../../../translated_images/sr/webdev101-js-arrays.439d7528b8a29455.png) +![JavaScript Basics - Arrays](../../../../translated_images/sr/webdev101-js-arrays.439d7528b8a29455.webp) > Скетчнот од [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/sr/3-terrarium/1-intro-to-html/README.md b/translations/sr/3-terrarium/1-intro-to-html/README.md index 17c339f9b..e9755edbd 100644 --- a/translations/sr/3-terrarium/1-intro-to-html/README.md +++ b/translations/sr/3-terrarium/1-intro-to-html/README.md @@ -25,7 +25,7 @@ journey Побољшајте приступачност: 5: Student Направите тераријум: 5: Student ``` -![Introduction to HTML](../../../../translated_images/sr/webdev101-html.4389c2067af68e98.png) +![Introduction to HTML](../../../../translated_images/sr/webdev101-html.4389c2067af68e98.webp) > Sketchnote autora [Tomomi Imura](https://twitter.com/girlie_mac) HTML, ili HyperText Markup Language, je osnova svake web stranice koju ste ikada posetili. Zamislite HTML kao kostur koji daje strukturu veb stranicama – on definiše gde sadržaj ide, kako je organizovan i šta svaki deo predstavlja. Dok će CSS kasnije "ukrasiti" vaš HTML bojama i rasporedima, a JavaScript oživeti interaktivnošću, HTML pruža osnovnu strukturu koja sve ostalo omogućava. @@ -86,7 +86,7 @@ Napravite poseban folder za projekat terarijuma i dodajte svoj prvi HTML fajl. E 4. U Explorer panelu kliknite na ikonu "New File" 5. Imenovajte fajl `index.html` -![VS Code Explorer showing new file creation](../../../../translated_images/sr/vs-code-index.e2986cf919471eb9.png) +![VS Code Explorer showing new file creation](../../../../translated_images/sr/vs-code-index.e2986cf919471eb9.webp) **Opcija 2: Korišćenje komandne linije** ```bash diff --git a/translations/sr/3-terrarium/2-intro-to-css/README.md b/translations/sr/3-terrarium/2-intro-to-css/README.md index 295f10d93..ce00ff138 100644 --- a/translations/sr/3-terrarium/2-intro-to-css/README.md +++ b/translations/sr/3-terrarium/2-intro-to-css/README.md @@ -29,7 +29,7 @@ journey Респонсив дизајн: 5: Student Огледала на стаклу: 5: Student ``` -![Uvod u CSS](../../../../translated_images/sr/webdev101-css.3f7af5991bf53a20.png) +![Uvod u CSS](../../../../translated_images/sr/webdev101-css.3f7af5991bf53a20.webp) > Sketchnote autora [Tomomi Imura](https://twitter.com/girlie_mac) Sećate li se kako je vaš HTML terarijum izgledao prilično osnovno? CSS je mesto gde tu običnu strukturu pretvaramo u nešto vizuelno privlačno. @@ -202,7 +202,7 @@ body { Otvorite alatke za razvojne programere u pregledaču (F12), idite na karticu Elements i pregledajte `

` element. Videćete da nasleđuje font familiju od ``: -![inherited font](../../../../translated_images/sr/1.cc07a5cbe114ad1d.png) +![inherited font](../../../../translated_images/sr/1.cc07a5cbe114ad1d.webp) ✅ **Eksperimentisanje**: Pokušajte da postavite druga svojstva koja se nasleđuju na `` kao što su `color`, `line-height` ili `text-align`. Šta se dešava sa vašim naslovom i drugim elementima? @@ -594,7 +594,7 @@ flowchart LR Направићете суптилне наглашене беле или светле овалне облике за стаклене рефлексије. Овај приступ подсећа на начин на који су ренесансни сликари попут Јана ван Ајка користили светлост и одраз да би направили тродимензионални изглед на сликаном стаклу. Ево шта циљате: -![finished terrarium](../../../../translated_images/sr/terrarium-final.2f07047ffc597d0a.png) +![finished terrarium](../../../../translated_images/sr/terrarium-final.2f07047ffc597d0a.webp) **Ваш задатак:** - **Креирајте** суптилне беле или светле овалне облике за стаклене рефлексије diff --git a/translations/sr/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/sr/3-terrarium/3-intro-to-DOM-and-closures/README.md index ec2da8bd1..57fb897fe 100644 --- a/translations/sr/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/sr/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -25,7 +25,7 @@ journey Тестирати функционалност: 5: Student Завршити тераријум: 5: Student ``` -![DOM и затварање](../../../../translated_images/sr/webdev101-js.10280393044d7eaa.png) +![DOM и затварање](../../../../translated_images/sr/webdev101-js.10280393044d7eaa.webp) > Скетчнот од [Tomomi Imura](https://twitter.com/girlie_mac) Добродошли у један од најузбудљивијих аспеката веб развоја – чинење ствари интерактивним! Document Object Model (DOM) је као мост између вашег HTML-а и JavaScript-а, а данас ћемо га користити да оживимо ваш тераријум. Када је Тим Бернерс-Ли направио први веб прегледач, замишљао је веб где документи могу бити динамички и интерактивни – DOM чини ту визију могућом. @@ -102,7 +102,7 @@ flowchart TD style P fill:#ffebee style Q fill:#ffebee ``` -![Приказ стабла DOM-а](../../../../translated_images/sr/dom-tree.7daf0e763cbbba92.png) +![Приказ стабла DOM-а](../../../../translated_images/sr/dom-tree.7daf0e763cbbba92.webp) > Приказ DOM-а и HTML ознаке која га позива. Из [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -146,7 +146,7 @@ flowchart LR ``` > 💡 **Разумевање затварања**: Затварања су важна тема у JavaScript-у и многи програмери их користе годинама пре него што у потпуности схвате све теоријске аспекте. Данас се фокусирамо на практичну примену – видећете како затварања природно излазе док градимо наше интерактивне функције. Разумевање ће се развијати како будете гледали како решавају стварне проблеме. -![Приказ стабла DOM-а](../../../../translated_images/sr/dom-tree.7daf0e763cbbba92.png) +![Приказ стабла DOM-а](../../../../translated_images/sr/dom-tree.7daf0e763cbbba92.webp) > Приказ DOM-а и HTML ознаке која га позива. Из [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -591,7 +591,7 @@ function stopElementDrag() { - **Подршка за више уређаја**: Ради на десктопу и мобилном - **Свест о перформансама**: Без цурења меморије или сувишних калкулација -![finished terrarium](../../../../translated_images/sr/terrarium-final.0920f16e87c13a84.png) +![finished terrarium](../../../../translated_images/sr/terrarium-final.0920f16e87c13a84.webp) --- diff --git a/translations/sr/3-terrarium/solution/README.md b/translations/sr/3-terrarium/solution/README.md index 0203dcdfc..7a64db27b 100644 --- a/translations/sr/3-terrarium/solution/README.md +++ b/translations/sr/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Мала вежба са превлачењем и пуштањем. Уз мало HTML-а, JS-а и CSS-а, можете направити веб интерфејс, стилизовати га и додати интеракцију. -![мој тераријум](../../../../translated_images/sr/screenshot_gray.0c796099a1f9f25e.png) +![мој тераријум](../../../../translated_images/sr/screenshot_gray.0c796099a1f9f25e.webp) ## Кредити diff --git a/translations/sr/5-browser-extension/1-about-browsers/README.md b/translations/sr/5-browser-extension/1-about-browsers/README.md index fe878b67a..cca4bd487 100644 --- a/translations/sr/5-browser-extension/1-about-browsers/README.md +++ b/translations/sr/5-browser-extension/1-about-browsers/README.md @@ -25,7 +25,7 @@ journey Отkloniti грешке: 4: Student Побољшати искуство: 5: Student ``` -![Browser sketchnote](../../../../translated_images/sr/browser.60317c9be8b7f84a.jpg) +![Browser sketchnote](../../../../translated_images/sr/browser.60317c9be8b7f84a.webp) > Скетчнот од [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## Квиз пре предавања @@ -77,7 +77,7 @@ mindmap ✅ **Мало историје**: Први прегледач назван је 'WorldWideWeb' и креирао га је сер Тимоти Бернерс-Ли 1990. године. -![early browsers](../../../../translated_images/sr/earlybrowsers.d984b711cdf3a42d.jpg) +![early browsers](../../../../translated_images/sr/earlybrowsers.d984b711cdf3a42d.webp) > Неки рани прегледачи, преко [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### Како прегледачи обрађују веб садржај @@ -194,7 +194,7 @@ quadrantChart Разумевање процеса инсталације проширења помаже да предвидите корисничко искуство када људи инсталирају ваше проширење. Процес инсталације је стандардизован у модерним прегледачима, уз мање разлике у дизајну интерфејса. -![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/sr/install-on-edge.d68781acaf0b3d3d.png) +![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/sr/install-on-edge.d68781acaf0b3d3d.webp) > **Важно**: Обавезно укључите режим програмера и дозволите проширења из других продавница када тестирате сопствена проширења. @@ -308,10 +308,10 @@ project-root/ ### Преглед приказа проширења **Приказ подешавања** – конфигурација новог корисника: -![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/sr/1.b6da8c1394b07491.png) +![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/sr/1.b6da8c1394b07491.webp) **Приказ резултата** – приказ података о угљеничном отиску: -![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/sr/2.1dae52ff08042246.png) +![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/sr/2.1dae52ff08042246.webp) ### Креирање формулара за подешавање diff --git a/translations/sr/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/sr/5-browser-extension/2-forms-browsers-local-storage/README.md index 9ad1cf169..bfbf16135 100644 --- a/translations/sr/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/sr/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -263,7 +263,7 @@ stateDiagram-v2 Reset --> ClearStorage: Уклони сачуване податке ClearStorage --> FirstTime: Назад на подешавање ``` -![Локални панел складишта](../../../../translated_images/sr/localstorage.472f8147b6a3f8d1.png) +![Локални панел складишта](../../../../translated_images/sr/localstorage.472f8147b6a3f8d1.webp) > ⚠️ **Безбедносна напомена**: У продукцијским апликацијама чување API кључева у LocalStorage представља безбедносни ризик јер JavaScript може приступити тим подацима. За потребе учења овај приступ је прихватљив, али праве апликације треба да користе безбедно чување на серверској страни за осетљиве креденцијале. diff --git a/translations/sr/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/sr/5-browser-extension/3-background-tasks-and-performance/README.md index 929bed5ee..a773a32f5 100644 --- a/translations/sr/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/sr/5-browser-extension/3-background-tasks-and-performance/README.md @@ -123,7 +123,7 @@ flowchart LR Ајде да пробамо ово. Отворите сајт (Microsoft.com добро функционише) и кликните на дугме 'Record'. Сада освежите страницу и пратите како профајлер снима све што се дешава. Када зауставите снимање, видећете детаљан преглед како прегледач „скриптује“, „рендерује“ и „црта“ страницу. Подсећа ме како контролна мисија прати сваки систем током лансирања ракете – добијате податке у реалном времену о томе шта се тачно дешава и када. -![Edge profiler](../../../../translated_images/sr/profiler.5a4a62479c5df01c.png) +![Edge profiler](../../../../translated_images/sr/profiler.5a4a62479c5df01c.webp) ✅ [Microsoft документација](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) има још пуно детаља ако желите дубље да уроните @@ -133,11 +133,11 @@ flowchart LR Погледајте кратак преглед перформанси странице тако што ћете изабрати део временске линије профила и погледати сажетак: -![Edge profiler snapshot](../../../../translated_images/sr/snapshot.97750180ebcad737.png) +![Edge profiler snapshot](../../../../translated_images/sr/snapshot.97750180ebcad737.webp) Погледајте панел дневника догађаја да бисте проверили да ли је неки догађај трајао дуже од 15 ms: -![Edge event log](../../../../translated_images/sr/log.804026979f3707e0.png) +![Edge event log](../../../../translated_images/sr/log.804026979f3707e0.webp) ✅ Упознајте свој профајлер! Отворите девелопер алате на овом сајту и погледајте да ли има било каквих уских грла. Који је најспорији ресурс? Који најбржи? diff --git a/translations/sr/5-browser-extension/README.md b/translations/sr/5-browser-extension/README.md index 5243751d0..2464d87e1 100644 --- a/translations/sr/5-browser-extension/README.md +++ b/translations/sr/5-browser-extension/README.md @@ -23,7 +23,7 @@ CO_OP_TRANSLATOR_METADATA: ### Захвалнице -![зелена екстензија за прегледач](../../../translated_images/sr/extension-screenshot.0e7f5bfa110e92e3.png) +![зелена екстензија за прегледач](../../../translated_images/sr/extension-screenshot.0e7f5bfa110e92e3.webp) ## Захвалнице diff --git a/translations/sr/5-browser-extension/solution/README.md b/translations/sr/5-browser-extension/solution/README.md index c6917a6ac..cb9f2c54c 100644 --- a/translations/sr/5-browser-extension/solution/README.md +++ b/translations/sr/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Користећи tmrow-ов C02 Signal API за праћење потрошње електричне енергије, направите екстензију за претраживач како бисте имали подсетник директно у вашем претраживачу о томе колико је потрошња електричне енергије у вашем региону велика. Коришћење ове екстензије ад хок ће вам помоћи да донесете одлуке о вашим активностима на основу ових информација. -![скриншот екстензије](../../../../translated_images/sr/extension-screenshot.0e7f5bfa110e92e3.png) +![скриншот екстензије](../../../../translated_images/sr/extension-screenshot.0e7f5bfa110e92e3.webp) ## Почетак @@ -31,7 +31,7 @@ npm run build Да бисте инсталирали на Edge, користите мени са 'три тачке' у горњем десном углу претраживача да пронађете панел за екстензије. Одатле изаберите 'Load Unpacked' да учитате нову екстензију. Отворите фасциклу 'dist' када се појави упит, и екстензија ће се учитати. Да бисте је користили, потребан вам је API кључ за CO2 Signal API ([набавите га овде путем е-поште](https://www.co2signal.com/) - унесите вашу е-пошту у поље на овој страници) и [код за ваш регион](http://api.electricitymap.org/v3/zones) који одговара [Electricity Map](https://www.electricitymap.org/map) (на пример, у Бостону користим 'US-NEISO'). -![инсталирање](../../../../translated_images/sr/install-on-edge.78634f02842c4828.png) +![инсталирање](../../../../translated_images/sr/install-on-edge.78634f02842c4828.webp) Када унесете API кључ и регион у интерфејс екстензије, обојена тачка у траци екстензије претраживача би требало да се промени како би одразила потрошњу енергије у вашем региону и дала вам смернице о томе које активности са великом потрошњом енергије би биле прикладне за вас. Концепт иза овог система 'тачке' добио сам од [Energy Lollipop екстензије](https://energylollipop.com/) за емисије у Калифорнији. diff --git a/translations/sr/5-browser-extension/solution/translation/README.fr.md b/translations/sr/5-browser-extension/solution/translation/README.fr.md index 9bdb797ad..c13ba604e 100644 --- a/translations/sr/5-browser-extension/solution/translation/README.fr.md +++ b/translations/sr/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Користећи API C02 Signal од tmrow за праћење потрошње електричне енергије, направите екстензију за прегледач како бисте могли директно у свом прегледачу добијати подсетнике о потрошњи електричне енергије у вашем региону. Коришћење ове екстензије ће вам помоћи да доносите одлуке о својим активностима на основу ових информација. -![снимак екстензије](../../../../../translated_images/sr/extension-screenshot.0e7f5bfa110e92e3.png) +![снимак екстензије](../../../../../translated_images/sr/extension-screenshot.0e7f5bfa110e92e3.webp) ## Почетак @@ -31,7 +31,7 @@ npm run build Да бисте инсталирали на Edge, користите мени „три тачке“ у горњем десном углу прегледача да пронађете панел за екстензије. Одатле изаберите „Учитајте распаковану екстензију“ да бисте додали нову екстензију. На упиту отворите фолдер 'dist' и екстензија ће се учитати. Да бисте је користили, биће вам потребан API кључ за CO2 Signal API ([набавите га овде путем е-поште](https://www.co2signal.com/) - унесите своју е-пошту у поље на тој страници) и [код за ваш регион](http://api.electricitymap.org/v3/zones) који одговара [Мапи електричне енергије](https://www.electricitymap.org/map) (на пример, за Бостон користим 'US-NEISO'). -![инсталација](../../../../../translated_images/sr/install-on-edge.78634f02842c4828.png) +![инсталација](../../../../../translated_images/sr/install-on-edge.78634f02842c4828.webp) Када унесете API кључ и регион у интерфејс екстензије, обојена тачка у траци екстензија вашег прегледача треба да се промени како би одразила потрошњу енергије у вашем региону и дала вам индикатор о активностима које троше енергију, а које би било прикладно обављати. Концепт иза овог система „тачака“ инспирисан је [екстензијом Energy Lollipop](https://energylollipop.com/) за емисије у Калифорнији. diff --git a/translations/sr/5-browser-extension/solution/translation/README.hi.md b/translations/sr/5-browser-extension/solution/translation/README.hi.md index 966c8b395..4129ebc5e 100644 --- a/translations/sr/5-browser-extension/solution/translation/README.hi.md +++ b/translations/sr/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Користећи tmrow-ов C02 Signal API за праћење потрошње електричне енергије, направљена је екстензија за браузер која вас подсећа колико је потрошња електричне енергије у вашем региону у датом тренутку. Коришћење ове екстензије може вам помоћи да донесете одлуке о својим активностима на основу ове информације. -![Снимак екрана екстензије](../../../../../translated_images/sr/extension-screenshot.0e7f5bfa110e92e3.png) +![Снимак екрана екстензије](../../../../../translated_images/sr/extension-screenshot.0e7f5bfa110e92e3.webp) ## Почетак @@ -31,7 +31,7 @@ npm run build Да бисте инсталирали на Edge, користите мени са „три тачке“ у горњем десном углу браузера да пронађете панел за екстензије. Одатле изаберите „Load unpacked“ да бисте учитали нову екстензију. Када се појави упит, отворите фолдер „dist“ и екстензија ће бити учитана. Да бисте је користили, потребан вам је API кључ за CO2 Signal ([добијте га овде путем е-поште](https://www.co2snal.com/) – унесите своју е-пошту у поље на тој страници) и [код за ваш регион](http://api.electricitymap.org/v3/zones) са [Electricity Map](https://www.electricitymap.org/map) (на пример, за Бостон користим 'US-NEISO'). -![инсталација](../../../../../translated_images/sr/install-on-edge.78634f02842c4828.png) +![инсталација](../../../../../translated_images/sr/install-on-edge.78634f02842c4828.webp) Када унесете API кључ и регион у интерфејс екстензије, обојена тачка у траци екстензија вашег браузера требало би да се промени како би одражавала потрошњу енергије у вашем региону. Ово ће вам дати индикатор о томе које активности су прикладне у зависности од енергетске потрошње. Концепт ове „тачкасте“ системе инспирисан је [Energy Lollipop екстензијом](https://energylollipop.com/) за емисије у Калифорнији. diff --git a/translations/sr/5-browser-extension/solution/translation/README.it.md b/translations/sr/5-browser-extension/solution/translation/README.it.md index 329467948..300a05c00 100644 --- a/translations/sr/5-browser-extension/solution/translation/README.it.md +++ b/translations/sr/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Користићемо API Signal C02 од tmrow за праћење потрошње електричне енергије како бисмо направили проширење за прегледач које ће вам омогућити да директно у прегледачу добијете подсетник о томе колико је потрошња електричне енергије у вашем региону оптерећујућа. Коришћење овог прилагођеног проширења помоћи ће вам да процените своје активности на основу ових информација. -![снимак екрана проширења](../../../../../translated_images/sr/extension-screenshot.0e7f5bfa110e92e3.png) +![снимак екрана проширења](../../../../../translated_images/sr/extension-screenshot.0e7f5bfa110e92e3.webp) ## Како започети @@ -31,7 +31,7 @@ npm run build За инсталацију на Edge, користите мени "три тачке" у горњем десном углу прегледача да бисте пронашли панел за проширења. Ако већ није активирано, укључите режим за програмере (у доњем левом углу). Изаберите "Учитај распаковано" да бисте учитали ново проширење. Отворите фасциклу "dist" када се појави упит, и проширење ће бити учитано. Да бисте га користили, биће вам потребан API кључ за CO2 Signal API (можете га [добити овде путем е-поште](https://www.co2signal.com/) - унесите своју е-пошту у поље на овој страници) и [код за ваш регион](http://api.electricitymap.org/v3/zones) који одговара [електричној мапи](https://www.electricitymap.org/map) (на пример, за Бостон, "US-NEISO"). -![инсталација](../../../../../translated_images/sr/install-on-edge.78634f02842c4828.png) +![инсталација](../../../../../translated_images/sr/install-on-edge.78634f02842c4828.webp) Када унесете API кључ и регион у интерфејс проширења, обојена тачка у траци проширења прегледача би требало да се промени како би одражавала потрошњу енергије у региону и пружила смернице о томе које активности са високом потрошњом енергије би биле прикладне за извршавање. Концепт који стоји иза овог система са "тачкама" инспирисан је [Energy Lollipop проширењем](https://energylollipop.com/) за емисије у Калифорнији. diff --git a/translations/sr/5-browser-extension/solution/translation/README.ja.md b/translations/sr/5-browser-extension/solution/translation/README.ja.md index 544d31aad..5c7f52ce0 100644 --- a/translations/sr/5-browser-extension/solution/translation/README.ja.md +++ b/translations/sr/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Користећи C02 Signal API од tmrow, направићемо екстензију за прегледач која приказује подсетник о томе колико је велика потрошња електричне енергије у вашем региону. Ова екстензија ће вам омогућити да пратите потрошњу струје и доносите одлуке о својим активностима на основу тих информација. -![скриншот екстензије](../../../../../translated_images/sr/extension-screenshot.0e7f5bfa110e92e3.png) +![скриншот екстензије](../../../../../translated_images/sr/extension-screenshot.0e7f5bfa110e92e3.webp) ## Увод @@ -31,7 +31,7 @@ npm run build Да бисте инсталирали екстензију на Edge, пронађите панел „Екстензије“ у менију са „три тачке“ у горњем десном углу прегледача. Одатле изаберите „Load Unpacked“ и учитајте нову екстензију. Када се појави упит, отворите фасциклу „dist“, и екстензија ће бити учитана. Да бисте је користили, потребан вам је API кључ за CO2 Signal API ([набавите га овде путем е-поште](https://www.co2signal.com/) - унесите вашу е-пошту у поље на тој страници) и [код за ваш регион](http://api.electricitymap.org/v3/zones) који је компатибилан са [Electricity Map](https://www.electricitymap.org/map) (на пример, за Бостон користите 'US-NEISO'). -![инсталација](../../../../../translated_images/sr/install-on-edge.78634f02842c4828.png) +![инсталација](../../../../../translated_images/sr/install-on-edge.78634f02842c4828.webp) Када унесете API кључ и регион у интерфејс екстензије, боја тачке која се приказује на траци екстензија у вашем прегледачу ће се променити. Ова тачка одражава потрошњу енергије у вашем региону и помаже вам да одлучите које активности су прикладне у том тренутку. Концепт овог „система тачке“ инспирисан је [Energy Lollipop екстензијом](https://energylollipop.com/) за праћење емисија у Калифорнији. diff --git a/translations/sr/5-browser-extension/solution/translation/README.ms.md b/translations/sr/5-browser-extension/solution/translation/README.ms.md index 407fdc303..67f316ef8 100644 --- a/translations/sr/5-browser-extension/solution/translation/README.ms.md +++ b/translations/sr/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Користећи API за CO2 сигнал tmrow за праћење потрошње електричне енергије, направите додатак за прегледач који ће вам омогућити да добијете обавештења у вашем прегледачу о томе колико је велика потрошња електричне енергије у вашем региону. Коришћење овог додатка ће вам помоћи да донесете одлуке о вашим активностима на основу ових информација. -![снимак додатка за прегледач](../../../../../translated_images/sr/extension-screenshot.0e7f5bfa110e92e3.png) +![снимак додатка за прегледач](../../../../../translated_images/sr/extension-screenshot.0e7f5bfa110e92e3.webp) ## Почетак @@ -31,7 +31,7 @@ npm run build Да бисте инсталирали на Edge, користите мени „три тачке“ у горњем десном углу прегледача да бисте пронашли панел Додаци. Одатле изаберите „Load Unpacked“ да бисте учитали нови додатак. Отворите фасциклу „dist“ на захтев и додатак ће бити учитан. Да бисте га користили, потребан вам је API кључ за CO2 сигнал ([набавите га овде путем е-поште](https://www.co2signal.com/) - унесите вашу е-пошту у поље на овој страници) и [код за ваш регион](http://api.electricitymap.org/v3/zones) који одговара [Електричној мапи](https://www.electricitymap.org/map) (у Бостону, на пример, ја користим 'US-NEISO'). -![преузимање](../../../../../translated_images/sr/install-on-edge.78634f02842c4828.png) +![преузимање](../../../../../translated_images/sr/install-on-edge.78634f02842c4828.webp) Када унесете API кључ и регион у интерфејс додатка, обојена тачка на траци додатка у прегледачу ће се променити како би одразила потрошњу енергије у вашем региону и дала вам препоруке о активностима које су прикладне за вас. Концепт иза овог система „тачке“ добио сам од [додатка за прегледач Energy Lollipop](https://energylollipop.com/) за емисије у Калифорнији. diff --git a/translations/sr/5-browser-extension/start/README.md b/translations/sr/5-browser-extension/start/README.md index fc3415e47..a40d53362 100644 --- a/translations/sr/5-browser-extension/start/README.md +++ b/translations/sr/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Користећи tmrow-ов C02 Signal API за праћење потрошње електричне енергије, направите екстензију за претраживач како бисте имали подсетник директно у вашем претраживачу о томе колика је потрошња електричне енергије у вашем региону. Коришћење ове екстензије ће вам помоћи да доносите одлуке о вашим активностима на основу ових информација. -![скриншот екстензије](../../../../translated_images/sr/extension-screenshot.0e7f5bfa110e92e3.png) +![скриншот екстензије](../../../../translated_images/sr/extension-screenshot.0e7f5bfa110e92e3.webp) ## Како започети @@ -31,7 +31,7 @@ npm run build Да бисте инсталирали на Edge, користите мени са 'три тачке' у горњем десном углу претраживача да пронађете панел за Екстензије. Одатле изаберите 'Учитај неупаковано' да бисте учитали нову екстензију. На упиту отворите фасциклу 'dist' и екстензија ће се учитати. Да бисте је користили, биће вам потребан API кључ за CO2 Signal API ([набавите га овде путем е-поште](https://www.co2signal.com/) - унесите вашу е-пошту у поље на овој страници) и [код за ваш регион](http://api.electricitymap.org/v3/zones) који одговара [Electricity Map](https://www.electricitymap.org/map) (на пример, у Бостону користим 'US-NEISO'). -![инсталација](../../../../translated_images/sr/install-on-edge.78634f02842c4828.png) +![инсталација](../../../../translated_images/sr/install-on-edge.78634f02842c4828.webp) Када унесете API кључ и регион у интерфејс екстензије, обојена тачка у траци екстензије претраживача би требало да се промени како би одразила потрошњу енергије у вашем региону и дала вам смернице о томе које активности са великом потрошњом енергије би биле прикладне за вас. Концепт иза овог система 'тачке' инспирисан је [Energy Lollipop екстензијом](https://energylollipop.com/) за емисије у Калифорнији. diff --git a/translations/sr/6-space-game/2-drawing-to-canvas/README.md b/translations/sr/6-space-game/2-drawing-to-canvas/README.md index 68e7451c6..f51104b32 100644 --- a/translations/sr/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/sr/6-space-game/2-drawing-to-canvas/README.md @@ -105,7 +105,7 @@ quadrantChart Power-up: [0.7, 0.6] UI Elements: [0.9, 0.1] ``` -![mрежа canvas-а](../../../../translated_images/sr/canvas_grid.5f209da785ded492.png) +![mрежа canvas-а](../../../../translated_images/sr/canvas_grid.5f209da785ded492.webp) > Слика са [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) Да бисте цртали на canvas елементу, пратите исти тростепени поступак који чини основу целе canvas графике. Када то урадите неколико пута, постаје друга природа: @@ -323,11 +323,11 @@ flowchart TD - Херојски брод - ![Hero ship](../../../../translated_images/sr/player.dd24c1afa8c71e9b.png) + ![Hero ship](../../../../translated_images/sr/player.dd24c1afa8c71e9b.webp) - 5*5 чудовишта - ![Monster ship](../../../../translated_images/sr/enemyShip.5df2a822c16650c2.png) + ![Monster ship](../../../../translated_images/sr/enemyShip.5df2a822c16650c2.webp) ### Препоручени кораци за почетак развоја @@ -463,7 +463,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { Потпун резултат треба да изгледа овако: -![Црни екран са херојем и 5*5 чудовишта](../../../../translated_images/sr/partI-solution.36c53b48c9ffae2a.png) +![Црни екран са херојем и 5*5 чудовишта](../../../../translated_images/sr/partI-solution.36c53b48c9ffae2a.webp) ## Решење diff --git a/translations/sr/6-space-game/5-keeping-score/README.md b/translations/sr/6-space-game/5-keeping-score/README.md index e14fd401f..ba193aade 100644 --- a/translations/sr/6-space-game/5-keeping-score/README.md +++ b/translations/sr/6-space-game/5-keeping-score/README.md @@ -155,7 +155,7 @@ sequenceDiagram end ``` - **Систем бодовања**: Сваки уништени непријатељски брод доноси 100 поена (кругли бројеви су лакши за умно рачунање). Резултат се приказује у доњем левом углу. -- **Бројач живота**: Ваш херој почиње са три живота - стандард који су поставиле ране аркадне игре ради баланса између изазова и игрувости. Свако судар са непријатељем кошта један живот. Преостале животе приказујемо у доњем десном углу користећи иконе бродова ![life image](../../../../translated_images/sr/life.6fb9f50d53ee0413.png). +- **Бројач живота**: Ваш херој почиње са три живота - стандард који су поставиле ране аркадне игре ради баланса између изазова и игрувости. Свако судар са непријатељем кошта један живот. Преостале животе приказујемо у доњем десном углу користећи иконе бродова ![life image](../../../../translated_images/sr/life.6fb9f50d53ee0413.webp). ## Хајде да почнемо са изградњом! diff --git a/translations/sr/7-bank-project/1-template-route/README.md b/translations/sr/7-bank-project/1-template-route/README.md index 8fbdf545f..65093edc4 100644 --- a/translations/sr/7-bank-project/1-template-route/README.md +++ b/translations/sr/7-bank-project/1-template-route/README.md @@ -644,7 +644,7 @@ sequenceDiagram Коришћењем `history.pushState` се креирају нови уноси у историји навигације прегледача. Можете то проверити тако што ћете држати *дугме назад* у вашем прегледачу, треба да видите нешто овако: -![Снимање екрана историје навигације](../../../../translated_images/sr/history.7fdabbafa521e064.png) +![Снимање екрана историје навигације](../../../../translated_images/sr/history.7fdabbafa521e064.webp) Ако више пута кликнете на дугме назад, видећете да се тренутни URL мења и историја се ажурира, али исти шаблон се наставља приказивати. diff --git a/translations/sr/7-bank-project/2-forms/README.md b/translations/sr/7-bank-project/2-forms/README.md index 0f045165d..a6f784805 100644 --- a/translations/sr/7-bank-project/2-forms/README.md +++ b/translations/sr/7-bank-project/2-forms/README.md @@ -292,7 +292,7 @@ graph TD 2. Пратите промене у адресној линији претраживача 3. Обратите пажњу како се страница освежава и подаци појављују у URL-у -![Снимак екрана промене URL-а претраживача након клика на дугме Региструј се](../../../../translated_images/sr/click-register.e89a30bf0d4bc9ca.png) +![Снимак екрана промене URL-а претраживача након клика на дугме Региструј се](../../../../translated_images/sr/click-register.e89a30bf0d4bc9ca.webp) ### Поређење HTTP метода @@ -346,7 +346,7 @@ graph TD 2. **Кликните** дугме „Креирај налог“ 3. **Пратите** одговор сервера у вашем претраживачу -![Прегледач на адреси localhost:5000/api/accounts са JSON низом корисничких података](../../../../translated_images/sr/form-post.61de4ca1b964d91a.png) +![Прегледач на адреси localhost:5000/api/accounts са JSON низом корисничких података](../../../../translated_images/sr/form-post.61de4ca1b964d91a.webp) **Шта треба да видите:** - **Претраживач преусмерава** на API крајњу тачку @@ -609,7 +609,7 @@ async function register() { 3. **Кликните** на "Create Account" 4. **Пратите** поруке у конзоли и повратне информације кориснику -![Снимак екрана који приказује поруку у конзоли прегледача](../../../../translated_images/sr/browser-console.efaf0b51aaaf6778.png) +![Снимак екрана који приказује поруку у конзоли прегледача](../../../../translated_images/sr/browser-console.efaf0b51aaaf6778.webp) **Шта бисте требали видети:** - **Статус учитавања** се појављује на дугмету за слање @@ -783,7 +783,7 @@ input:focus:invalid { 3. **Унесите** специјалне знакове у поље за корисничко име 4. **Унесите** негативан износ стања на рачуну -![Снимак екрана који приказује грешку валидације при покушају слања формулара](../../../../translated_images/sr/validation-error.8bd23e98d416c22f.png) +![Снимак екрана који приказује грешку валидације при покушају слања формулара](../../../../translated_images/sr/validation-error.8bd23e98d416c22f.webp) **Шта ћете приметити:** - **Прегледач приказује** нативне поруке о валидацији @@ -943,7 +943,7 @@ timeline Ево примера како може изгледати завршна страница за пријаву након мало стилизовања: -![Screenshot of the login page after adding CSS styles](../../../../translated_images/sr/result.96ef01f607bf856a.png) +![Screenshot of the login page after adding CSS styles](../../../../translated_images/sr/result.96ef01f607bf856a.webp) ## Квиз после предавања diff --git a/translations/sr/7-bank-project/3-data/README.md b/translations/sr/7-bank-project/3-data/README.md index 2fede71d8..c30d9aea3 100644 --- a/translations/sr/7-bank-project/3-data/README.md +++ b/translations/sr/7-bank-project/3-data/README.md @@ -156,7 +156,7 @@ sequenceDiagram Server->>Browser: Врати потпуну HTML страницу Browser->>User: Прикаже нову страницу (блиц/преузимање) ``` -![Update workflow in a multi-page application](../../../../translated_images/sr/mpa.7f7375a1a2d4aa77.png) +![Update workflow in a multi-page application](../../../../translated_images/sr/mpa.7f7375a1a2d4aa77.webp) **Зашто је овај приступ деловао нефлексибилно:** - Сваки клик је значио обнову целе странице од нуле @@ -182,7 +182,7 @@ sequenceDiagram JavaScript->>Browser: Ажурира одређене елементе странице Browser->>User: Приказује ажуриран садржај (без поновног учитавања) ``` -![Update workflow in a single-page application](../../../../translated_images/sr/spa.268ec73b41f992c2.png) +![Update workflow in a single-page application](../../../../translated_images/sr/spa.268ec73b41f992c2.webp) **Зашто SPA апликације делују много боље:** - Само делови који су се стварно променили се ажурирају (паметно, зар не?) @@ -516,7 +516,7 @@ if (data.error) { Сада када тестирате са неважећим налогом, видећете корисну поруку о грешци директно на страници! -![Снимак екрана који приказује поруку о грешци током пријаве](../../../../translated_images/sr/login-error.416fe019b36a6327.png) +![Снимак екрана који приказује поруку о грешци током пријаве](../../../../translated_images/sr/login-error.416fe019b36a6327.webp) #### Корак 4: Будите инклузивни уз приступачност @@ -950,7 +950,7 @@ timeline Ево како би могла да изгледа уређена контрола табла: -![Screenshot of an example result of the dashboard after styling](../../../../translated_images/sr/screen2.123c82a831a1d14a.png) +![Screenshot of an example result of the dashboard after styling](../../../../translated_images/sr/screen2.123c82a831a1d14a.webp) Не морате да ничим пратите овај пример у потпуности — користите га као инспирацију и направите свој стил! diff --git a/translations/sr/7-bank-project/4-state-management/README.md b/translations/sr/7-bank-project/4-state-management/README.md index 3d24d0fe9..7247cf19c 100644 --- a/translations/sr/7-bank-project/4-state-management/README.md +++ b/translations/sr/7-bank-project/4-state-management/README.md @@ -187,7 +187,7 @@ mindmap Уместо да трчимо у круг, креираћемо **централизовани систем управљања стањем**. Замислите да имамо једну заиста организовану особу која контролише све битне ствари: -![Шема која приказује ток података између HTML-а, корисничких акција и стања](../../../../translated_images/sr/data-flow.fa2354e0908fecc8.png) +![Шема која приказује ток података између HTML-а, корисничких акција и стања](../../../../translated_images/sr/data-flow.fa2354e0908fecc8.webp) ```mermaid flowchart TD @@ -798,7 +798,7 @@ timeline Ево примера резултата након завршетка задатка: -![Screenshot showing an example "Add transaction" dialog](../../../../translated_images/sr/dialog.93bba104afeb79f1.png) +![Screenshot showing an example "Add transaction" dialog](../../../../translated_images/sr/dialog.93bba104afeb79f1.webp) --- diff --git a/translations/sr/7-bank-project/4-state-management/assignment.md b/translations/sr/7-bank-project/4-state-management/assignment.md index 55446384b..fde9f9912 100644 --- a/translations/sr/7-bank-project/4-state-management/assignment.md +++ b/translations/sr/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA: **Очекивани резултат:** Након завршетка овог задатка, ваша апликација за банкарство треба да има потпуно функционалну функцију "Додај трансакцију" која изгледа и функционише професионално: -![Снимак екрана који приказује пример дијалога "Додај трансакцију"](../../../../translated_images/sr/dialog.93bba104afeb79f1.png) +![Снимак екрана који приказује пример дијалога "Додај трансакцију"](../../../../translated_images/sr/dialog.93bba104afeb79f1.webp) ## Тестирање имплементације diff --git a/translations/sr/7-bank-project/README.md b/translations/sr/7-bank-project/README.md index 2bf18a04c..4bf502f68 100644 --- a/translations/sr/7-bank-project/README.md +++ b/translations/sr/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: У овом пројекту ћете научити како да направите измишљену банку. Ове лекције укључују упутства о томе како да распоредите веб апликацију и обезбедите руте, направите форме, управљате стањем и преузимате податке са API-ја од којег можете добити податке банке. -| ![Screen1](../../../translated_images/sr/screen1.baccbba0f1f93364.png) | ![Screen2](../../../translated_images/sr/screen2.123c82a831a1d14a.png) | +| ![Screen1](../../../translated_images/sr/screen1.baccbba0f1f93364.webp) | ![Screen2](../../../translated_images/sr/screen2.123c82a831a1d14a.webp) | |--------------------------------|--------------------------------| ## Лекције diff --git a/translations/sr/8-code-editor/1-using-a-code-editor/README.md b/translations/sr/8-code-editor/1-using-a-code-editor/README.md index 10167dd9e..21d983f3b 100644 --- a/translations/sr/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/sr/8-code-editor/1-using-a-code-editor/README.md @@ -182,7 +182,7 @@ VSCode.dev доноси ове могућности у ваш прегледач Када се све учита, видећете прелепо чист радни простор дизајниран да вас држи фокусираним на оно што је важно – ваш код! -![Подразумевани интерфејс VSCode.dev](../../../../translated_images/sr/default-vscode-dev.5d06881d65c1b323.png) +![Подразумевани интерфејс VSCode.dev](../../../../translated_images/sr/default-vscode-dev.5d06881d65c1b323.webp) **Ево обиласка околине:** - **Трака активности** (она трака са леве стране): Ваш главни навигациони мени са Explorer 📁, Претрага 🔍, Source Control 🌿, Екстензије 🧩 и Подешавања ⚙️ @@ -229,7 +229,7 @@ flowchart TB 1. Идите на [vscode.dev](https://vscode.dev) ако већ нисте тамо 2. Потражите дугме „Open Remote Repository“ на почетном екрану и кликните на њега - ![Отварање удаљеног репозиторијума](../../../../translated_images/sr/open-remote-repository.bd9c2598b8949e7f.png) + ![Отварање удаљеног репозиторијума](../../../../translated_images/sr/open-remote-repository.bd9c2598b8949e7f.webp) 3. Убаците било који URL GitHub репозиторијума (пробајте ово: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. Притисните Enter и гледајте како магија почиње! @@ -238,7 +238,7 @@ flowchart TB Желите да изгледате као мајстор кодирања? Испробајте ову пречицу: Ctrl+Shift+P (или Cmd+Shift+P на Mac) да отворите Command Palette: -![Command Palette](../../../../translated_images/sr/palette-menu.4946174e07f42622.png) +![Command Palette](../../../../translated_images/sr/palette-menu.4946174e07f42622.webp) **Command Palette је као претраживач за све што можете да урадите:** - Откуцајте „open remote“ и пронаћи ће опцију за отварање репозиторијума @@ -300,7 +300,7 @@ flowchart TB 3. Унесите име фајла са одговарајућом екстензијом (`style.css`, `script.js`, `index.html`) 4. Притисните Enter да бисте креирали фајл -![Креирање новог фајла](../../../../translated_images/sr/create-new-file.2814e609c2af9aeb.png) +![Креирање новог фајла](../../../../translated_images/sr/create-new-file.2814e609c2af9aeb.webp) **Правила именовања:** - Користите описна имена која показују сврху фајла @@ -318,7 +318,7 @@ flowchart TB 2. Почните да куцате и гледајте како вам VSCode.dev помаже бојама, предлозима и уочавањем грешака 3. Сачувајте рад са Ctrl+S (Windows/Linux) или Cmd+S (Mac) – иако се аутоматски чува! -![Уређивање фајла у VSCode.dev](../../../../translated_images/sr/edit-a-file.52c0ee665ef19f08.png) +![Уређивање фајла у VSCode.dev](../../../../translated_images/sr/edit-a-file.52c0ee665ef19f08.webp) **Фантастичне ствари које се дешавају док куцате:** - Ваш код је прелепо обојен тако да се лако чита @@ -339,7 +339,7 @@ flowchart TB 2. Модификовани фајлови се приказују у одељку „Changes“ 3. Боје означавају врсту измена: зелена за додатке, црвена за брисање -![Приказ измена у Source Control](../../../../translated_images/sr/working-tree.c58eec08e6335c79.png) +![Приказ измена у Source Control](../../../../translated_images/sr/working-tree.c58eec08e6335c79.webp) **Чување рада (радни ток комита):** @@ -431,7 +431,7 @@ Marketplace екстензија је изузетно добро организ 2. Прегледајте или претражујте нешто конкретно 3. Кликните на нешто што вам изгледа занимљиво да сазнате више -![Extension marketplace interface](../../../../translated_images/sr/extensions.eca0e0c7f59a10b5.png) +![Extension marketplace interface](../../../../translated_images/sr/extensions.eca0e0c7f59a10b5.webp) **Шта ћете видети тамо:** @@ -484,7 +484,7 @@ Marketplace екстензија је изузетно добро организ 3. Изаберите „Extension Settings“ из падајућег менија 4. Подесите опције док не осетите да вам одговара за рад -![Customizing extension settings](../../../../translated_images/sr/extension-settings.21c752ae4f4cdb78.png) +![Customizing extension settings](../../../../translated_images/sr/extension-settings.21c752ae4f4cdb78.webp) **Уобичајене ствари које можете желети да подесите:** - Како се ваш код форматира (табови уместо размаке, дужина линије, итд.) diff --git a/translations/sr/8-code-editor/1-using-a-code-editor/assignment.md b/translations/sr/8-code-editor/1-using-a-code-editor/assignment.md index f8b0b9e2a..5370c4440 100644 --- a/translations/sr/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/sr/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ CO_OP_TRANSLATOR_METADATA: 4. **Напишите** поруку за commit: "Додат почетни HTML структура" 5. **Кликните** "Commit new file" да бисте сачували промене -![Креирање почетног фајла на GitHub-у](../../../../translated_images/sr/new-file-github.com.c886796d800e8056.png) +![Креирање почетног фајла на GitHub-у](../../../../translated_images/sr/new-file-github.com.c886796d800e8056.webp) **Ево шта ова почетна поставка постиже:** - **Успоставља** правилну HTML5 структуру документа са семантичким елементима @@ -104,7 +104,7 @@ CO_OP_TRANSLATOR_METADATA: ✅ **Индикатор успеха**: Требало би да видите фајлове вашег пројекта у бочној траци Explorer-а и `index.html` доступан за уређивање у главном уређивачком простору. -![Пројекат учитан у VSCode.dev](../../../../translated_images/sr/project-on-vscode.dev.e79815a9a95ee7fe.png) +![Пројекат учитан у VSCode.dev](../../../../translated_images/sr/project-on-vscode.dev.e79815a9a95ee7fe.webp) **Шта ћете видети у интерфејсу:** - **Бочна трака Explorer-а**: **Приказује** фајлове и структуру фасцикли вашег репозиторијума @@ -448,7 +448,7 @@ li:before { **Одмах након инсталације:** Када је CodeSwing инсталиран, видећете живи преглед вашег веб-сајта за резиме који се појављује у уређивачу. Ово вам омогућава да видите тачно како ваш сајт изгледа док правите промене. -![CodeSwing екстензија приказује живи преглед](../../../../translated_images/sr/after-codeswing-extension-pb.0ebddddcf73b5509.png) +![CodeSwing екстензија приказује живи преглед](../../../../translated_images/sr/after-codeswing-extension-pb.0ebddddcf73b5509.webp) **Разумевање побољшаног интерфејса:** - **Подељен приказ**: **Приказује** ваш код са једне стране и живи преглед са друге diff --git a/translations/sr/9-chat-project/README.md b/translations/sr/9-chat-project/README.md index 0db9fbd7b..4fed1cdfa 100644 --- a/translations/sr/9-chat-project/README.md +++ b/translations/sr/9-chat-project/README.md @@ -60,7 +60,7 @@ print(response.choices[0].message.content) Ево како ће завршени пројекат изгледати: -![Chat app interface showing conversation between user and AI assistant](../../../translated_images/sr/screenshot.0a1ee0d123df681b.png) +![Chat app interface showing conversation between user and AI assistant](../../../translated_images/sr/screenshot.0a1ee0d123df681b.webp) ## 🗺️ Ваш Пут Кроз Развој AI Апликација @@ -189,7 +189,7 @@ mindmap ``` **Основни Принцип**: Развој AI апликација комбинује традиционалне вештине веб развоја са интеграцијом AI сервиса, креирајући интелигентне апликације које делују природно и реагују на кориснике. -![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/sr/playground.d2b927122224ff8f.png) +![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/sr/playground.d2b927122224ff8f.webp) **Ево шта чини игралиште тако корисним:** - **Испробајте** различите AI моделе као GPT-4o-mini, Claude и друге (сви бесплатно!) @@ -199,7 +199,7 @@ mindmap Када се мало поиграте, једноставно кликните на таб "Code" и изаберите свој програмски језик да бисте добили код за имплементацију. -![Playground choice showing code generation options for different programming languages](../../../translated_images/sr/playground-choice.1d23ba7d407f4758.png) +![Playground choice showing code generation options for different programming languages](../../../translated_images/sr/playground-choice.1d23ba7d407f4758.webp) ## Подешавање Python Бекенд Интеграције @@ -2350,14 +2350,14 @@ mindmap - **Идите** на [Web Dev For Beginners репозиторијум](https://github.com/microsoft/Web-Dev-For-Beginners) - **Кликните** на "Use this template" у горњем десном углу (проверите да ли сте пријављени на GitHub) -![Create from template interface showing the green "Use this template" button](../../../translated_images/sr/template.67ad477109d29a2b.png) +![Create from template interface showing the green "Use this template" button](../../../translated_images/sr/template.67ad477109d29a2b.webp) **Корак 2: Покретање Codespaces** - **Отворите** свој новокреирани репозиторијум - **Кликните** зелено дугме "Code" и изаберите "Codespaces" - **Изаберите** "Create codespace on main" за покретање развојног окружења -![Create codespace interface with options for launching cloud development environment](../../../translated_images/sr/codespace.bcecbdf5d2747d3d.png) +![Create codespace interface with options for launching cloud development environment](../../../translated_images/sr/codespace.bcecbdf5d2747d3d.webp) **Корак 3: Конфигурација окружења** Када се ваш Codespace учита, имате приступ: diff --git a/translations/sr/README.md b/translations/sr/README.md index 527514163..836e52ed2 100644 --- a/translations/sr/README.md +++ b/translations/sr/README.md @@ -72,13 +72,13 @@ CO_OP_TRANSLATOR_METADATA: Посетите [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) да започнете! -![Позадина](../../translated_images/sr/background.148a8d43afde5730.png) +![Позадина](../../translated_images/sr/background.148a8d43afde5730.webp) - Лекције обухватају све од основа до RAG. - Комуницирајте са историјским ликовима користећи GenAI и нашу придружену апликацију. - Забавна и занимаљива приповест, путоваћете кроз време! -![лик](../../translated_images/sr/character.5c0dd8e067ffd693.png) +![лик](../../translated_images/sr/character.5c0dd8e067ffd693.webp) Свака лекција укључује задатак за завршетак, проверу знања и изазов који вас води у учењу тема као што су: @@ -114,7 +114,7 @@ CO_OP_TRANSLATOR_METADATA: У својој копији овог репозиторијума коју сте направили, кликните на дугме **Code** и изаберите **Open with Codespaces**. Ово ће креирати нови Codespace у којем ћете радити. -![Codespace](../../translated_images/sr/createcodespace.0238bbf4d7a8d955.png) +![Codespace](../../translated_images/sr/createcodespace.0238bbf4d7a8d955.webp) #### Покретање наставног плана локално на вашем рачунару diff --git a/translations/sr/for-teachers.md b/translations/sr/for-teachers.md index b2d6d93f2..2e7748d33 100644 --- a/translations/sr/for-teachers.md +++ b/translations/sr/for-teachers.md @@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA: - Moodle Cloud има ограничену подршку за Common Cartridge. Преферирајте горњу Moodle датотеку, која се такође може учитати у Canvas. - Након увоза, прегледајте модуле, датуме предаје и подешавања квизова како би одговарали вашем распореду термина. -![Moodle](../../translated_images/sr/moodle.94eb93d714a50cb2.png) +![Moodle](../../translated_images/sr/moodle.94eb93d714a50cb2.webp) > Наставни план у Moodle учионици -![Canvas](../../translated_images/sr/canvas.fbd605ff8e5b8aff.png) +![Canvas](../../translated_images/sr/canvas.fbd605ff8e5b8aff.webp) > Наставни план у Canvas-у ### Коришћење репозиторијума директно (без Classroom-а) diff --git a/translations/sv/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/sv/1-getting-started-lessons/1-intro-to-programming-languages/README.md index c13f8ea38..20d4e2642 100644 --- a/translations/sv/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/sv/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ Vi tar det från början: jag förstår helt om programmering känns skrämmande Idag ska vi utforska de otroliga verktyg som gör modern webbprogrammering inte bara möjlig, utan riktigt beroendeframkallande. Jag menar precis samma redigerare, webbläsare och arbetsflöden som utvecklare på Netflix, Spotify och din favorit indieapp-studio använder varje dag. Och här kommer det som får dig att vilja dansa glädjedans: de flesta av dessa professionella, branschstandardverktyg är helt gratis! -![Intro Programming](../../../../translated_images/sv/webdev101-programming.d6e3f98e61ac4bff.png) +![Intro Programming](../../../../translated_images/sv/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/sv/1-getting-started-lessons/2-github-basics/README.md b/translations/sv/1-getting-started-lessons/2-github-basics/README.md index c7d9753f6..b2925ef6e 100644 --- a/translations/sv/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/sv/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ Jag vet att det här kan kännas mycket i början – jag minns att jag stirrade Vi kommer att ta den här resan tillsammans, steg för steg. Ingen stress, inget tryck – bara du, jag och några riktigt coola verktyg som snart kommer att bli dina nya bästa vänner! -![Intro to GitHub](../../../../translated_images/sv/webdev101-github.8846d7971abef6f9.png) +![Intro to GitHub](../../../../translated_images/sv/webdev101-github.8846d7971abef6f9.webp) > Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -606,7 +606,7 @@ Först, låt oss hitta ett repository (eller **repo**) på GitHub som intressera ✅ Ett bra sätt att hitta "nybörjarvänliga" repos är att [söka efter taggen 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Kopiera ett repo lokalt](../../../../translated_images/sv/clone_repo.5085c48d666ead57.png) +![Kopiera ett repo lokalt](../../../../translated_images/sv/clone_repo.5085c48d666ead57.webp) Det finns flera sätt att kopiera kod. Ett sätt är att "klona" innehållet i repot, med HTTPS, SSH eller med GitHub CLI (Command Line Interface). diff --git a/translations/sv/1-getting-started-lessons/3-accessibility/README.md b/translations/sv/1-getting-started-lessons/3-accessibility/README.md index 80c01280a..a19a4fb2a 100644 --- a/translations/sv/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/sv/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Skapa tillgängliga webbsidor -![Allt om tillgänglighet](../../../../translated_images/sv/webdev101-a11y.8ef3025c858d897a.png) +![Allt om tillgänglighet](../../../../translated_images/sv/webdev101-a11y.8ef3025c858d897a.webp) > Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/sv/2-js-basics/1-data-types/README.md b/translations/sv/2-js-basics/1-data-types/README.md index 686a073c6..3100273a4 100644 --- a/translations/sv/2-js-basics/1-data-types/README.md +++ b/translations/sv/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript Basics: Datatyper -![JavaScript Basics - Data types](../../../../translated_images/sv/webdev101-js-datatypes.4cc470179730702c.png) +![JavaScript Basics - Data types](../../../../translated_images/sv/webdev101-js-datatypes.4cc470179730702c.webp) > Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/sv/2-js-basics/2-functions-methods/README.md b/translations/sv/2-js-basics/2-functions-methods/README.md index 25bdf76d7..90a8781cd 100644 --- a/translations/sv/2-js-basics/2-functions-methods/README.md +++ b/translations/sv/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript-grunder: Metoder och Funktioner -![JavaScript Basics - Functions](../../../../translated_images/sv/webdev101-js-functions.be049c4726e94f8b.png) +![JavaScript Basics - Functions](../../../../translated_images/sv/webdev101-js-functions.be049c4726e94f8b.webp) > Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/sv/2-js-basics/3-making-decisions/README.md b/translations/sv/2-js-basics/3-making-decisions/README.md index 41d68a3fd..f8913e0ba 100644 --- a/translations/sv/2-js-basics/3-making-decisions/README.md +++ b/translations/sv/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript-grunder: Att fatta beslut -![JavaScript Basics - Making decisions](../../../../translated_images/sv/webdev101-js-decisions.69e1b20f272dd1f0.png) +![JavaScript Basics - Making decisions](../../../../translated_images/sv/webdev101-js-decisions.69e1b20f272dd1f0.webp) > Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/sv/2-js-basics/4-arrays-loops/README.md b/translations/sv/2-js-basics/4-arrays-loops/README.md index 7e3662312..faa15b303 100644 --- a/translations/sv/2-js-basics/4-arrays-loops/README.md +++ b/translations/sv/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript Basics: Arrays och loopar -![JavaScript Basics - Arrays](../../../../translated_images/sv/webdev101-js-arrays.439d7528b8a29455.png) +![JavaScript Basics - Arrays](../../../../translated_images/sv/webdev101-js-arrays.439d7528b8a29455.webp) > Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/sv/3-terrarium/1-intro-to-html/README.md b/translations/sv/3-terrarium/1-intro-to-html/README.md index c43efaa43..c3c8f748f 100644 --- a/translations/sv/3-terrarium/1-intro-to-html/README.md +++ b/translations/sv/3-terrarium/1-intro-to-html/README.md @@ -25,7 +25,7 @@ journey Förbättra tillgänglighet: 5: Student Bygg terrarium: 5: Student ``` -![Introduktion till HTML](../../../../translated_images/sv/webdev101-html.4389c2067af68e98.png) +![Introduktion till HTML](../../../../translated_images/sv/webdev101-html.4389c2067af68e98.webp) > Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac) HTML, eller HyperText Markup Language, är grunden för varje webbplats du någonsin besökt. Tänk på HTML som skelettet som ger struktur åt webbsidor – det definierar var innehåll ska placeras, hur det organiseras och vad varje del representerar. Medan CSS senare kommer att "klä upp" din HTML med färger och layouter, och JavaScript kommer att ge liv åt den med interaktivitet, tillhandahåller HTML den grundläggande strukturen som gör allt annat möjligt. @@ -86,7 +86,7 @@ Du kommer att skapa en dedikerad mapp för ditt terrariumprojekt och lägga till 4. I Explorerpanelen klicka på ikonen "New File" 5. Namnge din fil `index.html` -![VS Code Explorer som visar skapande av ny fil](../../../../translated_images/sv/vs-code-index.e2986cf919471eb9.png) +![VS Code Explorer som visar skapande av ny fil](../../../../translated_images/sv/vs-code-index.e2986cf919471eb9.webp) **Alternativ 2: Använda terminalkommandon** ```bash diff --git a/translations/sv/3-terrarium/2-intro-to-css/README.md b/translations/sv/3-terrarium/2-intro-to-css/README.md index a32987e18..7b193e23d 100644 --- a/translations/sv/3-terrarium/2-intro-to-css/README.md +++ b/translations/sv/3-terrarium/2-intro-to-css/README.md @@ -29,7 +29,7 @@ journey Responsiv design: 5: Student Glasreflektioner: 5: Student ``` -![Introduktion till CSS](../../../../translated_images/sv/webdev101-css.3f7af5991bf53a20.png) +![Introduktion till CSS](../../../../translated_images/sv/webdev101-css.3f7af5991bf53a20.webp) > Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac) Kommer du ihåg hur ditt HTML-terrarium såg ganska enkelt ut? CSS är där vi förvandlar den där enkla strukturen till något visuellt tilltalande. @@ -202,7 +202,7 @@ body { Öppna webbläsarens utvecklarverktyg (F12), navigera till Elements-fliken och inspektera ditt `

`-element. Du kommer se att det ärver fontfamilj från body: -![inherited font](../../../../translated_images/sv/1.cc07a5cbe114ad1d.png) +![inherited font](../../../../translated_images/sv/1.cc07a5cbe114ad1d.webp) ✅ **Experimentera**: Testa att sätta andra arvbara egenskaper på `` som `color`, `line-height` eller `text-align`. Vad händer med din rubrik och andra element? @@ -594,7 +594,7 @@ Redo att förstärka ditt terrarium med realistiska glasreflektioner? Denna tekn Du skapar subtila högdagrar som simulerar hur ljus reflekteras från glasytor. Detta liknar hur renässansmålare som Jan van Eyck använde ljus och reflektion för att få målat glas att se tredimensionellt ut. Så här ser målet ut: -![finished terrarium](../../../../translated_images/sv/terrarium-final.2f07047ffc597d0a.png) +![finished terrarium](../../../../translated_images/sv/terrarium-final.2f07047ffc597d0a.webp) **Din uppgift:** - **Skapa** subtila vita eller ljusa ovala former för glasreflektioner diff --git a/translations/sv/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/sv/3-terrarium/3-intro-to-DOM-and-closures/README.md index 95a8a594d..b649b5f34 100644 --- a/translations/sv/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/sv/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -25,7 +25,7 @@ journey Testa funktionalitet: 5: Student Slutför terrarium: 5: Student ``` -![DOM och en closure](../../../../translated_images/sv/webdev101-js.10280393044d7eaa.png) +![DOM och en closure](../../../../translated_images/sv/webdev101-js.10280393044d7eaa.webp) > Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac) Välkommen till en av de mest engagerande aspekterna av webbutveckling – att göra saker interaktiva! Document Object Model (DOM) är som en bro mellan din HTML och JavaScript, och idag ska vi använda den för att ge liv åt ditt terrarium. När Tim Berners-Lee skapade den första webbläsaren, såg han framför sig en web där dokument kunde vara dynamiska och interaktiva – DOM gör denna vision möjlig. @@ -102,7 +102,7 @@ flowchart TD style P fill:#ffebee style Q fill:#ffebee ``` -![DOM-trädrepresentation](../../../../translated_images/sv/dom-tree.7daf0e763cbbba92.png) +![DOM-trädrepresentation](../../../../translated_images/sv/dom-tree.7daf0e763cbbba92.webp) > En representation av DOM och HTML-markupen som refererar till den. Från [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -146,7 +146,7 @@ flowchart LR ``` > 💡 **Förstå closures**: Closures är ett stort ämne inom JavaScript, och många utvecklare använder dem i åratal innan de fullt förstår alla teoretiska delar. Idag fokuserar vi på praktisk tillämpning – du kommer naturligt att se closures uppstå när vi bygger våra interaktiva funktioner. Förståelsen växer när du ser hur de löser verkliga problem. -![DOM-trädrepresentation](../../../../translated_images/sv/dom-tree.7daf0e763cbbba92.png) +![DOM-trädrepresentation](../../../../translated_images/sv/dom-tree.7daf0e763cbbba92.webp) > En representation av DOM och HTML-markupen som refererar till den. Från [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -591,7 +591,7 @@ Testa nu ditt interaktiva terrarium! Öppna din `index.html`-fil i en webbläsar - **Stöd för alla enheter**: Fungerar på desktop och mobil - **Prestandamedvetenhet**: Inga minnesläckor eller onödiga beräkningar -![finished terrarium](../../../../translated_images/sv/terrarium-final.0920f16e87c13a84.png) +![finished terrarium](../../../../translated_images/sv/terrarium-final.0920f16e87c13a84.webp) --- diff --git a/translations/sv/3-terrarium/solution/README.md b/translations/sv/3-terrarium/solution/README.md index 58ce35094..a64a29106 100644 --- a/translations/sv/3-terrarium/solution/README.md +++ b/translations/sv/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: En liten drag-och-släpp-kodmeditation. Med lite HTML, JS och CSS kan du bygga ett webbgränssnitt, styla det och lägga till interaktion. -![mitt terrarium](../../../../translated_images/sv/screenshot_gray.0c796099a1f9f25e.png) +![mitt terrarium](../../../../translated_images/sv/screenshot_gray.0c796099a1f9f25e.webp) ## Krediter diff --git a/translations/sv/5-browser-extension/1-about-browsers/README.md b/translations/sv/5-browser-extension/1-about-browsers/README.md index c0c8f7e12..019ea0a6f 100644 --- a/translations/sv/5-browser-extension/1-about-browsers/README.md +++ b/translations/sv/5-browser-extension/1-about-browsers/README.md @@ -25,7 +25,7 @@ journey Felsök problem: 4: Student Förbättra upplevelsen: 5: Student ``` -![Browser sketchnote](../../../../translated_images/sv/browser.60317c9be8b7f84a.jpg) +![Browser sketchnote](../../../../translated_images/sv/browser.60317c9be8b7f84a.webp) > Sketchnote av [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## Förföreläsningsquiz @@ -77,7 +77,7 @@ Denna process speglar hur den första webbläsaren, WorldWideWeb, designades av ✅ **Lite historia**: Den första webbläsaren kallades "WorldWideWeb" och skapades av Sir Timothy Berners-Lee 1990. -![early browsers](../../../../translated_images/sv/earlybrowsers.d984b711cdf3a42d.jpg) +![early browsers](../../../../translated_images/sv/earlybrowsers.d984b711cdf3a42d.webp) > Några tidiga webbläsare, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### Hur webbläsare bearbetar webbinnehåll @@ -194,7 +194,7 @@ quadrantChart Att förstå installationsprocessen för tillägg hjälper dig att förutse användarupplevelsen när personer installerar ditt tillägg. Installationsprocessen är standardiserad över moderna webbläsare med små skillnader i gränssnittsdesign. -![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/sv/install-on-edge.d68781acaf0b3d3d.png) +![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/sv/install-on-edge.d68781acaf0b3d3d.webp) > **Viktigt**: Se till att aktivera utvecklarläge och tillåt tillägg från andra butiker när du testar dina egna tillägg. @@ -308,10 +308,10 @@ Detta följer principen om progressiv avslöjande som använts i gränssnittsdes ### Översikt av tilläggsvyer **Inställningsvy** – Konfiguration för första gången: -![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/sv/1.b6da8c1394b07491.png) +![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/sv/1.b6da8c1394b07491.webp) **Resultatvy** – Visning av koldioxidavtrycksdata: -![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/sv/2.1dae52ff08042246.png) +![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/sv/2.1dae52ff08042246.webp) ### Bygga konfigurationsformuläret diff --git a/translations/sv/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/sv/5-browser-extension/2-forms-browsers-local-storage/README.md index f99179a44..fa590d0a9 100644 --- a/translations/sv/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/sv/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -263,7 +263,7 @@ stateDiagram-v2 Reset --> ClearStorage: Ta bort sparad data ClearStorage --> FirstTime: Tillbaka till installation ``` -![Local storage pane](../../../../translated_images/sv/localstorage.472f8147b6a3f8d1.png) +![Local storage pane](../../../../translated_images/sv/localstorage.472f8147b6a3f8d1.webp) > ⚠️ **Säkerhetsaspekt:** I produktionsapplikationer innebär lagring av API-nycklar i LocalStorage säkerhetsrisker eftersom JavaScript kan komma åt dessa data. För lärande ändamål fungerar det bra, men riktiga applikationer bör använda säker serverlagring för känsliga uppgifter. diff --git a/translations/sv/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/sv/5-browser-extension/3-background-tasks-and-performance/README.md index 1cfa31dd2..e6e5750d3 100644 --- a/translations/sv/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/sv/5-browser-extension/3-background-tasks-and-performance/README.md @@ -123,7 +123,7 @@ För att öppna utvecklarverktygen i Edge klickar du på de tre prickarna uppe t Låt oss prova. Öppna en webbplats (Microsoft.com fungerar bra för detta) och klicka på 'Spela in'-knappen. Uppdatera sidan och se hur profileraren fångar allt som händer. När du stoppar inspelningen ser du en detaljerad sammanställning av hur webbläsaren 'skriver skript', 'renderar' och 'målar' sidan. Det påminner om hur mission control övervakar varje system under en raketuppskjutning – du får realtidsdata på exakt vad som händer och när. -![Edge profilerer](../../../../translated_images/sv/profiler.5a4a62479c5df01c.png) +![Edge profilerer](../../../../translated_images/sv/profiler.5a4a62479c5df01c.webp) ✅ [Microsoft Dokumentationen](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) har massor mer detaljer om du vill fördjupa dig @@ -133,11 +133,11 @@ Välj delar av profiler-tidslinjen för att zooma in på händelser som sker med Få en ögonblicksbild av din sidas prestanda genom att välja en del av profiler-tidslinjen och titta i sammanfattningspanelen: -![Edge profiler snapshot](../../../../translated_images/sv/snapshot.97750180ebcad737.png) +![Edge profiler snapshot](../../../../translated_images/sv/snapshot.97750180ebcad737.webp) Kolla i Event Log-panelen för att se om något event tog längre än 15 ms: -![Edge event log](../../../../translated_images/sv/log.804026979f3707e0.png) +![Edge event log](../../../../translated_images/sv/log.804026979f3707e0.webp) ✅ Lär känna din profiler! Öppna utvecklarverktygen på denna sida och se om det finns några flaskhalsar. Vad är den långsammaste tillgången att ladda? Den snabbaste? diff --git a/translations/sv/5-browser-extension/README.md b/translations/sv/5-browser-extension/README.md index 917431eaf..67e032ea6 100644 --- a/translations/sv/5-browser-extension/README.md +++ b/translations/sv/5-browser-extension/README.md @@ -23,7 +23,7 @@ Detta tillägg kan användas ad hoc av en användare när en API-nyckel och regi ### Krediter -![ett grönt webbläsartillägg](../../../translated_images/sv/extension-screenshot.0e7f5bfa110e92e3.png) +![ett grönt webbläsartillägg](../../../translated_images/sv/extension-screenshot.0e7f5bfa110e92e3.webp) ## Krediter diff --git a/translations/sv/5-browser-extension/solution/README.md b/translations/sv/5-browser-extension/solution/README.md index f014e6fc3..9a4a89402 100644 --- a/translations/sv/5-browser-extension/solution/README.md +++ b/translations/sv/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Använd tmrow:s C02 Signal API för att spåra elförbrukning och bygg en webbläsartillägg så att du kan få en påminnelse direkt i din webbläsare om hur tung elförbrukningen är i din region. Genom att använda detta tillägg spontant kan du fatta beslut om dina aktiviteter baserat på denna information. -![extension screenshot](../../../../translated_images/sv/extension-screenshot.0e7f5bfa110e92e3.png) +![extension screenshot](../../../../translated_images/sv/extension-screenshot.0e7f5bfa110e92e3.webp) ## Kom igång @@ -31,7 +31,7 @@ npm run build För att installera på Edge, använd menyn med 'tre punkter' i det övre högra hörnet av webbläsaren för att hitta panelen för Tillägg. Därifrån väljer du 'Ladda upp packat' för att ladda ett nytt tillägg. Öppna mappen 'dist' när du blir ombedd, och tillägget kommer att laddas. För att använda det behöver du en API-nyckel för CO2 Signal:s API ([skaffa en här via e-post](https://www.co2signal.com/) - ange din e-post i rutan på denna sida) och koden för din region ([hitta den här](http://api.electricitymap.org/v3/zones)) som motsvarar [Electricity Map](https://www.electricitymap.org/map) (i Boston, till exempel, använder jag 'US-NEISO'). -![installing](../../../../translated_images/sv/install-on-edge.78634f02842c4828.png) +![installing](../../../../translated_images/sv/install-on-edge.78634f02842c4828.webp) När API-nyckeln och regionen har angetts i tilläggets gränssnitt, bör den färgade pricken i webbläsartilläggsfältet ändras för att återspegla din regions energiförbrukning och ge dig en indikation på vilka energikrävande aktiviteter som är lämpliga att utföra. Konceptet bakom detta 'prick'-system fick jag från [Energy Lollipop-tillägget](https://energylollipop.com/) för utsläpp i Kalifornien. diff --git a/translations/sv/5-browser-extension/solution/translation/README.fr.md b/translations/sv/5-browser-extension/solution/translation/README.fr.md index 74a35d48e..c7d5f9248 100644 --- a/translations/sv/5-browser-extension/solution/translation/README.fr.md +++ b/translations/sv/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Med hjälp av tmrows API C02 Signal för att spåra elförbrukning, skapa ett webbläsartillägg så att du kan få en påminnelse direkt i din webbläsare om elförbrukningen i ditt område. Att använda detta tillägg kan hjälpa dig att fatta beslut om dina aktiviteter baserat på denna information. -![tilläggsskärmdump](../../../../../translated_images/sv/extension-screenshot.0e7f5bfa110e92e3.png) +![tilläggsskärmdump](../../../../../translated_images/sv/extension-screenshot.0e7f5bfa110e92e3.webp) ## Kom igång @@ -31,7 +31,7 @@ npm run build För att installera på Edge, använd menyn med 'tre punkter' i det övre högra hörnet av webbläsaren för att hitta panelen Tillägg. Därifrån väljer du 'Ladda upp okomprimerat tillägg' för att lägga till ett nytt tillägg. Öppna mappen 'dist' när du blir ombedd, och tillägget kommer att laddas. För att använda det behöver du en API-nyckel för CO2 Signal API ([skaffa en via e-post här](https://www.co2signal.com/) - ange din e-postadress i rutan på den här sidan) och [koden för din region](http://api.electricitymap.org/v3/zones) som motsvarar [Electricity Map](https://www.electricitymap.org/map) (i Boston, till exempel, använder jag 'US-NEISO'). -![installation](../../../../../translated_images/sv/install-on-edge.78634f02842c4828.png) +![installation](../../../../../translated_images/sv/install-on-edge.78634f02842c4828.webp) När API-nyckeln och regionen har angetts i tilläggets gränssnitt, bör den färgade punkten i webbläsarens tilläggsfält ändras för att återspegla energiförbrukningen i ditt område och ge dig en indikator på vilka energikrävande aktiviteter som kan vara lämpliga att utföra. Konceptet bakom detta 'punkt'-system inspirerades av [Energy Lollipop-tillägget](https://energylollipop.com/) för utsläpp i Kalifornien. diff --git a/translations/sv/5-browser-extension/solution/translation/README.hi.md b/translations/sv/5-browser-extension/solution/translation/README.hi.md index b1bbf9124..c4ae59c6d 100644 --- a/translations/sv/5-browser-extension/solution/translation/README.hi.md +++ b/translations/sv/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Användning av tmrow:s C02 Signal API för att spåra elförbrukning, bygga en webbläsartillägg som påminner dig om hur tungt elförbrukningen är i ditt område direkt i din webbläsare. Genom att använda detta tillägg kan du fatta beslut om dina aktiviteter baserat på denna information. -![Skärmdump av tillägget](../../../../../translated_images/sv/extension-screenshot.0e7f5bfa110e92e3.png) +![Skärmdump av tillägget](../../../../../translated_images/sv/extension-screenshot.0e7f5bfa110e92e3.webp) ## Kom igång @@ -31,7 +31,7 @@ npm run build För att installera på Edge, använd "tre prickar"-menyn i det övre högra hörnet av webbläsaren för att hitta tilläggspanelen. Därifrån, välj "Ladda uppackat" för att ladda ett nytt tillägg. Öppna mappen "dist" vid prompten, och tillägget kommer att laddas. För att använda det behöver du en API-nyckel för CO2 Signal ([få den via e-post här](https://www.co2signal.com/) - ange din e-post i rutan på den sidan) och [koden för ditt område](http://api.electricitymap.org/v3/zones) från [Electricity Map](https://www.electricitymap.org/map) (till exempel, i Boston använder jag "US-NEISO"). -![installera](../../../../../translated_images/sv/install-on-edge.78634f02842c4828.png) +![installera](../../../../../translated_images/sv/install-on-edge.78634f02842c4828.webp) När API-nyckeln och området har matats in i tilläggets gränssnitt, bör den färgade pricken i webbläsartilläggsfältet ändras för att återspegla energiförbrukningen i ditt område och ge dig en indikator på vilka energiintensiva aktiviteter som är lämpliga att utföra. Konceptet bakom detta "prick"-system inspirerades av [Energy Lollipop Extension](https://energylollipop.com/) för Kaliforniens utsläpp. diff --git a/translations/sv/5-browser-extension/solution/translation/README.it.md b/translations/sv/5-browser-extension/solution/translation/README.it.md index 1d1b0cb96..90e7e5441 100644 --- a/translations/sv/5-browser-extension/solution/translation/README.it.md +++ b/translations/sv/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Signal C02-API från tmrow kommer att användas för att övervaka elförbrukningen och skapa ett webbläsartillägg så att du kan få en påminnelse direkt i din webbläsare om hur tung elförbrukningen är i din region. Användningen av detta skräddarsydda tillägg hjälper dig att bedöma dina aktiviteter baserat på denna information. -![skärmdump av tillägget](../../../../../translated_images/sv/extension-screenshot.0e7f5bfa110e92e3.png) +![skärmdump av tillägget](../../../../../translated_images/sv/extension-screenshot.0e7f5bfa110e92e3.webp) ## Kom igång @@ -31,7 +31,7 @@ npm run build För att installera på Edge, använd menyn med "tre punkter" i det övre högra hörnet av webbläsaren för att hitta panelen Tillägg. Om det inte redan är aktiverat, slå på Utvecklarläge (längst ner till vänster). Välj "Ladda upp packat" för att ladda ett nytt tillägg. Öppna mappen "dist" vid prompten, och tillägget kommer att laddas. För att använda det behöver du en API-nyckel för CO2 Signal-API:t (du kan [få en via e-post här](https://www.co2signal.com/) - ange din e-postadress i rutan på den här sidan) och [koden för din region](http://api.electricitymap.org/v3/zones) som motsvarar [el-kartan](https://www.electricitymap.org/map) (i Boston, till exempel, "US-NEISO"). -![installation](../../../../../translated_images/sv/install-on-edge.78634f02842c4828.png) +![installation](../../../../../translated_images/sv/install-on-edge.78634f02842c4828.webp) När API-nyckeln och regionen har angetts i tilläggets gränssnitt, bör den färgade punkten i webbläsartilläggsfältet ändras för att återspegla regionens energiförbrukning och ge en indikation på vilka aktiviteter med hög energiförbrukning som skulle vara lämpliga att utföra. Konceptet bakom detta "punkt"-system har inspirerats av [Energy Lollipop-tillägget](https://energylollipop.com/) för utsläpp i Kalifornien. diff --git a/translations/sv/5-browser-extension/solution/translation/README.ja.md b/translations/sv/5-browser-extension/solution/translation/README.ja.md index 04b7fdf36..c0cd06aef 100644 --- a/translations/sv/5-browser-extension/solution/translation/README.ja.md +++ b/translations/sv/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Bygg ett webbläsartillägg som använder tmrow:s CO2 Signal API för att spåra din elförbrukning och visa hur mycket energi som används i ditt område som en påminnelse direkt i webbläsaren. Genom att använda detta tillägg kan du fatta beslut om dina aktiviteter baserat på denna information. -![extension screenshot](../../../../../translated_images/sv/extension-screenshot.0e7f5bfa110e92e3.png) +![extension screenshot](../../../../../translated_images/sv/extension-screenshot.0e7f5bfa110e92e3.webp) ## Kom igång @@ -31,7 +31,7 @@ npm run build För att installera det i Edge, hitta "Tillägg"-panelen via "tre prickar"-menyn längst upp till höger i webbläsaren. Välj "Load Unpacked" och ladda det nya tillägget. När du blir ombedd, öppna "dist"-mappen så laddas tillägget. För att använda det behöver du en API-nyckel för CO2 Signal API ([få en här via e-post](https://www.co2signal.com/) - ange din e-post i rutan på sidan) och en [kod för din region](http://api.electricitymap.org/v3/zones) som stöds av [Electricity Map](https://www.electricitymap.org/map) (för Boston, till exempel, använd 'US-NEISO'). -![installing](../../../../../translated_images/sv/install-on-edge.78634f02842c4828.png) +![installing](../../../../../translated_images/sv/install-on-edge.78634f02842c4828.webp) När du har angett API-nyckeln och regionen i tilläggets gränssnitt, kommer en färgad prick att visas i webbläsarens tilläggsfält. Denna prick ändrar färg baserat på energiförbrukningen i ditt område och hjälper dig att avgöra vilka aktiviteter som är lämpliga att utföra beroende på energibehovet. Konceptet med detta "prick"-system inspirerades av [Energy Lollipop extension](https://energylollipop.com/) för utsläpp i Kalifornien. diff --git a/translations/sv/5-browser-extension/solution/translation/README.ms.md b/translations/sv/5-browser-extension/solution/translation/README.ms.md index ca301f749..51c7dd3a6 100644 --- a/translations/sv/5-browser-extension/solution/translation/README.ms.md +++ b/translations/sv/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Använd API:n för CO2-signal från tmrow för att övervaka elförbrukning och skapa ett webbläsartillägg som varnar dig om hur tung elförbrukningen är i din region. Genom att använda detta tillägg kan du fatta mer informerade beslut om dina aktiviteter baserat på denna information. -![skärmdump av webbläsartillägg](../../../../../translated_images/sv/extension-screenshot.0e7f5bfa110e92e3.png) +![skärmdump av webbläsartillägg](../../../../../translated_images/sv/extension-screenshot.0e7f5bfa110e92e3.webp) ## Kom igång här @@ -31,7 +31,7 @@ npm run build För att installera i Edge, använd menyn med 'tre punkter' i det övre högra hörnet av webbläsaren för att hitta panelen Tillägg. Därifrån väljer du 'Ladda uppackat' för att ladda det nya tillägget. Öppna mappen 'dist' när du blir ombedd, och tillägget kommer att laddas. För att använda det behöver du en API-nyckel för CO2-signalens API ([skaffa en här via e-post](https://www.co2signal.com/) - ange din e-post i rutan på den här sidan) och [koden för din region](http://api.electricitymap.org/v3/zones) som motsvarar [Electricity Map](https://www.electricitymap.org/map) (i Boston, till exempel, använder jag 'US-NEISO'). -![laddar ner](../../../../../translated_images/sv/install-on-edge.78634f02842c4828.png) +![laddar ner](../../../../../translated_images/sv/install-on-edge.78634f02842c4828.webp) När API-nyckeln och regionen har angetts i tilläggets gränssnitt, kommer en färgad punkt i webbläsarens tilläggsfält att ändras för att återspegla din regions energiförbrukning och ge dig vägledning om vilka energikrävande aktiviteter som är lämpliga att utföra. Konceptet bakom detta 'punkt'-system inspirerades av [Energy Lollipop-webbläsartillägget](https://energylollipop.com/) för Kaliforniens utsläpp. diff --git a/translations/sv/5-browser-extension/start/README.md b/translations/sv/5-browser-extension/start/README.md index 6bb3dac68..487d3d43b 100644 --- a/translations/sv/5-browser-extension/start/README.md +++ b/translations/sv/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Använd tmrow:s C02 Signal API för att spåra elförbrukning och bygg en webbläsartillägg så att du kan få en påminnelse direkt i din webbläsare om hur tung elförbrukningen är i din region. Att använda detta tillägg ad hoc hjälper dig att fatta beslut om dina aktiviteter baserat på denna information. -![extension screenshot](../../../../translated_images/sv/extension-screenshot.0e7f5bfa110e92e3.png) +![extension screenshot](../../../../translated_images/sv/extension-screenshot.0e7f5bfa110e92e3.webp) ## Kom igång @@ -31,7 +31,7 @@ npm run build För att installera på Edge, använd menyn med de 'tre prickarna' i det övre högra hörnet av webbläsaren för att hitta panelen för Tillägg. Därifrån väljer du 'Ladda inpackat' för att ladda ett nytt tillägg. Öppna mappen 'dist' när du blir ombedd, så laddas tillägget. För att använda det behöver du en API-nyckel för CO2 Signal:s API ([skaffa en här via e-post](https://www.co2signal.com/) - ange din e-postadress i rutan på denna sida) och koden för din region ([hitta den här](http://api.electricitymap.org/v3/zones)) som motsvarar [Electricity Map](https://www.electricitymap.org/map) (i Boston, till exempel, använder jag 'US-NEISO'). -![installing](../../../../translated_images/sv/install-on-edge.78634f02842c4828.png) +![installing](../../../../translated_images/sv/install-on-edge.78634f02842c4828.webp) När API-nyckeln och regionen har matats in i tilläggets gränssnitt, bör den färgade pricken i webbläsartilläggsfältet ändras för att återspegla din regions energiförbrukning och ge dig en indikation på vilka energikrävande aktiviteter som är lämpliga att utföra. Konceptet bakom detta 'prick'-system fick jag från [Energy Lollipop-tillägget](https://energylollipop.com/) för utsläpp i Kalifornien. diff --git a/translations/sv/6-space-game/2-drawing-to-canvas/README.md b/translations/sv/6-space-game/2-drawing-to-canvas/README.md index 6fe04e012..e2303f4f0 100644 --- a/translations/sv/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/sv/6-space-game/2-drawing-to-canvas/README.md @@ -105,7 +105,7 @@ quadrantChart Power-up: [0.7, 0.6] UI Elements: [0.9, 0.1] ``` -![the canvas's grid](../../../../translated_images/sv/canvas_grid.5f209da785ded492.png) +![the canvas's grid](../../../../translated_images/sv/canvas_grid.5f209da785ded492.webp) > Bild från [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) För att rita på canvas-elementet följer du samma trestegsprocess som utgör grunden för all canvas-grafik. När du väl har gjort detta några gånger blir det andra natur: @@ -323,11 +323,11 @@ Du ska bygga en webbsida med ett Canvas-element. Det ska visa en svart skärm `1 - Hjälteskepp - ![Hero ship](../../../../translated_images/sv/player.dd24c1afa8c71e9b.png) + ![Hero ship](../../../../translated_images/sv/player.dd24c1afa8c71e9b.webp) - 5*5 monster - ![Monster ship](../../../../translated_images/sv/enemyShip.5df2a822c16650c2.png) + ![Monster ship](../../../../translated_images/sv/enemyShip.5df2a822c16650c2.webp) ### Rekommenderade steg för att börja utvecklingen @@ -463,7 +463,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { Det färdiga resultatet bör se ut så här: -![Svart skärm med en hjälte och 5*5 monster](../../../../translated_images/sv/partI-solution.36c53b48c9ffae2a.png) +![Svart skärm med en hjälte och 5*5 monster](../../../../translated_images/sv/partI-solution.36c53b48c9ffae2a.webp) ## Lösning diff --git a/translations/sv/6-space-game/5-keeping-score/README.md b/translations/sv/6-space-game/5-keeping-score/README.md index 0b2554874..96463ccd0 100644 --- a/translations/sv/6-space-game/5-keeping-score/README.md +++ b/translations/sv/6-space-game/5-keeping-score/README.md @@ -155,7 +155,7 @@ sequenceDiagram end ``` - **Poängsystem**: Varje förstört fiendeskepp ger 100 poäng (runda siffror är lättare för spelare att räkna mental). Poängen visas i nedre vänstra hörnet. -- **Livräknare**: Din hjälte börjar med tre liv – en standard satt av tidiga arkadspel för att balansera utmaning och spelbarhet. Varje kollision med en fiende kostar ett liv. Vi visar återstående liv nere till höger med skeppsikoner ![life image](../../../../translated_images/sv/life.6fb9f50d53ee0413.png). +- **Livräknare**: Din hjälte börjar med tre liv – en standard satt av tidiga arkadspel för att balansera utmaning och spelbarhet. Varje kollision med en fiende kostar ett liv. Vi visar återstående liv nere till höger med skeppsikoner ![life image](../../../../translated_images/sv/life.6fb9f50d53ee0413.webp). ## Nu kör vi igång! diff --git a/translations/sv/7-bank-project/1-template-route/README.md b/translations/sv/7-bank-project/1-template-route/README.md index 3aea7c8cd..b5b98beeb 100644 --- a/translations/sv/7-bank-project/1-template-route/README.md +++ b/translations/sv/7-bank-project/1-template-route/README.md @@ -644,7 +644,7 @@ sequenceDiagram Användningen av `history.pushState` skapar nya poster i webbläsarens navigationshistorik. Du kan kontrollera detta genom att hålla inne *tillbaka-knappen* i din webbläsare, den bör visa något liknande: -![Screenshot av historik](../../../../translated_images/sv/history.7fdabbafa521e064.png) +![Screenshot av historik](../../../../translated_images/sv/history.7fdabbafa521e064.webp) Om du klickar på tillbaka-knappen några gånger kommer du se att den aktuella URL:en ändras och historiken uppdateras, men samma template fortsätter att visas. diff --git a/translations/sv/7-bank-project/2-forms/README.md b/translations/sv/7-bank-project/2-forms/README.md index b6b17c1fa..d8fe133d9 100644 --- a/translations/sv/7-bank-project/2-forms/README.md +++ b/translations/sv/7-bank-project/2-forms/README.md @@ -292,7 +292,7 @@ Först, låt oss se vad som händer med grundläggande formulärinlämning: 2. Observera ändringarna i webbläsarens adressfält 3. Lägg märke till hur sidan laddas om och data visas i URL:en -![Skärmdump på webbläsarens URL-ändring efter klick på Registrera-knappen](../../../../translated_images/sv/click-register.e89a30bf0d4bc9ca.png) +![Skärmdump på webbläsarens URL-ändring efter klick på Registrera-knappen](../../../../translated_images/sv/click-register.e89a30bf0d4bc9ca.webp) ### Jämförelse av HTTP-metoder @@ -346,7 +346,7 @@ Låt oss konfigurera ditt registreringsformulär för att kommunicera korrekt me 2. **Klicka** på "Skapa Konto"-knappen 3. **Observera** serverns svar i din webbläsare -![Ett webbläsarfönster med adressen localhost:5000/api/accounts, som visar en JSON-sträng med användardata](../../../../translated_images/sv/form-post.61de4ca1b964d91a.png) +![Ett webbläsarfönster med adressen localhost:5000/api/accounts, som visar en JSON-sträng med användardata](../../../../translated_images/sv/form-post.61de4ca1b964d91a.webp) **Det du bör se:** - **Webbläsaren omdirigerar** till API-slutpunkts-URL:en @@ -609,7 +609,7 @@ async function register() { 3. **Klicka** på "Create Account" 4. **Observera** konsolmeddelanden och användarfeedback -![Screenshot showing log message in the browser console](../../../../translated_images/sv/browser-console.efaf0b51aaaf6778.png) +![Screenshot showing log message in the browser console](../../../../translated_images/sv/browser-console.efaf0b51aaaf6778.webp) **Vad du bör se:** - **Laddningstillstånd** visas på skicka-knappen @@ -783,7 +783,7 @@ Låt oss förfina ditt registreringsformulär med robust validering som erbjuder 3. **Försök** använda specialtecken i användarnamnsfältet 4. **Fyll i** ett negativt saldo -![Screenshot showing the validation error when trying to submit the form](../../../../translated_images/sv/validation-error.8bd23e98d416c22f.png) +![Screenshot showing the validation error when trying to submit the form](../../../../translated_images/sv/validation-error.8bd23e98d416c22f.webp) **Vad du kommer att se:** - **Webbläsaren visar** inbyggda valideringsmeddelanden @@ -943,7 +943,7 @@ Visa ett felmeddelande i HTML om användaren redan finns. Här är ett exempel på hur den slutliga inloggningssidan kan se ut efter lite styling: -![Screenshot of the login page after adding CSS styles](../../../../translated_images/sv/result.96ef01f607bf856a.png) +![Screenshot of the login page after adding CSS styles](../../../../translated_images/sv/result.96ef01f607bf856a.webp) ## Quiz efter föreläsningen diff --git a/translations/sv/7-bank-project/3-data/README.md b/translations/sv/7-bank-project/3-data/README.md index 6888c1e9c..02a9309da 100644 --- a/translations/sv/7-bank-project/3-data/README.md +++ b/translations/sv/7-bank-project/3-data/README.md @@ -156,7 +156,7 @@ sequenceDiagram Server->>Browser: Returnerar komplett HTML-sida Browser->>User: Visar ny sida (blinkning/uppdatering) ``` -![Uppdateringsflöde i en multipage-applikation](../../../../translated_images/sv/mpa.7f7375a1a2d4aa77.png) +![Uppdateringsflöde i en multipage-applikation](../../../../translated_images/sv/mpa.7f7375a1a2d4aa77.webp) **Varför detta tillvägagångssätt kändes tungrott:** - Varje klick innebar att hela sidan byggdes om från scratch @@ -182,7 +182,7 @@ sequenceDiagram JavaScript->>Browser: Uppdaterar specifika sidkomponenter Browser->>User: Visar uppdaterat innehåll (ingen omladdning) ``` -![Uppdateringsflöde i en enkel-sidig applikation](../../../../translated_images/sv/spa.268ec73b41f992c2.png) +![Uppdateringsflöde i en enkel-sidig applikation](../../../../translated_images/sv/spa.268ec73b41f992c2.webp) **Varför SPA känns så mycket bättre:** - Endast de delar som faktiskt ändrats uppdateras (smart, eller hur?) @@ -516,7 +516,7 @@ if (data.error) { Nu när du testar med ett ogiltigt konto, ser du ett hjälpsamt felmeddelande direkt på sidan! -![Screenshot showing the error message displayed during login](../../../../translated_images/sv/login-error.416fe019b36a6327.png) +![Screenshot showing the error message displayed during login](../../../../translated_images/sv/login-error.416fe019b36a6327.webp) #### Steg 4: Inkluderande med tillgänglighet @@ -950,7 +950,7 @@ Redo att ta din bankapp till nästa nivå? Låt oss göra den till något du fak Så här kan en snygg kontrollpanel se ut: -![Screenshot of an example result of the dashboard after styling](../../../../translated_images/sv/screen2.123c82a831a1d14a.png) +![Screenshot of an example result of the dashboard after styling](../../../../translated_images/sv/screen2.123c82a831a1d14a.webp) Känn inte att du måste efterlikna detta exakt – använd det som inspiration och gör det till ditt eget! diff --git a/translations/sv/7-bank-project/4-state-management/README.md b/translations/sv/7-bank-project/4-state-management/README.md index 7f4e0653e..baba54d03 100644 --- a/translations/sv/7-bank-project/4-state-management/README.md +++ b/translations/sv/7-bank-project/4-state-management/README.md @@ -187,7 +187,7 @@ Som Titanics delade design som verkade robust förrän flera fack samtidigt öve Istället för att jaga våra egna svansar ska vi skapa ett **centraliserat tillståndshanteringssystem**. Tänk på det som att ha en riktigt organiserad person som har hand om allt det viktiga: -![Schema som visar dataflöden mellan HTML, användaråtgärder och tillstånd](../../../../translated_images/sv/data-flow.fa2354e0908fecc8.png) +![Schema som visar dataflöden mellan HTML, användaråtgärder och tillstånd](../../../../translated_images/sv/data-flow.fa2354e0908fecc8.webp) ```mermaid flowchart TD @@ -798,7 +798,7 @@ Denna utmaning hjälper dig att tänka som en professionell utvecklare som beakt Här är ett exempelresultat efter att uppgiften är genomförd: -![Skärmdump som visar ett exempel på dialogen "Lägg till transaktion"](../../../../translated_images/sv/dialog.93bba104afeb79f1.png) +![Skärmdump som visar ett exempel på dialogen "Lägg till transaktion"](../../../../translated_images/sv/dialog.93bba104afeb79f1.webp) --- diff --git a/translations/sv/7-bank-project/4-state-management/assignment.md b/translations/sv/7-bank-project/4-state-management/assignment.md index 00306b352..d03495228 100644 --- a/translations/sv/7-bank-project/4-state-management/assignment.md +++ b/translations/sv/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ Se [serverns API-dokumentation](../api/README.md) för: **Förväntat resultat:** Efter att ha slutfört denna uppgift ska din bankapp ha en fullt fungerande funktion för "Lägg till transaktion" som ser professionell ut och fungerar smidigt: -![Skärmdump som visar ett exempel på dialogen "Lägg till transaktion"](../../../../translated_images/sv/dialog.93bba104afeb79f1.png) +![Skärmdump som visar ett exempel på dialogen "Lägg till transaktion"](../../../../translated_images/sv/dialog.93bba104afeb79f1.webp) ## Testa din implementering diff --git a/translations/sv/7-bank-project/README.md b/translations/sv/7-bank-project/README.md index 8f3978c33..a75a98a59 100644 --- a/translations/sv/7-bank-project/README.md +++ b/translations/sv/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: I det här projektet kommer du att lära dig hur man bygger en fiktiv bank. Dessa lektioner innehåller instruktioner om hur man utformar en webbapp och skapar rutter, bygger formulär, hanterar tillstånd och hämtar data från ett API som tillhandahåller bankens data. -| ![Screen1](../../../translated_images/sv/screen1.baccbba0f1f93364.png) | ![Screen2](../../../translated_images/sv/screen2.123c82a831a1d14a.png) | +| ![Screen1](../../../translated_images/sv/screen1.baccbba0f1f93364.webp) | ![Screen2](../../../translated_images/sv/screen2.123c82a831a1d14a.webp) | |--------------------------------|--------------------------------| ## Lektioner diff --git a/translations/sv/8-code-editor/1-using-a-code-editor/README.md b/translations/sv/8-code-editor/1-using-a-code-editor/README.md index f8830ac3a..1bf7cd9df 100644 --- a/translations/sv/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/sv/8-code-editor/1-using-a-code-editor/README.md @@ -182,7 +182,7 @@ Precis som Alexander Graham Bells telefon kopplade samman avlägsna platser, kop När allt har laddats ser du en vackert ren arbetsyta som är designad för att hålla dig fokuserad på det som är viktigt – din kod! -![Standardgränssnitt VSCode.dev](../../../../translated_images/sv/default-vscode-dev.5d06881d65c1b323.png) +![Standardgränssnitt VSCode.dev](../../../../translated_images/sv/default-vscode-dev.5d06881d65c1b323.webp) **Här är din rundtur i grannskapet:** - **Aktivitetsfältet** (den remsan till vänster): Din huvudsakliga navigering med Utforskaren 📁, Sök 🔍, Källkodshantering 🌿, Tillägg 🧩 och Inställningar ⚙️ @@ -229,7 +229,7 @@ Detta är perfekt när du börjar från grunden i VSCode.dev och vill öppna ett 1. Gå till [vscode.dev](https://vscode.dev) om du inte redan är där 2. Leta upp knappen "Open Remote Repository" på välkomstskärmen och klicka på den - ![Öppna fjärrrepositorium](../../../../translated_images/sv/open-remote-repository.bd9c2598b8949e7f.png) + ![Öppna fjärrrepositorium](../../../../translated_images/sv/open-remote-repository.bd9c2598b8949e7f.webp) 3. Klistra in vilken GitHub-repo-URL som helst (prova den här: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. Tryck Enter och se magin ske! @@ -238,7 +238,7 @@ Detta är perfekt när du börjar från grunden i VSCode.dev och vill öppna ett Vill du känna dig som en kodtrollkarl? Prova detta tangentbordskommando: Ctrl+Shift+P (eller Cmd+Shift+P på Mac) för att öppna Kommando-Paletten: -![Kommando-Palett](../../../../translated_images/sv/palette-menu.4946174e07f42622.png) +![Kommando-Palett](../../../../translated_images/sv/palette-menu.4946174e07f42622.webp) **Kommando-Paletten är som en sökmotor för allt du kan göra:** - Skriv "open remote" så hittar den öppnaren för repositorier åt dig @@ -300,7 +300,7 @@ Precis som att organisera ritningar i en arkitekts kontor följer filskapande i 3. Skriv in filnamnet inklusive lämplig filändelse (`style.css`, `script.js`, `index.html`) 4. Tryck Enter för att skapa filen -![Skapa ny fil](../../../../translated_images/sv/create-new-file.2814e609c2af9aeb.png) +![Skapa ny fil](../../../../translated_images/sv/create-new-file.2814e609c2af9aeb.webp) **Namngivningskonventioner:** - Använd beskrivande namn som visar filens syfte @@ -318,7 +318,7 @@ Här börjar det riktiga roliga! VSCode.devs editor är fullpackad med hjälpsam 2. Börja skriva och se hur VSCode.dev hjälper dig med färger, förslag och felupptäckt 3. Spara ditt arbete med Ctrl+S (Windows/Linux) eller Cmd+S (Mac) – även om den autosparar! -![Redigera filer i VSCode.dev](../../../../translated_images/sv/edit-a-file.52c0ee665ef19f08.png) +![Redigera filer i VSCode.dev](../../../../translated_images/sv/edit-a-file.52c0ee665ef19f08.webp) **Det häftiga som händer medan du kodar:** - Din kod får vackra färgmarkeringar så att den är lätt att läsa @@ -339,7 +339,7 @@ Precis som arkeologer skapar detaljerade journaler över utgrävningslager, spå 2. Modifierade filer visas i avsnittet "Ändringar" 3. Färgkodning visar ändringstyper: grönt för tillägg, rött för borttagningar -![Visa ändringar i källkodshantering](../../../../translated_images/sv/working-tree.c58eec08e6335c79.png) +![Visa ändringar i källkodshantering](../../../../translated_images/sv/working-tree.c58eec08e6335c79.webp) **Spara ditt arbete (commit-flödet):** @@ -431,7 +431,7 @@ Tilläggsmarknaden är väldigt välorganiserad, så du går inte vilse när du 2. Bläddra runt eller sök efter något specifikt 3. Klicka på något som ser intressant ut för att lära dig mer -![Extension marketplace interface](../../../../translated_images/sv/extensions.eca0e0c7f59a10b5.png) +![Extension marketplace interface](../../../../translated_images/sv/extensions.eca0e0c7f59a10b5.webp) **Det du kommer att se där:** @@ -484,7 +484,7 @@ De flesta tillägg har inställningar du kan justera för att få dem att funger 3. Välj "Extension Settings" i rullgardinsmenyn 4. Justera tills det känns exakt rätt för ditt arbetsflöde -![Customizing extension settings](../../../../translated_images/sv/extension-settings.21c752ae4f4cdb78.png) +![Customizing extension settings](../../../../translated_images/sv/extension-settings.21c752ae4f4cdb78.webp) **Vanliga saker du kanske vill justera:** - Hur din kod formateras (flikar vs mellanslag, radlängd, osv.) diff --git a/translations/sv/8-code-editor/1-using-a-code-editor/assignment.md b/translations/sv/8-code-editor/1-using-a-code-editor/assignment.md index 7ab6fcd73..e76f73b8f 100644 --- a/translations/sv/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/sv/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ Eftersom VSCode.dev kräver minst en fil för att öppna ett repository, kommer 4. **Skriv** ett commit-meddelande: "Lägg till initial HTML-struktur" 5. **Klicka** på "Commit new file" för att spara dina ändringar -![Skapa initial fil på GitHub](../../../../translated_images/sv/new-file-github.com.c886796d800e8056.png) +![Skapa initial fil på GitHub](../../../../translated_images/sv/new-file-github.com.c886796d800e8056.webp) **Det här uppnår den initiala inställningen:** - **Etablerar** korrekt HTML5-dokumentstruktur med semantiska element @@ -104,7 +104,7 @@ Nu när grunden för ditt repository är etablerad, låt oss gå över till VSCo ✅ **Indikator för framgång**: Du bör se dina projektfiler i Explorer-sidofältet och `index.html` tillgänglig för redigering i huvudredigeringsområdet. -![Projekt laddat i VSCode.dev](../../../../translated_images/sv/project-on-vscode.dev.e79815a9a95ee7fe.png) +![Projekt laddat i VSCode.dev](../../../../translated_images/sv/project-on-vscode.dev.e79815a9a95ee7fe.webp) **Vad du kommer att se i gränssnittet:** - **Explorer-sidofält**: **Visar** dina repository-filer och mappstruktur @@ -448,7 +448,7 @@ Tillägg förbättrar din utvecklingsupplevelse genom att tillhandahålla live-f **Omedelbara resultat efter installation:** När CodeSwing är installerat kommer du att se en live-förhandsgranskning av din CV-webbplats visas i editorn. Detta låter dig se exakt hur din webbplats ser ut medan du gör ändringar. -![CodeSwing-tillägg visar live-förhandsgranskning](../../../../translated_images/sv/after-codeswing-extension-pb.0ebddddcf73b5509.png) +![CodeSwing-tillägg visar live-förhandsgranskning](../../../../translated_images/sv/after-codeswing-extension-pb.0ebddddcf73b5509.webp) **Förstå det förbättrade gränssnittet:** - **Delad vy**: **Visar** din kod på ena sidan och live-förhandsgranskning på den andra diff --git a/translations/sv/9-chat-project/README.md b/translations/sv/9-chat-project/README.md index e15c67437..527329915 100644 --- a/translations/sv/9-chat-project/README.md +++ b/translations/sv/9-chat-project/README.md @@ -60,7 +60,7 @@ print(response.choices[0].message.content) Så här kommer ditt färdiga projekt att se ut: -![Chat app interface showing conversation between user and AI assistant](../../../translated_images/sv/screenshot.0a1ee0d123df681b.png) +![Chat app interface showing conversation between user and AI assistant](../../../translated_images/sv/screenshot.0a1ee0d123df681b.webp) ## 🗺️ Din läranderesa genom AI-applikationsutveckling @@ -189,7 +189,7 @@ mindmap ``` **Kärnprincip**: AI-applikationsutveckling kombinerar traditionella webbutvecklingsfärdigheter med AI-tjänsteintegration för att skapa intelligenta applikationer som känns naturliga och lyhörda för användare. -![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/sv/playground.d2b927122224ff8f.png) +![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/sv/playground.d2b927122224ff8f.webp) **Det som gör playgrounden så användbar:** - **Testa** olika AI-modeller som GPT-4o-mini, Claude och fler (alla gratis!) @@ -199,7 +199,7 @@ mindmap När du experimenterat klart klickar du bara på fliken "Code" och väljer programmeringsspråk för att få implementeringskoden du behöver. -![Playground choice showing code generation options for different programming languages](../../../translated_images/sv/playground-choice.1d23ba7d407f4758.png) +![Playground choice showing code generation options for different programming languages](../../../translated_images/sv/playground-choice.1d23ba7d407f4758.webp) ## Sätta upp Python-backend-integration @@ -2352,14 +2352,14 @@ Vill du prova detta projekt i en molnbaserad utvecklingsmiljö? GitHub Codespace - **Navigera** till [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) - **Klicka** på "Use this template" uppe till höger (se till att du är inloggad på GitHub) -![Create from template interface showing the green "Use this template" button](../../../translated_images/sv/template.67ad477109d29a2b.png) +![Create from template interface showing the green "Use this template" button](../../../translated_images/sv/template.67ad477109d29a2b.webp) **Steg 2: Starta Codespaces** - **Öppna** ditt nyss skapade repository - **Klicka** på gröna "Code"-knappen och välj "Codespaces" - **Välj** "Create codespace on main" för att starta din utvecklingsmiljö -![Create codespace interface with options for launching cloud development environment](../../../translated_images/sv/codespace.bcecbdf5d2747d3d.png) +![Create codespace interface with options for launching cloud development environment](../../../translated_images/sv/codespace.bcecbdf5d2747d3d.webp) **Steg 3: Miljökonfiguration** När din Codespace är laddad får du tillgång till: diff --git a/translations/sv/README.md b/translations/sv/README.md index 35aa16f94..05b1fa17f 100644 --- a/translations/sv/README.md +++ b/translations/sv/README.md @@ -56,13 +56,13 @@ Missa inte vår nya läroplan för Generativ AI! Besök [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) för att komma igång! -![Bakgrund](../../translated_images/sv/background.148a8d43afde5730.png) +![Bakgrund](../../translated_images/sv/background.148a8d43afde5730.webp) - Lektioner som täcker allt från grunder till RAG. - Interagera med historiska karaktärer med GenAI och vår följeslagsapp. - Rolig och engagerande berättelse, du kommer att tidsresande! -![karaktär](../../translated_images/sv/character.5c0dd8e067ffd693.png) +![karaktär](../../translated_images/sv/character.5c0dd8e067ffd693.webp) Varje lektion inkluderar en uppgift att slutföra, en kunskapskontroll och en utmaning för att guida dig i att lära dig ämnen som: @@ -99,7 +99,7 @@ Följ dessa steg: I din kopia av detta arkiv som du skapade, klicka på **Code**-knappen och välj **Open with Codespaces**. Detta skapar en ny Codespace för dig att arbeta i. -![Codespace](../../translated_images/sv/createcodespace.0238bbf4d7a8d955.png) +![Codespace](../../translated_images/sv/createcodespace.0238bbf4d7a8d955.webp) #### Köra läroplanen lokalt på din dator diff --git a/translations/sv/for-teachers.md b/translations/sv/for-teachers.md index 7eb67b5f5..82457722c 100644 --- a/translations/sv/for-teachers.md +++ b/translations/sv/for-teachers.md @@ -42,10 +42,10 @@ Detta kursmaterial innehåller importbara paket för vanliga LMS-arbetsflöden. - Moodle Cloud har begränsat stöd för Common Cartridge. Föredra Moodle-filen ovan, som också kan laddas upp i Canvas. - Efter import, granska moduler, förfallodatum och quizinställningar för att matcha ditt terminschema. -![Moodle](../../translated_images/sv/moodle.94eb93d714a50cb2.png) +![Moodle](../../translated_images/sv/moodle.94eb93d714a50cb2.webp) > Kursmaterialet i ett Moodle-klassrum -![Canvas](../../translated_images/sv/canvas.fbd605ff8e5b8aff.png) +![Canvas](../../translated_images/sv/canvas.fbd605ff8e5b8aff.webp) > Kursmaterialet i Canvas ### Använd repot direkt (utan Classroom) diff --git a/translations/sw/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/sw/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 0144a99d7..0bcb6e630 100644 --- a/translations/sw/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/sw/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ Tazama, naelewa kabisa kama programu inakuletea hofu sasa hivi. Nilipoanza, nili Leo, tutaangalia zana za ajabu zinazofanya maendeleo ya wavuti wa kisasa siyo tu kuwawezekana, bali kuwa kitu cha kuvutia sana. Ninazungumzia wahariri, vivinjari na njia za kazi sawa na zile zinazotumika na waendelezaji wa Netflix, Spotify, na studio yako ya programu unayopenda kila siku. Na hapa ni sehemu itakayokupeleka kucheza kwa furaha: wengi wa zana hizi za kitaalamu za kiwango cha viwanda ni bure kabisa! -![Intro Programming](../../../../translated_images/sw/webdev101-programming.d6e3f98e61ac4bff.png) +![Intro Programming](../../../../translated_images/sw/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/sw/1-getting-started-lessons/2-github-basics/README.md b/translations/sw/1-getting-started-lessons/2-github-basics/README.md index 6748b4f1d..2e114f9a4 100644 --- a/translations/sw/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/sw/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ Najua linaweza kuhisi mengi mwanzoni – hata mimi nilikumbuka nikitazama ukuras Tutachukua safari hii pamoja, hatua kwa hatua. Hakuna haraka, hakuna msongo – ni wewe, mimi, na zana mzuri zitakazokufanya marafiki wako wapya! -![Utangulizi wa GitHub](../../../../translated_images/sw/webdev101-github.8846d7971abef6f9.png) +![Utangulizi wa GitHub](../../../../translated_images/sw/webdev101-github.8846d7971abef6f9.webp) > Sketchnote na [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -605,7 +605,7 @@ Kwanza, tukutafute hifadhidata (au **repo**) kwenye GitHub inayokuvutia na unayo ✅ Njia nzuri ya kupata repozitori zinazofaa wanaoanza ni [kutafuta kwa alama 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Nakili repo kiasili](../../../../translated_images/sw/clone_repo.5085c48d666ead57.png) +![Nakili repo kiasili](../../../../translated_images/sw/clone_repo.5085c48d666ead57.webp) Kuna njia kadhaa za kunakili msimbo. Njia moja ni "clone" yaliyomo kwenye hifadhidata, ukitumia HTTPS, SSH, au CLI ya GitHub (Kiolesura cha Amri). diff --git a/translations/sw/1-getting-started-lessons/3-accessibility/README.md b/translations/sw/1-getting-started-lessons/3-accessibility/README.md index ea8f64d9a..d267dd4dd 100644 --- a/translations/sw/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/sw/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Kuunda Kurasa za Wavuti Zenye Ufikiaji Rahisi -![Yote Kuhusu Ufikiaji Rahisi](../../../../translated_images/sw/webdev101-a11y.8ef3025c858d897a.png) +![Yote Kuhusu Ufikiaji Rahisi](../../../../translated_images/sw/webdev101-a11y.8ef3025c858d897a.webp) > Sketchnote na [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/sw/2-js-basics/1-data-types/README.md b/translations/sw/2-js-basics/1-data-types/README.md index eabe5e9f1..ec508721a 100644 --- a/translations/sw/2-js-basics/1-data-types/README.md +++ b/translations/sw/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Misingi ya JavaScript: Aina za Data -![Misingi ya JavaScript - Aina za data](../../../../translated_images/sw/webdev101-js-datatypes.4cc470179730702c.png) +![Misingi ya JavaScript - Aina za data](../../../../translated_images/sw/webdev101-js-datatypes.4cc470179730702c.webp) > Sketchnote na [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/sw/2-js-basics/2-functions-methods/README.md b/translations/sw/2-js-basics/2-functions-methods/README.md index 21173ea32..93e7061ba 100644 --- a/translations/sw/2-js-basics/2-functions-methods/README.md +++ b/translations/sw/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Misingi ya JavaScript: Mbinu na Zana -![JavaScript Basics - Functions](../../../../translated_images/sw/webdev101-js-functions.be049c4726e94f8b.png) +![JavaScript Basics - Functions](../../../../translated_images/sw/webdev101-js-functions.be049c4726e94f8b.webp) > Sketchnote na [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/sw/2-js-basics/3-making-decisions/README.md b/translations/sw/2-js-basics/3-making-decisions/README.md index abb5150ba..a13a5b526 100644 --- a/translations/sw/2-js-basics/3-making-decisions/README.md +++ b/translations/sw/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Misingi ya JavaScript: Kufanya Maamuzi -![JavaScript Basics - Making decisions](../../../../translated_images/sw/webdev101-js-decisions.69e1b20f272dd1f0.png) +![JavaScript Basics - Making decisions](../../../../translated_images/sw/webdev101-js-decisions.69e1b20f272dd1f0.webp) > Sketchnote na [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/sw/2-js-basics/4-arrays-loops/README.md b/translations/sw/2-js-basics/4-arrays-loops/README.md index f94fe55dc..0f150a249 100644 --- a/translations/sw/2-js-basics/4-arrays-loops/README.md +++ b/translations/sw/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Misingi ya JavaScript: Mfululizo na Mizunguko -![JavaScript Basics - Arrays](../../../../translated_images/sw/webdev101-js-arrays.439d7528b8a29455.png) +![JavaScript Basics - Arrays](../../../../translated_images/sw/webdev101-js-arrays.439d7528b8a29455.webp) > Sketchnote na [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/sw/3-terrarium/1-intro-to-html/README.md b/translations/sw/3-terrarium/1-intro-to-html/README.md index 7a3e4b1de..efeea08f8 100644 --- a/translations/sw/3-terrarium/1-intro-to-html/README.md +++ b/translations/sw/3-terrarium/1-intro-to-html/README.md @@ -25,7 +25,7 @@ journey Enhance accessibility: 5: Student Build terrarium: 5: Student ``` -![Utangulizi wa HTML](../../../../translated_images/sw/webdev101-html.4389c2067af68e98.png) +![Utangulizi wa HTML](../../../../translated_images/sw/webdev101-html.4389c2067af68e98.webp) > Sketchnote na [Tomomi Imura](https://twitter.com/girlie_mac) HTML, au HyperText Markup Language, ni msingi wa kila tovuti uliyoitembelea. Fikiria HTML kama mfupa wa mifupa unaotoa muundo kwa kurasa za wavuti – inaeleza wapi maudhui yanapaswa kuwekwa, jinsi yanavyopangwa, na kila kipande kinachowakilisha nini. Ingawa CSS baadaye itafunika HTML yako kwa rangi na mpangilio, na JavaScript itakuleta uhai kupitia mwingiliano, HTML hutoa muundo muhimu unaofanya kila kitu kingine kuwa chawezekana. @@ -86,7 +86,7 @@ Utaunda folda maalum kwa ajili ya mradi wako wa terrarium na kuongeza faili yako 4. Katika dirisha la Explorer, bofya ikoni ya "New File" 5. Panga faili yako `index.html` -![Msafiri wa VS Code unaonyesha uundaji wa faili mpya](../../../../translated_images/sw/vs-code-index.e2986cf919471eb9.png) +![Msafiri wa VS Code unaonyesha uundaji wa faili mpya](../../../../translated_images/sw/vs-code-index.e2986cf919471eb9.webp) **Chaguo 2: Kutumia Amri za Terminal** ```bash diff --git a/translations/sw/3-terrarium/2-intro-to-css/README.md b/translations/sw/3-terrarium/2-intro-to-css/README.md index 17b6f7070..de23ebe16 100644 --- a/translations/sw/3-terrarium/2-intro-to-css/README.md +++ b/translations/sw/3-terrarium/2-intro-to-css/README.md @@ -29,7 +29,7 @@ journey Muundo unaojibu: 5: Student Mwangaza wa glasi: 5: Student ``` -![Utangulizi wa CSS](../../../../translated_images/sw/webdev101-css.3f7af5991bf53a20.png) +![Utangulizi wa CSS](../../../../translated_images/sw/webdev101-css.3f7af5991bf53a20.webp) > Sketchnote na [Tomomi Imura](https://twitter.com/girlie_mac) Kumbuka jinsi terrarium yako ya HTML ilivyoonekana ya kawaida? CSS ndio tunapobadilisha muundo huo rahisi kuwa kitu kinachovutia kwa macho. @@ -202,7 +202,7 @@ body { Fungua zana za maendeleo za kivinjari chako (F12), nenda kwenye tab ya Elements, na kagua kipengele chako cha `

`. Utaona kinarithi familia ya fonti kutoka kwa mwili: -![inherited font](../../../../translated_images/sw/1.cc07a5cbe114ad1d.png) +![inherited font](../../../../translated_images/sw/1.cc07a5cbe114ad1d.webp) ✅ **Jaribu**: Jaribu kuweka mali nyingine zinazorithiwa kwenye `` kama `color`, `line-height`, au `text-align`. Nini kinakutokea kwa kichwa chako na vipengele vingine? @@ -594,7 +594,7 @@ Je, uko tayari kuboresha terrarium yako kwa mwangaza wa kioo halisi? Mbinu hii i Utaunda mwanga mdogo unaoiga jinsi mwanga unavyoakisi uso wa kioo. Mbinu hii ni sawa na jinsi wachoraji wa Renaissance kama Jan van Eyck walivyotumia mwanga na mng'ao kuifanya kioo chenye mchoro kuonekana cha tatu-kidimensioni. Haya ndio unayolenga: -![terrarium iliyokamilika](../../../../translated_images/sw/terrarium-final.2f07047ffc597d0a.png) +![terrarium iliyokamilika](../../../../translated_images/sw/terrarium-final.2f07047ffc597d0a.webp) **Changamoto yako:** - **Tengeneza** maumbo madogo meupe au yenye rangi nyepesi ya mviringo kwa mwanga wa kioo diff --git a/translations/sw/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/sw/3-terrarium/3-intro-to-DOM-and-closures/README.md index a8771cb41..bdd3ec356 100644 --- a/translations/sw/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/sw/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -25,7 +25,7 @@ journey Jaribu utendakazi: 5: Student Kamilisha terrarium: 5: Student ``` -![DOM na kifunga](../../../../translated_images/sw/webdev101-js.10280393044d7eaa.png) +![DOM na kifunga](../../../../translated_images/sw/webdev101-js.10280393044d7eaa.webp) > Sketchnote na [Tomomi Imura](https://twitter.com/girlie_mac) Karibu katika mojawapo ya sehemu zinazovutia zaidi za maendeleo ya wavuti - kufanya mambo kuwa ya kuingiliana! Mfano wa Kitu cha Nyaraka (DOM) ni kama daraja kati ya HTML yako na JavaScript, na leo tutautumia kuleta terrarium yako kuishi. Wakati Tim Berners-Lee aliuumba kivinjari cha kwanza cha wavuti, aliona wavuti ambako nyaraka zinaweza kuwa za mabadiliko na kuingiliana - DOM hufanikisha maono hayo. @@ -102,7 +102,7 @@ flowchart TD style P fill:#ffebee style Q fill:#ffebee ``` -![Uwawakilishi wa mti wa DOM](../../../../translated_images/sw/dom-tree.7daf0e763cbbba92.png) +![Uwawakilishi wa mti wa DOM](../../../../translated_images/sw/dom-tree.7daf0e763cbbba92.webp) > Uwawakilishi wa DOM na alama za HTML zinazomrejelea. Kutoka kwa [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -146,7 +146,7 @@ flowchart LR ``` > 💡 **Kuelewa Mifungo**: Mifungo ni mada muhimu katika JavaScript, na wengi wa watengenezaji huwatumia kwa miaka kabla ya kuelewa pande zote za nadharia. Leo, tutazingatia matumizi ya vitendo - utaona mifungo ikitokea asili unapotengeneza vipengele vyetu vinavyoingiliana. Uelewa utaendelea unapoona jinsi zinavyotatua matatizo halisi. -![Uwawakilishi wa mti wa DOM](../../../../translated_images/sw/dom-tree.7daf0e763cbbba92.png) +![Uwawakilishi wa mti wa DOM](../../../../translated_images/sw/dom-tree.7daf0e763cbbba92.webp) > Uwawakilishi wa DOM na alama za HTML zinazomrejelea. Kutoka kwa [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -591,7 +591,7 @@ Sasa jaribu terrarium yako ya kijamii! Fungua faili yako ya `index.html` kwenye - **Msaada wa kifaa chochote**: Hufanya kazi kwenye kompyuta na simu - **Uelewa wa utendaji**: Hakuna uvujaji wa kumbukumbu au mahesabu ya ziada -![terrarium iliyokamilika](../../../../translated_images/sw/terrarium-final.0920f16e87c13a84.png) +![terrarium iliyokamilika](../../../../translated_images/sw/terrarium-final.0920f16e87c13a84.webp) --- diff --git a/translations/sw/3-terrarium/solution/README.md b/translations/sw/3-terrarium/solution/README.md index af450e4f5..5b73881b5 100644 --- a/translations/sw/3-terrarium/solution/README.md +++ b/translations/sw/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Mradi mdogo wa kuburudisha akili kwa kuburuta na kudondosha. Kwa kutumia HTML, JS, na CSS kidogo, unaweza kujenga kiolesura cha wavuti, kukipamba, na kuongeza mwingiliano. -![terrarium yangu](../../../../translated_images/sw/screenshot_gray.0c796099a1f9f25e.png) +![terrarium yangu](../../../../translated_images/sw/screenshot_gray.0c796099a1f9f25e.webp) ## Shukrani diff --git a/translations/sw/5-browser-extension/1-about-browsers/README.md b/translations/sw/5-browser-extension/1-about-browsers/README.md index 4ffcd953a..647b03e54 100644 --- a/translations/sw/5-browser-extension/1-about-browsers/README.md +++ b/translations/sw/5-browser-extension/1-about-browsers/README.md @@ -25,7 +25,7 @@ journey Debug issues: 4: Student Polish experience: 5: Student ``` -![Browser sketchnote](../../../../translated_images/sw/browser.60317c9be8b7f84a.jpg) +![Browser sketchnote](../../../../translated_images/sw/browser.60317c9be8b7f84a.webp) > Sketchnote na [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## Mtihani wa Kabla ya Mahadhara @@ -77,7 +77,7 @@ Mchakato huu unaendana na jinsi kivinjari cha kwanza cha wavuti, WorldWideWeb, k ✅ **Historia Kidogo**: Kivinjari cha kwanza kilikuwa kinaitwa 'WorldWideWeb' na kilifanywa na Sir Timothy Berners-Lee mwaka 1990. -![early browsers](../../../../translated_images/sw/earlybrowsers.d984b711cdf3a42d.jpg) +![early browsers](../../../../translated_images/sw/earlybrowsers.d984b711cdf3a42d.webp) > Baadhi ya vivinjari vya awali, kupitia [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### Jinsi Vivinjari Vinavyosindika Maudhui ya Wavuti @@ -194,7 +194,7 @@ quadrantChart Kuelewa mchakato wa usakinishaji wa kiendelezi hukusaidia kutarajia uzoaji wa mtumiaji wakati watu wanaposakinisha kiendelezi chako. Mchakato wa usakinishaji umeboreshwa kwa vivinjari vya kisasa, na tofauti ndogo ndogo katika muundo wa interface. -![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/sw/install-on-edge.d68781acaf0b3d3d.png) +![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/sw/install-on-edge.d68781acaf0b3d3d.webp) > **Muhimu**: Hakikisha umeamilisha mode ya mwendelezaji na kuruhusu viendelezi kutoka maduka mengine wakati unajaribu viendelezi vyako binafsi. @@ -308,10 +308,10 @@ Hii inafuata kanuni ya kufunua hatua kwa hatua inayotumika katika ubunifu wa int ### Muhtasari wa Maoni ya Kiendelezi **Muonekano wa Usanidi** - usanidi kwa mtumiaji mara ya kwanza: -![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/sw/1.b6da8c1394b07491.png) +![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/sw/1.b6da8c1394b07491.webp) **Muonekano wa Matokeo** - maonyesho ya data ya athari ya kaboni: -![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/sw/2.1dae52ff08042246.png) +![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/sw/2.1dae52ff08042246.webp) ### Kujenga Fomu ya Usanidi diff --git a/translations/sw/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/sw/5-browser-extension/2-forms-browsers-local-storage/README.md index 7f20c0851..773e1fcd3 100644 --- a/translations/sw/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/sw/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -263,7 +263,7 @@ stateDiagram-v2 Reset --> ClearStorage: Ondoa data iliyohifadhiwa ClearStorage --> FirstTime: Rudi kwenye usanidi ``` -![Dirisha la hifadhi ya ndani](../../../../translated_images/sw/localstorage.472f8147b6a3f8d1.png) +![Dirisha la hifadhi ya ndani](../../../../translated_images/sw/localstorage.472f8147b6a3f8d1.webp) > ⚠️ **Tafakari za Usalama:** Katika programu za uzalishaji, kuhifadhi funguo za API ndani ya LocalStorage kuna hatari za usalama kwa sababu JavaScript inaweza kufikia data hii. Kwa madhumuni ya kujifunza, njia hii inafanya kazi vizuri, lakini programu halisi zinapaswa kutumia hifadhi salama upande wa seva kwa nyaraka nyeti. diff --git a/translations/sw/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/sw/5-browser-extension/3-background-tasks-and-performance/README.md index e5919dbfb..90fb5c482 100644 --- a/translations/sw/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/sw/5-browser-extension/3-background-tasks-and-performance/README.md @@ -123,7 +123,7 @@ Ili kufungua Zana za Wavumbuzi katika Edge, bonyeza vidoti vitatu hapo juu kulia Tujaribu hili. Fungua tovuti (Microsoft.com inafanya kazi vizuri) na bonyeza kitufe cha 'Record'. Sasa refreshing ukurasa na angalia profaaili ikichukua kila kinachoendelea. Ukimaliza kurekodi, utaona maelezo ya kina ya jinsi kivinjari kinavyofanya 'scripts', 'renders', na 'paints' tovuti. Inanikumbusha jinsi kituo cha udhibiti cha misheni kinavyofuata kila mfumo wakati wa uzinduzi wa roketi - unapata data halisi kwa wakati halisi kuhusu kinachotokea na lini. -![Edge profiler](../../../../translated_images/sw/profiler.5a4a62479c5df01c.png) +![Edge profiler](../../../../translated_images/sw/profiler.5a4a62479c5df01c.webp) ✅ [Hati ya Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) ina maelezo mengi zaidi ikiwa unataka kifahamike zaidi @@ -133,11 +133,11 @@ Chagua vipengele vya ratiba ya profaili kupanua matukio yanayotokea wakati ukura Pata picha ya utendaji wa ukurasa wako kwa kuchagua sehemu ya ratiba ya profaili na kuangalia dirisha la muhtasari: -![Edge profiler snapshot](../../../../translated_images/sw/snapshot.97750180ebcad737.png) +![Edge profiler snapshot](../../../../translated_images/sw/snapshot.97750180ebcad737.webp) Angalia dirisha la Log la Tukio kuona kama tukio lolote limechukua zaidi ya ms 15: -![Edge event log](../../../../translated_images/sw/log.804026979f3707e0.png) +![Edge event log](../../../../translated_images/sw/log.804026979f3707e0.webp) ✅ Jifunze profaaili yako! Fungua zana za msanidi kwenye tovuti hii na ona kama kuna vikwazo yoyote. Nini ni mali ambayo inapakia polepole zaidi? Haraka zaidi? diff --git a/translations/sw/5-browser-extension/README.md b/translations/sw/5-browser-extension/README.md index 076b49c6c..cdf223c07 100644 --- a/translations/sw/5-browser-extension/README.md +++ b/translations/sw/5-browser-extension/README.md @@ -23,7 +23,7 @@ Kiendelezi hiki kinaweza kuitwa na mtumiaji wakati wowote baada ya kuingiza API ### Shukrani -![kiendelezi cha kivinjari cha kijani](../../../translated_images/sw/extension-screenshot.0e7f5bfa110e92e3.png) +![kiendelezi cha kivinjari cha kijani](../../../translated_images/sw/extension-screenshot.0e7f5bfa110e92e3.webp) ## Shukrani diff --git a/translations/sw/5-browser-extension/solution/README.md b/translations/sw/5-browser-extension/solution/README.md index a519b8cc5..2f2f12f17 100644 --- a/translations/sw/5-browser-extension/solution/README.md +++ b/translations/sw/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Kwa kutumia API ya C02 Signal ya tmrow kufuatilia matumizi ya umeme, tengeneza kiongezo cha kivinjari ili uweze kuwa na kikumbusho moja kwa moja kwenye kivinjari chako kuhusu uzito wa matumizi ya umeme katika eneo lako. Kutumia kiongezo hiki kwa njia ya ad hoc kutakusaidia kufanya maamuzi kuhusu shughuli zako kulingana na taarifa hizi. -![picha ya kiongezo](../../../../translated_images/sw/extension-screenshot.0e7f5bfa110e92e3.png) +![picha ya kiongezo](../../../../translated_images/sw/extension-screenshot.0e7f5bfa110e92e3.webp) ## Kuanza @@ -31,7 +31,7 @@ npm run build Ili kusakinisha kwenye Edge, tumia menyu ya 'alama tatu' kwenye kona ya juu kulia ya kivinjari ili kupata paneli ya Viongezo. Kutoka hapo, chagua 'Load Unpacked' ili kupakia kiongezo kipya. Fungua folda ya 'dist' unapoulizwa, na kiongezo kitapakiwa. Ili kutumia, utahitaji API key ya API ya CO2 Signal ([pata moja hapa kupitia barua pepe](https://www.co2signal.com/) - weka barua pepe yako kwenye kisanduku kwenye ukurasa huu) na [msimbo wa eneo lako](http://api.electricitymap.org/v3/zones) unaolingana na [Ramani ya Umeme](https://www.electricitymap.org/map) (kwa mfano, huko Boston, mimi hutumia 'US-NEISO'). -![kusakinisha](../../../../translated_images/sw/install-on-edge.78634f02842c4828.png) +![kusakinisha](../../../../translated_images/sw/install-on-edge.78634f02842c4828.webp) Baada ya API key na eneo kuingizwa kwenye kiolesura cha kiongezo, nukta ya rangi kwenye upau wa viongezo vya kivinjari inapaswa kubadilika ili kuonyesha matumizi ya nishati ya eneo lako na kukupa mwongozo kuhusu shughuli zinazotumia nishati nyingi ambazo zinafaa kufanya. Wazo nyuma ya mfumo huu wa 'nukta' lilitolewa kwangu na [kiongezo cha Energy Lollipop](https://energylollipop.com/) kwa uzalishaji wa California. diff --git a/translations/sw/5-browser-extension/solution/translation/README.fr.md b/translations/sw/5-browser-extension/solution/translation/README.fr.md index 37bd45c85..d8c52506b 100644 --- a/translations/sw/5-browser-extension/solution/translation/README.fr.md +++ b/translations/sw/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Kwa kutumia API ya C02 Signal kutoka tmrow kufuatilia matumizi ya umeme, tengeneza ugani wa kivinjari ili uweze kupata ukumbusho moja kwa moja kwenye kivinjari chako kuhusu matumizi ya umeme katika eneo lako. Kutumia ugani huu wa dharura kutakusaidia kufanya maamuzi kuhusu shughuli zako kwa kuzingatia taarifa hizi. -![picha ya ugani](../../../../../translated_images/sw/extension-screenshot.0e7f5bfa110e92e3.png) +![picha ya ugani](../../../../../translated_images/sw/extension-screenshot.0e7f5bfa110e92e3.webp) ## Kuanza @@ -31,7 +31,7 @@ npm run build Ili kusakinisha kwenye Edge, tumia menyu ya 'alama tatu' kwenye kona ya juu kulia ya kivinjari ili kupata paneli ya Ugani. Kutoka hapo, chagua 'Pakia ugani usiobanwa' ili kupakia ugani mpya. Fungua folda ya 'dist' unapoulizwa, na ugani utapakiwa. Ili kuitumia, utahitaji ufunguo wa API kwa API ya CO2 Signal ([pata moja hapa kwa barua pepe](https://www.co2signal.com/) - ingiza barua pepe yako kwenye kisanduku kwenye ukurasa huu) na [msimbo wa eneo lako](http://api.electricitymap.org/v3/zones) unaolingana na [Ramani ya Umeme](https://www.electricitymap.org/map) (kwa mfano, huko Boston, mimi hutumia 'US-NEISO'). -![usakinishaji](../../../../../translated_images/sw/install-on-edge.78634f02842c4828.png) +![usakinishaji](../../../../../translated_images/sw/install-on-edge.78634f02842c4828.webp) Baada ya kuingiza ufunguo wa API na eneo kwenye kiolesura cha ugani, nukta ya rangi kwenye upau wa ugani wa kivinjari inapaswa kubadilika ili kuonyesha matumizi ya nishati ya eneo lako na kukupa kiashiria kuhusu shughuli zinazotumia nishati ambazo zinafaa kufanywa. Wazo nyuma ya mfumo huu wa 'nukta' lilinipa msukumo kutoka kwa [ugani wa Energy Lollipop](https://energylollipop.com/) kwa uzalishaji wa hewa chafu huko California. diff --git a/translations/sw/5-browser-extension/solution/translation/README.hi.md b/translations/sw/5-browser-extension/solution/translation/README.hi.md index 4addaec38..01ba15da3 100644 --- a/translations/sw/5-browser-extension/solution/translation/README.hi.md +++ b/translations/sw/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Kutumia API ya CO2 Signal ya tmrow kufuatilia matumizi ya umeme, tunajenga kiongezo cha kivinjari ili kukukumbusha jinsi matumizi ya umeme katika eneo lako yalivyo mazito kupitia kivinjari chako. Kutumia kiongezo hiki kwa muda mfupi kutakusaidia kufanya maamuzi kuhusu shughuli zako kulingana na taarifa hii. -![Picha ya skrini ya kiongezo](../../../../../translated_images/sw/extension-screenshot.0e7f5bfa110e92e3.png) +![Picha ya skrini ya kiongezo](../../../../../translated_images/sw/extension-screenshot.0e7f5bfa110e92e3.webp) ## Kuanza @@ -31,7 +31,7 @@ npm run build Ili kusakinisha kwenye Edge, tumia menyu ya 'nukta tatu' kwenye kona ya juu kulia ya kivinjari ili kupata paneli ya viongezo. Kutoka hapo, chagua 'Load unpacked' ili kupakia kiongezo kipya. Fungua folda ya 'dist' kwenye prompt, na kiongezo kitapakiwa. Ili kutumia, utahitaji API key ya CO2 Signal ([ipate kupitia barua pepe hapa](https://www.co2snal.com/) - weka barua pepe yako kwenye kisanduku cha ukurasa huo) na [msimbo wa eneo lako](http://api.electricitymap.org/v3/zones) kutoka [ramani ya umeme](https://www.electricitymap.org/map) (kwa mfano, huko Boston, ninatumia 'US-NEISO'). -![kusakinisha](../../../../../translated_images/sw/install-on-edge.78634f02842c4828.png) +![kusakinisha](../../../../../translated_images/sw/install-on-edge.78634f02842c4828.webp) Baada ya API key na msimbo wa eneo kuingizwa kwenye kiolesura cha kiongezo, nukta ya rangi kwenye bar ya viongezo vya kivinjari inapaswa kubadilika ili kuonyesha matumizi ya nishati ya eneo lako na kukupa kiashiria cha shughuli nzito za nishati zinazofaa kwa utendaji wako. Wazo la mfumo huu wa 'nukta' lilinipatia na [kiongezo cha Energy Lollipop](https://energylollipop.com/) kwa uzalishaji wa California. diff --git a/translations/sw/5-browser-extension/solution/translation/README.it.md b/translations/sw/5-browser-extension/solution/translation/README.it.md index 7c504dbb6..e981c3ca1 100644 --- a/translations/sw/5-browser-extension/solution/translation/README.it.md +++ b/translations/sw/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Tutatumia API ya Signal CO2 kutoka tmrow kufuatilia matumizi ya umeme ili kuunda ugani wa kivinjari, hivyo kuwa na ukumbusho moja kwa moja kwenye kivinjari chako kuhusu jinsi matumizi ya umeme yalivyo mazito katika eneo lako. Kutumia ugani huu maalum kutasaidia kutathmini shughuli zako kulingana na taarifa hizi. -![picha ya ugani](../../../../../translated_images/sw/extension-screenshot.0e7f5bfa110e92e3.png) +![picha ya ugani](../../../../../translated_images/sw/extension-screenshot.0e7f5bfa110e92e3.webp) ## Kuanza @@ -31,7 +31,7 @@ npm run build Ili kusakinisha kwenye Edge, tumia menyu ya "alama tatu" kwenye kona ya juu kulia ya kivinjari ili kupata paneli ya Ugani. Ikiwa haijawashwa tayari, washa Hali ya Msanidi Programu (chini kushoto). Chagua "Pakia isiyoshinikizwa" ili kupakia ugani mpya. Fungua folda ya "dist" kwenye dirisha la maelekezo, na ugani utawekwa. Ili kuitumia, utahitaji ufunguo wa API kwa API ya CO2 Signal (unaweza [kuupata hapa kupitia barua pepe](https://www.co2signal.com/) - weka barua pepe yako kwenye kisanduku kwenye ukurasa huu) na [msimbo wa eneo lako](http://api.electricitymap.org/v3/zones) unaolingana na [ramani ya umeme](https://www.electricitymap.org/map) (kwa mfano, huko Boston, "US-NEISO"). -![usakinishaji](../../../../../translated_images/sw/install-on-edge.78634f02842c4828.png) +![usakinishaji](../../../../../translated_images/sw/install-on-edge.78634f02842c4828.webp) Mara tu ufunguo wa API na eneo vimeingizwa kwenye kiolesura cha ugani, nukta ya rangi kwenye upau wa ugani wa kivinjari inapaswa kubadilika ili kuonyesha matumizi ya nishati ya eneo hilo na kutoa mwongozo kuhusu shughuli za matumizi makubwa ya nishati zinazofaa kufanywa. Wazo la mfumo huu wa "nukta" lilitolewa na [ugani wa Energy Lollipop](https://energylollipop.com/) kwa uzalishaji wa California. diff --git a/translations/sw/5-browser-extension/solution/translation/README.ja.md b/translations/sw/5-browser-extension/solution/translation/README.ja.md index fa86b32e8..8d7931bef 100644 --- a/translations/sw/5-browser-extension/solution/translation/README.ja.md +++ b/translations/sw/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Tunajenga kiongezo cha kivinjari kinachotumia API ya CO2 Signal ya tmrow ili kufuatilia matumizi ya nishati katika eneo lako. Kiongezo hiki kitaonyesha ukumbusho kwenye kivinjari chako kuhusu kiwango cha matumizi ya nishati katika eneo lako. Kwa kutumia kiongezo hiki kwa njia ya ad hoc, unaweza kufanya maamuzi kuhusu shughuli zako kulingana na taarifa hii. -![picha ya kiongezo](../../../../../translated_images/sw/extension-screenshot.0e7f5bfa110e92e3.png) +![picha ya kiongezo](../../../../../translated_images/sw/extension-screenshot.0e7f5bfa110e92e3.webp) ## Kuanza @@ -31,7 +31,7 @@ npm run build Ili kusakinisha kwenye Edge, tafuta paneli ya "Viongezo" kutoka kwenye menyu ya "alama tatu" kwenye kona ya juu kulia ya kivinjari. Kutoka hapo, chagua "Load Unpacked" na upakie kiongezo kipya. Fungua folda ya "dist" unapoulizwa, na kiongezo kitawekwa. Ili kutumia, unahitaji API key ya CO2 Signal ([pata moja hapa kupitia barua pepe](https://www.co2signal.com/) - ingiza barua pepe yako kwenye kisanduku cha ukurasa huo) na [code ya eneo lako](http://api.electricitymap.org/v3/zones) inayolingana na [Electricity Map](https://www.electricitymap.org/map) (kwa mfano, Boston hutumia 'US-NEISO'). -![kusakinisha](../../../../../translated_images/sw/install-on-edge.78634f02842c4828.png) +![kusakinisha](../../../../../translated_images/sw/install-on-edge.78634f02842c4828.webp) Baada ya kuingiza API key na eneo kwenye kiolesura cha kiongezo, nukta yenye rangi itakayoonekana kwenye upau wa viongezo vya kivinjari chako itabadilika ili kuonyesha kiwango cha matumizi ya nishati katika eneo lako. Hii itakusaidia kuamua ni shughuli gani zinazohitaji nishati zinafaa kufanywa. Wazo la mfumo huu wa "nukta" lilitokana na [Energy Lollipop extension](https://energylollipop.com/) kwa ajili ya uzalishaji wa California. diff --git a/translations/sw/5-browser-extension/solution/translation/README.ms.md b/translations/sw/5-browser-extension/solution/translation/README.ms.md index 75a455610..60b710280 100644 --- a/translations/sw/5-browser-extension/solution/translation/README.ms.md +++ b/translations/sw/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Kwa kutumia API ya Ishara ya CO2 ya tmrow kufuatilia matumizi ya umeme, tengeneza kiendelezi cha kivinjari ili uweze kupokea arifa kwenye kivinjari chako kuhusu uzito wa matumizi ya umeme katika eneo lako. Kutumia kiendelezi hiki hasa kutakusaidia kufanya maamuzi kuhusu shughuli zako kulingana na taarifa hizi. -![picha ya kiendelezi cha kivinjari](../../../../../translated_images/sw/extension-screenshot.0e7f5bfa110e92e3.png) +![picha ya kiendelezi cha kivinjari](../../../../../translated_images/sw/extension-screenshot.0e7f5bfa110e92e3.webp) ## Kuanza Hapa @@ -31,7 +31,7 @@ npm run build Ili kusakinisha kwenye Edge, tumia menyu ya 'alama tatu' kwenye kona ya juu kulia ya kivinjari ili kupata paneli ya Viendelezi. Kutoka hapo, chagua 'Load Unpacked' ili kupakia kiendelezi kipya. Fungua folda ya 'dist' unapoulizwa, na kiendelezi kitapakiwa. Ili kutumia, utahitaji ufunguo wa API kwa API ya Ishara ya CO2 ([pata moja hapa kupitia barua pepe](https://www.co2signal.com/) - weka barua pepe yako kwenye kisanduku kwenye ukurasa huu) na [msimbo wa eneo lako](http://api.electricitymap.org/v3/zones) unaolingana na [Ramani ya Umeme](https://www.electricitymap.org/map) (kwa mfano, huko Boston, mimi hutumia 'US-NEISO'). -![kupakua](../../../../../translated_images/sw/install-on-edge.78634f02842c4828.png) +![kupakua](../../../../../translated_images/sw/install-on-edge.78634f02842c4828.webp) Baada ya ufunguo wa API na eneo kuingizwa kwenye kiolesura cha kiendelezi, nukta ya rangi kwenye upau wa kiendelezi cha kivinjari itabadilika ili kuonyesha matumizi ya nishati ya eneo lako na kukupa mapendekezo kuhusu shughuli nzito zinazofaa kufanya. Wazo la mfumo huu wa 'nukta' lilinipa msukumo kutoka kwa [kiendelezi cha kivinjari cha Energy Lollipop](https://energylollipop.com/) kwa uzalishaji wa California. diff --git a/translations/sw/5-browser-extension/start/README.md b/translations/sw/5-browser-extension/start/README.md index 3bcd1bef3..d1e0d5166 100644 --- a/translations/sw/5-browser-extension/start/README.md +++ b/translations/sw/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Kwa kutumia API ya C02 Signal ya tmrow kufuatilia matumizi ya umeme, tengeneza kiongezo cha kivinjari ili uweze kuwa na kikumbusho moja kwa moja kwenye kivinjari chako kuhusu uzito wa matumizi ya umeme katika eneo lako. Kutumia kiongezo hiki kwa njia ya ad hoc kutakusaidia kufanya maamuzi kuhusu shughuli zako kulingana na taarifa hizi. -![picha ya kiongezo](../../../../translated_images/sw/extension-screenshot.0e7f5bfa110e92e3.png) +![picha ya kiongezo](../../../../translated_images/sw/extension-screenshot.0e7f5bfa110e92e3.webp) ## Kuanza @@ -31,7 +31,7 @@ npm run build Ili kusakinisha kwenye Edge, tumia menyu ya 'alama tatu' kwenye kona ya juu kulia ya kivinjari ili kupata paneli ya Viongezo. Kutoka hapo, chagua 'Pakia Bila Kufungasha' ili kupakia kiongezo kipya. Fungua folda ya 'dist' unapoulizwa na kiongezo kitapakiwa. Ili kutumia, utahitaji ufunguo wa API kwa API ya CO2 Signal ([pata moja hapa kupitia barua pepe](https://www.co2signal.com/) - weka barua pepe yako kwenye kisanduku kwenye ukurasa huu) na [msimbo wa eneo lako](http://api.electricitymap.org/v3/zones) unaolingana na [Ramani ya Umeme](https://www.electricitymap.org/map) (kwa mfano, huko Boston, natumia 'US-NEISO'). -![kusakinisha](../../../../translated_images/sw/install-on-edge.78634f02842c4828.png) +![kusakinisha](../../../../translated_images/sw/install-on-edge.78634f02842c4828.webp) Baada ya kuingiza ufunguo wa API na eneo kwenye kiolesura cha kiongezo, nukta ya rangi kwenye upau wa viongezo vya kivinjari inapaswa kubadilika ili kuonyesha matumizi ya nishati ya eneo lako na kukupa mwongozo kuhusu shughuli zinazotumia nishati nyingi ambazo zinafaa kwako kufanya. Wazo nyuma ya mfumo huu wa 'nukta' lilitolewa kwangu na [kiongezo cha Energy Lollipop](https://energylollipop.com/) kwa utoaji wa hewa chafu wa California. diff --git a/translations/sw/6-space-game/2-drawing-to-canvas/README.md b/translations/sw/6-space-game/2-drawing-to-canvas/README.md index a55758a63..c975413de 100644 --- a/translations/sw/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/sw/6-space-game/2-drawing-to-canvas/README.md @@ -105,7 +105,7 @@ quadrantChart Power-up: [0.7, 0.6] UI Elements: [0.9, 0.1] ``` -![gridi ya canvas](../../../../translated_images/sw/canvas_grid.5f209da785ded492.png) +![gridi ya canvas](../../../../translated_images/sw/canvas_grid.5f209da785ded492.webp) > Picha kutoka [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) Ili kuchora kwenye kipengele cha canvas, utafuata mchakato wa hatua tatu unaounda msingi wa michoro yote ya canvas. Mara unavyofanya mara kadhaa, hutakuwa jambo gumu tena: @@ -323,11 +323,11 @@ Utajenga ukurasa wa wavuti wenye kipengele cha Canvas. Inapaswa kuonyesha skrini - Meli ya shujaa - ![Meli ya shujaa](../../../../translated_images/sw/player.dd24c1afa8c71e9b.png) + ![Meli ya shujaa](../../../../translated_images/sw/player.dd24c1afa8c71e9b.webp) - 5*5 monster - ![Meli ya monster](../../../../translated_images/sw/enemyShip.5df2a822c16650c2.png) + ![Meli ya monster](../../../../translated_images/sw/enemyShip.5df2a822c16650c2.webp) ### Hatua zilizopendekezwa kuanza maendeleo @@ -463,7 +463,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { Matokeo yaliyokamilika yanapaswa kuonekana kama ifuatavyo: -![Black screen with a hero and 5*5 monsters](../../../../translated_images/sw/partI-solution.36c53b48c9ffae2a.png) +![Black screen with a hero and 5*5 monsters](../../../../translated_images/sw/partI-solution.36c53b48c9ffae2a.webp) ## Suluhisho diff --git a/translations/sw/6-space-game/5-keeping-score/README.md b/translations/sw/6-space-game/5-keeping-score/README.md index bb352438a..4a80c9974 100644 --- a/translations/sw/6-space-game/5-keeping-score/README.md +++ b/translations/sw/6-space-game/5-keeping-score/README.md @@ -155,7 +155,7 @@ sequenceDiagram end ``` - **Mfumo wa alama**: Kila meli ya adui iliyoharibiwa huleta pointi 100 (nambari za mduara ni rahisi kwa wachezaji kuhesabu kichwani). Alama zinaonyeshwa upande wa chini kushoto. -- **Kihesabu maisha**: Shujaa wako anaanza na maisha matatu - kiwango kilichowekwa na michezo ya awali ya arcade kulingana na changamoto na urahisi wa kucheza. Kila mgongano na adui hukupotezea maisha moja. Tutaonyesha maisha yaliyobaki upande wa chini kulia kwa kutumia ikoni za meli ![life image](../../../../translated_images/sw/life.6fb9f50d53ee0413.png). +- **Kihesabu maisha**: Shujaa wako anaanza na maisha matatu - kiwango kilichowekwa na michezo ya awali ya arcade kulingana na changamoto na urahisi wa kucheza. Kila mgongano na adui hukupotezea maisha moja. Tutaonyesha maisha yaliyobaki upande wa chini kulia kwa kutumia ikoni za meli ![life image](../../../../translated_images/sw/life.6fb9f50d53ee0413.webp). ## Twende Kwenye Ujenzi! diff --git a/translations/sw/7-bank-project/1-template-route/README.md b/translations/sw/7-bank-project/1-template-route/README.md index 47e7f1dc1..1b13e3cba 100644 --- a/translations/sw/7-bank-project/1-template-route/README.md +++ b/translations/sw/7-bank-project/1-template-route/README.md @@ -644,7 +644,7 @@ sequenceDiagram Kutumia `history.pushState` huunda rekodi mpya kwenye historia ya uelekezaji ya kivinjari. Unaweza kuona hili kwa kushikilia *kitufe cha nyuma* cha kivinjari chako, kinapaswa kuonyesha kitu kama hiki: -![Screenshot of navigation history](../../../../translated_images/sw/history.7fdabbafa521e064.png) +![Screenshot of navigation history](../../../../translated_images/sw/history.7fdabbafa521e064.webp) Ikiwa utajaribu kubofya kitufe cha nyuma mara kadhaa, utaona URL ya sasa inabadilika na historia inasasishwa, lakini template ile ile inaendelea kuonyeshwa. diff --git a/translations/sw/7-bank-project/2-forms/README.md b/translations/sw/7-bank-project/2-forms/README.md index db72c00ba..b4bc04852 100644 --- a/translations/sw/7-bank-project/2-forms/README.md +++ b/translations/sw/7-bank-project/2-forms/README.md @@ -292,7 +292,7 @@ Kwanza, tazama kinachotokea kwa uwasilishaji wa fomu wa kawaida: 2. Angalia mabadiliko kwenye upau wa anwani wa kivinjari chako 3. Angalia jinsi ukurasa unavyojazwa upya na data kuonekana kwenye URL -![Screenshot ya mabadiliko ya URL ya kivinjari baada ya kubofya kitufe cha Register](../../../../translated_images/sw/click-register.e89a30bf0d4bc9ca.png) +![Screenshot ya mabadiliko ya URL ya kivinjari baada ya kubofya kitufe cha Register](../../../../translated_images/sw/click-register.e89a30bf0d4bc9ca.webp) ### Mlinganisho wa Mbinu za HTTP @@ -346,7 +346,7 @@ Tuweke usajili wako wa fomu kuwasiliana ipasavyo na API ya nyuma kwa kutumia mbi 2. **Bofya** kitufe cha "Create Account" 3. **Angalia** majibu ya seva katika kivinjari chako -![Dirisha la kivinjari kwenye anwani localhost:5000/api/accounts, linaonyesha mfuatano wa JSON na data ya mtumiaji](../../../../translated_images/sw/form-post.61de4ca1b964d91a.png) +![Dirisha la kivinjari kwenye anwani localhost:5000/api/accounts, linaonyesha mfuatano wa JSON na data ya mtumiaji](../../../../translated_images/sw/form-post.61de4ca1b964d91a.webp) **Unachotakiwa kuona:** - **Kivinjari kinageuza** kwenye URL ya nukta ya API @@ -609,7 +609,7 @@ async function register() { 3. **Bonyeza** "Create Account" 4. **Tazama** ujumbe wa koni na mrejesho wa mtumiaji -![Screenshot showing log message in the browser console](../../../../translated_images/sw/browser-console.efaf0b51aaaf6778.png) +![Screenshot showing log message in the browser console](../../../../translated_images/sw/browser-console.efaf0b51aaaf6778.webp) **Utaona nini:** - **Hali ya kupakia** inaonekana kwenye kitufe cha kuwasilisha @@ -783,7 +783,7 @@ Tuimarishie fomu yako ya usajili na uthibitishaji imara ambao hutoa uzoefu bora 3. **Jaribu** herufi za kipekee kwenye sehemu ya jina la mtumiaji 4. **Weka** kiasi chenye salio hasi -![Screenshot showing the validation error when trying to submit the form](../../../../translated_images/sw/validation-error.8bd23e98d416c22f.png) +![Screenshot showing the validation error when trying to submit the form](../../../../translated_images/sw/validation-error.8bd23e98d416c22f.webp) **Utakayoyaona:** - **Kivinjari kinaonyesha** ujumbe wa uthibitishaji wa wenyeji @@ -943,7 +943,7 @@ Onyesha ujumbe wa kosa katika HTML ikiwa mtumiaji tayari yupo. Hapa kuna mfano wa jinsi ukurasa wa kuingia unaweza kuonekana baada ya kubadilishwa mitindo kidogo: -![Screenshot of the login page after adding CSS styles](../../../../translated_images/sw/result.96ef01f607bf856a.png) +![Screenshot of the login page after adding CSS styles](../../../../translated_images/sw/result.96ef01f607bf856a.webp) ## Mtihani wa Baada ya Maktaba diff --git a/translations/sw/7-bank-project/3-data/README.md b/translations/sw/7-bank-project/3-data/README.md index 5d7128374..7814f9297 100644 --- a/translations/sw/7-bank-project/3-data/README.md +++ b/translations/sw/7-bank-project/3-data/README.md @@ -156,7 +156,7 @@ sequenceDiagram Server->>Browser: Inarudisha ukurasa kamili wa HTML Browser->>User: Inaonyesha ukurasa mpya (mwanga/upya) ``` -![Mtiririko wa sasisho katika programu ya kurasa nyingi](../../../../translated_images/sw/mpa.7f7375a1a2d4aa77.png) +![Mtiririko wa sasisho katika programu ya kurasa nyingi](../../../../translated_images/sw/mpa.7f7375a1a2d4aa77.webp) **Kwa nini njia hii ilihisi polepole:** - Kila bonyeza lilimaanisha kujenga ukurasa mzima upya kutoka mwanzoni @@ -182,7 +182,7 @@ sequenceDiagram JavaScript->>Browser: Husaidia vipengele maalum vya ukurasa Browser->>User: Inaonyesha yaliyosasishwa (hakuna upyaaji) ``` -![Mtiririko wa sasisho katika programu ya ukurasa mmoja](../../../../translated_images/sw/spa.268ec73b41f992c2.png) +![Mtiririko wa sasisho katika programu ya ukurasa mmoja](../../../../translated_images/sw/spa.268ec73b41f992c2.webp) **Kwa nini SPA zinahisi bora zaidi:** - Sehemu tu zilizobadilika ndizo zinazosasishwa (tajiri, sivyo?) @@ -516,7 +516,7 @@ if (data.error) { Sasa unapojaribu na akaunti isiyo halali, utaona ujumbe wa kosa unaosaidia moja kwa moja kwenye ukurasa! -![Screenshot showing the error message displayed during login](../../../../translated_images/sw/login-error.416fe019b36a6327.png) +![Screenshot showing the error message displayed during login](../../../../translated_images/sw/login-error.416fe019b36a6327.webp) #### Hatua ya 4: Kuwajumuisha kwa Upatikanaji @@ -952,7 +952,7 @@ Uko tayari kupeleka programu yako ya benki kwa ngazi inayofuata? Tufanye ionekan Huu hapa muonekano wa dashibodi iliyopambwa vizuri: -![Screenshot of an example result of the dashboard after styling](../../../../translated_images/sw/screen2.123c82a831a1d14a.png) +![Screenshot of an example result of the dashboard after styling](../../../../translated_images/sw/screen2.123c82a831a1d14a.webp) Usijisikie lazima ulingane nalo kwa usahihi - tumia kama msukumo na uibadilishe ipasavyo! diff --git a/translations/sw/7-bank-project/4-state-management/README.md b/translations/sw/7-bank-project/4-state-management/README.md index 1e74aba63..5fb162b46 100644 --- a/translations/sw/7-bank-project/4-state-management/README.md +++ b/translations/sw/7-bank-project/4-state-management/README.md @@ -187,7 +187,7 @@ Kama muundo wa sehemu za Titanic ulioonekana imara hadi sehemu nyingi kuzama kwa Badala ya kuzunguka kwa kutafuta mwishowe, tutaunda **mfumo wa usimamizi wa hali uliolengwa katikati**. Fikiria kama mtu mmoja aliyepangwa vizuri anayehudumia vitu vyote muhimu: -![Schema showing the data flows between the HTML, user actions and state](../../../../translated_images/sw/data-flow.fa2354e0908fecc8.png) +![Schema showing the data flows between the HTML, user actions and state](../../../../translated_images/sw/data-flow.fa2354e0908fecc8.webp) ```mermaid flowchart TD @@ -798,7 +798,7 @@ Changamoto hii itakusaidia kufikiri kama mtaalamu anayeangalia uzoefu wa mtumiaj Huu ni mfano wa matokeo baada ya kukamilisha kazi: -![Screenshot showing an example "Add transaction" dialog](../../../../translated_images/sw/dialog.93bba104afeb79f1.png) +![Screenshot showing an example "Add transaction" dialog](../../../../translated_images/sw/dialog.93bba104afeb79f1.webp) --- diff --git a/translations/sw/7-bank-project/4-state-management/assignment.md b/translations/sw/7-bank-project/4-state-management/assignment.md index 533ac2188..f70467c86 100644 --- a/translations/sw/7-bank-project/4-state-management/assignment.md +++ b/translations/sw/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ Rejelea [nyaraka za API ya seva](../api/README.md) kwa: **Matokeo Yanayotarajiwa:** Baada ya kukamilisha kazi hii, programu yako ya benki inapaswa kuwa na kipengele kamili cha "Ongeza Muamala" ambacho kinaonekana na kinafanya kazi kitaalamu: -![Picha ya skrini inayoonyesha mfano wa dialogi ya "Ongeza muamala"](../../../../translated_images/sw/dialog.93bba104afeb79f1.png) +![Picha ya skrini inayoonyesha mfano wa dialogi ya "Ongeza muamala"](../../../../translated_images/sw/dialog.93bba104afeb79f1.webp) ## Kupima Utekelezaji Wako diff --git a/translations/sw/7-bank-project/README.md b/translations/sw/7-bank-project/README.md index dad5c9536..5467edfb0 100644 --- a/translations/sw/7-bank-project/README.md +++ b/translations/sw/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Katika mradi huu, utajifunza jinsi ya kujenga benki ya kufikirika. Masomo haya yanajumuisha maelekezo ya jinsi ya kupanga programu ya wavuti na kutoa njia, kujenga fomu, kusimamia hali (state), na kupata data kutoka kwa API ambayo unaweza kutumia kupata data ya benki. -| ![Screen1](../../../translated_images/sw/screen1.baccbba0f1f93364.png) | ![Screen2](../../../translated_images/sw/screen2.123c82a831a1d14a.png) | +| ![Screen1](../../../translated_images/sw/screen1.baccbba0f1f93364.webp) | ![Screen2](../../../translated_images/sw/screen2.123c82a831a1d14a.webp) | |--------------------------------|--------------------------------| ## Masomo diff --git a/translations/sw/8-code-editor/1-using-a-code-editor/README.md b/translations/sw/8-code-editor/1-using-a-code-editor/README.md index 1092b11ec..fc2cf50d2 100644 --- a/translations/sw/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/sw/8-code-editor/1-using-a-code-editor/README.md @@ -182,7 +182,7 @@ Kama vile simu ya Alexander Graham Bell ilivyowezesha mawasiliano ya mbali, kuun Mara kila kitu kinapopakuliwa, utaona eneo la kazi safi na la kuvutia lililoundwa kukuweka makini na kinachohitajika – msimbo wako! -![Muonekano wa kawaida wa VSCode.dev](../../../../translated_images/sw/default-vscode-dev.5d06881d65c1b323.png) +![Muonekano wa kawaida wa VSCode.dev](../../../../translated_images/sw/default-vscode-dev.5d06881d65c1b323.webp) **Hapa ni ziara yako ya mtaa:** - **Ukuta wa Shughuli** (ukingo wa kushoto): Urambazaji wako mkuu una Explorer 📁, Tafuta 🔍, Udhibiti wa Chanzo 🌿, Nyongeza 🧩, na Mipangilio ⚙️ @@ -229,7 +229,7 @@ Hii ni bora unapoanza mpya kwenye VSCode.dev na unataka kufungua hifadhidata maa 1. Nenda kwenye [vscode.dev](https://vscode.dev) kama bado hujafika 2. Tafuta kitufe cha "Open Remote Repository" kwenye skrini ya kuanza na kubofya - ![Fungua hifadhidata ya mbali](../../../../translated_images/sw/open-remote-repository.bd9c2598b8949e7f.png) + ![Fungua hifadhidata ya mbali](../../../../translated_images/sw/open-remote-repository.bd9c2598b8949e7f.webp) 3. Bandika URL yoyote ya hifadhidata ya GitHub (jaribu hii: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. Bonyeza Enter na angalia uchawi unavyotokea! @@ -238,7 +238,7 @@ Hii ni bora unapoanza mpya kwenye VSCode.dev na unataka kufungua hifadhidata maa Unataka kujisikia kama mchawi wa kuandika msimbo? Jaribu mkato huu wa kibodi: Ctrl+Shift+P (au Cmd+Shift+P kwa Mac) kufungua Komandi ya Palette: -![Komandi ya Palette](../../../../translated_images/sw/palette-menu.4946174e07f42622.png) +![Komandi ya Palette](../../../../translated_images/sw/palette-menu.4946174e07f42622.webp) **Komandi ya Palette ni kama kuwa na injini ya utafutaji ya kila jambo unaloweza kufanya:** - Andika "open remote" na itakupata kifungua hifadhidata @@ -300,7 +300,7 @@ Kama kupanga ramani za majengo ofisini mwa mbuni wa majengo, uundaji wa faili nd 3. Andika jina la faili pamoja na kiendelezi kinachofaa (`style.css`, `script.js`, `index.html`) 4. Bonyeza Enter kuunda faili -![Kuunda faili mpya](../../../../translated_images/sw/create-new-file.2814e609c2af9aeb.png) +![Kuunda faili mpya](../../../../translated_images/sw/create-new-file.2814e609c2af9aeb.webp) **Kanuni za kuitia majina:** - Tumia majina ya kueleweka yanayoonyesha matumizi ya faili @@ -318,7 +318,7 @@ Hapa ndipo furaha ya kweli inaanza! Mhariri wa VSCode.dev umejaa vipengele vya k 2. Anza kuandika na uangalie VSCode.dev ikikuongezea rangi, mapendekezo, na kugundua makosa 3. Hifadhi kazi kwa Ctrl+S (Windows/Linux) au Cmd+S (Mac) – ingawa huhifadhi moja kwa moja pia! -![Kuhariri faili kwenye VSCode.dev](../../../../translated_images/sw/edit-a-file.52c0ee665ef19f08.png) +![Kuhariri faili kwenye VSCode.dev](../../../../translated_images/sw/edit-a-file.52c0ee665ef19f08.webp) **Mambo mazuri yanayotokea unapoandika msimbo:** - Msimbo wako unatolewa kwa rangi nzuri ili uwe rahisi kusoma @@ -339,7 +339,7 @@ Kama wachimbaji wa kumbukumbu wanavyotengeneza kumbukumbu za kina za tabaka za k 2. Faili zilizobadilishwa zinaonekana katika sehemu ya "Mabadiliko" 3. Rangi hutambulisha aina za mabadiliko: kijani kwa nyongeza, nyekundu kwa ufutaji -![Kutazama mabadiliko katika Udhibiti wa Chanzo](../../../../translated_images/sw/working-tree.c58eec08e6335c79.png) +![Kutazama mabadiliko katika Udhibiti wa Chanzo](../../../../translated_images/sw/working-tree.c58eec08e6335c79.webp) **Kuhifadhi kazi yako (mtiririko wa kufanya commit):** @@ -431,7 +431,7 @@ Soko la vipengele limepangiliwa vyema, hivyo hutapotea ukitafuta unachohitaji. L 2. Vinjari au tafuta kitu maalum 3. Bonyeza chochote kinachovutia kujifunza zaidi -![Kiolesura cha soko la vipengele](../../../../translated_images/sw/extensions.eca0e0c7f59a10b5.png) +![Kiolesura cha soko la vipengele](../../../../translated_images/sw/extensions.eca0e0c7f59a10b5.webp) **Utakachoona humo:** @@ -484,7 +484,7 @@ Vipengele vingi huja na mipangilio unayoweza kubadilisha ili kufanya kazi jinsi 3. Chagua "Extension Settings" kutoka kwenye menyu ya kushuka chini 4. Rekebisha vitu hadi viwe vinakufaa kabisa kwa mtiririko wako wa kazi -![Kubinafsisha mipangilio ya kiendelezaji](../../../../translated_images/sw/extension-settings.21c752ae4f4cdb78.png) +![Kubinafsisha mipangilio ya kiendelezaji](../../../../translated_images/sw/extension-settings.21c752ae4f4cdb78.webp) **Vitu vya kawaida ambavyo unaweza kutaka kubadilisha:** - Jinsi msimbo wako unavyoandaliwa (taps vs nafasi, urefu wa mstari, n.k.) diff --git a/translations/sw/8-code-editor/1-using-a-code-editor/assignment.md b/translations/sw/8-code-editor/1-using-a-code-editor/assignment.md index a622c8a06..dc0493402 100644 --- a/translations/sw/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/sw/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ Kwa kuwa VSCode.dev inahitaji angalau faili moja kufungua hifadhi, tutaunda fail 4. **Andika** ujumbe wa kujitolea: "Ongeza muundo wa awali wa HTML" 5. **Bonyeza** "Commit new file" ili kuhifadhi mabadiliko yako -![Kuunda faili ya awali kwenye GitHub](../../../../translated_images/sw/new-file-github.com.c886796d800e8056.png) +![Kuunda faili ya awali kwenye GitHub](../../../../translated_images/sw/new-file-github.com.c886796d800e8056.webp) **Hiki ndicho uanzishaji huu wa awali unakamilisha:** - **Unaunda** muundo sahihi wa hati ya HTML5 na vipengele vya kimantiki @@ -104,7 +104,7 @@ Sasa kwa kuwa msingi wa hifadhi yako umeanzishwa, hebu tubadilishe kwa VSCode.de ✅ **Kiashiria cha mafanikio**: Unapaswa kuona faili za mradi wako kwenye upau wa kando wa Explorer na `index.html` ikipatikana kwa kuhariri kwenye eneo kuu la mhariri. -![Mradi umepakiwa kwenye VSCode.dev](../../../../translated_images/sw/project-on-vscode.dev.e79815a9a95ee7fe.png) +![Mradi umepakiwa kwenye VSCode.dev](../../../../translated_images/sw/project-on-vscode.dev.e79815a9a95ee7fe.webp) **Unachokiona kwenye kiolesura:** - **Upau wa kando wa Explorer**: **Unaonyesha** faili za hifadhi yako na muundo wa folda @@ -448,7 +448,7 @@ Viendelezi vinaboresha uzoefu wako wa maendeleo kwa kutoa uwezo wa hakikisho la **Matokeo ya haraka baada ya usakinishaji:** Mara tu CodeSwing itakaposakinishwa, utaona hakikisho la moja kwa moja la tovuti yako ya resume likijitokeza kwenye mhariri. Hii inakuwezesha kuona jinsi tovuti yako inavyoonekana unavyofanya mabadiliko. -![Kiendelezi cha CodeSwing kikionyesha hakikisho la moja kwa moja](../../../../translated_images/sw/after-codeswing-extension-pb.0ebddddcf73b5509.png) +![Kiendelezi cha CodeSwing kikionyesha hakikisho la moja kwa moja](../../../../translated_images/sw/after-codeswing-extension-pb.0ebddddcf73b5509.webp) **Kuelewa kiolesura kilichoboreshwa:** - **Muonekano wa mgawanyiko**: **Unaonyesha** msimbo wako upande mmoja na hakikisho la moja kwa moja upande mwingine diff --git a/translations/sw/9-chat-project/README.md b/translations/sw/9-chat-project/README.md index 0306a788f..6b878af8a 100644 --- a/translations/sw/9-chat-project/README.md +++ b/translations/sw/9-chat-project/README.md @@ -60,7 +60,7 @@ print(response.choices[0].message.content) Hivi ndivyo mradi wako utakavyoonekana umemalizika: -![Chat app interface showing conversation between user and AI assistant](../../../translated_images/sw/screenshot.0a1ee0d123df681b.png) +![Chat app interface showing conversation between user and AI assistant](../../../translated_images/sw/screenshot.0a1ee0d123df681b.webp) ## 🗺️ Safari Yako ya Kujifunza Kupitia Maendeleo ya Programu za AI @@ -189,7 +189,7 @@ mindmap ``` **Kanuni Msingi**: Maendeleo ya programu za AI yanachanganya ujuzi wa maendeleo ya wavuti wa kawaida na muunganisho wa huduma za AI, kuunda programu za akili zinazohisi kuwa za asili na zinazojibu watumiaji vizuri. -![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/sw/playground.d2b927122224ff8f.png) +![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/sw/playground.d2b927122224ff8f.webp) **Hapa ni kinachofanya playground kuwa muhimu:** - **Jaribu** mifano tofauti ya AI kama GPT-4o-mini, Claude, na mingine (zote ni bure!) @@ -199,7 +199,7 @@ mindmap Baada ya kucheza kidogo, bonyeza kichupo cha "Code" na chagua lugha yako ya programu kupata msimbo wa utekelezaji utakao hitajiwa. -![Playground choice showing code generation options for different programming languages](../../../translated_images/sw/playground-choice.1d23ba7d407f4758.png) +![Playground choice showing code generation options for different programming languages](../../../translated_images/sw/playground-choice.1d23ba7d407f4758.webp) ## Kuanzisha Muunganisho wa Backend wa Python @@ -2351,14 +2351,14 @@ Unataka kujaribu mradi huu katika mazingira ya maendeleo ya wingu? GitHub Codesp - **Tembelea** hazina ya [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) - **Bonyeza** "Use this template" juu kulia (hakikisha umeingia kwenye GitHub) -![Create from template interface showing the green "Use this template" button](../../../translated_images/sw/template.67ad477109d29a2b.png) +![Create from template interface showing the green "Use this template" button](../../../translated_images/sw/template.67ad477109d29a2b.webp) **Hatua 2: Anzisha Codespaces** - **Fungua** hazina uliyounda hivi karibuni - **Bonyeza** kitufe cha kijani "Code" na chagua "Codespaces" - **Chagua** "Create codespace on main" kuanzisha mazingira yako ya maendeleo -![Create codespace interface with options for launching cloud development environment](../../../translated_images/sw/codespace.bcecbdf5d2747d3d.png) +![Create codespace interface with options for launching cloud development environment](../../../translated_images/sw/codespace.bcecbdf5d2747d3d.webp) **Hatua 3: Usanidi wa Mazingira** Mara wakati Codespace yako ianzishwa, utakuwa na: diff --git a/translations/sw/README.md b/translations/sw/README.md index 7ed45f70a..0a7b49ac9 100644 --- a/translations/sw/README.md +++ b/translations/sw/README.md @@ -72,13 +72,13 @@ Usikose mtaala wetu mpya wa AI Inayozalisha! Tembelea [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) kuanza! -![Background](../../translated_images/sw/background.148a8d43afde5730.png) +![Background](../../translated_images/sw/background.148a8d43afde5730.webp) - Masomo yanayofunika kila kitu kutoka misingi hadi RAG. - Shirikiana na wahusika wa kihistoria ukitumia GenAI na programu yetu ya msaidizi. - Hadithi za kufurahisha na kuvutia, utasafiri kwa wakati! -![character](../../translated_images/sw/character.5c0dd8e067ffd693.png) +![character](../../translated_images/sw/character.5c0dd8e067ffd693.webp) Kila somo lina kazi ya kukamilisha, ukaguzi wa maarifa na changamoto ya kukuongoza kujifunza mada kama: @@ -115,7 +115,7 @@ Fuata hatua hizi: Katika nakala yako ya repositori uliyounda, bonyeza kitufe cha **Code** na chagua **Fungua na Codespaces**. Hii itaunda Codespace mpya ya kufanya kazi ndani yake. -![Codespace](../../translated_images/sw/createcodespace.0238bbf4d7a8d955.png) +![Codespace](../../translated_images/sw/createcodespace.0238bbf4d7a8d955.webp) #### Kuendesha mtaala ndani ya kompyuta yako diff --git a/translations/sw/for-teachers.md b/translations/sw/for-teachers.md index c2b8398c3..875391ca1 100644 --- a/translations/sw/for-teachers.md +++ b/translations/sw/for-teachers.md @@ -42,10 +42,10 @@ Mtaala huu unajumuisha pakiti zinazoweza kuingizwa kwa kazi za kawaida za LMS. - Moodle Cloud ina msaada mdogo wa Common Cartridge. Pendekeza faili ya Moodle hapo juu, ambayo pia inaweza kupakiwa kwenye Canvas. - Baada ya kuingiza, hakiki moduli, tarehe za mwisho, na mipangilio ya majaribio ili kuendana na ratiba ya muhula wako. -![Moodle](../../translated_images/sw/moodle.94eb93d714a50cb2.png) +![Moodle](../../translated_images/sw/moodle.94eb93d714a50cb2.webp) > Mtaala katika darasa la Moodle -![Canvas](../../translated_images/sw/canvas.fbd605ff8e5b8aff.png) +![Canvas](../../translated_images/sw/canvas.fbd605ff8e5b8aff.webp) > Mtaala katika Canvas ### Kutumia hifadhi moja kwa moja (bila Classroom) diff --git a/translations/ta/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/ta/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 7cbd94225..9cd61da2d 100644 --- a/translations/ta/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/ta/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: இன்று, நவீன வலைத் தள மேம்பாட்டை சாத்தியமாக்கும் அதிசய கருவிகளை நாம் ஆராயப்போகிறோம். நான் பேசுகிறேன் Netflix, Spotify மற்றும் உங்கள் பிடித்த சினிமா செயலி நிறுவனத்தின் டெவலப்பர்கள் தினமும் பயன்படுத்தும் அதே எடிட்டர்கள், உலாவிகள் மற்றும் வேலை முறைகள் பற்றி. மற்றும் நீங்கள் சந்தோஷமாக டான்ஸ் செய்யப்போகும் பகுதி இது: இந்த தொழில்முறை தர மாதிரி, தொழில்நுட்ப அங்கீகாரம் பெற்ற கருவிகள் பெரும்பாலான பகுதியும் முழுமையாக இலவசம்! -![Intro Programming](../../../../translated_images/ta/webdev101-programming.d6e3f98e61ac4bff.png) +![Intro Programming](../../../../translated_images/ta/webdev101-programming.d6e3f98e61ac4bff.webp) > சுருக்கக்குறிப்பு: [Tomomi Imura](https://twitter.com/girlie_mac) அவர்களின் படைப்பு ```mermaid diff --git a/translations/ta/1-getting-started-lessons/2-github-basics/README.md b/translations/ta/1-getting-started-lessons/2-github-basics/README.md index faec70b68..259a927f3 100644 --- a/translations/ta/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/ta/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: நாம் இந்த பயணத்தை ஒன்றாகச் செய்கிறோம், ஒரு படி ஒருவிதமாக. வேகமடைய வேண்டாம், அழுத்தம் வேண்டாம் – நீ, நான், மற்றும் உன் புதிய நல்ல நண்பர்களாக இருக்கும் சில அற்புதமான கருவிகள்! -![Intro to GitHub](../../../../translated_images/ta/webdev101-github.8846d7971abef6f9.png) +![Intro to GitHub](../../../../translated_images/ta/webdev101-github.8846d7971abef6f9.webp) > ஸ்கெட்ச் நோட்டு: [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -604,7 +604,7 @@ flowchart TD ✅ 'புதியவர்களுக்கு ஏற்ற' ரெப்போக்களை கண்டுபிடிக்கும் நல்ல வழி [முதல் நல்ல பிரச்சனை குறிச்சொல்லின் மூலம் தேடல்](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/) ஆகும். -![ஒரு ரெப்போவை உள்ளூரில் நகலெடு](../../../../translated_images/ta/clone_repo.5085c48d666ead57.png) +![ஒரு ரெப்போவை உள்ளூரில் நகலெடு](../../../../translated_images/ta/clone_repo.5085c48d666ead57.webp) குறியீட்டை நகலெடுக்க பல வழிகள் உள்ளன. ஒன்று, HTTPS, SSH அல்லது GitHub CLI (கமாண்ட் லைன் இன்டர்ஃபெஸ்) பயன்படுத்தி அந்த ரெப்போவின் உள்ளடக்கங்களை "க்ளோன்" செய்யும் முறையாகும். diff --git a/translations/ta/1-getting-started-lessons/3-accessibility/README.md b/translations/ta/1-getting-started-lessons/3-accessibility/README.md index 8ecdde914..0d16eb893 100644 --- a/translations/ta/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/ta/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # அணுகக்கூடிய வலைப் பக்கங்களை உருவாக்குதல் -![அணுகல் பற்றி அனைத்தும்](../../../../translated_images/ta/webdev101-a11y.8ef3025c858d897a.png) +![அணுகல் பற்றி அனைத்தும்](../../../../translated_images/ta/webdev101-a11y.8ef3025c858d897a.webp) > [Tomomi Imura](https://twitter.com/girlie_mac) அவர்களின் ஸ்கெட்ச்நோட் ```mermaid diff --git a/translations/ta/2-js-basics/1-data-types/README.md b/translations/ta/2-js-basics/1-data-types/README.md index 2111eb97c..8457513a5 100644 --- a/translations/ta/2-js-basics/1-data-types/README.md +++ b/translations/ta/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript அடிப்படைகள்: தரவுத் தரவுகள் -![JavaScript அடிப்படைகள் - தரவுத் தரவுகள்](../../../../translated_images/ta/webdev101-js-datatypes.4cc470179730702c.png) +![JavaScript அடிப்படைகள் - தரவுத் தரவுகள்](../../../../translated_images/ta/webdev101-js-datatypes.4cc470179730702c.webp) > ஓவியம் [Tomomi Imura](https://twitter.com/girlie_mac) அவர்களால் ```mermaid diff --git a/translations/ta/2-js-basics/2-functions-methods/README.md b/translations/ta/2-js-basics/2-functions-methods/README.md index f7ff46581..64649d212 100644 --- a/translations/ta/2-js-basics/2-functions-methods/README.md +++ b/translations/ta/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # ஜாவாஸ்கிரிப்ட் அடிப்படைகள்: முறைகள் மற்றும் செயல்பாடுகள் -![JavaScript Basics - Functions](../../../../translated_images/ta/webdev101-js-functions.be049c4726e94f8b.png) +![JavaScript Basics - Functions](../../../../translated_images/ta/webdev101-js-functions.be049c4726e94f8b.webp) > [டோமொமி இமுரா](https://twitter.com/girlie_mac) அவர்களின் ஸ்கெட்ச் நோட் ```mermaid diff --git a/translations/ta/2-js-basics/3-making-decisions/README.md b/translations/ta/2-js-basics/3-making-decisions/README.md index d8925be4e..ede38c83c 100644 --- a/translations/ta/2-js-basics/3-making-decisions/README.md +++ b/translations/ta/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript அடிப்படைகள்: முடிவெடுப்பது -![JavaScript அடிப்படைகள் - முடிவெடுப்பது](../../../../translated_images/ta/webdev101-js-decisions.69e1b20f272dd1f0.png) +![JavaScript அடிப்படைகள் - முடிவெடுப்பது](../../../../translated_images/ta/webdev101-js-decisions.69e1b20f272dd1f0.webp) > ஸ்கெட்ச்னோட் [டொமோமி இமுறை](https://twitter.com/girlie_mac) அவர்களால் diff --git a/translations/ta/2-js-basics/4-arrays-loops/README.md b/translations/ta/2-js-basics/4-arrays-loops/README.md index 1be2c7131..cea0584b1 100644 --- a/translations/ta/2-js-basics/4-arrays-loops/README.md +++ b/translations/ta/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # ஜாவாஸ்கிரிப்ட் அடிப்படைகள்: வரிசைகள் மற்றும் லூப்புகள் -![JavaScript Basics - Arrays](../../../../translated_images/ta/webdev101-js-arrays.439d7528b8a29455.png) +![JavaScript Basics - Arrays](../../../../translated_images/ta/webdev101-js-arrays.439d7528b8a29455.webp) > ஸ்கெட்ச்நோட் [தொமோமி இமுரா](https://twitter.com/girlie_mac) அவர்களால் ```mermaid diff --git a/translations/ta/3-terrarium/1-intro-to-html/README.md b/translations/ta/3-terrarium/1-intro-to-html/README.md index 8c4a9090e..20ae16b5f 100644 --- a/translations/ta/3-terrarium/1-intro-to-html/README.md +++ b/translations/ta/3-terrarium/1-intro-to-html/README.md @@ -25,7 +25,7 @@ journey Enhance accessibility: 5: Student Build terrarium: 5: Student ``` -![Introduction to HTML](../../../../translated_images/ta/webdev101-html.4389c2067af68e98.png) +![Introduction to HTML](../../../../translated_images/ta/webdev101-html.4389c2067af68e98.webp) > டோம்(மி) இமுரா அவர்களால் உருவாக்கப்பட்ட ஸ்கெட்ச் நோட் HTML, அல்லது ஹைப்பர் டெக்ஸ்ட் மார்க் அப் லாங்குவேஜ், நீங்கள் besucht செய்த ஒவ்வொரு இணையதளத்தின் அடித்தளம் ஆகும். HTML ஐ வலைப்பக்கங்களுக்கு வடிவமைப்பு வழங்கும் அடித்தளமாக நினைத்துக் கொள்ளுங்கள் – அது உள்ளடக்கம் எங்கே இருக்க வேண்டும், எவ்வாறு ஒழுங்குபடுத்தப்படும் மற்றும் ஒவ்வொரு பகுதியும் என்ன பிரதிபலிக்கும் என்பதைக் குறிப்பிடுகிறது. CSS பிறகு உங்கள் HTML ஐ நிறங்கள் மற்றும் அமைப்புகளுடன் "அழகு பூசும்" போது, மற்றும் JavaScript அதில் இடைக்கால செயல்பாடு கொண்டு வரும்போது, HTML என்பது மற்ற அனைத்துக்கும் அடிப்படையான கட்டமைப்பினை வழங்குகிறது. @@ -86,7 +86,7 @@ HTML குறியீட்டில் இறங்க முன்பு, 4. Explorer பகுதியில், "New File" சின்னத்தை கிளிக் செய்யவும் 5. கோப்பின் பெயரை `index.html` என்க -![VS Code Explorer showing new file creation](../../../../translated_images/ta/vs-code-index.e2986cf919471eb9.png) +![VS Code Explorer showing new file creation](../../../../translated_images/ta/vs-code-index.e2986cf919471eb9.webp) **விருப்பம் 2: டெர்மினல் கட்டளைகள் பயன்படுத்துதல்** ```bash diff --git a/translations/ta/3-terrarium/2-intro-to-css/README.md b/translations/ta/3-terrarium/2-intro-to-css/README.md index 36292ee9f..b48a28957 100644 --- a/translations/ta/3-terrarium/2-intro-to-css/README.md +++ b/translations/ta/3-terrarium/2-intro-to-css/README.md @@ -29,7 +29,7 @@ journey பதிலளிக்கும் வடிவமைப்பு: 5: Student கண்ணாடி பிரதிபலிப்புகள்: 5: Student ``` -![CSS அறிமுகம்](../../../../translated_images/ta/webdev101-css.3f7af5991bf53a20.png) +![CSS அறிமுகம்](../../../../translated_images/ta/webdev101-css.3f7af5991bf53a20.webp) > ஸ்கெட்ச் நோட் [Tomomi Imura](https://twitter.com/girlie_mac) அவர்களின் உங்கள் HTML டெர்ரேரியம் எவ்வாறு அடிப்படையாகத் தெரியப்பட்டது என்பதை நினைவிருக்கிறதா? CSS என்பது அந்த சுலபமான அமைப்பை கண்ணுக்கு அழகான ஒன்றாக மாற்றும் இடமாகும். @@ -202,7 +202,7 @@ body { உங்கள் உலாவியின் டெவலப்பர் கருவிகள் (F12) திறந்து, Elements தாவலைத் திறந்து உங்கள் `

` கூறைக் கண்காணிக்கவும். அது இல் இருந்து மரபுரிமையோடு கொண்டுள்ள எழுத்துரு குடும்பத்தை காண்பிக்கும்: -![inherited font](../../../../translated_images/ta/1.cc07a5cbe114ad1d.png) +![inherited font](../../../../translated_images/ta/1.cc07a5cbe114ad1d.webp) ✅ **சோதனை நேரம்**: `` இல் நீங்கள் மற்ற மரபுரிமை பெறக்கூடிய பண்புகளை அமைத்துப் பார்க்கலாம், உதாரணமாக `color`, `line-height`, அல்லது `text-align`. உங்கள் தலைப்பு மற்றும் பிற கூறுகளுக்கு என்ன நடக்கும்? @@ -594,7 +594,7 @@ Agent முறையைப் பயன்படுத்தி கீழ்க கண்ணாடி மேற்பரப்புகளில் வெளிச்சம் எப்படி பிரதிபலிக்கிறது என்பதை போல மென்மையான வெளிச்சங்களை உருவாக்க வேண்டியிருக்கும். இந்த முறையை ரெனசான்ஸ் ஓவியர்கள் ஜான் வான் ஐக் போன்றோர் படவணக்க கண்ணாடி மூலமான வெளிச்சங்களைக் காட்சிப்படுத்த பயன்படுத்தினர். நீங்கள் நோக்கி செல்ல வேண்டியது இதுதான்: -![finished terrarium](../../../../translated_images/ta/terrarium-final.2f07047ffc597d0a.png) +![finished terrarium](../../../../translated_images/ta/terrarium-final.2f07047ffc597d0a.webp) **உங்கள் சவால்:** - **மென்மையான வெள்ளை அல்லது இலகுவான நிற oval வடிவங்களை** கண்ணாடி பிரதிபலிப்புகளுக்கு உருவாக்கவும் diff --git a/translations/ta/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/ta/3-terrarium/3-intro-to-DOM-and-closures/README.md index d1999af5e..7271d1a4b 100644 --- a/translations/ta/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/ta/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -25,7 +25,7 @@ journey Test functionality: 5: Student Complete terrarium: 5: Student ``` -![DOM மற்றும் ஒரு மூடி](../../../../translated_images/ta/webdev101-js.10280393044d7eaa.png) +![DOM மற்றும் ஒரு மூடி](../../../../translated_images/ta/webdev101-js.10280393044d7eaa.webp) > ஸ்கெட்ச் நோட் [Tomomi Imura](https://twitter.com/girlie_mac) அவரால் இணைய விருத்தியின் மிகவும் ஈடுபாட்டுக்குரிய அம்சங்களில் ஒன்றிற்கு வருகை - விஷயங்களை தொடர்புடையதாக மாற்றுதல்! டாக்குமென்ட் ஆப்ஜெக்ட் மோடைல் (DOM) உங்கள் HTML மற்றும் JavaScript இடையேயான பாலம் போன்றது, இன்று நாம் இதைப் பயன்படுத்தி உங்கள் டெராரியம் வாழ் உயிராக மாற்றுவோம். டிம் பெர்னர்ஸ்-லி முதலாம் வலை உலாவியை உருவாக்கிய போது, ஆவணம் இயக்கக்கூடிய மற்றும் தொடர்புடையவையாக இருக்கக்கூடிய இணையத்தை கற்பனை செய்தார் - DOM அந்த கற்பனையை நிகழ்வாக்குகிறது. @@ -102,7 +102,7 @@ flowchart TD style P fill:#ffebee style Q fill:#ffebee ``` -![DOM மர பிரதியம்](../../../../translated_images/ta/dom-tree.7daf0e763cbbba92.png) +![DOM மர பிரதியம்](../../../../translated_images/ta/dom-tree.7daf0e763cbbba92.webp) > DOM மற்றும் அதனை குறிப்பிடும் HTML குறியீட்டின் பிரதியம். [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) அவரின் பணி @@ -146,7 +146,7 @@ flowchart LR ``` > 💡 **மூடுபணிகளைப் புரிந்து கொள்ளுதல்**: மூடுபணிகள் JavaScript இல் முக்கியமான தலைப்புகளில் ஒன்றுதான், பல டெவலப்பர்கள் ஆண்டுகளுக்குப் பிறகு முழுமையாக புரிந்து கொள்கிறார்கள். இன்று, பயிற்சி பயன்பாட்டில் கவனம் செலுத்துவோம் - நம்முடைய தொடர்புடைய அம்சங்களை உருவாக்கும் போது மூடுபணிகள் இயல்பாக தோன்றும். உணர்வு வளரும். -![DOM மர பிரதியம்](../../../../translated_images/ta/dom-tree.7daf0e763cbbba92.png) +![DOM மர பிரதியம்](../../../../translated_images/ta/dom-tree.7daf0e763cbbba92.webp) > DOM மற்றும் அதனை குறிப்பிடும் HTML குறியீட்டின் பிரதியம். [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) அவரின் பணி @@ -591,7 +591,7 @@ function stopElementDrag() { - **கருவி உயர் ஆதரவு**: டெஸ்க் டாப் மற்றும் மொபைல் இரண்டிலும் வேலை செய்கிறது - **செயற்பாட்டு விழிப்புணர்வு**: நினைவகக் கசிவுகளோடும் கூடுதல் கணக்கீடுகளோடும் தவிர்க்கல் -![முழுமையான உருண்டம்](../../../../translated_images/ta/terrarium-final.0920f16e87c13a84.png) +![முழுமையான உருண்டம்](../../../../translated_images/ta/terrarium-final.0920f16e87c13a84.webp) --- diff --git a/translations/ta/3-terrarium/solution/README.md b/translations/ta/3-terrarium/solution/README.md index 3b359c9f4..b6655831a 100644 --- a/translations/ta/3-terrarium/solution/README.md +++ b/translations/ta/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: சிறிய டிராக் மற்றும் டிராப் கோட்-தியானம். சிறிது HTML, JS மற்றும் CSS கொண்டு, நீங்கள் ஒரு வலை இடைமுகத்தை உருவாக்கி, அதை அலங்கரித்து, ஒரு தொடர்பைச் சேர்க்கலாம். -![என் டெரேரியம்](../../../../translated_images/ta/screenshot_gray.0c796099a1f9f25e.png) +![என் டெரேரியம்](../../../../translated_images/ta/screenshot_gray.0c796099a1f9f25e.webp) ## க்ரெடிட்கள் diff --git a/translations/ta/5-browser-extension/1-about-browsers/README.md b/translations/ta/5-browser-extension/1-about-browsers/README.md index b9f04a7c2..25278a67e 100644 --- a/translations/ta/5-browser-extension/1-about-browsers/README.md +++ b/translations/ta/5-browser-extension/1-about-browsers/README.md @@ -25,7 +25,7 @@ journey பிழைகளைத் திருத்து: 4: Student அனுபவத்தை சீமை செய்யவும்: 5: Student ``` -![Browser sketchnote](../../../../translated_images/ta/browser.60317c9be8b7f84a.jpg) +![Browser sketchnote](../../../../translated_images/ta/browser.60317c9be8b7f84a.webp) > ஸ்கெட்நோட்: [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## முன்னேற்கல்வி வினாடி-வினா @@ -77,7 +77,7 @@ mindmap ✅ **சிறிய வரலாறு**: முதல் உலாவி 'WorldWideWeb' என்று அழைக்கப்பட்டது மற்றும் 1990-இல் சர Тимothy Berners-Lee உருவாக்கினார். -![early browsers](../../../../translated_images/ta/earlybrowsers.d984b711cdf3a42d.jpg) +![early browsers](../../../../translated_images/ta/earlybrowsers.d984b711cdf3a42d.webp) > சில ஆரம்ப உலாவிகள், [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) மூலம் ### உலாவிகள் வலை உள்ளடக்கத்தை எப்படிச் செயலாக்குகின்றன @@ -194,7 +194,7 @@ quadrantChart நீடிப்புரு நிறுவல் செயல்முறையைப் புரிந்துகொள்வது உங்கள் நீடிப்புரு பயனர் அனுபவத்தை கணிக்க உதவும். நிறுவல் செயல்முறை நவீன உலாவிகளில் ஒரே மாதிரியாக உள்ளது, இடைமுக வடிவமைப்பில் சிறிய வேறுபாடுகளுடன். -![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/ta/install-on-edge.d68781acaf0b3d3d.png) +![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/ta/install-on-edge.d68781acaf0b3d3d.webp) > **முக்கியம்**: உங்கள் நீடிப்புருகளை சோதிக்கும் போது உருவாக்குநர் முறையை இயக்கவும் மற்றும் பிற கடைகளிலிருந்து நீடிப்புருக்களை அனுமதிக்கவும். @@ -308,10 +308,10 @@ project-root/ ### நீடிப்புரு பார்வை சுருக்கம் **அமைப்பு பார்வை** - முதல் முறையாக பயனர் அமைப்பு: -![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/ta/1.b6da8c1394b07491.png) +![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/ta/1.b6da8c1394b07491.webp) **முடிவுகள் பார்வை** - கார்பன் பாதைபாதை தரவு காட்டுதல்: -![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/ta/2.1dae52ff08042246.png) +![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/ta/2.1dae52ff08042246.webp) ### அமைப்பு படிவத்தை உருவாக்குதல் diff --git a/translations/ta/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/ta/5-browser-extension/2-forms-browsers-local-storage/README.md index db29e0e4b..4964b4527 100644 --- a/translations/ta/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/ta/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -263,7 +263,7 @@ stateDiagram-v2 Reset --> ClearStorage: சேமிக்கப்பட்ட தரவை அகற்று ClearStorage --> FirstTime: அமைப்பிற்கு திரும்பு ``` -![Local storage pane](../../../../translated_images/ta/localstorage.472f8147b6a3f8d1.png) +![Local storage pane](../../../../translated_images/ta/localstorage.472f8147b6a3f8d1.webp) > ⚠️ **பாதுகாப்பு கவனம்**: உற்பத்தி பயன்பாடுகளில், API விசைகளை LocalStorageயில் வைக்குவது பாதுகாப்பு ஆபத்துக்களை உருவாக்கும், ஏனெனில் JavaScript இவைகளை அணுக முடியும். கற்றலுக்கான நோக்கில் இது சரி, ஆனால் உண்மையான பயன்பாடுகள் நுண்ணறிந்த கிரிடென்ஷியல்களுக்கு பாதுகாப்பான சர்வர் பக்க சேமிப்பை பயன்படுத்த வேண்டும். diff --git a/translations/ta/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/ta/5-browser-extension/3-background-tasks-and-performance/README.md index 7ced5e740..5e39b0310 100644 --- a/translations/ta/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/ta/5-browser-extension/3-background-tasks-and-performance/README.md @@ -123,7 +123,7 @@ flowchart LR இதைக் கடைபிடியுங்கள். ஒரு வலைத்தளத்தை திறக்கவும் (Microsoft.com நல்லது) மற்றும் ‘Record’ பொத்தானைக் கிளிக் செய்க. இப்போது பக்கத்தைக் கச்சிதமாக புதுப்பிக்கவும், செயல்முறை சுடுகாட்டைப் பின்தொடர்க. பதிவு நிறுத்தும் பொழுது, உலாவி எப்படி 'script', 'render', மற்றும் 'paint' செய்கிறது என்பதற்கான விரிவான உடலமைப்பைப் பார்ப்பீர்கள். இது ராக்கெட் தொடக்கத்தில் மிஷன் கட்டுப்பாடு ஒவ்வொரு அமைப்பையும் கண்காணிப்பதை நினைவூட்டுகிறது - நீங்கள் என்ன எப்போது நடக்கிறது என்பதை நேரடி தரவாகப் பெறுவீர்கள். -![Edge profiler](../../../../translated_images/ta/profiler.5a4a62479c5df01c.png) +![Edge profiler](../../../../translated_images/ta/profiler.5a4a62479c5df01c.webp) ✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) இல் மேலும் விரிவான தகவல்களை பெறலாம் @@ -133,11 +133,11 @@ flowchart LR தேர்ந்தெடுத்த பாகத்தில் பார்வை கட்டளையில் உங்கள் பக்க செயல்திறனின் ஸ்நாப்ஷாட் பெறவும்: -![Edge profiler snapshot](../../../../translated_images/ta/snapshot.97750180ebcad737.png) +![Edge profiler snapshot](../../../../translated_images/ta/snapshot.97750180ebcad737.webp) ஈவென்ட் பதிவு பகுதியைப் பாருங்கள், 15 மில்லி விநாடிகள் விட நீண்ட நேரம் எடுத்த எந்த நிகழ்வேயும் உள்ளதா என்பதை தெரிந்து கொள்ள: -![Edge event log](../../../../translated_images/ta/log.804026979f3707e0.png) +![Edge event log](../../../../translated_images/ta/log.804026979f3707e0.webp) ✅ உங்கள் செயல்திறன் சோதனையாளர் கருவியை அறிந்துகொள்ளுங்கள்! இந்த தளத்தின் டெவலப்பர் கருவிகளை திறந்து வழுக்குகள் உள்ளதா என்று பாருங்களேன். எது மெதுவாக ஏற்றுகிறது? எது வேகமாக? diff --git a/translations/ta/5-browser-extension/README.md b/translations/ta/5-browser-extension/README.md index a71409c87..e368f36a4 100644 --- a/translations/ta/5-browser-extension/README.md +++ b/translations/ta/5-browser-extension/README.md @@ -23,7 +23,7 @@ CO_OP_TRANSLATOR_METADATA: ### க்ரெடிட்ஸ் -![ஒரு பச்சை உலாவி நீட்டிப்பு](../../../translated_images/ta/extension-screenshot.0e7f5bfa110e92e3.png) +![ஒரு பச்சை உலாவி நீட்டிப்பு](../../../translated_images/ta/extension-screenshot.0e7f5bfa110e92e3.webp) ## க்ரெடிட்ஸ் diff --git a/translations/ta/5-browser-extension/solution/README.md b/translations/ta/5-browser-extension/solution/README.md index 4a0d0ff1b..444a89a34 100644 --- a/translations/ta/5-browser-extension/solution/README.md +++ b/translations/ta/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow இன் CO2 Signal API ஐ பயன்படுத்தி மின்சார பயன்பாட்டை கண்காணிக்க, உலாவியில் உங்கள் பிராந்தியத்தின் மின்சார பயன்பாட்டின் அளவை நினைவூட்டும் ஒரு உலாவி நீட்டிப்பை உருவாக்குங்கள். இந்த நீட்டிப்பை தற்செயலாக பயன்படுத்துவது, இந்த தகவலின் அடிப்படையில் உங்கள் செயல்பாடுகளைப் பற்றி தீர்மானங்களை எடுக்க உதவும். -![extension screenshot](../../../../translated_images/ta/extension-screenshot.0e7f5bfa110e92e3.png) +![extension screenshot](../../../../translated_images/ta/extension-screenshot.0e7f5bfa110e92e3.webp) ## தொடங்குவது எப்படி @@ -31,7 +31,7 @@ npm run build Edge உலாவியில் நிறுவ, உலாவியின் மேல் வலது மூலையில் உள்ள 'மூன்று புள்ளி' மெனுவைப் பயன்படுத்தி Extensions குழுவைத் தேடவும். அங்கிருந்து 'Load Unpacked' ஐத் தேர்ந்தெடுத்து புதிய நீட்டிப்பை ஏற்றவும். கேட்கப்படும் போது 'dist' கோப்புறையைத் திறக்கவும், நீட்டிப்பு ஏற்றப்படும். இதைப் பயன்படுத்த, CO2 Signal API க்கான API விசை ([இங்கே மின்னஞ்சல் மூலம் பெறவும்](https://www.co2signal.com/) - இந்த பக்கத்தில் உங்கள் மின்னஞ்சலைப் பெட்டியில் உள்ளிடவும்) மற்றும் [Electricity Map](https://www.electricitymap.org/map) உடன் தொடர்புடைய [உங்கள் பிராந்தியத்தின் குறியீடு](http://api.electricitymap.org/v3/zones) தேவைப்படும் (உதாரணமாக, Boston இல், நான் 'US-NEISO' ஐப் பயன்படுத்துகிறேன்). -![installing](../../../../translated_images/ta/install-on-edge.78634f02842c4828.png) +![installing](../../../../translated_images/ta/install-on-edge.78634f02842c4828.webp) API விசை மற்றும் பிராந்திய குறியீடு நீட்டிப்பு இடைமுகத்தில் உள்ளிடப்பட்டவுடன், உலாவி நீட்டிப்பு பட்டையில் உள்ள வண்ண புள்ளி உங்கள் பிராந்தியத்தின் ஆற்றல் பயன்பாட்டை பிரதிபலிக்க மாற்ற வேண்டும் மற்றும் ஆற்றல் அதிகம் பயன்படுத்தும் செயல்பாடுகளைச் செய்ய உகந்த பரிந்துரையை வழங்க வேண்டும். இந்த 'புள்ளி' அமைப்பின் கருத்து [Energy Lollipop extension](https://energylollipop.com/) மூலம் California உமிழ்வுகளுக்காக வழங்கப்பட்டது. diff --git a/translations/ta/5-browser-extension/solution/translation/README.fr.md b/translations/ta/5-browser-extension/solution/translation/README.fr.md index fa7edfb98..2005269fd 100644 --- a/translations/ta/5-browser-extension/solution/translation/README.fr.md +++ b/translations/ta/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow இன் C02 Signal API ஐ பயன்படுத்தி மின்சார பயன்பாட்டை கண்காணிக்க, உங்களது உலாவியில் நேரடியாக உங்கள் பகுதியில் மின்சார பயன்பாட்டை நினைவூட்டும் ஒரு உலாவி நீட்டிப்பை உருவாக்குங்கள். இந்த நீட்டிப்பை பயன்படுத்துவது, இந்த தகவல்களின் அடிப்படையில் உங்கள் செயல்பாடுகளை மதிப்பீடு செய்ய உதவும். -![extension screenshot](../../../../../translated_images/ta/extension-screenshot.0e7f5bfa110e92e3.png) +![extension screenshot](../../../../../translated_images/ta/extension-screenshot.0e7f5bfa110e92e3.webp) ## தொடங்குதல் @@ -31,7 +31,7 @@ npm run build Edge-ல் நிறுவ, உலாவியின் மேல் வலது மூலையில் உள்ள 'மூன்று புள்ளிகள்' மெனுவைப் பயன்படுத்தி Extensions பேனலை கண்டறியவும். அங்கிருந்து, 'Charger l'extension décompressée' ஐத் தேர்ந்தெடுத்து புதிய நீட்டிப்பை ஏற்றவும். 'dist' கோப்புறையைத் திறக்கவும், நீட்டிப்பு ஏற்றப்படும். இதைப் பயன்படுத்த, CO2 Signal API க்கான API கீ (இங்கே மின்னஞ்சல் மூலம் [ஒரு கீ பெறுங்கள்](https://www.co2signal.com/) - இந்த பக்கத்தில் உள்ள பெட்டியில் உங்கள் மின்னஞ்சலை உள்ளிடவும்) மற்றும் [Electricity Map](https://www.electricitymap.org/map) உடன் தொடர்புடைய [உங்கள் பகுதி குறியீடு](http://api.electricitymap.org/v3/zones) தேவைப்படும் (பாஸ்டனில், உதாரணமாக, நான் 'US-NEISO' ஐப் பயன்படுத்துகிறேன்). -![installation](../../../../../translated_images/ta/install-on-edge.78634f02842c4828.png) +![installation](../../../../../translated_images/ta/install-on-edge.78634f02842c4828.webp) API கீ மற்றும் பகுதி குறியீடு நீட்டிப்பு இடைமுகத்தில் உள்ளிடப்பட்டவுடன், உலாவி நீட்டிப்பு பட்டையில் உள்ள நிறமுள்ள புள்ளி உங்கள் பகுதியின் மின்சார பயன்பாட்டை பிரதிபலிக்க மாற்ற வேண்டும், மேலும் உங்களுக்கு பொருத்தமான ஆற்றல்-மிகைப்படுத்தும் செயல்பாடுகளைச் செய்ய ஒரு குறியீட்டை வழங்க வேண்டும். இந்த 'புள்ளி' அமைப்பின் கருத்து எனக்கு [Energy Lollipop](https://energylollipop.com/) நீட்டிப்பின் மூலம் கலிபோர்னியா வெளியீடுகளுக்காக வழங்கப்பட்டது. diff --git a/translations/ta/5-browser-extension/solution/translation/README.hi.md b/translations/ta/5-browser-extension/solution/translation/README.hi.md index 2d0887cce..044966260 100644 --- a/translations/ta/5-browser-extension/solution/translation/README.hi.md +++ b/translations/ta/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: மின்சார பயன்பாட்டை கண்காணிக்க tmrow இன் C02 சிக்னல் API ஐப் பயன்படுத்தி, உலாவியில் உங்கள் பகுதியில் மின்சார பயன்பாடு எவ்வளவு அதிகமாக உள்ளது என்பதை நினைவூட்டும் ஒரு உலாவி நீட்டிப்பை உருவாக்குதல். இந்த நீட்டிப்பைப் பயன்படுத்துவதன் மூலம், இந்த தகவலின் அடிப்படையில் உங்கள் செயல்பாடுகளை முடிவு செய்ய உதவுகிறது. -![நீட்டிப்பு ஸ்கிரீன்ஷாட் ](../../../../../translated_images/ta/extension-screenshot.0e7f5bfa110e92e3.png) +![நீட்டிப்பு ஸ்கிரீன்ஷாட் ](../../../../../translated_images/ta/extension-screenshot.0e7f5bfa110e92e3.webp) ## தொடங்குதல் @@ -31,7 +31,7 @@ npm run build Edge உலாவியில் நிறுவ, உலாவியின் மேல் வலது மூலையில் உள்ள 'மூன்று புள்ளி' மெனுவைப் பயன்படுத்தி நீட்டிப்பு குழுவைத் தேடவும். அங்கு, ஒரு புதிய நீட்டிப்பை ஏற்ற 'Load Unpacked' ஐத் தேர்ந்தெடுக்கவும். ப்ராம்ப்டில் 'dist' கோப்பகத்தைத் திறக்கவும், நீட்டிப்பு ஏற்றப்படும். இதைப் பயன்படுத்த, CO2 சிக்னல் API ([மின்னஞ்சல் மூலம் இங்கே பெறவும்](https://www.co2snal.com/) API விசையுடன் - இந்த பக்கத்தில் உள்ள பெட்டியில் உங்கள் மின்னஞ்சலை உள்ளிடவும்) மற்றும் [உங்கள் பகுதியில் உள்ள குறியீடு](http://api.electricitymap.org/v3/zones) [மின்சார வரைபடம்](https://www.electricitymap.org/map) (உதாரணமாக, Boston இல், நான் 'US-NEISO' ஐப் பயன்படுத்துகிறேன்). -![நிறுவல்](../../../../../translated_images/ta/install-on-edge.78634f02842c4828.png) +![நிறுவல்](../../../../../translated_images/ta/install-on-edge.78634f02842c4828.webp) API விசை மற்றும் பகுதி நீட்டிப்பு இடைமுகத்தில் உள்ளீடு செய்யப்பட்ட பிறகு, உலாவி நீட்டிப்பு பட்டையில் உள்ள வண்ண புள்ளி உங்கள் பகுதியில் உள்ள ஆற்றல் பயன்பாட்டை பிரதிபலிக்க மாற்ற வேண்டும், மேலும் ஆற்றல்-அதிக செயல்பாடுகள் உங்கள் செயல்பாட்டுக்கு ஏற்றதா என்பதை ஒரு குறிகாட்டி வழங்க வேண்டும். இந்த 'புள்ளி' முறையின் பின்னால் உள்ள கருத்து எனக்கு கலிபோர்னியா உமிழ்வுகளுக்கான [Energy Lollipop Extension](https://energylollipop.com/) மூலம் கிடைத்தது. diff --git a/translations/ta/5-browser-extension/solution/translation/README.it.md b/translations/ta/5-browser-extension/solution/translation/README.it.md index e0e382246..fd832e8ca 100644 --- a/translations/ta/5-browser-extension/solution/translation/README.it.md +++ b/translations/ta/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow இன் Signal C02 API ஐ மின்சார பயன்பாட்டை கண்காணிக்க பயன்படுத்தி உலாவி நீட்டிப்பை உருவாக்கப் போகிறோம். இதன் மூலம் உங்கள் பிராந்தியத்தில் மின்சார பயன்பாடு எவ்வளவு அதிகமாக உள்ளது என்பதை உங்கள் உலாவியில் நேரடியாக நினைவூட்டியாகக் கொள்ளலாம். இந்த தனிப்பயன் நீட்டிப்பைப் பயன்படுத்துவது இந்த தகவல்களை அடிப்படையாகக் கொண்டு உங்கள் செயல்பாடுகளை மதிப்பீடு செய்ய உதவும். -![நீட்டிப்பு திரை](../../../../../translated_images/ta/extension-screenshot.0e7f5bfa110e92e3.png) +![நீட்டிப்பு திரை](../../../../../translated_images/ta/extension-screenshot.0e7f5bfa110e92e3.webp) ## தொடங்குவதற்கு @@ -31,7 +31,7 @@ npm run build Edge இல் நிறுவ, உலாவியின் மேல் வலது மூலையில் உள்ள "மூன்று புள்ளிகள்" மெனுவைப் பயன்படுத்தி நீட்டிப்புகள் குழுமத்தைத் தேடவும். ஏற்கனவே செயல்படுத்தப்படவில்லை என்றால், டெவலப்பர் முறையை (கீழே இடது மூலையில்) இயக்கவும். புதிய நீட்டிப்பை ஏற்ற "சுருக்கப்படாதவை ஏற்றவும்" என்பதைத் தேர்ந்தெடுக்கவும். "dist" கோப்புறையைத் திறக்கவும், நீட்டிப்பு ஏற்றப்படும். இதைப் பயன்படுத்த, CO2 Signal API க்கான API விசை தேவைப்படும் (இதை [மின்னஞ்சல் மூலம் இங்கே பெறலாம்](https://www.co2signal.com/) - இந்த பக்கத்தில் உங்கள் மின்னஞ்சலைப் பதிவு செய்யவும்) மற்றும் [மின்சார மாப்புக்கு](https://www.electricitymap.org/map) பொருந்தும் [உங்கள் பிராந்தியத்தின் குறியீடு](http://api.electricitymap.org/v3/zones) (உதாரணமாக, Boston இல் "US-NEISO"). -![நிறுவல்](../../../../../translated_images/ta/install-on-edge.78634f02842c4828.png) +![நிறுவல்](../../../../../translated_images/ta/install-on-edge.78634f02842c4828.webp) API விசையும் பிராந்திய தகவலும் நீட்டிப்பு இடைமுகத்தில் உள்ளீடு செய்யப்பட்டவுடன், உலாவி நீட்டிப்பு பட்டையில் உள்ள நிறமுள்ள புள்ளி உங்கள் பிராந்தியத்தின் மின்சார பயன்பாட்டை பிரதிபலிக்க மாற்ற வேண்டும் மற்றும் அதிக மின்சாரத்தைப் பயன்படுத்தும் செயல்பாடுகளைச் செய்ய ஏற்றதாக இருக்கும். இந்த "புள்ளி" அமைப்பின் அடிப்படை கருத்து [Energy Lollipop நீட்டிப்பால்](https://energylollipop.com/) கலிபோர்னியாவின் உமிழ்வுகளுக்காக வழங்கப்பட்டது. diff --git a/translations/ta/5-browser-extension/solution/translation/README.ja.md b/translations/ta/5-browser-extension/solution/translation/README.ja.md index aaec8a7ef..34c605227 100644 --- a/translations/ta/5-browser-extension/solution/translation/README.ja.md +++ b/translations/ta/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow இன் CO2 சிக்னல் API ஐப் பயன்படுத்தி, உங்கள் பகுதியில் உள்ள மின்சார பயன்பாட்டின் அளவை உலாவியில் நினைவூட்டியாகக் காட்டும் நீட்டிப்பை உருவாக்குவோம். இந்த நீட்டிப்பை தற்காலிகமாகப் பயன்படுத்துவதன் மூலம், இந்த தகவலின் அடிப்படையில் உங்கள் செயல்பாடுகளை முடிவு செய்யலாம். -![extension screenshot](../../../../../translated_images/ta/extension-screenshot.0e7f5bfa110e92e3.png) +![extension screenshot](../../../../../translated_images/ta/extension-screenshot.0e7f5bfa110e92e3.webp) ## தொடக்கக்கட்டம் @@ -31,7 +31,7 @@ npm run build Edge உலாவியில் நிறுவ, உலாவியின் வலது மேல் மூலையில் உள்ள "மூன்று புள்ளிகள்" மெனுவில் "Extensions" பானலைத் தேடவும். அங்கு "Load Unpacked" ஐத் தேர்ந்தெடுத்து புதிய நீட்டிப்பை ஏற்றவும். உத்தரவாதத்தில் "dist" கோப்பகத்தைத் திறக்கவும், நீட்டிப்பு ஏற்றப்படும். பயன்படுத்த, CO2 சிக்னல் API க்கான API கீ ([இங்கே மின்னஞ்சல் மூலம் பெறவும்](https://www.co2signal.com/) - இந்த பக்கத்தில் உள்ள பெட்டியில் உங்கள் மின்னஞ்சலை உள்ளிடவும்) மற்றும் [Electricity Map](https://www.electricitymap.org/map) உடன் பொருந்தும் [உங்கள் பகுதியின் குறியீடு](http://api.electricitymap.org/v3/zones) தேவை (பாஸ்டனில், உதாரணமாக, 'US-NEISO' பயன்படுத்தப்படுகிறது). -![installing](../../../../../translated_images/ta/install-on-edge.78634f02842c4828.png) +![installing](../../../../../translated_images/ta/install-on-edge.78634f02842c4828.webp) API கீ மற்றும் பகுதியை நீட்டிப்பு இடைமுகத்தில் உள்ளிடும் போது, உலாவி நீட்டிப்பு பட்டையில் தோன்றும் வண்ண புள்ளி மாறும். இது உங்கள் பகுதியின் மின்சார பயன்பாட்டை பிரதிபலிக்கிறது மற்றும் எந்த வகையான மின்சாரத்தை தேவைப்படும் செயல்பாடுகளைச் செய்யலாம் என்பதை காட்டுகிறது. இந்த "புள்ளி" அமைப்பின் கருத்து, கலிபோர்னியாவின் வெளியீடுகளுக்கான [Energy Lollipop extension](https://energylollipop.com/) எனக்கு அளித்தது. diff --git a/translations/ta/5-browser-extension/solution/translation/README.ms.md b/translations/ta/5-browser-extension/solution/translation/README.ms.md index d50c3926c..9d87f3d75 100644 --- a/translations/ta/5-browser-extension/solution/translation/README.ms.md +++ b/translations/ta/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: C02 tmrow API-யை பயன்படுத்தி மின்சார பயன்பாட்டை கண்டறிந்து, உங்கள் பிராந்தியத்தின் மின்சார பயன்பாட்டின் தாக்கத்தை உலாவியில் எச்சரிக்க செய்யும் ஒரு உலாவி நீட்டிப்பை உருவாக்குங்கள். இந்த நீட்டிப்பை பயன்படுத்துவதன் மூலம், இந்த தகவலின் அடிப்படையில் உங்கள் செயல்பாடுகளைப் பற்றி சிந்திக்க உதவும். -![உலாவி நீட்டிப்பு ஸ்கிரீன்ஷாட்](../../../../../translated_images/ta/extension-screenshot.0e7f5bfa110e92e3.png) +![உலாவி நீட்டிப்பு ஸ்கிரீன்ஷாட்](../../../../../translated_images/ta/extension-screenshot.0e7f5bfa110e92e3.webp) ## இங்கே இருந்து தொடங்குங்கள் @@ -31,7 +31,7 @@ npm run build Edge-ல் நிறுவ, உலாவியின் மேல் வலது மூலையில் உள்ள 'மூன்று புள்ளிகள்' மெனுவைப் பயன்படுத்தி நீட்டிப்பு பேனலைத் தேடவும். அங்கிருந்து, 'Load Unpacked' ஐத் தேர்ந்தெடுத்து புதிய நீட்டிப்பை ஏற்றவும். கோரிக்கையின் போது 'dist' கோப்புறையைத் திறக்கவும், நீட்டிப்பு ஏற்றப்படும். இதைப் பயன்படுத்த, CO2 சிக்னல் API க்கான API விசை ([இங்கே மின்னஞ்சல் மூலம் ஒன்றை பெறவும்](https://www.co2signal.com/) - இந்த பக்கத்தில் உள்ள பெட்டியில் உங்கள் மின்னஞ்சலை உள்ளிடவும்) மற்றும் [உங்கள் பிராந்தியத்திற்கான குறியீடு](http://api.electricitymap.org/v3/zones) தேவைப்படும், இது [மின்சார வரைபடத்துடன்](https://www.electricitymap.org/map) பொருந்தும் (பாஸ்டனில், எடுத்துக்காட்டாக, நான் 'US-NEISO' ஐப் பயன்படுத்துகிறேன்). -![பதிவிறக்கம் செய்யப்படுகிறது](../../../../../translated_images/ta/install-on-edge.78634f02842c4828.png) +![பதிவிறக்கம் செய்யப்படுகிறது](../../../../../translated_images/ta/install-on-edge.78634f02842c4828.webp) API விசை மற்றும் பிராந்தியத்தை நீட்டிப்பு இடைமுகத்தில் உள்ளிடிய பிறகு, உலாவி நீட்டிப்பு பட்டையில் உள்ள நிற புள்ளி உங்கள் பிராந்தியத்தின் மின்சார பயன்பாட்டை பிரதிபலிக்க மாறும் மற்றும் உங்களுக்கு பொருத்தமான செயல்பாடுகள் குறித்து வழிகாட்டும். இந்த 'புள்ளி' அமைப்பின் கருத்து [காலிஃபோர்னியாவுக்கான எரிசக்தி லாலிபாப் உலாவி நீட்டிப்பின்](https://energylollipop.com/) மூலம் எனக்கு கிடைத்தது. diff --git a/translations/ta/5-browser-extension/start/README.md b/translations/ta/5-browser-extension/start/README.md index 6b49308a6..40533a049 100644 --- a/translations/ta/5-browser-extension/start/README.md +++ b/translations/ta/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow இன் CO2 Signal API ஐ பயன்படுத்தி மின்சார பயன்பாட்டை கண்காணிக்க, உலாவியில் உங்கள் பிராந்தியத்தின் மின்சார பயன்பாட்டின் அளவை நினைவூட்டும் ஒரு உலாவி நீட்டிப்பை உருவாக்குங்கள். இந்த நீட்டிப்பை தற்செயலாக பயன்படுத்துவது, இந்த தகவலின் அடிப்படையில் உங்கள் செயல்பாடுகளைப் பற்றி தீர்மானங்களை எடுக்க உதவும். -![extension screenshot](../../../../translated_images/ta/extension-screenshot.0e7f5bfa110e92e3.png) +![extension screenshot](../../../../translated_images/ta/extension-screenshot.0e7f5bfa110e92e3.webp) ## தொடங்குவது எப்படி @@ -31,7 +31,7 @@ npm run build Edge உலாவியில் நிறுவ, உலாவியின் மேல் வலது மூலையில் உள்ள 'மூன்று புள்ளி' மெனுவைப் பயன்படுத்தி Extensions குழுவைத் தேடவும். அங்கிருந்து 'Load Unpacked' ஐத் தேர்ந்தெடுத்து புதிய நீட்டிப்பை ஏற்றவும். கேட்கப்படும் போது 'dist' கோப்புறையைத் திறக்கவும், நீட்டிப்பு ஏற்றப்படும். இதைப் பயன்படுத்த, CO2 Signal API க்கான API விசை ([இங்கே மின்னஞ்சல் மூலம் பெறவும்](https://www.co2signal.com/) - இந்த பக்கத்தில் உங்கள் மின்னஞ்சலைப் பெட்டியில் உள்ளிடவும்) மற்றும் [Electricity Map](https://www.electricitymap.org/map) உடன் தொடர்புடைய [உங்கள் பிராந்தியத்தின் குறியீடு](http://api.electricitymap.org/v3/zones) தேவைப்படும் (உதாரணமாக, Boston இல், நான் 'US-NEISO' ஐப் பயன்படுத்துகிறேன்). -![installing](../../../../translated_images/ta/install-on-edge.78634f02842c4828.png) +![installing](../../../../translated_images/ta/install-on-edge.78634f02842c4828.webp) API விசை மற்றும் பிராந்திய குறியீடு நீட்டிப்பு இடைமுகத்தில் உள்ளிடப்பட்டவுடன், உலாவி நீட்டிப்பு பட்டையில் உள்ள வண்ண புள்ளி உங்கள் பிராந்தியத்தின் ஆற்றல் பயன்பாட்டை பிரதிபலிக்க மாற்ற வேண்டும் மற்றும் ஆற்றல் அதிகம் தேவைப்படும் செயல்பாடுகளைச் செய்ய உகந்த பரிந்துரையை வழங்க வேண்டும். இந்த 'புள்ளி' அமைப்பின் கருத்து [Energy Lollipop extension](https://energylollipop.com/) மூலம் California உமிழ்வுகளுக்காக எனக்கு வழங்கப்பட்டது. diff --git a/translations/ta/6-space-game/2-drawing-to-canvas/README.md b/translations/ta/6-space-game/2-drawing-to-canvas/README.md index 522d53b53..7f8981c4e 100644 --- a/translations/ta/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/ta/6-space-game/2-drawing-to-canvas/README.md @@ -105,7 +105,7 @@ quadrantChart Power-up: [0.7, 0.6] UI Elements: [0.9, 0.1] ``` -![கன்வாஸ் பட்டு](../../../../translated_images/ta/canvas_grid.5f209da785ded492.png) +![கன்வாஸ் பட்டு](../../../../translated_images/ta/canvas_grid.5f209da785ded492.webp) > படம் இதிலிருந்து [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) கன்வாஸ் கூறில் வரைவு செய்வதற்கு, அனைத்து கன்வாஸ் கிராபிக்ஸ் அடிப்படையாக மாறும் மூன்று படிகள் உள்ளன. இதை மீண்டும் மீண்டும் செய்து பார்க்கும்போது இது இயல்பானதாக மாறும்: @@ -323,11 +323,11 @@ Canvas கூறுடன் கூடிய ஒரு வலைப்பக் - ஹீரோ கப்பல் - ![Hero ship](../../../../translated_images/ta/player.dd24c1afa8c71e9b.png) + ![Hero ship](../../../../translated_images/ta/player.dd24c1afa8c71e9b.webp) - 5*5 பேய் அணி - ![Monster ship](../../../../translated_images/ta/enemyShip.5df2a822c16650c2.png) + ![Monster ship](../../../../translated_images/ta/enemyShip.5df2a822c16650c2.webp) ### வளர்ச்சியைத் தொடங்க பரிந்துரைகள் @@ -463,7 +463,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { செய்த முடிவு இதுபோல் தோன்ற வேண்டும்: -![Black screen with a hero and 5*5 monsters](../../../../translated_images/ta/partI-solution.36c53b48c9ffae2a.png) +![Black screen with a hero and 5*5 monsters](../../../../translated_images/ta/partI-solution.36c53b48c9ffae2a.webp) ## தீர்வு diff --git a/translations/ta/6-space-game/5-keeping-score/README.md b/translations/ta/6-space-game/5-keeping-score/README.md index a00dfb604..0ce216153 100644 --- a/translations/ta/6-space-game/5-keeping-score/README.md +++ b/translations/ta/6-space-game/5-keeping-score/README.md @@ -155,7 +155,7 @@ sequenceDiagram end ``` - **மதிப்பெண் அமைப்பு**: ஒவ்வொரு அழிக்கப்பட்ட எதிரி கப்பலுக்கும் 100 மதிப்பெண்கள் வழங்கப்படுகின்றன (கணக்கிட எளிதாக வட்ட எண்கள்). மதிப்பெண்ணை கீழே இடது மூலையில் காட்டுவோம். -- **வாழ்வு எண்ணிக்கையாளர்**: உங்கள் வீரர் மூன்று வாழ்வுகளுடன் தொடங்குகிறான் - ஆரம்ப அட்கேர் விளையாட்டுகளால் நிலைத்த பழக்கம், சவாலை சேர்க்கவும் விளையாடக்கூடிய தன்மையை சமநிலைப்படுத்த. ஒவ்வொரு எதிரி மோதலும் ஒரு வாழ்வு குறைக்கிறது. இத்துடன் வாழ்வுகளை கீழே வலது மூலையில் கப்பல் ஐகான்களுடன் ![life image](../../../../translated_images/ta/life.6fb9f50d53ee0413.png) காட்டுவோம். +- **வாழ்வு எண்ணிக்கையாளர்**: உங்கள் வீரர் மூன்று வாழ்வுகளுடன் தொடங்குகிறான் - ஆரம்ப அட்கேர் விளையாட்டுகளால் நிலைத்த பழக்கம், சவாலை சேர்க்கவும் விளையாடக்கூடிய தன்மையை சமநிலைப்படுத்த. ஒவ்வொரு எதிரி மோதலும் ஒரு வாழ்வு குறைக்கிறது. இத்துடன் வாழ்வுகளை கீழே வலது மூலையில் கப்பல் ஐகான்களுடன் ![life image](../../../../translated_images/ta/life.6fb9f50d53ee0413.webp) காட்டுவோம். ## கட்டமைப்போம்! diff --git a/translations/ta/7-bank-project/1-template-route/README.md b/translations/ta/7-bank-project/1-template-route/README.md index 085ce9cf1..9fe12083b 100644 --- a/translations/ta/7-bank-project/1-template-route/README.md +++ b/translations/ta/7-bank-project/1-template-route/README.md @@ -644,7 +644,7 @@ sequenceDiagram `history.pushState` உலாவி வரலாறு பட்டியலில் புதிய பதிவுகளை உருவாக்குகிறது. உலாவியின் *பின் பொத்தானைப்* சில நிலைகளுக்கு நீட்டிப்பதன் மூலம் நீங்கள் இதைச் சரிபார்க்கலாம், இதுபோல காண்பிக்கும்: -![Screenshot of navigation history](../../../../translated_images/ta/history.7fdabbafa521e064.png) +![Screenshot of navigation history](../../../../translated_images/ta/history.7fdabbafa521e064.webp) பின் பொத்தானை சில தடவைகள் கிளிக் செய்ய முயன்றால், தற்போதைய URL மாற்றப்பட்டாலும், வரலாறு புதுப்பிக்கப்பட்டாலும் அதே template காட்டப்படும். diff --git a/translations/ta/7-bank-project/2-forms/README.md b/translations/ta/7-bank-project/2-forms/README.md index 78f04b7e0..93a355a0a 100644 --- a/translations/ta/7-bank-project/2-forms/README.md +++ b/translations/ta/7-bank-project/2-forms/README.md @@ -292,7 +292,7 @@ graph TD 2. உலாவியின் முகவரி பட்டியில் மாற்றங்களை கவனிக்கவும் 3. பக்கத்தை மீள்-ஏற்றும் விதம் மற்றும் URL இல் தரவு தோன்றுவதை கவனியுங்கள் -![Register பொத்தானை அழுத்திய பிறகு உலாவியின் URL மாற்றம்](../../../../translated_images/ta/click-register.e89a30bf0d4bc9ca.png) +![Register பொத்தானை அழுத்திய பிறகு உலாவியின் URL மாற்றம்](../../../../translated_images/ta/click-register.e89a30bf0d4bc9ca.webp) ### HTTP Methods Comparison @@ -346,7 +346,7 @@ graph TD 2. "Create Account" பொத்தானை அழுத்தவும் 3. உலாவியில் சேவையக பதிலை கவனியுங்கள் -![localhost:5000/api/accounts முகவரியில் JSON தரவு காட்டும் உலாவி ஜன்னல்](../../../../translated_images/ta/form-post.61de4ca1b964d91a.png) +![localhost:5000/api/accounts முகவரியில் JSON தரவு காட்டும் உலாவி ஜன்னல்](../../../../translated_images/ta/form-post.61de4ca1b964d91a.webp) **நீங்கள் பார்க்கவேண்டியது:** - உலாவி API முகவரிக்கு மாற்றப்படுகிறது @@ -610,7 +610,7 @@ async function register() { 3. **"Create Account" என்பதைக் கிளிக் செய்யவும்** 4. **கன்சோல் செய்திகளையும் பயனர் பின்னூட்டத்தையும் கவனிக்கவும்** -![உலாவி கன்சோலில் பதிவு செய்யும் போது லாக் செய்தி காட்டும் திரைபடம்](../../../../translated_images/ta/browser-console.efaf0b51aaaf6778.png) +![உலாவி கன்சோலில் பதிவு செய்யும் போது லாக் செய்தி காட்டும் திரைபடம்](../../../../translated_images/ta/browser-console.efaf0b51aaaf6778.webp) **நீங்கள் பார்க்கவேண்டியது:** - **சமர்பிக்கும் பொத்தானில் எல்லா நிலையில் உள்ளதைக் காண்பிக்கும்** @@ -784,7 +784,7 @@ input:focus:invalid { 3. **பயனர்பெயர் புலத்தில் சிறப்பு எழுத்துக்களை முயற்சி செய்யவும்** 4. **எதிர்மறை இருப்பு மதிப்பை உள்ளிடவும்** -![படிவத்தை சமர்ப்பிக்க முயற்சிக்கும் போது சரிபார்ப்பு பிழை காண்பிக்கும் திரைபடம்](../../../../translated_images/ta/validation-error.8bd23e98d416c22f.png) +![படிவத்தை சமர்ப்பிக்க முயற்சிக்கும் போது சரிபார்ப்பு பிழை காண்பிக்கும் திரைபடம்](../../../../translated_images/ta/validation-error.8bd23e98d416c22f.webp) **நீங்கள் கவனிக்கப்போகும்:** - **உலாவி வளமான சரிபார்ப்பு செய்திகளை காட்டும்** @@ -944,7 +944,7 @@ Agent முறையைப் பயன்படுத்தி, கீழ் சிறிது CSS அலங்காரத்துடன் இறுதி பதிவு பக்கம் போன்றதாக இருக்கும் உதாரணம் இதோ: -![Screenshot of the login page after adding CSS styles](../../../../translated_images/ta/result.96ef01f607bf856a.png) +![Screenshot of the login page after adding CSS styles](../../../../translated_images/ta/result.96ef01f607bf856a.webp) ## படிப்பு முடிந்த பின் வினாத்தாள் diff --git a/translations/ta/7-bank-project/3-data/README.md b/translations/ta/7-bank-project/3-data/README.md index e930b1dec..1cd0246f5 100644 --- a/translations/ta/7-bank-project/3-data/README.md +++ b/translations/ta/7-bank-project/3-data/README.md @@ -156,7 +156,7 @@ sequenceDiagram Server->>Browser: முழுமையான HTML பக்கம் திரும்ப வழங்குகிறது Browser->>User: புதிய பக்கத்தை نمایش செய்கிறது (பிளாஷ்/மீண்டும் ஏற்றம்) ``` -![பல பக்க செயலியில் புதுப்பிப்பு பணிச்சூழல்](../../../../translated_images/ta/mpa.7f7375a1a2d4aa77.png) +![பல பக்க செயலியில் புதுப்பிப்பு பணிச்சூழல்](../../../../translated_images/ta/mpa.7f7375a1a2d4aa77.webp) **இந்த முறையால் சிக்கல் ஏன் மறைவது:** - ஒவ்வொரு கிளிக் நிரந்தரமாக முழு பக்கத்தை மறுதயார்த்து விடும் @@ -182,7 +182,7 @@ sequenceDiagram JavaScript->>Browser: குறிப்பிட்ட பக்க கூறுகளை புதுப்பிக்கிறது Browser->>User: புதுப்பிக்கப்பட்ட உள்ளடக்கத்தை காட்டு (மீண்டும் ஏற்றல் இல்லை) ``` -![ஒரே பக்க செயலியில் புதுப்பிப்பு பணிச்சூழல்](../../../../translated_images/ta/spa.268ec73b41f992c2.png) +![ஒரே பக்க செயலியில் புதுப்பிப்பு பணிச்சூழல்](../../../../translated_images/ta/spa.268ec73b41f992c2.webp) **SPAs இப்படி சிறப்பாக தோன்றுவது ஏன்:** - மாற்றம் நேர்ந்த குறிப்பிடப்பட்ட பகுதிகள் மட்டுமே புதுப்பிக்கப்படுகின்றன (அருவருப்பற்றது, சரியா?) @@ -516,7 +516,7 @@ if (data.error) { இப்போது தவறான கணக்குடன் சோதனையிடும்போது, பக்கத்தில் உதவியான பிழை செய்தி தோன்றும்! -![உள்நுழைவு பிழை செய்தி காட்சிப்படுத்தப்பட்டுள்ள ஸ்கிரீன் ஷாட்](../../../../translated_images/ta/login-error.416fe019b36a6327.png) +![உள்நுழைவு பிழை செய்தி காட்சிப்படுத்தப்பட்டுள்ள ஸ்கிரீன் ஷாட்](../../../../translated_images/ta/login-error.416fe019b36a6327.webp) #### படி 4: அணுகல் வசதிக்கு உள்ளுருவாக்குதல் @@ -952,7 +952,7 @@ timeline சான்றான ஒரு டாஷ்மோர்டின் தோற்றம் இதுவாக இருக்கலாம்: -![Screenshot of an example result of the dashboard after styling](../../../../translated_images/ta/screen2.123c82a831a1d14a.png) +![Screenshot of an example result of the dashboard after styling](../../../../translated_images/ta/screen2.123c82a831a1d14a.webp) இதை முழுமையாகப் பின்பற்ற வேண்டியதில்லை — இது உத்தேசமாகக் கொண்டிருக்கும், உங்கள் சொந்த அழகையாக்கிக் கொள்ளுங்கள்! diff --git a/translations/ta/7-bank-project/4-state-management/README.md b/translations/ta/7-bank-project/4-state-management/README.md index 43a89a1c8..7dfe8bd3f 100644 --- a/translations/ta/7-bank-project/4-state-management/README.md +++ b/translations/ta/7-bank-project/4-state-management/README.md @@ -187,7 +187,7 @@ mindmap நாம் தலை சுற்றி ஓடுவதைவிட, ஒரு **மைய நிலை நிர்வாக** அமைப்பை உருவாக்கப்போகிறோம். முக்கியமான அனைத்து விஷயங்களையும் ஒருவரே ஒழுங்குபடுத்துவார் போல கற்பனை செய்யுங்கள்: -![Schema showing the data flows between the HTML, user actions and state](../../../../translated_images/ta/data-flow.fa2354e0908fecc8.png) +![Schema showing the data flows between the HTML, user actions and state](../../../../translated_images/ta/data-flow.fa2354e0908fecc8.webp) ```mermaid flowchart TD @@ -802,7 +802,7 @@ timeline பணியை முடித்த பின் ஒரு உதாரண முடிவு: -![ஒரு உதாரண "பரிவர்த்தனைச் சேர்" உரையாடலைக் காண்கிற ஸ்கிரீன் ஷாட்](../../../../translated_images/ta/dialog.93bba104afeb79f1.png) +![ஒரு உதாரண "பரிவர்த்தனைச் சேர்" உரையாடலைக் காண்கிற ஸ்கிரீன் ஷாட்](../../../../translated_images/ta/dialog.93bba104afeb79f1.webp) --- diff --git a/translations/ta/7-bank-project/4-state-management/assignment.md b/translations/ta/7-bank-project/4-state-management/assignment.md index cdda32664..d8fef227e 100644 --- a/translations/ta/7-bank-project/4-state-management/assignment.md +++ b/translations/ta/7-bank-project/4-state-management/assignment.md @@ -113,7 +113,7 @@ CO_OP_TRANSLATOR_METADATA: **எதிர்பார்க்கும் முடிவு:** இந்த பணியை நிறைவு செய்த பிறகு, உங்கள் வங்கி செயலியில் தொழில்முறை தோற்றமும் செயல்பாடும் கொண்ட முழுமையான "பரிவர்த்தனை சேர்க்க" அம்சம் இருக்க வேண்டும்: -![ஒரு எடுத்துக்காட்டு "பரிவர்த்தனை சேர்க்க" உரையாடலை காட்டும் ஸ்கிரின்ஷாட்](../../../../translated_images/ta/dialog.93bba104afeb79f1.png) +![ஒரு எடுத்துக்காட்டு "பரிவர்த்தனை சேர்க்க" உரையாடலை காட்டும் ஸ்கிரின்ஷாட்](../../../../translated_images/ta/dialog.93bba104afeb79f1.webp) ## உங்கள் செயல்பாட்டை சோதனை செய்தல் diff --git a/translations/ta/7-bank-project/README.md b/translations/ta/7-bank-project/README.md index e52e9cad6..f675cc249 100644 --- a/translations/ta/7-bank-project/README.md +++ b/translations/ta/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: இந்த திட்டத்தில், நீங்கள் ஒரு கற்பனை வங்கியை உருவாக்குவது எப்படி என்பதை கற்றுக்கொள்வீர்கள். இந்த பாடங்கள் ஒரு வலை பயன்பாட்டை அமைப்பது மற்றும் வழிகள் வழங்குவது, படிவங்களை உருவாக்குவது, நிலையை நிர்வகிப்பது, மற்றும் API-இல் இருந்து வங்கியின் தரவுகளை பெறுவது போன்ற வழிமுறைகளை உள்ளடக்கியது. -| ![Screen1](../../../translated_images/ta/screen1.baccbba0f1f93364.png) | ![Screen2](../../../translated_images/ta/screen2.123c82a831a1d14a.png) | +| ![Screen1](../../../translated_images/ta/screen1.baccbba0f1f93364.webp) | ![Screen2](../../../translated_images/ta/screen2.123c82a831a1d14a.webp) | |--------------------------------|--------------------------------| ## பாடங்கள் diff --git a/translations/ta/8-code-editor/1-using-a-code-editor/README.md b/translations/ta/8-code-editor/1-using-a-code-editor/README.md index a8e93b91f..1b939b997 100644 --- a/translations/ta/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/ta/8-code-editor/1-using-a-code-editor/README.md @@ -182,7 +182,7 @@ VSCode.dev இந்த சக்திகளை உலாவியில் க எல்லாம் ஏற்றப்பட்டதும், நீங்கள் அழகாக சுத்தமான ஒரு பணிக்கிடையை பார்வையிடுவீர்கள், இது உங்களை உங்கள் குறியீடுங்கு கவனம் செலுத்த எளிதாக்கும்! -![Default VSCode.dev interface](../../../../translated_images/ta/default-vscode-dev.5d06881d65c1b323.png) +![Default VSCode.dev interface](../../../../translated_images/ta/default-vscode-dev.5d06881d65c1b323.webp) **கார்த்திடம் சுற்றியபடியே:** - **செயற்பாட்டு பட்டை** (இடதுபுறம் பட்டை): முக்கியத் திசைநிலை, Explorer 📁, Search 🔍, Source Control 🌿, Extensions 🧩, மற்றும் Settings ⚙️ உள்ளது @@ -229,7 +229,7 @@ VSCode.dev இல் புதியபடையாக இருந்து ஒ 1. [vscode.dev](https://vscode.dev)ல் போவதற்கு 2. வரவேற்பு திரையில் "Open Remote Repository" பொத்தானை காணவும் கிளிக் செய்யவும் - ![Open remote repository](../../../../translated_images/ta/open-remote-repository.bd9c2598b8949e7f.png) + ![Open remote repository](../../../../translated_images/ta/open-remote-repository.bd9c2598b8949e7f.webp) 3. எந்த GitHub சேமிப்பக URLயை வேண்டுமானாலும் ஒட்டவும் (உதாரணம்: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. Enter அழுத்தி மாயத்தை பாருங்கள்! @@ -238,7 +238,7 @@ VSCode.dev இல் புதியபடையாக இருந்து ஒ ஒரு குறியீட்டு குருவாக உணர விரும்புகிறீர்களா? இக் கீபோர்டு சுருக்கத்தை முயற்சி: Ctrl+Shift+P (அல்லது Macஇல் Cmd+Shift+P) கட்டளை பட்டி திறக்கும்: -![Command Palette](../../../../translated_images/ta/palette-menu.4946174e07f42622.png) +![Command Palette](../../../../translated_images/ta/palette-menu.4946174e07f42622.webp) **கட்டளை பட்டி உங்கள் எல்லா செயல்களுக்கும் தேடுபொறி போல:** - "open remote" என நுழைக்கும் போது தொடர்புடைய சேமிப்பகம் திறப்பு காட்டும் @@ -300,7 +300,7 @@ HTTP மற்றும் HTTPS protocol மாறுவது போல், VS 3. கோப்பின் பெயர் மற்றும் சரியான நீட்சியை உள்ளீடு செய்க (`style.css`, `script.js`, `index.html`) 4. Enter அழுத்தி கோப்பை உருவாக்கவும் -![Creating a new file](../../../../translated_images/ta/create-new-file.2814e609c2af9aeb.png) +![Creating a new file](../../../../translated_images/ta/create-new-file.2814e609c2af9aeb.webp) **பெயரிடல் நடைமுறைகள்:** - கோப்பின் குறிக்கோளை வெளிப்படுத்தும் விளக்கமான பெயர்கள் வையுங்கள் @@ -318,7 +318,7 @@ HTTP மற்றும் HTTPS protocol மாறுவது போல், VS 2. எழுத ஆரம்பித்து நீ விசுப்படம், பரிந்துரைகள் மற்றும் பிழை கண்டறிதல் அனுபவிக்க 3. Ctrl+S (Windows/Linux) அல்லது Cmd+S (Mac) மூலம் ஏற்றவும் – தானாக சேமிப்பும் உள்ளது! -![Editing files in VSCode.dev](../../../../translated_images/ta/edit-a-file.52c0ee665ef19f08.png) +![Editing files in VSCode.dev](../../../../translated_images/ta/edit-a-file.52c0ee665ef19f08.webp) **நீ குறியீடு எழுதும் போது நடக்கும் அற்புதங்கள்:** - குறியீடு அழகான நிறம் கொண்டது, வாசிக்க எளிது @@ -339,7 +339,7 @@ HTTP மற்றும் HTTPS protocol மாறுவது போல், VS 2. மாற்றிய கோப்புகள் "Changes" பகுதியில் காணப்படும் 3. நிறம் மூலம் மாற்றவகைகள் குறிக்கப்படும்: பசுமை சேர்க்கைகள், சிவப்பு அகற்றல்கள் -![Viewing changes in Source Control](../../../../translated_images/ta/working-tree.c58eec08e6335c79.png) +![Viewing changes in Source Control](../../../../translated_images/ta/working-tree.c58eec08e6335c79.webp) **உங்கள் பணியை சேமிக்கும் (commit பணிகளின் வேலைநெறி):** @@ -431,7 +431,7 @@ mindmap 2. சுற்றி பார்க்கவும் அல்லது ஏதாவது சிறப்பான ஒன்றை தேடவும் 3. ஆர்வமான ஒன்றை தேர்ந்தெடுக்கவும் அதன் விவரங்களை அறிய -![Extension marketplace interface](../../../../translated_images/ta/extensions.eca0e0c7f59a10b5.png) +![Extension marketplace interface](../../../../translated_images/ta/extensions.eca0e0c7f59a10b5.webp) **அங்கு நீங்கள் காணப்போகும் விஷயங்கள்:** @@ -484,7 +484,7 @@ mindmap 3. "Extension Settings" ஐத் தேர்ந்தெடுக்கவும் 4. உங்கள் வேலைப்பாட்டுக்கு பொருந்தும் வரை மாற்றங்கள் செய்யவும் -![Customizing extension settings](../../../../translated_images/ta/extension-settings.21c752ae4f4cdb78.png) +![Customizing extension settings](../../../../translated_images/ta/extension-settings.21c752ae4f4cdb78.webp) **மாதிரியான அமைப்புகள்:** - உங்கள் குறியீடு எப்படி வடிவமைக்கப்படுகிறது (Tabs vs Spaces, வரி நீளம், மற்றும் போன்றவை) diff --git a/translations/ta/8-code-editor/1-using-a-code-editor/assignment.md b/translations/ta/8-code-editor/1-using-a-code-editor/assignment.md index 77249b02a..804b546fb 100644 --- a/translations/ta/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/ta/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ VSCode.dev நிறுவுதலில் குறைந்தது ஒர 4. "Add initial HTML structure" என கமிட் செய்தலை எழுது 5. "Commit new file" கிளிக் செய்து மாற்றங்களைச் சேமிக்கவும் -![GitHub இல் ஆரம்ப கோப்பை உருவாக்குதல்](../../../../translated_images/ta/new-file-github.com.c886796d800e8056.png) +![GitHub இல் ஆரம்ப கோப்பை உருவாக்குதல்](../../../../translated_images/ta/new-file-github.com.c886796d800e8056.webp) **இந்த ஆரம்ப அமைப்பு எதை நிறைவேற்றுகிறது:** - உரிய HTML5 ஆவண கட்டமைப்பை அரசியல் உறுப்புகளுடன் **உருவாக்குகிறது** @@ -105,7 +105,7 @@ VSCode.dev நிறுவுதலில் குறைந்தது ஒர ✅ **வெற்றி குறியியல்**: உங்கள் திட்ட கோப்புகள் எக்ஸ்ப்ளோரரில் மற்றும் `index.html` முதன்மை தொகுப்பியில் திருத்தத்திற்கு கிடைக்கும். -![VSCode.dev இல் திட்டம் ஏற்றப்பட்டது](../../../../translated_images/ta/project-on-vscode.dev.e79815a9a95ee7fe.png) +![VSCode.dev இல் திட்டம் ஏற்றப்பட்டது](../../../../translated_images/ta/project-on-vscode.dev.e79815a9a95ee7fe.webp) **இந்த இடைமுகத்தில் நீங்கள் பார்க்கும் விஷயங்கள்:** - **எக்ஸ்ப்ளோரர் பக்கவுரு**: சேமிப்பகம் கோப்புகள் மற்றும் கோப்புறை அமைப்பை காட்சிப்படுத்தும் @@ -450,7 +450,7 @@ li:before { **நிறுவின்பின் உடனடியான விளைவுகள்:** CodeSwing நிறுவப்பட்டவுடன், தொகுப்பாளரிலேயே உங்கள் ரெசுமே வலைத்தளத்தின் நேரடி முன்னோட்டை காட்டும். மாற்றங்களைச் செய்தபோது உங்கள் தளம் எப்படி தோன்றுகிறது என்பது தெளிவாக பார்க்க முடியும். -![CodeSwing நீட்டிப்பின் நேரடி முன்னோட்டை](../../../../translated_images/ta/after-codeswing-extension-pb.0ebddddcf73b5509.png) +![CodeSwing நீட்டிப்பின் நேரடி முன்னோட்டை](../../../../translated_images/ta/after-codeswing-extension-pb.0ebddddcf73b5509.webp) **வளர்ந்த இடைமுகத்தைப் புரிந்து கொள்ள:** - **வெட்டு காட்சியமைப்பு**: ஒரு பக்கத்தில் நீங்கள் எழுதும் குறியீடு மற்றும் மற்ற பக்கத்தில் நேரடி முன்னோட்டை காட்சி diff --git a/translations/ta/9-chat-project/README.md b/translations/ta/9-chat-project/README.md index 66bcd3b6a..adebba1a1 100644 --- a/translations/ta/9-chat-project/README.md +++ b/translations/ta/9-chat-project/README.md @@ -60,7 +60,7 @@ print(response.choices[0].message.content) உங்கள் இறுதி திட்டம் எப்படி இருக்கும் என்று இங்கே காணலாம்: -![பயனர் மற்றும் AI உதவியாளருக்கு இடையேயான உரையாடலைக் காண்பிக்கும் உரையாடல் செயலி இடைமுகம்](../../../translated_images/ta/screenshot.0a1ee0d123df681b.png) +![பயனர் மற்றும் AI உதவியாளருக்கு இடையேயான உரையாடலைக் காண்பிக்கும் உரையாடல் செயலி இடைமுகம்](../../../translated_images/ta/screenshot.0a1ee0d123df681b.webp) ## 🗺️ AI பயன்பாட்டுத் தயாரிப்பில் உங்கள் கற்றல் பயணம் @@ -189,7 +189,7 @@ mindmap ``` **மூலம் கோட்பாடு**: AI பயன்பாட்டு வளர்ச்சி பாரம்பரிய வலை மேம்பாட்டுத் திறன்களுடன் AI சேவைகள் ஒருங்கிணைப்பைப் பொருத்தி, இயற்கை மற்றும் சுறுசுறுப்பான பயன்பாடுகளை உருவாக்குகிறது. -![GitHub Models AI Playground இடைமுகம் மாதிரி தேர்வு மற்றும் சோதனை பகுதி](../../../translated_images/ta/playground.d2b927122224ff8f.png) +![GitHub Models AI Playground இடைமுகம் மாதிரி தேர்வு மற்றும் சோதனை பகுதி](../../../translated_images/ta/playground.d2b927122224ff8f.webp) **Playground யைப் பயனுள்ளதாக 만드는வைகள்:** - GPT-4o-mini, Claude மற்றும் பிற AI மாதிரிகளை சோதிக்கவும் (இல்லையெனில் இலவசம்!) @@ -199,7 +199,7 @@ mindmap சிறிது விளையாடிவிட்டு, "Code" டாப் கிளிக் செய்து உங்கள் நிரல் மொழியைத் தேர்வுசெய்து அமலாக்க குறியீட்டை பெறலாம். -![Playground தேர்வு - வெவ்வேறு நிரல் மொழிகளுக்கான குறியீடு உற்பத்தி விருப்பங்கள்](../../../translated_images/ta/playground-choice.1d23ba7d407f4758.png) +![Playground தேர்வு - வெவ்வேறு நிரல் மொழிகளுக்கான குறியீடு உற்பத்தி விருப்பங்கள்](../../../translated_images/ta/playground-choice.1d23ba7d407f4758.webp) ## பைதான் பின்தள ஒருமை அமல்படுத்தல் @@ -2355,14 +2355,14 @@ mindmap - [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) என்ற இடத்திற்கு **ஓடவும்** - மேல் வலது மூலையில் "Use this template" என்பதைக் **கிளிக் செய்யவும்** (GitHub-இல் உள்நுழைந்திருப்பதை உறுதி செய்யவும்) -![Create from template interface showing the green "Use this template" button](../../../translated_images/ta/template.67ad477109d29a2b.png) +![Create from template interface showing the green "Use this template" button](../../../translated_images/ta/template.67ad477109d29a2b.webp) **படி 2: Codespaces விரும்பவும்** - இன்று உருவாக்கிய ரெப்போவை **திறக்கவும்** - பச்சை "Code" பொத்தானை அழுத்தி "Codespaces" ஐ தேர்ந்தெடுக்கவும் - உங்கள் மேம்பாட்டு சூழலை துவக்க "Create codespace on main" ஐ **தேர்ந்தெடுக்கவும்** -![Create codespace interface with options for launching cloud development environment](../../../translated_images/ta/codespace.bcecbdf5d2747d3d.png) +![Create codespace interface with options for launching cloud development environment](../../../translated_images/ta/codespace.bcecbdf5d2747d3d.webp) **படி 3: சூழல் அமைப்பு** Codespace ஏற்றியவுடன், நீங்கள் பெறுவீர்கள்: diff --git a/translations/ta/README.md b/translations/ta/README.md index a8bb1c2ed..67101ff84 100644 --- a/translations/ta/README.md +++ b/translations/ta/README.md @@ -72,13 +72,13 @@ Azure AI Foundry Discord சமுதாயத்தில் சேரவும தொடங்க, [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) பார்க்கவும்! -![Background](../../translated_images/ta/background.148a8d43afde5730.png) +![Background](../../translated_images/ta/background.148a8d43afde5730.webp) - அடிப்படை முதல் RAG வரை ஆய்வுகள் உள்ளன. - GenAI மற்றும் எங்களுடைய கூட்டாளி செயலியுடன் வரலாற்று காட்சிகளுடன் தொடர்பு கொள்ளவும். - பொழுதுபோக்கான மற்றும் ஈர்க்கக்கூடிய கதை, கால பயணம் செய்யும் அனுபவம்! -![character](../../translated_images/ta/character.5c0dd8e067ffd693.png) +![character](../../translated_images/ta/character.5c0dd8e067ffd693.webp) ஒவ்வொரு பாடத்திலும் ஒரு பணியை முடிக்கவும், அறிவு பரிசோதனை மற்றும் சவால்களை உள்ளடக்கியது, இவற்றை வழிநடத்தி நீங்கள் கீழ்க்காணும் தலைப்புகளை கற்றுக் கொள்ளலாம்: @@ -115,7 +115,7 @@ Azure AI Foundry Discord சமுதாயத்தில் சேரவும நீங்கள் உருவாக்கிய இந்தக் கோப்பகத்தின் நகலில், **Code** பொத்தானை கிளிக் செய்து **Open with Codespaces** ஐத் தேர்ந்தெடுக்கவும். இது உங்களுக்கான புதிய Codespace ஐ உருவாக்கும். -![Codespace](../../translated_images/ta/createcodespace.0238bbf4d7a8d955.png) +![Codespace](../../translated_images/ta/createcodespace.0238bbf4d7a8d955.webp) #### உங்கள் கணினியில் பாடத்திட்டத்தை இயக்குதல் diff --git a/translations/ta/for-teachers.md b/translations/ta/for-teachers.md index 41ef85ed3..b6206b6cf 100644 --- a/translations/ta/for-teachers.md +++ b/translations/ta/for-teachers.md @@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA: - Moodle Cloud-க்கு வரையறுக்கப்பட்ட Common Cartridge ஆதரவு உள்ளது. மேலே உள்ள Moodle கோப்பை விரும்பவும், இது Canvas-ல் கூட ஏற்றப்படலாம். - இறக்குமதி செய்த பிறகு, உங்கள் கால அட்டவணைக்கு பொருந்த மாட்யூல்கள், கடைசித் தேதிகள் மற்றும் வினா அமைப்புகளை மதிப்பாய்வு செய்யவும். -![Moodle](../../translated_images/ta/moodle.94eb93d714a50cb2.png) +![Moodle](../../translated_images/ta/moodle.94eb93d714a50cb2.webp) > Moodle வகுப்பறையில் உள்ள பாடத்திட்டம் -![Canvas](../../translated_images/ta/canvas.fbd605ff8e5b8aff.png) +![Canvas](../../translated_images/ta/canvas.fbd605ff8e5b8aff.webp) > Canvas-ல் உள்ள பாடத்திட்டம் ### Repo-வை நேரடியாக பயன்படுத்துதல் (Classroom இல்லாமல்) diff --git a/translations/te/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/te/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 2d8cf1762..ac0cb541a 100644 --- a/translations/te/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/te/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: ఈ రోజు, ఆధునిక వెబ్ డెవలప్మెంట్‌ను సాధ్యం చేసే అత్యద్భుతమైన టూల్స్ ని పరిశీలించబోతున్నాము, ఇవి చాలా ఇబ్బందిదాయకం కాకుండా అలూజిపోతాయి. నేను చెబుతున్నది Netflix, Spotify మరియు మీ ఇష్టమైన ఇండి యాప్ స్టూడియోలో డెవలపర్లు ప్రతిరోజు ఉపయోగించే అదే ఎడిటర్లు, బ్రౌజర్లు మరియు వర్క్‌ఫ్లోలు. మరియు ఇది మీకు సంతోష డ్యాన్స్ చేయించే భాగం: ఈ మోస్ట్ ప్రొఫెషనల్ గ్రేడ్, ఇండస్ట్రీ-స్టాండర్డ్ టూల్స్ చాలా కాలిగా ఉచితం! -![Intro Programming](../../../../translated_images/te/webdev101-programming.d6e3f98e61ac4bff.png) +![Intro Programming](../../../../translated_images/te/webdev101-programming.d6e3f98e61ac4bff.webp) > స్కెచ్‌నోట్ [Tomomi Imura](https://twitter.com/girlie_mac) రూపొందించారు ```mermaid diff --git a/translations/te/1-getting-started-lessons/2-github-basics/README.md b/translations/te/1-getting-started-lessons/2-github-basics/README.md index 82474faa6..140f16ad2 100644 --- a/translations/te/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/te/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: మనం కలసి ఈ ప్రయాణం తీసుకుందాం, ఒక్కో స్టెప్పులో ఒక్కోసారి. తొందరగా లేదు, ఒత్తిడి లేదు – కేవలం మీరు, నేను, మరియు మీరు త్వరలో మీ కొత్త మిత్రులయ్యే అద్భుతమైన టూల్స్‌! -![Intro to GitHub](../../../../translated_images/te/webdev101-github.8846d7971abef6f9.png) +![Intro to GitHub](../../../../translated_images/te/webdev101-github.8846d7971abef6f9.webp) > స్కెచ్ నోట్ [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -607,7 +607,7 @@ flowchart TD ✅ 'beginner-friendly' రిపోలను కనుగొనడానికి మంచి మార్గం అంటే [‘good-first-issue’ ట్యాగ్‌తో శోధించడం](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/) ఇది. -![కాపీ చెయ్యడానికి రిపోని స్థానికంగా క్లోన్ చేయడం](../../../../translated_images/te/clone_repo.5085c48d666ead57.png) +![కాపీ చెయ్యడానికి రిపోని స్థానికంగా క్లోన్ చేయడం](../../../../translated_images/te/clone_repo.5085c48d666ead57.webp) కోడ్ కాపీ చేసుకునే అనేక మార్గాలు ఉన్నాయి. ఒక మార్గం "క్లోన్" చేయడం, దీనికి HTTPS, SSH లేదా GitHub CLI (కమాండ్ లైన్ ఇంటర్ఫేస్) ఉపయోగిస్తారు. diff --git a/translations/te/1-getting-started-lessons/3-accessibility/README.md b/translations/te/1-getting-started-lessons/3-accessibility/README.md index 8ad64b4f3..a574d6b01 100644 --- a/translations/te/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/te/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # ప్రాప్యత కలిగిన వెబ్‌పేజీల తయారీ -![అమ్సర రీత్యా అన్ని సమాచారం](../../../../translated_images/te/webdev101-a11y.8ef3025c858d897a.png) +![అమ్సర రీత్యా అన్ని సమాచారం](../../../../translated_images/te/webdev101-a11y.8ef3025c858d897a.webp) > స్కెచ్‌నోట్ రచయిత [టొమోమి ఇమురా](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/te/2-js-basics/1-data-types/README.md b/translations/te/2-js-basics/1-data-types/README.md index 8b8ac1521..8e297e3df 100644 --- a/translations/te/2-js-basics/1-data-types/README.md +++ b/translations/te/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # జావాస్క్రిప్ట్ మౌలికాలు: డేటా రకాలు -![JavaScript Basics - Data types](../../../../translated_images/te/webdev101-js-datatypes.4cc470179730702c.png) +![JavaScript Basics - Data types](../../../../translated_images/te/webdev101-js-datatypes.4cc470179730702c.webp) > స్కెచ్ నోట్ ద్వారా [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/te/2-js-basics/2-functions-methods/README.md b/translations/te/2-js-basics/2-functions-methods/README.md index 7c6a42ea6..3ff2cb9bb 100644 --- a/translations/te/2-js-basics/2-functions-methods/README.md +++ b/translations/te/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # జావాస్క్రిప్ట్ బేసిక్స్: మెల్యాళ్లు మరియు ఫంక్షన్లు -![JavaScript Basics - Functions](../../../../translated_images/te/webdev101-js-functions.be049c4726e94f8b.png) +![JavaScript Basics - Functions](../../../../translated_images/te/webdev101-js-functions.be049c4726e94f8b.webp) > స్కెచ్ నోట్ చేసిన [టోమోమి ఇమురా](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/te/2-js-basics/3-making-decisions/README.md b/translations/te/2-js-basics/3-making-decisions/README.md index ce59f22d6..b0097231f 100644 --- a/translations/te/2-js-basics/3-making-decisions/README.md +++ b/translations/te/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # జావాస్క్రిప్ట్ బేసిక్స్: నిర్ణయాలు తీసుకోవడం -![JavaScript Basics - Making decisions](../../../../translated_images/te/webdev101-js-decisions.69e1b20f272dd1f0.png) +![JavaScript Basics - Making decisions](../../../../translated_images/te/webdev101-js-decisions.69e1b20f272dd1f0.webp) > స్కేట్ఛ్‌‌నోట్ [Tomomi Imura](https://twitter.com/girlie_mac) రచన diff --git a/translations/te/2-js-basics/4-arrays-loops/README.md b/translations/te/2-js-basics/4-arrays-loops/README.md index ce2ee847f..e582181bd 100644 --- a/translations/te/2-js-basics/4-arrays-loops/README.md +++ b/translations/te/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript ప్రాథమికాలు: శ్రేణులు మరియు పునరావృతాలు -![JavaScript ప్రాథమికాలు - శ్రేణులు](../../../../translated_images/te/webdev101-js-arrays.439d7528b8a29455.png) +![JavaScript ప్రాథమికాలు - శ్రేణులు](../../../../translated_images/te/webdev101-js-arrays.439d7528b8a29455.webp) > స్కెచ్నోట్ [టొమోమీ ఇమురా](https://twitter.com/girlie_mac) ద్వారా ```mermaid diff --git a/translations/te/3-terrarium/1-intro-to-html/README.md b/translations/te/3-terrarium/1-intro-to-html/README.md index 2b135096d..e49b85ca4 100644 --- a/translations/te/3-terrarium/1-intro-to-html/README.md +++ b/translations/te/3-terrarium/1-intro-to-html/README.md @@ -25,7 +25,7 @@ journey 접근성 పెంపొందించండి: 5: Student టెరేరియం నిర్మించండి: 5: Student ``` -![Introduction to HTML](../../../../translated_images/te/webdev101-html.4389c2067af68e98.png) +![Introduction to HTML](../../../../translated_images/te/webdev101-html.4389c2067af68e98.webp) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) HTML, లేదా HyperText Markup Language, మీరు ఎప్పుడైనా సందర్శించిన ప్రతి వెబ్‌సైట్ యొక్క మూలాధారం. HTMLని వెబ్ పేజీలకు నిర్మాణాన్ని ఇచ్చే ఎముకల యాడుగా భావించండి – అది ఎక్కడ విషయం ఉండాలి, ఎలా అవి ఏర్పాటు చేయబడ్డాయి, ప్రతి భాగం ఏమిటి అని నిర్వచిస్తుంది. CSS తరువాత మీ HTMLను రంగులు మరియు లేఅవుట్లు తో "డ్రెస్ అప్" చేస్తుంది, మరియు JavaScript ఇంటరాక్టివిటీతో జీవంతం చేస్తుంది, HTML అన్ని ఇతర విషయాలను సాధ్యాన్ని చేసే ప్రాథమిక నిర్మాణాన్ని అందిస్తుంది. @@ -86,7 +86,7 @@ HTML కోడ్ లోకి దిగేముందు, మీ టెరే 4. ఎక్స్‌ప్లోరర్ ప్యానెలులో, "New File" ఐకాన్ పై క్లిక్ చేయండి 5. మీ ఫైల్‌కు పేరు `index.html` పెట్టండి -![VS Code Explorer showing new file creation](../../../../translated_images/te/vs-code-index.e2986cf919471eb9.png) +![VS Code Explorer showing new file creation](../../../../translated_images/te/vs-code-index.e2986cf919471eb9.webp) **ఎంపిక 2: టెర్మినల్ కమాండ్ లు ఉపయోగించడం** ```bash diff --git a/translations/te/3-terrarium/2-intro-to-css/README.md b/translations/te/3-terrarium/2-intro-to-css/README.md index 9a6f7d27f..8a8c4ef05 100644 --- a/translations/te/3-terrarium/2-intro-to-css/README.md +++ b/translations/te/3-terrarium/2-intro-to-css/README.md @@ -29,7 +29,7 @@ journey ప్రతిస్పందనాత్మక డిజైన్: 5: Student గాజు ప్రతిబింబాలు: 5: Student ``` -![Introduction to CSS](../../../../translated_images/te/webdev101-css.3f7af5991bf53a20.png) +![Introduction to CSS](../../../../translated_images/te/webdev101-css.3f7af5991bf53a20.webp) > స్కెచ్నోట్ చేసిన [Tomomi Imura](https://twitter.com/girlie_mac) మీ HTML టెర్రేరియం ఎంత సాధారణంగా కనిపించిందో గుర్తుందా? CSS ఆ సరళమైన నిర్మాణాన్ని దృశ్యంగా ఆకర్షణీయంగా మార్చే స్థానం. @@ -202,7 +202,7 @@ body { మీ బ్రౌజర్ డెవలపర్ టూల్స్ (F12) తెరవండి, Elements ట్యాబ్ కు వెళ్లి `

` ఎలిమెంట్ ని ఇన్స్పెక్ట్ చేయండి. అది బాడీ నుండి ఫాంట్ ఫ్యామిలీని వారసత్వంగా పొందుతుందని చూడొచ్చు: -![inherited font](../../../../translated_images/te/1.cc07a5cbe114ad1d.png) +![inherited font](../../../../translated_images/te/1.cc07a5cbe114ad1d.webp) ✅ **ప్రయోగ సమయం**: మీ `` లో మరో వారసత్వ లక్షణాలను సెట్ చేయండి, ఉదాహరణకు `color`, `line-height`, లేదా `text-align`. మీ హెడ్డింగ్ మరియు ఇతర ఎలిమెంట్లకు ఏమి జరుగుతుందో గమనించండి. @@ -594,7 +594,7 @@ flowchart LR మీరు గాజు ఉపరితలాలపై వెలుతురు ప్రతిబింబాలను కలిగించే సూక్ష్మ హైలైట్లను సృష్టిస్తారు. ఇది రెనెసెన్స్ పెయింటర్స్ జాన్ వాన్ ఎయ్క్ లాంటి వారు గాజు పెయింటింగ్లను 3D లాగా చూపించడానికి ఉపయోగించిన పరిస్థితిని అనుకరిస్తుంది. మీరు లక్ష్యం చేసుకునేది ఇలాగే ఉంది: -![finished terrarium](../../../../translated_images/te/terrarium-final.2f07047ffc597d0a.png) +![finished terrarium](../../../../translated_images/te/terrarium-final.2f07047ffc597d0a.webp) **మీ ఛాలెంజ్:** - గాజు ప్రతిబింబాల కోసం సూక్ష్మ తెల్లటి లేదా ప్రకాశవంత రంగు ఒవల్ ఆకారాలను సృష్టించండి diff --git a/translations/te/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/te/3-terrarium/3-intro-to-DOM-and-closures/README.md index e32d98c97..b3d85d537 100644 --- a/translations/te/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/te/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -25,7 +25,7 @@ journey ఫంక్షనల్ టెస్టింగ్ చేయండి: 5: Student టెరేరియమ్ పూర్తి చేయండి: 5: Student ``` -![DOM మరియు క్లోజర్](../../../../translated_images/te/webdev101-js.10280393044d7eaa.png) +![DOM మరియు క్లోజర్](../../../../translated_images/te/webdev101-js.10280393044d7eaa.webp) > స్కెచ్‌నోట్: [Tomomi Imura](https://twitter.com/girlie_mac) వెబ్ డెవలప్‌మెంట్ లో అత్యంత ఆసక్తికరమైన అంశాలలో ఒకటికి స్వాగతం - విషయాలను పరస్పర చర్యాత్మకంగా మార్చడం! డాక్యూమెంట్ ఆబ్జెక్ట్ మోడల్ (DOM) అనేది మీ HTML మరియు JavaScript మధ్య ఒక ఇద్దరి మధ్య వంతెన లాగా ఉంటుంది, మరియు ఈ రోజు మనం దాన్ని ఉపయోగించి మీ టెర్రారియం కి జీవం తెస్తాము. Tim Berners-Lee మొదటి వెబ్ బ్రౌజర్ ను సృష్టించినప్పుడు, అతను డాక్యూమెంట్లు డైనమిక్ మరియు పరస్పర చర్యాత్మకంగా ఉండే వెబ్ ను ఊహించాడు - DOM ఆ దృశ్యాన్ని నిజం చేస్తుంది. @@ -102,7 +102,7 @@ flowchart TD style P fill:#ffebee style Q fill:#ffebee ``` -![DOM వృక్ష ప్రతినిధి](../../../../translated_images/te/dom-tree.7daf0e763cbbba92.png) +![DOM వృక్ష ప్రతినిధి](../../../../translated_images/te/dom-tree.7daf0e763cbbba92.webp) > DOM మరియు దానికి సూచించే HTML మార్కప్ యొక్క ప్రతినిధి. [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -146,7 +146,7 @@ flowchart LR ``` > 💡 **క్లోజర్ల అర్థం**: క్లోజర్లు JavaScript లో ఒక ముఖ్యమైన విషయం, మరియు బహుశా అనేక డెవలపర్లు దీన్ని పూర్తిగా అర్థం చేసుకోవడం నిధానం తీసుకుంటారు. ఈ రోజు మనం ఆచరణకు కేంద్రీకృతమై ఉన్నాము - మీరు ఇంటరాక్‌టివ్ ఫీచర్లను నిర్మించినప్పుడు క్లోజర్లు సహజంగా ఉత్పన్నమవుతాయో చూశారు. అవగాహనమీదుగా ఉంటూ మీరు వీరు నిజ స‌మ‌స్య‌ల‌కు ఎలాగా పరిష్కార‌మిచ్చారో తెలుసుకుంటారు. -![DOM వృక్ష ప్రతినిధి](../../../../translated_images/te/dom-tree.7daf0e763cbbba92.png) +![DOM వృక్ష ప్రతినిధి](../../../../translated_images/te/dom-tree.7daf0e763cbbba92.webp) > DOM మరియు దానికి సూచించే HTML మార్కప్ యొక్క ప్రతినిధి. [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -591,7 +591,7 @@ function stopElementDrag() { - **క్రాస్-డివైస్ సపోర్ట్**: డెస్క్‌టాప్ మరియు మొబైల్ లో పని - **పర్ఫార్మెన్స్ అవగాహన**: మెమొరీ లీక్స్ లేకుండా మరియు అదనపు లెక్కింపులు లేవు -![finished terrarium](../../../../translated_images/te/terrarium-final.0920f16e87c13a84.png) +![finished terrarium](../../../../translated_images/te/terrarium-final.0920f16e87c13a84.webp) --- diff --git a/translations/te/3-terrarium/solution/README.md b/translations/te/3-terrarium/solution/README.md index 7e28c34ed..6fbcc95a9 100644 --- a/translations/te/3-terrarium/solution/README.md +++ b/translations/te/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: స్వల్పమైన డ్రాగ్ అండ్ డ్రాప్ కోడ్-మెడిటేషన్. కొద్దిగా HTML, JS మరియు CSS తో, మీరు ఒక వబ్ ఇంటర్‌ఫేస్‌ని తయారుచేయవచ్చు, దాన్ని శోభాయమానంగా మార్చవచ్చు మరియు ఒక ఇంటరాక్షన్ చేర్చవచ్చు. -![my terrarium](../../../../translated_images/te/screenshot_gray.0c796099a1f9f25e.png) +![my terrarium](../../../../translated_images/te/screenshot_gray.0c796099a1f9f25e.webp) ## క్రెడిట్స్ diff --git a/translations/te/5-browser-extension/1-about-browsers/README.md b/translations/te/5-browser-extension/1-about-browsers/README.md index 7fbbeed34..3deaab5c0 100644 --- a/translations/te/5-browser-extension/1-about-browsers/README.md +++ b/translations/te/5-browser-extension/1-about-browsers/README.md @@ -25,7 +25,7 @@ journey ఇబ్బందులను డీబగ్ చేయండి: 4: Student అనుభవాన్ని మెరుగు పరచండి: 5: Student ``` -![Browser sketchnote](../../../../translated_images/te/browser.60317c9be8b7f84a.jpg) +![Browser sketchnote](../../../../translated_images/te/browser.60317c9be8b7f84a.webp) > స్కెచ్నోట్ ద్వారా [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## ప్రీ-లెక్చర్ క్విజ్ @@ -77,7 +77,7 @@ mindmap ✅ **చిన్న చరిత్ర**: మొదటి బ్రౌజర్ 'WorldWideWeb' అని పిలవబడింది మరియు ఇది సర్ టిమోథీ బర్నర్స్-లీ 1990లో సృష్టించారు. -![early browsers](../../../../translated_images/te/earlybrowsers.d984b711cdf3a42d.jpg) +![early browsers](../../../../translated_images/te/earlybrowsers.d984b711cdf3a42d.webp) > కొన్ని ప్రారంభ బ్రౌజర్లు, [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ద్వారా ### బ్రౌజర్లు వెబ్ కంటెంట్‌ను ఎలా ప్రాసెస్ చేస్తాయి @@ -194,7 +194,7 @@ quadrantChart ఎక్స్‌టెన్షన్ ఇన్‌స్టాలేషన్ ప్రక్రియను అర్థం చేసుకోవడం, ప్రజలు మీరు తయారు చేసిన ఎక్స్‌టెన్షన్‌ను ఇన్‌స్టాల్ చేయేటప్పుడు ఉపయోగపడే అనుభవాన్ని ఊహించడానికి సహాయం చేస్తుంది. ఆధునిక బ్రౌజర్లలో ఈ ఇన్‌స్టాలేషన్ ప్రక్రియ సాధారణంగా ఉంటుంది, చర్యల రూపరేఖలో స్వల్ప మార్పులుంటాయి. -![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/te/install-on-edge.d68781acaf0b3d3d.png) +![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/te/install-on-edge.d68781acaf0b3d3d.webp) > **మరియు ముఖ్యమైనది**: మీ స్వంత ఎక్స్‌టెన్షన్లను పరీక్షించే సమయంలో డెవలపర్ మోడ్ ఆన్ చేసి, ఇతర స్టోర్స్ నుంచి ఎక్స్‌టెన్షన్స్ అనుమతి ఇవ్వడం మర్చిపోకండి. @@ -308,10 +308,10 @@ project-root/ ### ఎక్స్‌టెన్షన్ వీక్షణల అవలోకనం **సెట్టప్ వీక్షణ** - మొదటి సారి ఉపయోగించే యూజర్ సెటప్: -![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/te/1.b6da8c1394b07491.png) +![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/te/1.b6da8c1394b07491.webp) **ఫలితాల వీక్షణ** - కార్బన్ ఫుట్‌ప్రింట్ డేటాను చూపిస్తుంది: -![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/te/2.1dae52ff08042246.png) +![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/te/2.1dae52ff08042246.webp) ### సెటప్ ఫారం నిర్మించడం diff --git a/translations/te/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/te/5-browser-extension/2-forms-browsers-local-storage/README.md index 1ef7c9159..21e77ce13 100644 --- a/translations/te/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/te/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -263,7 +263,7 @@ stateDiagram-v2 Reset --> ClearStorage: నిల్వ డేటాను తొలగించు ClearStorage --> FirstTime: సెటప్ కు తిరుగు ``` -![Local storage pane](../../../../translated_images/te/localstorage.472f8147b6a3f8d1.png) +![Local storage pane](../../../../translated_images/te/localstorage.472f8147b6a3f8d1.webp) > ⚠️ **భద్రతా పరామర్శ**: ఉత్పత్తి అనువర్తనాల్లో, API కీలు LocalStorage లో నిల్వ చేయడం భద్రతా ప్రమాదాలను కలిగిస్తుంది ఎందుకంటే జావాస్క్రిప్ట్ ఈ డేటాకు యాక్సెస్ చేయగలదు. పాఠశాలలో ఈ విధానం సరైనది, కానీ నిజమైన అనువర్తనాలు సున్నితమైన ధారవాహికలకు సురక్షిత సర్వర్-సైడ్ నిల్వను ఉపయోగించాలి. diff --git a/translations/te/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/te/5-browser-extension/3-background-tasks-and-performance/README.md index 25a908dc4..4e5fc9d33 100644 --- a/translations/te/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/te/5-browser-extension/3-background-tasks-and-performance/README.md @@ -123,7 +123,7 @@ Edgeలో Developer Tools తెరవాలంటే, పై కుడి మ ఇదాన్ని ప్రయత్నించండి. ఒక వెబ్‌సైట్ ఓపెన్ చేయండి (Microsoft.com బాగా పనిచేస్తుంది) మరియు 'Record' బటన్ క్లిక్ చేయండి. ఇప్పుడు పేజీని రిఫ్రెష్ చేసి ప్రొఫైలర్ ప్రతి సందర్భం ఎలా జరుగుతుందో క్యాప్చర్ చేస్తుంది. రికార్డింగ్ ఆపినప్పుడు, బ్రౌజర్ 'scripts', 'renders', మరియు 'paints' చేసినవిధానాల విస్తృతంగా వివరాలు చూడవచ్చు. ఇది ఒక రాకెట్ లాంచ్ సమయంలో మిషన్ కంట్రోల్ ప్రతి వ్యవస్థను పరిశీలించే విధానం గుర్తొస్తుంది - మీరు ఏం జరిగిందో, ఎప్పుడు జరిగిందో రియల్ టైమ్ డేటా పొందగలుగుతారు. -![Edge profiler](../../../../translated_images/te/profiler.5a4a62479c5df01c.png) +![Edge profiler](../../../../translated_images/te/profiler.5a4a62479c5df01c.webp) ✅ మరింత లోతుగా తెలుసుకోడానికి [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) చూడండి @@ -133,11 +133,11 @@ Edgeలో Developer Tools తెరవాలంటే, పై కుడి మ పేజీ పనితీరు స్నాప్‌షాట్‌ను పొందడానికి ప్రొఫైల్ టైమ్‌లైన్ భాగాన్ని ఎంచుకుని సమరీ ప్యాను చూడండి: -![Edge profiler snapshot](../../../../translated_images/te/snapshot.97750180ebcad737.png) +![Edge profiler snapshot](../../../../translated_images/te/snapshot.97750180ebcad737.webp) ఏవైనా ఈవెంట్లు 15 మిల్లీసెకండ్ల కంటే ఎక్కువ సమయం తీసుకున్నాయా అంటే ఈవెంట్ లాగ్ ప్యాను చెక్ చేయండి: -![Edge event log](../../../../translated_images/te/log.804026979f3707e0.png) +![Edge event log](../../../../translated_images/te/log.804026979f3707e0.webp) ✅ మీ ప్రొఫైలర్‌ను తెలుసుకోండి! ఈ సైట్ మీద డెవలపర్ టూల్స్ తెరవండి మరియు ఏ బాటిల్‌నెక్స్లు ఉన్నాయో చూడండి. ఏది మెల్లగా లోడ్ అవుతుంది? ఏది వేగంగా? diff --git a/translations/te/5-browser-extension/README.md b/translations/te/5-browser-extension/README.md index a808e8f66..68b5fc4c4 100644 --- a/translations/te/5-browser-extension/README.md +++ b/translations/te/5-browser-extension/README.md @@ -23,7 +23,7 @@ CO_OP_TRANSLATOR_METADATA: ### క్రెడిట్స్ -![a green browser extension](../../../translated_images/te/extension-screenshot.0e7f5bfa110e92e3.png) +![a green browser extension](../../../translated_images/te/extension-screenshot.0e7f5bfa110e92e3.webp) ## క్రెడిట్స్ diff --git a/translations/te/5-browser-extension/solution/README.md b/translations/te/5-browser-extension/solution/README.md index c808f1f18..37c503b70 100644 --- a/translations/te/5-browser-extension/solution/README.md +++ b/translations/te/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow యొక్క C02 సిగ్నల్ API ఉపయోగించి విద్యుత్ వినియోగాన్ని ట్రాక్ చేయడానికి, మీరు మీ బ్రౌజర్‌లోనే మీ ప్రాంతంలోని విద్యుత్ వినియోగం ఎంత ఎక్కువగా ఉందో గుర్తు చెప్పే రిమైండర్ కోసం బ్రౌజర్ ఎక్స్టెన్షన్ నిర్మించండి. ఈ ఎక్స్టెన్షన్‌ను అవసరానికి అనుగుణంగా ఉపయోగించడం ద్వారా, ఈ సమాచారంపై ఆధారపడి మీ కార్యకలాపాలపై నిర్ణయాలు తీసుకోవడానికి సహాయం అవుతుంది. -![extension screenshot](../../../../translated_images/te/extension-screenshot.0e7f5bfa110e92e3.png) +![extension screenshot](../../../../translated_images/te/extension-screenshot.0e7f5bfa110e92e3.webp) ## మొదలు పెట్టడం @@ -31,7 +31,7 @@ npm run build Edgeలో ఇన్‌స్టాల్ చేయడానికి, బ్రౌజర్ పెనెల్ లో టాప్ రైట్ కార్నర్లో ఉన్న 'మూడు డాట్' మెను ను ఉపయోగించి ఎక్స్టెన్షన్లు ప్యానెల్ కనుగొనండి. అక్కడి నుంచి, కొత్త ఎక్స్టెన్షన్ ని లోడ్ చేయడానికి 'Load Unpacked' ని ఎంచుకోండి. ప్రాంప్ట్ వద్ద 'dist' ఫోల్డర్ తెరవాలి, అప్పుడు ఎక్స్టెన్షన్ లోడ్ అవుతుంది. దీన్ని ఉపయోగించడానికి, CO2 Signal యొక్క APIకి API కీ కావాలి ([ఇక్కడ ఇమెయిల్ ద్వారా పొందండి](https://www.co2signal.com/) - ఈ పేజీలో మీ ఇమెయిల్ ఎంటర్ చేయండి) మరియు మీ ప్రాంతానికి అనుగుణమైన [కోడ్](http://api.electricitymap.org/v3/zones) ([Electricity Map](https://www.electricitymap.org/map) కొరకు) (ఉదాహరణకు బోస్టన్ లో నేను 'US-NEISO' ఉపయోగిస్తాను). -![installing](../../../../translated_images/te/install-on-edge.78634f02842c4828.png) +![installing](../../../../translated_images/te/install-on-edge.78634f02842c4828.webp) API కీ మరియు ప్రాంతం ఎక్స్టెన్షన్ ఇంటర్‌ఫేస్‌లో ఎంటర్ చేయగానే, బ్రౌజర్ ఎక్స్టెన్షన్ బారులోని రంగు ముద్ర (dot) మీ ప్రాంతం యొక్క ఎనర్జీ వినియోగాన్ని ప్రతిబింబించేలా మారుతుంది మరియు మీరు ఏ ఎనర్జీ-భారీ కార్యకలాపాలు చేయగలరో సూచన ఇస్తుంది. ఈ 'dot' సిస్టమ్ ఆలోచనను నాకు [Energy Lollipop ఎక్స్టెన్షన్](https://energylollipop.com/) నుంచి కేలిఫోర్నియా కాలుష్యం కొరకు ఇచ్చారు. diff --git a/translations/te/5-browser-extension/solution/translation/README.fr.md b/translations/te/5-browser-extension/solution/translation/README.fr.md index aa61c76a0..cbcf7f1c7 100644 --- a/translations/te/5-browser-extension/solution/translation/README.fr.md +++ b/translations/te/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow యొక్క CO2 సిగ్నల్ API ఉపయోగించి విద్యుత్ వినియోగాన్ని ట్రాక్ کرنے కోసం, మీరు మీ ప్రాంతంలోని విద్యుత్ వినియోగంపై నేరుగా మీ బ్రౌజర్‌లో ఒక రిమైండర్ ఉండేలా ఒక బ్రౌజర్ ఎక్స్‌టెన్షన్ సృష్టించండి. ఈ ప్రత్యేక ఎక్స్‌టెన్షన్ ఉపయోగించడం మీ కార్యకలాపాలను ఈ సమాచారంపై ఆధారపడి నిర్ణయం తీసుకోవడంలో మీకు సహాయం చేస్తుంది. -![extension screenshot](../../../../../translated_images/te/extension-screenshot.0e7f5bfa110e92e3.png) +![extension screenshot](../../../../../translated_images/te/extension-screenshot.0e7f5bfa110e92e3.webp) ## ప్రారంభించండి @@ -31,7 +31,7 @@ npm run build Edgeలో ఇన్‌స్టాల్ చేయాలంటే, బ్రౌజర్ యొక్క పైభాగం కుడి మూలలోని 'మూడు బిందువులు' మెనూలోనికి వెళ్లండి మరియు ఎక్స్‌టెన్షన్ ప్యానెల్ కనుగొనండి. అక్కడ నుండి, 'అన్‌జిప్ చేసిన ఎక్స్‌టెన్షన్ లోడ్ చేయండి'ని ఎంచుకుని కొత్త ఎక్స్‌టెన్షన్‌ను లోడ్ చేయండి. ప్రాంప్ట్ వచ్చినప్పుడు 'dist' ఫోల్డర్‌ను తెరవండి, ఎక్స్‌టెన్షన్ లోడ్ అవుతుంది. దీన్ని ఉపయోగించడానికి, CO2 Signal API కోసం API కీ అవసరం ([ఇక్కడ ఇమెయిల్ ద్వారా పొందండి](https://www.co2signal.com/) - ఈ పేజీలో మీ ఇమెయిల్ అడగండి) మరియు [ఎలక్ట్రిసిటీ మ్యాప్](https://www.electricitymap.org/map) కి సంబంధించిన [మీ ప్రాంతానికి కోడ్](http://api.electricitymap.org/v3/zones) (ఉదాహరణకు బోస్టన్‌లో నేను 'US-NEISO' ఉపయోగిస్తున్నాను). -![installation](../../../../../translated_images/te/install-on-edge.78634f02842c4828.png) +![installation](../../../../../translated_images/te/install-on-edge.78634f02842c4828.webp) API కీ మరియు ప్రాంతం ఎక్స్‌టెన్షన్ ఇంటర్‌ఫేస్‌లో ఎంటర్ చేసిన తర్వాత, బ్రౌజర్ ఎక్స్‌టెన్షన్ బార్‌లోని రంగు పాయింట్ మీ ప్రాంత విద్యుత్ వినియోగాన్ని ప్రతిబింబించేలా మారుతుంది మరియు ఏ ఎనర్జీ-ఇంతా కార్యకలాపాలు చేయడం మీకు సరిగా ఉండొచ్చో సూచిస్తుంది. ఈ 'పాయింట్లు' వ్యవస్థ వెనుక కాన్సెప్ట్ నాకు కాలిఫోర్నియా ఉద్గారాల కొరకు [Energy Lollipop ఎక్స్‌టెన్షన్](https://energylollipop.com/) ద్వారా అందించబడింది. diff --git a/translations/te/5-browser-extension/solution/translation/README.hi.md b/translations/te/5-browser-extension/solution/translation/README.hi.md index 2e3b1ed2e..da16ccdbb 100644 --- a/translations/te/5-browser-extension/solution/translation/README.hi.md +++ b/translations/te/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: విద్యుత్ వినియోగాన్ని ట్రాక్ చేయడానికి tmrow యొక్క CO2 సిగ్నల్ API ఉపయోగించడం, ఒక బ్రౌజర్ ఎక్స్‌టెన్షన్ రూపొందించడం, తద్వారా మీ బ్రౌజర్లో మీ ప్రాంతంలో విద్యుత్ వినియోగం ఎంత తీవ్రమో తెలుసుకోవడానికి ఒక రిమైండర్ పొందవచ్చు. ఈ తాత్కాలిక ఎక్స్‌టెన్షన్‌ను ఉపయోగించడం ద్వారా మీరు ఈ సమాచారంపై ఆధారపడి మీ కార్యకలాపాలపై నిర్ణయం తీసుకోవడంలో సహాయం పొందుతారు. -![ఎక్స్‌టెన్షన్ స్క్రీన్షాట్](../../../../../translated_images/te/extension-screenshot.0e7f5bfa110e92e3.png) +![ఎక్స్‌టెన్షన్ స్క్రీన్షాట్](../../../../../translated_images/te/extension-screenshot.0e7f5bfa110e92e3.webp) ## ప్రారంభించడం @@ -31,7 +31,7 @@ npm run build ఎడ్జ్ లో ఇన్‌స్టాల్ చేసుకోవడానికి, బ్రౌజర్ యొక్క పై భాగం కుడి మూనలో 'మూడు డాట్స్' మెనూ ఉపయోగించి ఎక్స్‌టెన్షన్ ప్యానల్ కనుగొనండి. అక్కడ నుండి, కొత్త ఎక్స్‌టెన్షన్ లోడ్ చేయడానికి 'లోడ్ అన్‌ప్యాక్' ఎంచుకోండి. ప్రాంప్ట్‌లో 'dist' ఫొల్డర్ ఓపెన్ చేయండి, ఎక్స్‌టెన్షన్ లోడ్ అయ్యిపోతుంది. దీన్ని ఉపయోగించడానికి మీకు CO2 సిగ్నల్ API కోసం ([ఇక్కడ ఇమెయిల్ ద్వారా పొందండి](https://www.co2snal.com/) ఒక API కీ అవసరం - ఈ పేజీలో బాక్స్‌లో మీ ఇమెయిల్ ఎంటర్ చేయండి) మరియు [మీ ప్రాంతానికి కోడ్](http://api.electricitymap.org/v3/zones) [ఎలక్ట్రిసిటీ మ్యాప్](https://www.electricitymap.org/map) (ఉదాహరణకు, బోస్టన్‌లో, నేను 'US-NEISO' ఉపయోగిస్తాను) అవసరం. -![ఇన్‌స్టాల్ చేస్తున్న సమయంలో](../../../../../translated_images/te/install-on-edge.78634f02842c4828.png) +![ఇన్‌స్టాల్ చేస్తున్న సమయంలో](../../../../../translated_images/te/install-on-edge.78634f02842c4828.webp) ఒకసారి API కీ మరియు ప్రాంతం ఎక్స్‌టెన్షన్ ఇంటర్‌ఫేస్‌లో ఎంటర్ చేసిన తర్వాత, బ్రౌజర్ ఎక్స్‌టెన్షన్ బార్‌లోని రంగురంగుల డాట్ మీ ప్రాంతపు విద్యుత్ వినియోగాన్ని ప్రతిబింబించడానికి మారుతుంది మరియు మీరు మీ ప్రదర్శన ప్రకారం బహిరంగ ఉత్పత్తులు ఏవి ఎక్కువ ఉత్సర్జన కలిగించవచ్చో సూచిస్తుంది. ఈ 'డాట్' వ్యవస్థ వెనుక భావన నాకు కాలిఫోర్నియా ఉత్సర్జన కోసం [ఎనర్జీ లాలీపాప్ ఎక్స్‌టెన్షన్](https://energylollipop.com/) నుండి వచ్చింది. diff --git a/translations/te/5-browser-extension/solution/translation/README.it.md b/translations/te/5-browser-extension/solution/translation/README.it.md index a72f8eecc..73a0f1dee 100644 --- a/translations/te/5-browser-extension/solution/translation/README.it.md +++ b/translations/te/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: ప్రాంతంలోని విద్యుత్ వినియోగాన్ని బ్రౌజర్‌లోనే నేరుగా రిమైండర్‌గా పొందుటకు tmrow యొక్క Signal C02 API ఉపయోగించి బ్రౌజర్ ఎక్స్టెన్షన్ రూపొందించబడుతుంది. ఈ ప్రత్యేకమైన ఎక్స్టెన్షన్ ఉపయోగించడం ద్వారా ఈ సమాచారంతో మీ కార్యకలాపాలను మూల్యాంకనం చేయడం సహాయపడుతుంది. -![ఎక్స్టెన్షన్ స్క్రీన్‌షాట్](../../../../../translated_images/te/extension-screenshot.0e7f5bfa110e92e3.png) +![ఎక్స్టెన్షన్ స్క్రీన్‌షాట్](../../../../../translated_images/te/extension-screenshot.0e7f5bfa110e92e3.webp) ## ప్రారంభించడానికి @@ -31,7 +31,7 @@ npm run build Edge లో ఇన్స్టాల్ చేసుకోవడానికి, బ్రౌజర్ పైవైపు కుడి మూలలో ఉండే "మూడు పాయింట్లు" మెనూను ఉపయోగించి ఎక్స్టెన్షన్స్ ప్యానెల్ ను కనుగొనండి. యెడ్జ్ డెవలపర్ మోడ్ (తక్కువ వామభాగంలో) ఇన్స్టాల్చలేదు అయితే ఆన్ చేయండి. కొత్త ఎక్స్టెన్షన్ లోడ్ చేసేందుకు "అన్‌జిప్ చేయబడని లోడ్" ఎంపికను ఎంచుకోండి. కమాండ్ ప్రాంప్ట్ లో "dist" ఫోల్డర్ ఓపెన్ చేసి ఎక్స్టెన్షన్ లోడ్ చేయండి. దాన్ని ఉపయోగించడానికి, CO2 Signal API కోసం API కీ అవసరం (తర్వాత ఇమెయిల్ ద్వారా [ఇక్కడ పొందవచ్చు](https://www.co2signal.com/) - ఈ పేజీలో మీ ఇమెయిల్ టైప్ చేయండి) మరియు [విద్యుత్ మాపింగ్కోడ్](http://api.electricitymap.org/v3/zones) అవసరం, అది [విద్యుత్ మ్యాప్](https://www.electricitymap.org/map) కి అనుగుణంగా ఉంటుంది (బోస్టన్‌లో ఉదాహరణకు "US-NEISO"). -![ఇన్స్టాలేషన్](../../../../../translated_images/te/install-on-edge.78634f02842c4828.png) +![ఇన్స్టాలేషన్](../../../../../translated_images/te/install-on-edge.78634f02842c4828.webp) API కీ మరియు ప్రాంతం ఎక్స్‌టెన్షన్ ఇంటర్‌ఫేస్లో ఎంటర్ చేసిన తర్వాత, బ్రౌజర్ ఎక్స్టెన్షన్ బార్‌లో రంగు పడ్డ పాయింట్ ఆ ప్రాంత విద్యుత్ వినియోగాన్ని ప్రతిబింబించడానికి మారుతుంది మరియు అధిక శక్తి వినియోగ కార్యకలాపాలు ఎప్పుడు చేయడం అనుకూలమో సూచిస్తుంది. ఈ "పాయింట్లు" ఆధారిత వ్యవస్థ భావన కాలిఫోర్నియా ఉద్గారాల కొరకు [Energy Lollipop ఎక్స్టెన్షన్](https://energylollipop.com/) నుండి ప్రేరణ పొందింది. diff --git a/translations/te/5-browser-extension/solution/translation/README.ja.md b/translations/te/5-browser-extension/solution/translation/README.ja.md index 7d475b9c0..411687bea 100644 --- a/translations/te/5-browser-extension/solution/translation/README.ja.md +++ b/translations/te/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow యొక్క C02 సిగ్నల్ API ఉపయోగించి విద్యుత్ వినియోగాన్ని ట్రాక్ చేయడానికి, మీ ప్రాంతంలో విద్యుత్ వినియోగం ఎంత ఎక్కువగా ఉందో బ్రౌజర్‌లో రిమైండర్‌గా చూపించే బ్రౌజర్ విస్తరణను నిర్మించండి. ఈ విస్తరణను ఆడ్హాక్‌గా ఉపయోగించడం ద్వారా, ఈ సమాచారాన్ని ఆధారంగా మీ చర్యలను నిర్ణయించుకోవచ్చు. -![extension screenshot](../../../../../translated_images/te/extension-screenshot.0e7f5bfa110e92e3.png) +![extension screenshot](../../../../../translated_images/te/extension-screenshot.0e7f5bfa110e92e3.webp) ## ప్రారంభం @@ -31,7 +31,7 @@ npm run build Edgeలో ఇన్‌స్టాల్ చేయడానికి, బ్రౌజర్ మేనూ లో పై దాయి “3 డాట్స్” క్లిక్ చేసి “విస్తరణలు” ప్యానెల్‌ను కనుగొనండి. అక్కడ నుండి “Load Unpacked” ను ఎంచుకుని కొత్త విస్తరణను లోడ్ చేయండి. ప్రాంప్ట్ లో “dist” ఫోల్డర్‌ను తెరిచి విస్తరణను లోడ్ చేయండి. ఉపయోగించడానికి, CO2 సిగ్నల్ API యొక్క API కీ ([ఇక్కడ ఇమెయిల్ ద్వారా పొందండి](https://www.co2signal.com/) - ఈ పేజీ బాక్స్ లో మీ ఇమెయిల్ ఎంటర్ చేయండి) మరియు [Electricity Map](https://www.electricitymap.org/map) అనుసరించి మీ ప్రాంతానికి సంబంధించిన [కోడ్](http://api.electricitymap.org/v3/zones) అవసరం (ఉదాహరణకు బోస్టన్‌లో 'US-NEISO' ఉపయోగిస్తారు). -![installing](../../../../../translated_images/te/install-on-edge.78634f02842c4828.png) +![installing](../../../../../translated_images/te/install-on-edge.78634f02842c4828.webp) API కీ మరియు ప్రాంతం ని విస్తరణ ఇంటర్‌ఫేస్ లో ఎంటర్ చేస్తే, బ్రౌజర్ విస్తరణ బార్‌లో చూపించే రంగు డాట్ మారుతుంది, ఇది మీ ప్రాంతంలో విద్యుత్ వినియోగాన్ని ప్రతిబింబిస్తుంది, మరియు ఏ రకం శక్తి అవసరమయ్యే కార్యకలాపాలను చేయడం సరికదనేది తెలియజేస్తుంది. ఈ “డాట్” సిస్టమ్ కాన్సెప్ట్‌ను నాకు కేలిఫోర్నియాలో ఉద్గారాల కోసం [Energy Lollipop extension](https://energylollipop.com/) ద్వారా అందింది. diff --git a/translations/te/5-browser-extension/solution/translation/README.ms.md b/translations/te/5-browser-extension/solution/translation/README.ms.md index 024b18021..855257187 100644 --- a/translations/te/5-browser-extension/solution/translation/README.ms.md +++ b/translations/te/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: CO2 సూచన API tmrow ఉపయోగించి విద్యుత్ వినియోగాన్ని గుర్తించడానికి, మీ ప్రాంతంలో విద్యుత్ వినియోగం ఎంత బరువైనదో మీ బ్రౌజర్‌లోనే అభియోగాలను పొందేందుకు బ్రౌజర్ విస్తరణను నిర్మించండి. ఈ విస్తరణను ప్రత్యేకంగా ఉపయోగించడం ద్వారా మీరు ఈ సమాచారాన్ని ఆధారం చేసుకుని మీ కార్యకలాపాలపై నిర్ణయాలు తీసుకోవడంలో సహాయం పొందగలరు. -![బ్రౌజర్ విస్తరణ స్క్రీన్‌షాట్](../../../../../translated_images/te/extension-screenshot.0e7f5bfa110e92e3.png) +![బ్రౌజర్ విస్తరణ స్క్రీన్‌షాట్](../../../../../translated_images/te/extension-screenshot.0e7f5bfa110e92e3.webp) ## ఇక్కడి నుండి ప్రారంభించండి @@ -31,7 +31,7 @@ npm run build Edge లో ఇన్స్టాల్ చేయడానికి, బ్రౌజర్ పై భాగం కుడి మూలలో ఉన్న 'మూడు డాట్లు' మెనూ ద్వారా ఎక్స్టెన్షన్స్ ప్యానెల్‌ను కనుగొనండి. అక్కడ నుండి, 'Load Unpacked' ఎంచుకుని కొత్త విస్తరణను లోడ్ చేయండి. dist ఫోల్డర్‌ను ఓపెన్ చేస్తే విస్తరణ లోడ్ అవుతుంది. దీన్ని ఉపయోగించాలంటే, CO2 సూచన APIకి API కీ అవసరం ([ఇక్కడ [ఈ-మెయిల్ ద్వారా పొందండి](https://www.co2signal.com/) - ఈ పేజీపై మీ ఈ-మెయిల్ బాక్స్‌లో నమోదు చేయండి) మరియు [మీ ప్రాంతానికి సరిపోయే కోడ్](http://api.electricitymap.org/v3/zones) ([Electicity Map](https://www.electricitymap.org/map) లో చూడవచ్చు) అవసరం (బోస్టన్‌లో ఉదాహరణకు 'US-NEISO' ను నేను ఉపయోగిస్తున్నాను). -![డౌన్లోడ్ అవుతున్నది](../../../../../translated_images/te/install-on-edge.78634f02842c4828.png) +![డౌన్లోడ్ అవుతున్నది](../../../../../translated_images/te/install-on-edge.78634f02842c4828.webp) API కీ మరియు ప్రాంతం ఒకసారి విస్తరణ ఇంటర్‌ఫేస్‌లో నమోదు చేయబడితే, బ్రౌజర్ ఎక్స్టెన్షన్ బార్ లో రంగురంగుల డాట్ మీ ప్రాంత విద్యుత్ వినియోగాన్ని ప్రతిబింబిస్తుంది మరియు మీకు తగిన బరువు కలిగిన కార్యకలాపాలకు సూచన కల్పిస్తుంది. ఈ 'డాట్' వ్యవస్థ వెనుక భావన నాకు California కోసం [Energy Lollipop బ్రౌజర్ విస్తరణ](https://energylollipop.com/) వారు ఇచ్చారు. diff --git a/translations/te/5-browser-extension/start/README.md b/translations/te/5-browser-extension/start/README.md index 857aeb613..4eebada5c 100644 --- a/translations/te/5-browser-extension/start/README.md +++ b/translations/te/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow యొక్క CO2 సిగ్నల్ APIని ఉపయోగించి విద్యుత్ వినియోగాన్ని ట్రాక్ చేయడానికి, మీ ప్రాంతం విద్యుత్ వినియోగం ఎంత భారీగా ఉందో మీ బ్రౌజర్‌లోనే ఒక రిమైండర్ కలిగి ఉండేలా బ్రౌజర్ ఎక్స్టెన్షన్‌ని నిర్మించండి. ఈ ఎక్స్టెన్షన్‌ని అవసరమైనప్పుడు ఉపయోగించడం దాని ఆధారంగా మీ కార్యకలాపాలపై నిర్ణయాలు తీసుకోవడంలో సహాయపడుతుంది. -![extension screenshot](../../../../translated_images/te/extension-screenshot.0e7f5bfa110e92e3.png) +![extension screenshot](../../../../translated_images/te/extension-screenshot.0e7f5bfa110e92e3.webp) ## ప్రారంభం @@ -31,7 +31,7 @@ npm run build Edgeలో ఇన్‌స్టాల్ చేయడానికి, బ్రౌజర్ యొక్క పై కుడి మూలలో ఉన్న 'మూడు డాట్' మెనూలను ఉపయోగించి ఎక్స్టెన్షన్స్ ప్యానెల్ కనుగొనండి. అక్కడి నుండి, కొత్త ఎక్స్టెన్షన్‌ని లోడ్ చేయడానికి 'Load Unpacked' ను ఎంచుకోండి. ప్రాంప్ట్ వద్ద 'dist' ఫోల్డర్‌ని ఓపెన్ చేయండి, ఆ ఎక్స్టెన్షన్ లోడ్ అవుతుంది. దీన్ని ఉపయోగించేందుకు, CO2 Signal యొక్క APIకి ఒక API కీ అవసరం ([ఇక్కడ ఇమెయిల్ ద్వారా పొందండి](https://www.co2signal.com/) - ఈ పేజీలో మీ ఇమెయిల్ పెట్టండి) మరియు [ఎలక్ట్రిసిటీ మ్యాప్](https://www.electricitymap.org/map) కు అనుగుణంగా మీ ప్రాంతానికి సంబంధించిన [కోడ్](http://api.electricitymap.org/v3/zones) (ఉదాహరణకు బోస్టన్ లో నేను 'US-NEISO' ఉపయోగిస్తాను). -![installing](../../../../translated_images/te/install-on-edge.78634f02842c4828.png) +![installing](../../../../translated_images/te/install-on-edge.78634f02842c4828.webp) API కీ మరియు ప్రాంతం ఎక్స్టెన్షన్ ఇంటర్‌ఫేస్‌లో ఇన్‌పుట్ చేసిన వెంటనే, బ్రౌజర్ ఎక్స్టెన్షన్ బార్‌లో ఉన్న రంగు డాట్ మీ ప్రాంతం యొక్క శక్తి వినియోగాన్ని ప్రతిబింబించేలా మారుతుంది మరియు ఎక్కువ శక్తి ఎక్కువగా ఉపయోగించే కార్యకలాపాలు మీకు అనుకూలంగా ఉండే సూచన ఇస్తుంది. ఈ 'డాట్' సిస్టమ్ వెనుక సంకల్పాన్ని నాకు [Energy Lollipop ఎక్స్టెన్షన్](https://energylollipop.com/) (కాలిఫోర్నియా ఉద్గారాల కొరకు) ఇచ్చింది. diff --git a/translations/te/6-space-game/2-drawing-to-canvas/README.md b/translations/te/6-space-game/2-drawing-to-canvas/README.md index 37b5b2695..bf241c441 100644 --- a/translations/te/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/te/6-space-game/2-drawing-to-canvas/README.md @@ -105,7 +105,7 @@ quadrantChart Power-up: [0.7, 0.6] UI Elements: [0.9, 0.1] ``` -![the canvas's grid](../../../../translated_images/te/canvas_grid.5f209da785ded492.png) +![the canvas's grid](../../../../translated_images/te/canvas_grid.5f209da785ded492.webp) > చిత్రం [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) నుండి కేన్వాస్ ఎలిమెంట్ పై డ్రా చేయడానికి, మీరు కేన్వాస్ గ్రాఫిక్స్ బేసిక్ మూలాధారమైన మూడు-దశల ప్రక్రియను అనుసరిస్తారు. మీరు దీనిని కొన్ని సార్లు చేస్తే, ఇది సహజంగా మారుతుంది: @@ -323,11 +323,11 @@ flowchart TD - హీరో షిప్ - ![Hero ship](../../../../translated_images/te/player.dd24c1afa8c71e9b.png) + ![Hero ship](../../../../translated_images/te/player.dd24c1afa8c71e9b.webp) - 5*5 మానవులు - ![Monster ship](../../../../translated_images/te/enemyShip.5df2a822c16650c2.png) + ![Monster ship](../../../../translated_images/te/enemyShip.5df2a822c16650c2.webp) ### అభివృద్ధి ప్రారంభించడానికి సిఫార్సు చేసిన దశలు @@ -463,7 +463,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { సంపూర్ణ ఫలితం ఈ విధంగా ఉండాలి: -![Black screen with a hero and 5*5 monsters](../../../../translated_images/te/partI-solution.36c53b48c9ffae2a.png) +![Black screen with a hero and 5*5 monsters](../../../../translated_images/te/partI-solution.36c53b48c9ffae2a.webp) ## పరిష్కారం diff --git a/translations/te/6-space-game/5-keeping-score/README.md b/translations/te/6-space-game/5-keeping-score/README.md index be4a9efe4..7ab03f953 100644 --- a/translations/te/6-space-game/5-keeping-score/README.md +++ b/translations/te/6-space-game/5-keeping-score/README.md @@ -155,7 +155,7 @@ sequenceDiagram end ``` - **స్కోరింగ్ సిస్టమ్**: ప్రతీ ధ్వంసమైన శత్రు నౌక 100 పాయింట్లు అందిస్తుంది (మూర్ఖ సంఖ్యలు ప్లేయర్లకు మానసికంగా లెక్కించడానికి సులభం). స్కోర్ కింద ఎడమ మూలలో ప్రదర్శించబడుతుంది. -- **లైఫ్ కౌంటర్**: మీ హీరో మూడు లైఫ్స్‌తో ప్రారంభమవుతాడు—ఇది ప్రాథమిక ఆర్కేడ్ గేమ్స్ ద్వారా స్తాపించబడిన ప్రమాణం, ఇది సవాలు మరియు ఆడగలిగే సామర్థ్యాన్ని సమతుల్యం చేస్తుంది. శత్రు తో ప్రతి ఢీ కొట్టు ఒక లైఫ్‌ను తగ్గిస్తుంది. మిగిలిన లైఫ్స్ కుడి కింద షిప్ ఐకాన్లతో చూపిస్తాము ![life image](../../../../translated_images/te/life.6fb9f50d53ee0413.png). +- **లైఫ్ కౌంటర్**: మీ హీరో మూడు లైఫ్స్‌తో ప్రారంభమవుతాడు—ఇది ప్రాథమిక ఆర్కేడ్ గేమ్స్ ద్వారా స్తాపించబడిన ప్రమాణం, ఇది సవాలు మరియు ఆడగలిగే సామర్థ్యాన్ని సమతుల్యం చేస్తుంది. శత్రు తో ప్రతి ఢీ కొట్టు ఒక లైఫ్‌ను తగ్గిస్తుంది. మిగిలిన లైఫ్స్ కుడి కింద షిప్ ఐకాన్లతో చూపిస్తాము ![life image](../../../../translated_images/te/life.6fb9f50d53ee0413.webp). ## మొదలు చేద్దాం! diff --git a/translations/te/7-bank-project/1-template-route/README.md b/translations/te/7-bank-project/1-template-route/README.md index 5b6e2710a..ef5103375 100644 --- a/translations/te/7-bank-project/1-template-route/README.md +++ b/translations/te/7-bank-project/1-template-route/README.md @@ -646,7 +646,7 @@ sequenceDiagram `history.pushState`ను ఉపయోగించడం బ్రౌజర్ నావిగేషన్ హిస్టరీలో కొత్త ఎంట్రీలను సృష్టిస్తుంది. మీరు బ్రౌజర్ *బ్యాక్ బటన్* పట్టు ఉండడాన్ని చూస్తే ఇది ఇలా కనిపిస్తుంది: -![నావిగేషన్ హిస్టరీ స్క్రీన్‌షాట్](../../../../translated_images/te/history.7fdabbafa521e064.png) +![నావిగేషన్ హిస్టరీ స్క్రీన్‌షాట్](../../../../translated_images/te/history.7fdabbafa521e064.webp) మీరు బ్యాక్ బటన్ కొన్నిసార్లు క్లిక్ చేస్తే, ప్రస్తుత URL మారిపోతుంది మరియు హిస్టరీ అప్డేట్ అవ్వుతుంది, కానీ అదే టెంప్లెట్ కనబడుతూనే ఉంటుంది. diff --git a/translations/te/7-bank-project/2-forms/README.md b/translations/te/7-bank-project/2-forms/README.md index 5414b57a9..288f9c352 100644 --- a/translations/te/7-bank-project/2-forms/README.md +++ b/translations/te/7-bank-project/2-forms/README.md @@ -292,7 +292,7 @@ graph TD 2. బ్రౌజర్ అడ్రస్ బార్ మార్పులను గమనించండి 3. పేజీ రీలోడ్ అవ్వడం మరియు URL లో డేటా కనిపించడం చూసి స్టేట్ గుర్తించండి -![Register బటన్ క్లిక్ చేసిన తరువాత బ్రౌజర్ URL మార్పు స్క్రీన్‌షాట్](../../../../translated_images/te/click-register.e89a30bf0d4bc9ca.png) +![Register బటన్ క్లిక్ చేసిన తరువాత బ్రౌజర్ URL మార్పు స్క్రీన్‌షాట్](../../../../translated_images/te/click-register.e89a30bf0d4bc9ca.webp) ### HTTP పద్ధతుల సరిపోలిక @@ -346,7 +346,7 @@ graph TD 2. "ఖాతా సృష్టించు" బటన్‌ను నొక్కండి 3. బ్రౌజర్‌లో సర్వర్ స్పందనను గమనించండి -![localhost:5000/api/accounts అడ్రస్ విండోలో వినియోగదారు డేటా JSON స్ట్రింగ్](../../../../translated_images/te/form-post.61de4ca1b964d91a.png) +![localhost:5000/api/accounts అడ్రస్ విండోలో వినియోగదారు డేటా JSON స్ట్రింగ్](../../../../translated_images/te/form-post.61de4ca1b964d91a.webp) **మీకు కనిపించే విషయాలు:** - **బ్రౌజర్ API ఎండ్పాయింట్ URLకి రీడైరెక్ట్ అవుతుంది** @@ -609,7 +609,7 @@ async function register() { 3. **"Create Account"పై నొక్కండి** 4. **కన్సోల్ సందేశాలు మరియు వినియోగదారుని ఫీడ్బ్యాక్‌ని గమనించండి** -![Screenshot showing log message in the browser console](../../../../translated_images/te/browser-console.efaf0b51aaaf6778.png) +![Screenshot showing log message in the browser console](../../../../translated_images/te/browser-console.efaf0b51aaaf6778.webp) **మీరు చూడాల్సింది:** - సబ్మిట్ బటన్ పై లోడింగ్ స్థితి కనిపిస్తుంది @@ -783,7 +783,7 @@ input:focus:invalid { 3. యూజర్నేమ్ ఫీల్డ్‌లో ప్రత్యేక అక్షరాలు ప్రయత్నించండి 4. నెగటివ్ బ్యాలెన్స్ విలువ ఎంటర్ చేయండి -![Screenshot showing the validation error when trying to submit the form](../../../../translated_images/te/validation-error.8bd23e98d416c22f.png) +![Screenshot showing the validation error when trying to submit the form](../../../../translated_images/te/validation-error.8bd23e98d416c22f.webp) **మీరు గమనించేది:** - బ్రౌజర్ ఒక లోకల్ వెరిఫికేషన్ సందేశాలను చూపిస్తుంది @@ -943,7 +943,7 @@ Use the Agent mode to complete the following challenge: CSS శైలీకరణ తరువాత తుది లాగిన్ పేజీ ఇలా కనిపించవచ్చు: -![CSS శైలీలను జోడించిన తరువాత లాగిన్ పేజీ స్క్రీన్‌షాట్](../../../../translated_images/te/result.96ef01f607bf856a.png) +![CSS శైలీలను జోడించిన తరువాత లాగిన్ పేజీ స్క్రీన్‌షాట్](../../../../translated_images/te/result.96ef01f607bf856a.webp) ## పాఠం తర్వాత క్విజ్ diff --git a/translations/te/7-bank-project/3-data/README.md b/translations/te/7-bank-project/3-data/README.md index 14312a98c..f5f753f52 100644 --- a/translations/te/7-bank-project/3-data/README.md +++ b/translations/te/7-bank-project/3-data/README.md @@ -156,7 +156,7 @@ sequenceDiagram Server->>Browser: పూర్తి HTML పేజీని పంపిస్తుంది Browser->>User: కొత్త పేజీ చూపిస్తుంది (ఫ్లాష్/పునఃప్రారంభం) ``` -![బహుళ పేజీ అప్లికేషన్లలో వర్క్‌ఫ్లో నవీకరణ](../../../../translated_images/te/mpa.7f7375a1a2d4aa77.png) +![బహుళ పేజీ అప్లికేషన్లలో వర్క్‌ఫ్లో నవీకరణ](../../../../translated_images/te/mpa.7f7375a1a2d4aa77.webp) **ఈ విధానం ఎందుకు స్తంభించేంది:** - ప్రతి క్లిక్ అంటే పూర్తిగా పేజీని తిరిగి నిర్మించటం @@ -182,7 +182,7 @@ sequenceDiagram JavaScript->>Browser: నిర్దిష్ట పేజీ అంశాలను నవీకరిస్తుంది Browser->>User: నవీకరించబడిన కంటెంట్ చూపుతుంది (రిలోడ్ లేదు) ``` -![సింగిల్ పేజ్ అప్లికేషన్లలో వర్క్‌ఫ్లో నవీకరణ](../../../../translated_images/te/spa.268ec73b41f992c2.png) +![సింగిల్ పేజ్ అప్లికేషన్లలో వర్క్‌ఫ్లో నవీకరణ](../../../../translated_images/te/spa.268ec73b41f992c2.webp) **SPAs ఎందుకు చాలా మెరుగ్గా అనిపిస్తాయో:** - మార్చిన భాగాలే నవీకరించబడతాయి (సంSMARTగా!) @@ -516,7 +516,7 @@ if (data.error) { ఇప్పుడు చెల్లని ఖాతాతో పరీక్షిస్తే, మీరు పేజీ మీద సహాయకరమైన పొరపాటు సందేశం చూస్తారు! -![లాగిన్ సమయంలో పొరపాటు సందేశం ప్రదర్శిస్తున్న స్క్రీన్‌షాట్](../../../../translated_images/te/login-error.416fe019b36a6327.png) +![లాగిన్ సమయంలో పొరపాటు సందేశం ప్రదర్శిస్తున్న స్క్రీన్‌షాట్](../../../../translated_images/te/login-error.416fe019b36a6327.webp) #### దశ 4: ఆక్సెస్‌బిలిటీలో సాకారాత్మకంగా ఉండటం @@ -950,7 +950,7 @@ timeline అందుబాటులో ఒక మెరుగైన డాష్‌బోర్డు ఎలా కనిపించొచ్చో ఇక్కడ చూడండి: -![Screenshot of an example result of the dashboard after styling](../../../../translated_images/te/screen2.123c82a831a1d14a.png) +![Screenshot of an example result of the dashboard after styling](../../../../translated_images/te/screen2.123c82a831a1d14a.webp) దీనిని ఖచ్చితంగా అనుకరించాల్సిన అవసరం లేదు - ఇది ప్రేరణగా ఉపయోగించుకుని మీది మార్చుకోండి! diff --git a/translations/te/7-bank-project/4-state-management/README.md b/translations/te/7-bank-project/4-state-management/README.md index e009f2ec8..273e3f6c8 100644 --- a/translations/te/7-bank-project/4-state-management/README.md +++ b/translations/te/7-bank-project/4-state-management/README.md @@ -187,7 +187,7 @@ mindmap మేము తకృణాల్ని వెంటాడకుండా, ఒక **కేంద్రిత స్టేట్ నిర్వహణ** వ్యవస్థను సృష్టించబోతున్నాం. ఇది ఒక అన్ని ముఖ్యమైన విషయాలను జాగ్రత్తగా చూసుకునే వ్యక్తి లాంటి వ్యవస్థ: -![HTML, యూజర్ చర్యలు మరియు స్టేట్ మధ్య డేటా ప్రవాహాలను చూపిస్తూ స్కీమా](../../../../translated_images/te/data-flow.fa2354e0908fecc8.png) +![HTML, యూజర్ చర్యలు మరియు స్టేట్ మధ్య డేటా ప్రవాహాలను చూపిస్తూ స్కీమా](../../../../translated_images/te/data-flow.fa2354e0908fecc8.webp) ```mermaid flowchart TD @@ -800,7 +800,7 @@ timeline అసైన్‌మెంట్ పూర్తి చేసిన తర్వాత ఉదాహరణ ఫలితం ఇలా ఉంటుంది: -![ఒక ఉదాహరణ “Add transaction” డైలాగ్ చూపిస్తున్న స్క్రీన్‌షాట్](../../../../translated_images/te/dialog.93bba104afeb79f1.png) +![ఒక ఉదాహరణ “Add transaction” డైలాగ్ చూపిస్తున్న స్క్రీన్‌షాట్](../../../../translated_images/te/dialog.93bba104afeb79f1.webp) --- diff --git a/translations/te/7-bank-project/4-state-management/assignment.md b/translations/te/7-bank-project/4-state-management/assignment.md index c8a168f78..015c62697 100644 --- a/translations/te/7-bank-project/4-state-management/assignment.md +++ b/translations/te/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA: **అంచనా ఫలితం:** ఈ అసైన్‌మెంట్ పూర్తి చేసిన తరువాత, మీ బ్యాంకింగ్ యాప్ పూర్తి ఉపయోగకరమైన "ట్రాన్సాక్షన్ చేర్పు" ఫీచర్‌ను కలిగి ఉండాలి, ఇది ప్రొఫెషనల్ రూపం మరియు ప్రవర్తన కలిగి ఉంటుంది: -![ఉదాహరణ "ట్రాన్సాక్షన్ చేర్పు" డైలాగ్ ను చూపిస్తున్న స్క్రీన్‌షాట్](../../../../translated_images/te/dialog.93bba104afeb79f1.png) +![ఉదాహరణ "ట్రాన్సాక్షన్ చేర్పు" డైలాగ్ ను చూపిస్తున్న స్క్రీన్‌షాట్](../../../../translated_images/te/dialog.93bba104afeb79f1.webp) ## మీ అమలు పరీక్షించడం diff --git a/translations/te/7-bank-project/README.md b/translations/te/7-bank-project/README.md index eb3c539e8..8c207eb59 100644 --- a/translations/te/7-bank-project/README.md +++ b/translations/te/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: ఈ ప్రాజెక్టులో, మీరు ఒక కల్పిత బ్యాంక్‌ను ఎలా నిర్మించాలో నేర్చుకుంటారు. ఈ పాఠాలు వెబ్ యాప్‌ను ఎలా అమర్చాలి, రూట్లు అందించాలి, ఫారమ్‌లు నిర్మించాలి, స్థితిని నిర్వహించాలి, మరియు బ్యాంక్ డేటాను పొందగల API నుండి డేటాను ఎలా పొందాలి అనే సూచనలు కలిగి ఉన్నాయి. -| ![Screen1](../../../translated_images/te/screen1.baccbba0f1f93364.png) | ![Screen2](../../../translated_images/te/screen2.123c82a831a1d14a.png) | +| ![Screen1](../../../translated_images/te/screen1.baccbba0f1f93364.webp) | ![Screen2](../../../translated_images/te/screen2.123c82a831a1d14a.webp) | |--------------------------------|--------------------------------| ## పాఠాలు diff --git a/translations/te/8-code-editor/1-using-a-code-editor/README.md b/translations/te/8-code-editor/1-using-a-code-editor/README.md index da66ffdfe..cc153c3de 100644 --- a/translations/te/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/te/8-code-editor/1-using-a-code-editor/README.md @@ -182,7 +182,7 @@ VSCode.dev ఈ సామర్థ్యాలను మీ బ్రౌజర్ అన్ని లోడ్ అయ్యాక, మీరు ఒక అందమైన, శుభ్రంగా ఉన్న వర్క్‌స్పేస్ ను చూడగలుగుతారు, ఇది మీ కోడ్ మీదే దృష్టి పెట్టే రీతిలో రూపొందించబడింది! -![Default VSCode.dev interface](../../../../translated_images/te/default-vscode-dev.5d06881d65c1b323.png) +![Default VSCode.dev interface](../../../../translated_images/te/default-vscode-dev.5d06881d65c1b323.webp) **ఇది మీ పరిసరాల టూర్:** - **యాక్టివిటీ బార్** (ఎడమవైపు అక్కడ గల స్ట్రిప్): మీ ప్రధాన నావిగేషన్, ఇందులో Explorer 📁, Search 🔍, Source Control 🌿, Extensions 🧩, Settings ⚙️ ఉన్నాయి @@ -229,7 +229,7 @@ flowchart TB 1. మీరు ఇప్పటికే అక్కడ లేరని అయితే [vscode.dev](https://vscode.dev) కి వెళ్లండి 2. వేదిలు స్క్రీన్ పై "Open Remote Repository" బటన్ కోసం చూడండి, దాన్ని క్లిక్ చేయండి - ![Open remote repository](../../../../translated_images/te/open-remote-repository.bd9c2598b8949e7f.png) + ![Open remote repository](../../../../translated_images/te/open-remote-repository.bd9c2598b8949e7f.webp) 3. ఏ GitHub రిపాజిటరీ URL ను పేస్ట్ చేయండి (ఈ URL ప్రయత్నించండి: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. ఎంటర్ నొక్కండి మరియు మ్యాజిక్ జరుగుతున్నది చూడండి! @@ -238,7 +238,7 @@ flowchart TB మీరు కోడింగ్ విజార్డ్ లాంటి అనుభూతి కోరుకుంటే, Ctrl+Shift+P (లేదా Mac మీద Cmd+Shift+P) ని ఉపయోగించి కమాండ్ ప్యాలెట్ తెరవండి: -![Command Palette](../../../../translated_images/te/palette-menu.4946174e07f42622.png) +![Command Palette](../../../../translated_images/te/palette-menu.4946174e07f42622.webp) **కమాండ్ ప్యాలెట్ అనేది మీరు చేయగల సినిమాల కోసం ఒక సెర్చ్ ఇంజిన్ లాంటిది:** - "open remote" టైప్ చేయండి, అది మీకు రిపాజిటరీ ఓపెనర్ కనుగొంటుంది @@ -300,7 +300,7 @@ HTTP మరియు HTTPS వేర్వేరు ప్రోటోకాల 3. ఫైల్ పేరు, సరైన ఎక్స్‌టెన్షన్ తో నమోదు చేయండి (`style.css`, `script.js`, `index.html`) 4. ఫైల్ సృష్టించేందుకు Enter నొక్కండి -![Creating a new file](../../../../translated_images/te/create-new-file.2814e609c2af9aeb.png) +![Creating a new file](../../../../translated_images/te/create-new-file.2814e609c2af9aeb.webp) **పేర్కొన్న నియమాలు:** - ఫైల్ ఉద్దేశ్యాన్ని తెలియజేసే వివరణాత్మక పేర్లను ఉపయోగించండి @@ -318,7 +318,7 @@ HTTP మరియు HTTPS వేర్వేరు ప్రోటోకాల 2. టైప్ చేయడం ప్రారంభించారు కాబట్టి, VSCode.dev రంగులు, సూచనలు, దోషాల గుర్తింపు తో సహాయపడుతుంది 3. Ctrl+S (Windows/Linux) లేదా Cmd+S (Mac) తో సేవ్ చేయండి – అయినా ఇది ఆటోమేటిగ్గా సేవ్ వర్క్ చేస్తుంది! -![Editing files in VSCode.dev](../../../../translated_images/te/edit-a-file.52c0ee665ef19f08.png) +![Editing files in VSCode.dev](../../../../translated_images/te/edit-a-file.52c0ee665ef19f08.webp) **మీరు కోడ్ చేస్తున్నప్పుడు జరిగే చల్లగా ఫీచర్లు:** - మీ కోడ్ అందంగా రంగుల కోడ్ తో చూపబడుతుంది, చదవడమనే సులభం అవుతుంది @@ -339,7 +339,7 @@ HTTP మరియు HTTPS వేర్వేరు ప్రోటోకాల 2. మారిన ఫైళ్ళు "Changes" విభాగంలో కనిపిస్తాయి 3. మార్పులను సూచించడానికి రంగు కోడింగ్ ఉంటుంది: చేనీయుని గ్రీన్, తొలగింపులకి రెడ్ -![Viewing changes in Source Control](../../../../translated_images/te/working-tree.c58eec08e6335c79.png) +![Viewing changes in Source Control](../../../../translated_images/te/working-tree.c58eec08e6335c79.webp) **మీ పని సేవ్ చేయడం (కమిట్ వర్క్‌ఫ్లో):** @@ -431,7 +431,7 @@ mindmap 2. చుట్టూ వీక్షించండి లేదా ఏదైనా ప్రత్యేకమైనది కోసం శోధించండి 3. ఆసక్తికరంగా కనిపించే దానిపై క్లిక్ చేసి మరిన్ని వివరాలు తెలుసుకోండి -![Extension marketplace interface](../../../../translated_images/te/extensions.eca0e0c7f59a10b5.png) +![Extension marketplace interface](../../../../translated_images/te/extensions.eca0e0c7f59a10b5.webp) **అక్కడ మీరు చూచేది:** @@ -484,7 +484,7 @@ mindmap 3. డ్రాప్‌డౌన్ నుంచి "Extension Settings" ఎంచుకోండి 4. మీ workflow కి సరిగ్గా సరిపడేలా అన్ని విషయాలు సరిచూడండి -![Customizing extension settings](../../../../translated_images/te/extension-settings.21c752ae4f4cdb78.png) +![Customizing extension settings](../../../../translated_images/te/extension-settings.21c752ae4f4cdb78.webp) **మీరు సర్దుకోవచ్చు అనుకుంటే ఉన్న సాధారణ విషయాలు:** - మీ కోడ్ ఎలా ఫార్మాట్ అవుతుందో (టాబ్‌లు లేదా స్పేసులు, లైన్ పొడవు, మొదలయినవి) diff --git a/translations/te/8-code-editor/1-using-a-code-editor/assignment.md b/translations/te/8-code-editor/1-using-a-code-editor/assignment.md index b9a1a1cef..da39b2505 100644 --- a/translations/te/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/te/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ VSCode.dev లో రిపోజిటరీ ఓపెన్ చేయడాన 4. "Add initial HTML structure" అనే కమిట్ మెసేజ్ రాయండి 5. "Commit new file" క్లిక్ చేసి మీ మార్పులను సురక్షితం చేయండి -![Creating initial file on GitHub](../../../../translated_images/te/new-file-github.com.c886796d800e8056.png) +![Creating initial file on GitHub](../../../../translated_images/te/new-file-github.com.c886796d800e8056.webp) **ఈ ప్రారంభ సెటప్ ఏమి అందిస్తుంది:** - సెమాంటిక్ అంశాలతో సరైన HTML5 డాక్యుమెంట్ నిర్మాణం ఏర్పాటు @@ -104,7 +104,7 @@ VSCode.dev లో రిపోజిటరీ ఓపెన్ చేయడాన ✅ **సక్సెస్ సూచిక**: ఎక్స్ప్లోరర్ సైడ్‌బార్‌లో మీ ప్రాజెక్ట్ ఫైళ్లు కనిపించాలి మరియు `index.html` ఎడిట్ చేయడానికి అందుబాటులో ఉండాలి. -![Project loaded in VSCode.dev](../../../../translated_images/te/project-on-vscode.dev.e79815a9a95ee7fe.png) +![Project loaded in VSCode.dev](../../../../translated_images/te/project-on-vscode.dev.e79815a9a95ee7fe.webp) **ఇంటర్‌ఫేస్‌లో మీరు చూడగలిగేది:** - **ఎక్స్ప్లోరర్ సైడ్‌బార్**: మీ రిపోజిటరీ ఫైళ్లను మరియు ఫోల్డర్ నిర్మాణాన్ని ప్రదర్శిస్తుంది @@ -449,7 +449,7 @@ li:before { **ఇన్‌స్టాలేషన్ తర్వాత తక్షణ ఫలితాలు:** CodeSwing ఇన్‌స్టాల్ అయిన వెంటనే, మీరు మీ రిజ్యూమ్ వెబ్‌సైట్ ప్రత్యక్ష ప్రివ్యూకు ఎడిటర్‌లో కనిపిస్తుంది. ఇది మార్పులు చేసినపుడు మీ సైట్ ఎలా కనిపిస్తోంది అనేది స్పష్టంగా చూసుకోవడానికీ సహాయపడుతుంది. -![CodeSwing extension showing live preview](../../../../translated_images/te/after-codeswing-extension-pb.0ebddddcf73b5509.png) +![CodeSwing extension showing live preview](../../../../translated_images/te/after-codeswing-extension-pb.0ebddddcf73b5509.webp) **మెరుగైన ఇంటర్‌ఫేస్ అవగాహన:** - **స్ప్లిట్ వ్యూస్**: ఒకవైపు కోడ్, మరొకవైపు ప్రత్యక్ష ప్రివ్యూ చూపిస్తుంది diff --git a/translations/te/9-chat-project/README.md b/translations/te/9-chat-project/README.md index c5b8e7dcc..ba0b1089e 100644 --- a/translations/te/9-chat-project/README.md +++ b/translations/te/9-chat-project/README.md @@ -60,7 +60,7 @@ print(response.choices[0].message.content) మీ పూర్తయిన ప్రాజెక్ట్ ఇలా కనిపిస్తుంది: -![Chat app interface showing conversation between user and AI assistant](../../../translated_images/te/screenshot.0a1ee0d123df681b.png) +![Chat app interface showing conversation between user and AI assistant](../../../translated_images/te/screenshot.0a1ee0d123df681b.webp) ## 🗺️ AI అనువర్తన అభివృద్ధి ద్వారా మీ నేర్చుకునే ప్రయాణం @@ -189,7 +189,7 @@ mindmap ``` **మూల సూత్రం**: AI అనువర్తన అభివృద్ధి సంప్రదాయ వెబ్ అభివృద్ధి నైపుణ్యాలను AI సేవల సమ్మిళితంతో కలిపి, వినియోగదారులకు సహజమైన, స్పందన చూపించే ఇంటెలిజెంట్ అనువర్తనాలు సృష్టిస్తుంది. -![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/te/playground.d2b927122224ff8f.png) +![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/te/playground.d2b927122224ff8f.webp) **ప్లేగ్రౌండ్‌ని చాలా ఉపయోగకరం చేసే అంశాలు:** - GPT-4o-mini, Claude వంటివి వంటివి ఉచితమైన వివిధ AI మోడల్స్ ప్రయత్నించండి @@ -199,7 +199,7 @@ mindmap కొద్దిగా ఆడుకున్న తర్వాత, సాదాగా "Code" ట్యాబ్‌ను క్లిక్ చేసి, అవసరమైన ప్రోగ్రామింగ్ భాషను ఎంచుకుని అమలుకాల కోడ్ తీసుకోండి. -![Playground choice showing code generation options for different programming languages](../../../translated_images/te/playground-choice.1d23ba7d407f4758.png) +![Playground choice showing code generation options for different programming languages](../../../translated_images/te/playground-choice.1d23ba7d407f4758.webp) ## Python బ్యాక్ ఎండ్ సమ్మిళితాన్ని అమలు చేయడం @@ -2351,14 +2351,14 @@ mindmap - [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) కు **నావిగేట్ అవ్వండి** - పై-కుడి మూలలో "Use this template" పై **క్లిక్ చేయండి** (GitHubలో లాగిన్ అయి ఉండాలి) -![Create from template interface showing the green "Use this template" button](../../../translated_images/te/template.67ad477109d29a2b.png) +![Create from template interface showing the green "Use this template" button](../../../translated_images/te/template.67ad477109d29a2b.webp) **దశ 2: Codespaces ప్రారంభం** - మీ కొత్తగా సృష్టించిన రిపాజిటరీని **తొక్కండి** - ఆకుపచ్చ "Code" బటన్‌పై **క్లిక్ చేయండి** మరియు "Codespaces" ను ఎంచుకోండి - "Create codespace on main"ని ఎంచుకొని అభివృద్ధి వాతావరణాన్ని ప్రారంభించండి -![Create codespace interface with options for launching cloud development environment](../../../translated_images/te/codespace.bcecbdf5d2747d3d.png) +![Create codespace interface with options for launching cloud development environment](../../../translated_images/te/codespace.bcecbdf5d2747d3d.webp) **దశ 3: వాతావరణం కాన్ఫిగరేషన్** మీ Codespace లోడ్ అయిన వెంటనే, మీరు పొందగలిగేది: diff --git a/translations/te/README.md b/translations/te/README.md index 967773a4b..8ecd756df 100644 --- a/translations/te/README.md +++ b/translations/te/README.md @@ -72,13 +72,13 @@ CO_OP_TRANSLATOR_METADATA: ప్రారంభించేందుకు సందర్శించండి [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)! -![Background](../../translated_images/te/background.148a8d43afde5730.png) +![Background](../../translated_images/te/background.148a8d43afde5730.webp) - ప్రాథమికాలు నుంచి RAG వరకు అన్ని అంశాలను కవర్ చేసే పాఠాలు. - GenAI మరియు మా సహచర యాప్ ద్వారా చరిత్రాత్మక పాత్రలతో పరస్పర చర్యలు. - సరదా మరియు ఆకర్షణీయమైన కథనం, మీరు కాల ప్రయాణంలో ఉన్నట్లవుతుంది! -![character](../../translated_images/te/character.5c0dd8e067ffd693.png) +![character](../../translated_images/te/character.5c0dd8e067ffd693.webp) ప్రతి పాఠం పూర్తి చేసుకోవడానికి ఒక అసైన్మెంట్, ఒక జ్ఞాన తనిఖీ మరియు ఓ ఛాలెంజ్ కలిగివుంటుంది, ఇవి మీకు వీలుగా నేర్పుతాయి: @@ -115,7 +115,7 @@ CO_OP_TRANSLATOR_METADATA: మీ సృష్టించిన ఈ రిపాజిటరీ కాపీ లో **Code** బటన్‌ను క్లిక్ చేసి **Open with Codespaces** ఎంపికను ఎంపిక చేసుకోండి. ఇది మీరు పనిచేయడానికి కొత్త Codespaceను సృష్టిస్తుంది. -![Codespace](../../translated_images/te/createcodespace.0238bbf4d7a8d955.png) +![Codespace](../../translated_images/te/createcodespace.0238bbf4d7a8d955.webp) #### మీ కంప్యూటర్‌లో స్థానికంగా పాఠ్యాంశం నడపడం diff --git a/translations/te/for-teachers.md b/translations/te/for-teachers.md index 068163ead..bb2f2949f 100644 --- a/translations/te/for-teachers.md +++ b/translations/te/for-teachers.md @@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA: - Moodle క్లౌడ్‌కు పరిమిత కామన్ కార్ట్రిడ్జ్ మద్దతు ఉంటుంది. పై Moodle ఫైల్ ప్రాధాన్యత ఇవ్వండి, అదే ఫైల్ Canvas లో కూడా అప్‌లోడ్ చేయవచ్చు. - దిగుమతి చేశాక, మీ కాలప్రమాణానికి అనుగుణంగా మాడ్యూల్స్, సమయాలు మరియు క్విజ్ సిద్ధతలను పునర్ సమీక్షించండి. -![Moodle](../../translated_images/te/moodle.94eb93d714a50cb2.png) +![Moodle](../../translated_images/te/moodle.94eb93d714a50cb2.webp) > Moodle క్లాస్‌రూమ్‌లో పాఠ్యపుస్తకం -![Canvas](../../translated_images/te/canvas.fbd605ff8e5b8aff.png) +![Canvas](../../translated_images/te/canvas.fbd605ff8e5b8aff.webp) > Canvas లోని పాఠ్యపుస్తకం ### రీపోను నేరుగా ఉపయోగించు (క్లాస్‌రూమ్ లేదు) diff --git a/translations/th/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/th/1-getting-started-lessons/1-intro-to-programming-languages/README.md index efd66e9a4..129ba8836 100644 --- a/translations/th/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/th/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: วันนี้ เราจะสำรวจเครื่องมือสุดเจ๋งที่จะทำให้การพัฒนาเว็บสมัยใหม่ไม่เพียงเป็นไปได้ แต่ยังน่าติดใจอย่างจริงจัง ผมกำลังพูดถึงตัวแก้ไขโค้ด, เบราว์เซอร์, และเวิร์กโฟลว์เดียวกับที่นักพัฒนาของ Netflix, Spotify, และสตูดิโอแอปอินดี้ที่คุณชอบใช้ทุกวัน และนี่แหละสิ่งที่จะทำให้คุณพลิ้วไหวดีใจ: เครื่องมือระดับมืออาชีพเหล่านี้ส่วนใหญ่ใช้ฟรีทั้งหมด! -![Intro Programming](../../../../translated_images/th/webdev101-programming.d6e3f98e61ac4bff.png) +![Intro Programming](../../../../translated_images/th/webdev101-programming.d6e3f98e61ac4bff.webp) > สเก็ตช์โน้ตโดย [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/th/1-getting-started-lessons/2-github-basics/README.md b/translations/th/1-getting-started-lessons/2-github-basics/README.md index e8054b75d..8e55487a4 100644 --- a/translations/th/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/th/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: เราจะเดินทางร่วมกันทีละก้าว ไม่มีเร่ง ไม่มีแรงกดดัน – แค่คุณ ฉัน และเครื่องมือเจ๋ง ๆ ที่กำลังจะเป็นเพื่อนใหม่ของคุณ! -![Intro to GitHub](../../../../translated_images/th/webdev101-github.8846d7971abef6f9.png) +![Intro to GitHub](../../../../translated_images/th/webdev101-github.8846d7971abef6f9.webp) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -605,7 +605,7 @@ flowchart TD ✅ วิธีที่ดีในการหาคลัง 'เหมาะสำหรับผู้เริ่มต้น' คือ [ค้นหาตามแท็ก 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/) -![Copy a repo locally](../../../../translated_images/th/clone_repo.5085c48d666ead57.png) +![Copy a repo locally](../../../../translated_images/th/clone_repo.5085c48d666ead57.webp) มีหลายวิธีในการคัดลอกโค้ด วิธีหนึ่งคือการ "clone" เนื้อหาของรีโปโดยใช้ HTTPS, SSH หรือใช้ GitHub CLI (Command Line Interface) diff --git a/translations/th/1-getting-started-lessons/3-accessibility/README.md b/translations/th/1-getting-started-lessons/3-accessibility/README.md index 6a84e0a6c..6453bf8bf 100644 --- a/translations/th/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/th/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # สร้างหน้าเว็บที่เข้าถึงได้ -![ทุกอย่างเกี่ยวกับการเข้าถึง](../../../../translated_images/th/webdev101-a11y.8ef3025c858d897a.png) +![ทุกอย่างเกี่ยวกับการเข้าถึง](../../../../translated_images/th/webdev101-a11y.8ef3025c858d897a.webp) > สเก็ตช์โน้ตโดย [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/th/2-js-basics/1-data-types/README.md b/translations/th/2-js-basics/1-data-types/README.md index 7b50c7cfd..beaeaba81 100644 --- a/translations/th/2-js-basics/1-data-types/README.md +++ b/translations/th/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript เบื้องต้น: ประเภทข้อมูล -![JavaScript Basics - Data types](../../../../translated_images/th/webdev101-js-datatypes.4cc470179730702c.png) +![JavaScript Basics - Data types](../../../../translated_images/th/webdev101-js-datatypes.4cc470179730702c.webp) > ภาพสเก็ตช์โดย [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/th/2-js-basics/2-functions-methods/README.md b/translations/th/2-js-basics/2-functions-methods/README.md index 77902b1e7..15cdf56ad 100644 --- a/translations/th/2-js-basics/2-functions-methods/README.md +++ b/translations/th/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript Basics: Methods and Functions -![JavaScript Basics - Functions](../../../../translated_images/th/webdev101-js-functions.be049c4726e94f8b.png) +![JavaScript Basics - Functions](../../../../translated_images/th/webdev101-js-functions.be049c4726e94f8b.webp) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/th/2-js-basics/3-making-decisions/README.md b/translations/th/2-js-basics/3-making-decisions/README.md index 913ff05ca..3d8fd0c90 100644 --- a/translations/th/2-js-basics/3-making-decisions/README.md +++ b/translations/th/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # พื้นฐาน JavaScript: การตัดสินใจ -![JavaScript Basics - Making decisions](../../../../translated_images/th/webdev101-js-decisions.69e1b20f272dd1f0.png) +![JavaScript Basics - Making decisions](../../../../translated_images/th/webdev101-js-decisions.69e1b20f272dd1f0.webp) > สเก็ตช์โน้ตโดย [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/th/2-js-basics/4-arrays-loops/README.md b/translations/th/2-js-basics/4-arrays-loops/README.md index 00d661633..1584990d7 100644 --- a/translations/th/2-js-basics/4-arrays-loops/README.md +++ b/translations/th/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript Basics: Arrays and Loops -![JavaScript Basics - Arrays](../../../../translated_images/th/webdev101-js-arrays.439d7528b8a29455.png) +![JavaScript Basics - Arrays](../../../../translated_images/th/webdev101-js-arrays.439d7528b8a29455.webp) > Sketchnote โดย [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/th/3-terrarium/1-intro-to-html/README.md b/translations/th/3-terrarium/1-intro-to-html/README.md index c237c5767..acf2cb5da 100644 --- a/translations/th/3-terrarium/1-intro-to-html/README.md +++ b/translations/th/3-terrarium/1-intro-to-html/README.md @@ -25,7 +25,7 @@ journey เพิ่มการเข้าถึง: 5: Student สร้างสวนพฤกษา: 5: Student ``` -![Introduction to HTML](../../../../translated_images/th/webdev101-html.4389c2067af68e98.png) +![Introduction to HTML](../../../../translated_images/th/webdev101-html.4389c2067af68e98.webp) > สเก็ตช์โน้ตโดย [Tomomi Imura](https://twitter.com/girlie_mac) HTML หรือที่เรียกว่า HyperText Markup Language คือรากฐานของเว็บไซต์ทุกเว็บไซต์ที่คุณเคยเยี่ยมชม ลองคิดว่า HTML เป็นโครงกระดูกที่ให้องค์ประกอบและโครงสร้างแก่หน้าเว็บ – มันกำหนดว่าคอนเทนต์อยู่ที่ไหน จัดระเบียบอย่างไร และแต่ละส่วนแทนความหมายอะไร ในขณะที่ CSS จะเป็นการ "แต่งตัว" ให้ HTML ของคุณด้วยสีสันและการจัดวาง และ JavaScript จะทำให้มันมีชีวิตชีวาด้วยความโต้ตอบ HTML จะให้โครงสร้างที่จำเป็นซึ่งทำให้ทุกอย่างเป็นไปได้ @@ -86,7 +86,7 @@ mindmap 4. ในแผง Explorer คลิกไอคอน "New File" 5. ตั้งชื่อไฟล์ของคุณว่า `index.html` -![VS Code Explorer showing new file creation](../../../../translated_images/th/vs-code-index.e2986cf919471eb9.png) +![VS Code Explorer showing new file creation](../../../../translated_images/th/vs-code-index.e2986cf919471eb9.webp) **ตัวเลือกที่ 2: ใช้คำสั่ง Terminal** ```bash diff --git a/translations/th/3-terrarium/2-intro-to-css/README.md b/translations/th/3-terrarium/2-intro-to-css/README.md index 75170cf16..9f11250a8 100644 --- a/translations/th/3-terrarium/2-intro-to-css/README.md +++ b/translations/th/3-terrarium/2-intro-to-css/README.md @@ -29,7 +29,7 @@ journey การออกแบบตอบสนอง: 5: Student การสะท้อนของแก้ว: 5: Student ``` -![Introduction to CSS](../../../../translated_images/th/webdev101-css.3f7af5991bf53a20.png) +![Introduction to CSS](../../../../translated_images/th/webdev101-css.3f7af5991bf53a20.webp) > สเก็ตช์โน้ตโดย [Tomomi Imura](https://twitter.com/girlie_mac) จำได้ไหมว่า Terrarium HTML ของคุณดูเรียบง่ายมาก? CSS คือที่ที่เราจะเปลี่ยนโครงสร้างธรรมดานั้นให้กลายเป็นสิ่งที่ดูน่าดึงดูดทางสายตา @@ -202,7 +202,7 @@ body { เปิดเครื่องมือสำหรับนักพัฒนาในบราวเซอร์ของคุณ (F12) ไปที่แท็บ Elements แล้วตรวจสอบองค์ประกอบ `

` คุณจะเห็นว่ามันได้รับการสืบทอดฟอนต์จาก body: -![inherited font](../../../../translated_images/th/1.cc07a5cbe114ad1d.png) +![inherited font](../../../../translated_images/th/1.cc07a5cbe114ad1d.webp) ✅ **เวลาทดลอง**: ลองตั้งค่าคุณสมบัติที่สืบทอดได้อื่นๆ บน `` เช่น `color`, `line-height`, หรือ `text-align` ดูสิว่า heading และองค์ประกอบอื่นๆ จะเปลี่ยนอย่างไร diff --git a/translations/th/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/th/3-terrarium/3-intro-to-DOM-and-closures/README.md index 412368308..c0675ed64 100644 --- a/translations/th/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/th/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -25,7 +25,7 @@ journey ทดสอบฟังก์ชั่น: 5: Student เสร็จสิ้น terrarium: 5: Student ``` -![DOM and a closure](../../../../translated_images/th/webdev101-js.10280393044d7eaa.png) +![DOM and a closure](../../../../translated_images/th/webdev101-js.10280393044d7eaa.webp) > สเกตช์โน้ตโดย [Tomomi Imura](https://twitter.com/girlie_mac) ยินดีต้อนรับสู่หนึ่งในแง่มุมที่น่าตื่นเต้นที่สุดของการพัฒนาเว็บ - การทำให้สิ่งต่าง ๆ มีปฏิสัมพันธ์! Document Object Model (DOM) เหมือนสะพานเชื่อมระหว่าง HTML และ JavaScript ของคุณ และวันนี้เราจะใช้มันเพื่อทำให้ Terrarium ของคุณมีชีวิต เมื่อ Tim Berners-Lee สร้างเว็บเบราว์เซอร์ตัวแรก เขาได้จินตนาการถึงเว็บที่เอกสารสามารถมีความไดนามิกและโต้ตอบได้ - DOM ทำให้วิสัยทัศน์นั้นเป็นไปได้ @@ -102,7 +102,7 @@ flowchart TD style P fill:#ffebee style Q fill:#ffebee ``` -![DOM tree representation](../../../../translated_images/th/dom-tree.7daf0e763cbbba92.png) +![DOM tree representation](../../../../translated_images/th/dom-tree.7daf0e763cbbba92.webp) > การแสดงภาพของ DOM และเครื่องหมาย HTML ที่อ้างอิงถึงมัน จาก [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -146,7 +146,7 @@ flowchart LR ``` > 💡 **ทำความเข้าใจ Closures**: Closures เป็นหัวข้อสำคัญใน JavaScript และนักพัฒนาหลายคนใช้มันมาหลายปีก่อนที่จะเข้าใจทุกแง่มุมทางทฤษฎี วันนี้เราจะเน้นไปที่การประยุกต์ใช้ในทางปฏิบัติ - คุณจะเห็น closures ปรากฏขึ้นเองตามธรรมชาติเมื่อเราสร้างฟีเจอร์ที่มีปฏิสัมพันธ์ ความเข้าใจจะพัฒนาขึ้นเมื่อคุณเห็นว่ามันแก้ปัญหาจริงอย่างไร -![DOM tree representation](../../../../translated_images/th/dom-tree.7daf0e763cbbba92.png) +![DOM tree representation](../../../../translated_images/th/dom-tree.7daf0e763cbbba92.webp) > การแสดงภาพของ DOM และเครื่องหมาย HTML ที่อ้างอิงถึงมัน จาก [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -591,7 +591,7 @@ function stopElementDrag() { - **รองรับอุปกรณ์หลากหลาย**: ทำงานได้ทั้งบนเดสก์ท็อปและมือถือ - **รอบคอบด้านประสิทธิภาพ**: ไม่มีการรั่วไหลของหน่วยความจำหรือการคำนวณซ้ำซ้อน -![finished terrarium](../../../../translated_images/th/terrarium-final.0920f16e87c13a84.png) +![finished terrarium](../../../../translated_images/th/terrarium-final.0920f16e87c13a84.webp) --- diff --git a/translations/th/3-terrarium/solution/README.md b/translations/th/3-terrarium/solution/README.md index e418ce368..f6680aa36 100644 --- a/translations/th/3-terrarium/solution/README.md +++ b/translations/th/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: โค้ดเล็กๆ ที่สามารถลากและวางได้ พร้อมด้วย HTML, JS และ CSS คุณสามารถสร้างอินเทอร์เฟซเว็บ ออกแบบสไตล์ และเพิ่มการโต้ตอบได้ -![my terrarium](../../../../translated_images/th/screenshot_gray.0c796099a1f9f25e.png) +![my terrarium](../../../../translated_images/th/screenshot_gray.0c796099a1f9f25e.webp) ## เครดิต diff --git a/translations/th/5-browser-extension/1-about-browsers/README.md b/translations/th/5-browser-extension/1-about-browsers/README.md index 1ff172e37..c8af8844b 100644 --- a/translations/th/5-browser-extension/1-about-browsers/README.md +++ b/translations/th/5-browser-extension/1-about-browsers/README.md @@ -25,7 +25,7 @@ journey Debug issues: 4: Student Polish experience: 5: Student ``` -![สเก็ตช์โน้ตเบราว์เซอร์](../../../../translated_images/th/browser.60317c9be8b7f84a.jpg) +![สเก็ตช์โน้ตเบราว์เซอร์](../../../../translated_images/th/browser.60317c9be8b7f84a.webp) > สเก็ตช์โน้ตโดย [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## แบบทดสอบก่อนบรรยาย @@ -77,7 +77,7 @@ mindmap ✅ **ประวัติเล็กน้อย**: เบราว์เซอร์ตัวแรกเรียกว่า 'WorldWideWeb' และถูกสร้างโดย Sir Timothy Berners-Lee ในปี 1990 -![เบราว์เซอร์ยุคแรก](../../../../translated_images/th/earlybrowsers.d984b711cdf3a42d.jpg) +![เบราว์เซอร์ยุคแรก](../../../../translated_images/th/earlybrowsers.d984b711cdf3a42d.webp) > เบราว์เซอร์ยุคแรกบางส่วน โดย [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### เบราว์เซอร์ประมวลผลเนื้อหาเว็บอย่างไร @@ -194,7 +194,7 @@ quadrantChart ความเข้าใจขั้นตอนการติดตั้งส่วนขยายช่วยให้คาดการณ์ประสบการณ์ผู้ใช้เมื่อผู้คนติดตั้งส่วนขยายของคุณได้ กระบวนการติดตั้งถูกมาตรฐานแล้วในเบราว์เซอร์สมัยใหม่ โดยมีการปรับเปลี่ยนเล็กน้อยในรูปแบบอินเทอร์เฟซ -![ภาพหน้าจอเบราว์เซอร์ Edge แสดงหน้า edge://extensions ที่เปิดอยู่และเมนูการตั้งค่าเปิดอยู่](../../../../translated_images/th/install-on-edge.d68781acaf0b3d3d.png) +![ภาพหน้าจอเบราว์เซอร์ Edge แสดงหน้า edge://extensions ที่เปิดอยู่และเมนูการตั้งค่าเปิดอยู่](../../../../translated_images/th/install-on-edge.d68781acaf0b3d3d.webp) > **สำคัญ**: อย่าลืมเปิดโหมดนักพัฒนาและอนุญาตส่วนขยายจากแหล่งอื่นเมื่อทดสอบส่วนขยายของคุณเอง @@ -308,10 +308,10 @@ project-root/ ### ภาพรวมมุมมองส่วนขยาย **มุมมองการตั้งค่า** - การตั้งค่าสำหรับผู้ใช้ครั้งแรก: -![ภาพหน้าจอส่วนขยายสมบูรณ์ที่เปิดในเบราว์เซอร์ แสดงฟอร์มพร้อมช่องกรอกชื่อภูมิภาคและกุญแจ API](../../../../translated_images/th/1.b6da8c1394b07491.png) +![ภาพหน้าจอส่วนขยายสมบูรณ์ที่เปิดในเบราว์เซอร์ แสดงฟอร์มพร้อมช่องกรอกชื่อภูมิภาคและกุญแจ API](../../../../translated_images/th/1.b6da8c1394b07491.webp) **มุมมองผลลัพธ์** - แสดงข้อมูลรอยเท้าคาร์บอน: -![ภาพหน้าจอส่วนขยายสมบูรณ์ที่แสดงค่าการใช้คาร์บอนและเปอร์เซ็นต์เชื้อเพลิงฟอสซิลของภูมิภาค US-NEISO](../../../../translated_images/th/2.1dae52ff08042246.png) +![ภาพหน้าจอส่วนขยายสมบูรณ์ที่แสดงค่าการใช้คาร์บอนและเปอร์เซ็นต์เชื้อเพลิงฟอสซิลของภูมิภาค US-NEISO](../../../../translated_images/th/2.1dae52ff08042246.webp) ### สร้างฟอร์มการตั้งค่า diff --git a/translations/th/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/th/5-browser-extension/2-forms-browsers-local-storage/README.md index 5df415fd5..e5ec6b9f8 100644 --- a/translations/th/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/th/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -263,7 +263,7 @@ stateDiagram-v2 Reset --> ClearStorage: ลบข้อมูลที่เก็บไว้ ClearStorage --> FirstTime: กลับไปตั้งค่า ``` -![Local storage pane](../../../../translated_images/th/localstorage.472f8147b6a3f8d1.png) +![Local storage pane](../../../../translated_images/th/localstorage.472f8147b6a3f8d1.webp) > ⚠️ **ข้อพิจารณาด้านความปลอดภัย**: ในแอปพลิเคชันจริง การเก็บกุญแจ API ใน LocalStorage มีความเสี่ยงทางความปลอดภัยเพราะ JavaScript เข้าถึงข้อมูลนี้ได้ สำหรับการเรียนรู้วิธีนี้ใช้ได้ แต่แอปจริงควรเก็บข้อมูลลับอย่างปลอดภัยบนเซิร์ฟเวอร์ diff --git a/translations/th/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/th/5-browser-extension/3-background-tasks-and-performance/README.md index 91544d93e..a389fe437 100644 --- a/translations/th/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/th/5-browser-extension/3-background-tasks-and-performance/README.md @@ -123,7 +123,7 @@ flowchart LR ลองทำกัน เปิดเว็บไซต์ (เช่น Microsoft.com) แล้วคลิก 'Record' ตอนนี้รีเฟรชหน้าและดูโปรไฟล์เลอร์จับภาพทุกอย่างที่เกิดขึ้น เมื่อคุณหยุดบันทึก คุณจะเห็นการแจกแจงรายละเอียดว่าตัวเบราว์เซอร์ 'รันสคริปต์' 'เรนเดอร์' และ 'เพ้นท์' หน้าอย่างไร มันทำให้นึกถึงวิธีที่ศูนย์ควบคุมภารกิจติดตามระบบทุกอย่างในช่วงปล่อยจรวด — คุณจะได้ข้อมูลเรียลไทม์เกี่ยวกับสิ่งที่เกิดขึ้นและเมื่อไหร่ -![Edge profiler](../../../../translated_images/th/profiler.5a4a62479c5df01c.png) +![Edge profiler](../../../../translated_images/th/profiler.5a4a62479c5df01c.webp) ✅ [เอกสาร Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) มีรายละเอียดมากมายหากคุณอยากค้นลึกลงไป @@ -133,11 +133,11 @@ flowchart LR ดูภาพรวมประสิทธิภาพของหน้าด้วยการเลือกช่วงหนึ่งของไทม์ไลน์โปรไฟล์และดูที่แผงสรุป: -![Edge profiler snapshot](../../../../translated_images/th/snapshot.97750180ebcad737.png) +![Edge profiler snapshot](../../../../translated_images/th/snapshot.97750180ebcad737.webp) ตรวจสอบแผง Event Log เพื่อดูว่าเหตุการณ์ไหนใช้เวลานานเกิน 15 มิลลิวินาทีหรือไม่: -![Edge event log](../../../../translated_images/th/log.804026979f3707e0.png) +![Edge event log](../../../../translated_images/th/log.804026979f3707e0.webp) ✅ ทำความรู้จักกับโปรไฟล์เลอร์ของคุณ! เปิด developer tools บนไซต์นี้แล้วดูว่ามีคอขวดไหนหรือไม่ ทรัพย์สินที่โหลดช้าที่สุดคืออะไร? อันที่เร็วที่สุด? diff --git a/translations/th/5-browser-extension/README.md b/translations/th/5-browser-extension/README.md index bf88dd57e..9ac41e7dc 100644 --- a/translations/th/5-browser-extension/README.md +++ b/translations/th/5-browser-extension/README.md @@ -23,7 +23,7 @@ CO_OP_TRANSLATOR_METADATA: ### เครดิต -![ส่วนขยายเบราว์เซอร์สีเขียว](../../../translated_images/th/extension-screenshot.0e7f5bfa110e92e3.png) +![ส่วนขยายเบราว์เซอร์สีเขียว](../../../translated_images/th/extension-screenshot.0e7f5bfa110e92e3.webp) ## เครดิต diff --git a/translations/th/5-browser-extension/solution/README.md b/translations/th/5-browser-extension/solution/README.md index d42e7094a..3b7c78abd 100644 --- a/translations/th/5-browser-extension/solution/README.md +++ b/translations/th/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: ใช้ API C02 Signal ของ tmrow เพื่อติดตามการใช้ไฟฟ้า สร้างส่วนขยายเบราว์เซอร์เพื่อให้คุณมีตัวเตือนในเบราว์เซอร์เกี่ยวกับการใช้ไฟฟ้าที่หนักในภูมิภาคของคุณ การใช้ส่วนขยายนี้แบบตามความต้องการจะช่วยให้คุณตัดสินใจเกี่ยวกับกิจกรรมของคุณโดยอิงจากข้อมูลนี้ -![ภาพหน้าจอส่วนขยาย](../../../../translated_images/th/extension-screenshot.0e7f5bfa110e92e3.png) +![ภาพหน้าจอส่วนขยาย](../../../../translated_images/th/extension-screenshot.0e7f5bfa110e92e3.webp) ## เริ่มต้นใช้งาน @@ -31,7 +31,7 @@ npm run build ในการติดตั้งบน Edge ให้ใช้เมนู 'สามจุด' ที่มุมขวาบนของเบราว์เซอร์เพื่อค้นหาแผงส่วนขยาย จากนั้นเลือก 'โหลดแบบไม่บรรจุ' เพื่อโหลดส่วนขยายใหม่ เปิดโฟลเดอร์ 'dist' เมื่อมีการแจ้งเตือนและส่วนขยายจะถูกโหลด ในการใช้งาน คุณจะต้องมีคีย์ API สำหรับ API ของ CO2 Signal ([รับคีย์ได้ที่นี่ผ่านอีเมล](https://www.co2signal.com/) - ใส่อีเมลของคุณในช่องบนหน้านี้) และ [รหัสสำหรับภูมิภาคของคุณ](http://api.electricitymap.org/v3/zones) ที่สอดคล้องกับ [Electricity Map](https://www.electricitymap.org/map) (เช่น ในบอสตัน ฉันใช้ 'US-NEISO') -![การติดตั้ง](../../../../translated_images/th/install-on-edge.78634f02842c4828.png) +![การติดตั้ง](../../../../translated_images/th/install-on-edge.78634f02842c4828.webp) เมื่อใส่คีย์ API และภูมิภาคลงในอินเทอร์เฟซของส่วนขยายแล้ว จุดสีในแถบส่วนขยายเบราว์เซอร์ควรเปลี่ยนไปสะท้อนการใช้พลังงานในภูมิภาคของคุณ และให้คำแนะนำเกี่ยวกับกิจกรรมที่ใช้พลังงานหนักที่เหมาะสมสำหรับคุณ แนวคิดเบื้องหลังระบบ 'จุดสี' นี้ได้รับแรงบันดาลใจจาก [ส่วนขยาย Energy Lollipop](https://energylollipop.com/) สำหรับการปล่อยก๊าซในแคลิฟอร์เนีย diff --git a/translations/th/5-browser-extension/solution/translation/README.fr.md b/translations/th/5-browser-extension/solution/translation/README.fr.md index 351ce4149..3fcb58147 100644 --- a/translations/th/5-browser-extension/solution/translation/README.fr.md +++ b/translations/th/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: โดยใช้ API C02 Signal จาก tmrow เพื่อติดตามการใช้ไฟฟ้า สร้างส่วนขยายเบราว์เซอร์เพื่อให้คุณสามารถรับการแจ้งเตือนโดยตรงในเบราว์เซอร์เกี่ยวกับการใช้ไฟฟ้าในพื้นที่ของคุณ การใช้ส่วนขยายนี้จะช่วยให้คุณตัดสินใจเกี่ยวกับกิจกรรมของคุณโดยอิงจากข้อมูลเหล่านี้ -![ภาพหน้าจอส่วนขยาย](../../../../../translated_images/th/extension-screenshot.0e7f5bfa110e92e3.png) +![ภาพหน้าจอส่วนขยาย](../../../../../translated_images/th/extension-screenshot.0e7f5bfa110e92e3.webp) ## เริ่มต้น @@ -31,7 +31,7 @@ npm run build สำหรับการติดตั้งบน Edge ให้ใช้เมนู 'สามจุด' ที่มุมขวาบนของเบราว์เซอร์เพื่อค้นหาแผง Extensions จากนั้นเลือก 'โหลดส่วนขยายที่ยังไม่ได้บีบอัด' เพื่อโหลดส่วนขยายใหม่ เปิดโฟลเดอร์ 'dist' เมื่อมีการแจ้งเตือน และส่วนขยายจะถูกโหลด เพื่อใช้งาน คุณจะต้องมี API key สำหรับ API ของ CO2 Signal ([รับได้ที่นี่ผ่านอีเมล](https://www.co2signal.com/) - ใส่อีเมลของคุณในช่องบนหน้านี้) และ [รหัสสำหรับพื้นที่ของคุณ](http://api.electricitymap.org/v3/zones) ที่ตรงกับ [แผนที่ไฟฟ้า](https://www.electricitymap.org/map) (เช่น ในบอสตัน ฉันใช้ 'US-NEISO') -![การติดตั้ง](../../../../../translated_images/th/install-on-edge.78634f02842c4828.png) +![การติดตั้ง](../../../../../translated_images/th/install-on-edge.78634f02842c4828.webp) เมื่อใส่ API key และรหัสพื้นที่ลงในอินเทอร์เฟซของส่วนขยายแล้ว จุดสีในแถบส่วนขยายของเบราว์เซอร์ควรเปลี่ยนไปเพื่อสะท้อนการใช้พลังงานในพื้นที่ของคุณ และให้ตัวบ่งชี้เกี่ยวกับกิจกรรมที่ใช้พลังงานที่เหมาะสมสำหรับคุณ แนวคิดเบื้องหลังระบบ 'จุดสี' นี้ได้รับแรงบันดาลใจจาก [ส่วนขยาย Energy Lollipop](https://energylollipop.com/) สำหรับการปล่อยก๊าซในแคลิฟอร์เนีย diff --git a/translations/th/5-browser-extension/solution/translation/README.hi.md b/translations/th/5-browser-extension/solution/translation/README.hi.md index 47598f3f1..2367c1167 100644 --- a/translations/th/5-browser-extension/solution/translation/README.hi.md +++ b/translations/th/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: ใช้ API ของ CO2 Signal จาก tmrow เพื่อติดตามการใช้ไฟฟ้า สร้างส่วนขยายเบราว์เซอร์เพื่อเตือนคุณเกี่ยวกับการใช้ไฟฟ้าในพื้นที่ของคุณผ่านเบราว์เซอร์ การใช้ส่วนขยายนี้จะช่วยให้คุณตัดสินใจเกี่ยวกับกิจกรรมของคุณโดยอิงจากข้อมูลนี้ -![ภาพหน้าจอส่วนขยาย](../../../../../translated_images/th/extension-screenshot.0e7f5bfa110e92e3.png) +![ภาพหน้าจอส่วนขยาย](../../../../../translated_images/th/extension-screenshot.0e7f5bfa110e92e3.webp) ## เริ่มต้น @@ -31,7 +31,7 @@ npm run build สำหรับการติดตั้งบน Edge ให้ใช้เมนู 'สามจุด' ที่มุมขวาบนของเบราว์เซอร์เพื่อค้นหาแผงส่วนขยาย จากนั้นเลือก 'โหลดแบบไม่บรรจุ' เพื่อโหลดส่วนขยายใหม่ เปิดโฟลเดอร์ 'dist' ที่ปรากฏในพรอมต์ และส่วนขยายจะถูกโหลด เพื่อใช้งาน คุณจะต้องมีคีย์ API ของ CO2 Signal ([รับได้ทางอีเมลที่นี่](https://www.co2snal.com/) โดยกรอกอีเมลของคุณในช่องบนหน้าเว็บนี้) และ [รหัสพื้นที่ของคุณ](http://api.electricitymap.org/v3/zones) จาก [แผนที่ไฟฟ้า](https://www.electricitymap.org/map) (ตัวอย่างเช่น ในบอสตัน ฉันใช้ 'US-NEISO') -![การติดตั้ง](../../../../../translated_images/th/install-on-edge.78634f02842c4828.png) +![การติดตั้ง](../../../../../translated_images/th/install-on-edge.78634f02842c4828.webp) เมื่อคุณป้อนคีย์ API และรหัสพื้นที่ในอินเทอร์เฟซของส่วนขยายแล้ว จุดสีในแถบส่วนขยายเบราว์เซอร์ควรเปลี่ยนไปสะท้อนการใช้พลังงานในพื้นที่ของคุณ และให้ตัวบ่งชี้ว่ากิจกรรมที่ใช้พลังงานสูงเหมาะสมกับการดำเนินการของคุณหรือไม่ แนวคิดของระบบ 'จุดสี' นี้ได้รับแรงบันดาลใจจาก [ส่วนขยาย Energy Lollipop](https://energylollipop.com/) สำหรับการปล่อยพลังงานในแคลิฟอร์เนีย diff --git a/translations/th/5-browser-extension/solution/translation/README.it.md b/translations/th/5-browser-extension/solution/translation/README.it.md index d0ae545b3..f1f83c615 100644 --- a/translations/th/5-browser-extension/solution/translation/README.it.md +++ b/translations/th/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: เราจะใช้ API Signal CO2 ของ tmrow เพื่อติดตามการใช้ไฟฟ้าและสร้างส่วนขยายสำหรับเบราว์เซอร์ เพื่อให้คุณสามารถรับการแจ้งเตือนโดยตรงในเบราว์เซอร์เกี่ยวกับการใช้ไฟฟ้าในภูมิภาคของคุณ การใช้ส่วนขยายนี้จะช่วยให้คุณประเมินกิจกรรมของคุณตามข้อมูลดังกล่าวได้ -![ภาพหน้าจอของส่วนขยาย](../../../../../translated_images/th/extension-screenshot.0e7f5bfa110e92e3.png) +![ภาพหน้าจอของส่วนขยาย](../../../../../translated_images/th/extension-screenshot.0e7f5bfa110e92e3.webp) ## เริ่มต้น @@ -31,7 +31,7 @@ npm run build สำหรับการติดตั้งบน Edge ให้ใช้เมนู "สามจุด" ที่มุมขวาบนของเบราว์เซอร์เพื่อค้นหาแผงควบคุมส่วนขยาย หากยังไม่ได้เปิดใช้งาน ให้เปิดใช้งานโหมดนักพัฒนา (ที่มุมล่างซ้าย) จากนั้นเลือก "โหลดแบบไม่บีบอัด" เพื่อเพิ่มส่วนขยายใหม่ เปิดโฟลเดอร์ "dist" ในหน้าต่างที่ปรากฏขึ้น และส่วนขยายจะถูกโหลด สำหรับการใช้งาน คุณจะต้องมี API key สำหรับ CO2 Signal API (คุณสามารถ[ขอรับได้ที่นี่ผ่านอีเมล](https://www.co2signal.com/) - ใส่อีเมลของคุณในช่องบนหน้านั้น) และ [รหัสสำหรับภูมิภาคของคุณ](http://api.electricitymap.org/v3/zones) ที่สอดคล้องกับ [แผนที่ไฟฟ้า](https://www.electricitymap.org/map) (เช่น ในบอสตัน รหัสคือ "US-NEISO") -![การติดตั้ง](../../../../../translated_images/th/install-on-edge.78634f02842c4828.png) +![การติดตั้ง](../../../../../translated_images/th/install-on-edge.78634f02842c4828.webp) เมื่อคุณใส่ API key และรหัสภูมิภาคในอินเทอร์เฟซของส่วนขยายแล้ว จุดสีในแถบส่วนขยายของเบราว์เซอร์ควรเปลี่ยนไปเพื่อสะท้อนการใช้พลังงานในภูมิภาค และให้คำแนะนำเกี่ยวกับกิจกรรมที่ใช้พลังงานสูงที่เหมาะสมในการดำเนินการ แนวคิดของระบบ "จุดสี" นี้ได้รับแรงบันดาลใจจาก [ส่วนขยาย Energy Lollipop](https://energylollipop.com/) สำหรับการปล่อยก๊าซในแคลิฟอร์เนีย diff --git a/translations/th/5-browser-extension/solution/translation/README.ja.md b/translations/th/5-browser-extension/solution/translation/README.ja.md index d615a41e5..073c48773 100644 --- a/translations/th/5-browser-extension/solution/translation/README.ja.md +++ b/translations/th/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: สร้างส่วนขยายเบราว์เซอร์ที่สามารถแสดงการแจ้งเตือนบนเบราว์เซอร์เกี่ยวกับการใช้พลังงานในพื้นที่ของคุณ โดยใช้ API ของ C02 Signal จาก tmrow เพื่อช่วยติดตามการใช้พลังงานของคุณ คุณสามารถใช้ส่วนขยายนี้เพื่อช่วยตัดสินใจกิจกรรมของคุณตามข้อมูลที่ได้รับ -![extension screenshot](../../../../../translated_images/th/extension-screenshot.0e7f5bfa110e92e3.png) +![extension screenshot](../../../../../translated_images/th/extension-screenshot.0e7f5bfa110e92e3.webp) ## เริ่มต้น @@ -31,7 +31,7 @@ npm run build ในการติดตั้งบน Edge ให้ไปที่เมนู "จุดสามจุด" ที่มุมขวาบนของเบราว์เซอร์ แล้วค้นหาแผง "ส่วนขยาย" จากนั้นเลือก "Load Unpacked" เพื่อโหลดส่วนขยายใหม่ เมื่อมีการแจ้งเตือน ให้เปิดโฟลเดอร์ "dist" และส่วนขยายจะถูกโหลดขึ้นมา ในการใช้งาน คุณจะต้องมี API Key ของ CO2 Signal ([รับได้ที่นี่ผ่านอีเมล](https://www.co2signal.com/) - เพียงกรอกอีเมลในกล่องบนหน้านั้น) และ [รหัสสำหรับพื้นที่ของคุณ](http://api.electricitymap.org/v3/zones) ที่รองรับโดย [Electricity Map](https://www.electricitymap.org/map) (ตัวอย่างเช่น ในบอสตัน ใช้ 'US-NEISO') -![installing](../../../../../translated_images/th/install-on-edge.78634f02842c4828.png) +![installing](../../../../../translated_images/th/install-on-edge.78634f02842c4828.webp) เมื่อคุณป้อน API Key และรหัสพื้นที่ในอินเทอร์เฟซของส่วนขยายแล้ว จุดสีที่แสดงในแถบส่วนขยายของเบราว์เซอร์จะเปลี่ยนไปตามการใช้พลังงานในพื้นที่ของคุณ จุดสีนี้จะช่วยบอกว่ากิจกรรมใดที่เหมาะสมกับการใช้พลังงานในขณะนั้น แนวคิดของระบบ "จุดสี" นี้ได้รับแรงบันดาลใจจาก [Energy Lollipop extension](https://energylollipop.com/) สำหรับการปล่อยก๊าซในแคลิฟอร์เนีย diff --git a/translations/th/5-browser-extension/solution/translation/README.ms.md b/translations/th/5-browser-extension/solution/translation/README.ms.md index b86b8ba87..54cc7e842 100644 --- a/translations/th/5-browser-extension/solution/translation/README.ms.md +++ b/translations/th/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: ใช้ API สัญญาณ CO2 ของ tmrow เพื่อตรวจจับการใช้ไฟฟ้า สร้างส่วนขยายเบราว์เซอร์เพื่อให้คุณได้รับการแจ้งเตือนในเบราว์เซอร์เกี่ยวกับความเข้มข้นของการใช้ไฟฟ้าในพื้นที่ของคุณ การใช้ส่วนขยายนี้จะช่วยให้คุณตัดสินใจเกี่ยวกับกิจกรรมของคุณโดยอิงจากข้อมูลนี้ -![ภาพหน้าจอส่วนขยายเบราว์เซอร์](../../../../../translated_images/th/extension-screenshot.0e7f5bfa110e92e3.png) +![ภาพหน้าจอส่วนขยายเบราว์เซอร์](../../../../../translated_images/th/extension-screenshot.0e7f5bfa110e92e3.webp) ## เริ่มต้นที่นี่ @@ -31,7 +31,7 @@ npm run build สำหรับการติดตั้งใน Edge ให้ใช้เมนู 'สามจุด' ที่มุมขวาบนของเบราว์เซอร์เพื่อค้นหาแผงส่วนขยาย จากนั้นเลือก 'Load Unpacked' เพื่อโหลดส่วนขยายใหม่ เปิดโฟลเดอร์ 'dist' ตามคำขอ และส่วนขยายจะถูกโหลด สำหรับการใช้งาน คุณจะต้องมี API key สำหรับ API สัญญาณ CO2 ([รับได้ที่นี่ผ่านอีเมล](https://www.co2signal.com/) - ใส่อีเมลของคุณในช่องบนหน้านี้) และ [รหัสสำหรับพื้นที่ของคุณ](http://api.electricitymap.org/v3/zones) ที่สอดคล้องกับ [Electricity Map](https://www.electricitymap.org/map) (ในบอสตัน ตัวอย่างเช่น ฉันใช้ 'US-NEISO') -![กำลังดาวน์โหลด](../../../../../translated_images/th/install-on-edge.78634f02842c4828.png) +![กำลังดาวน์โหลด](../../../../../translated_images/th/install-on-edge.78634f02842c4828.webp) เมื่อใส่ API key และพื้นที่ลงในอินเทอร์เฟซของส่วนขยายแล้ว จุดสีในแถบส่วนขยายของเบราว์เซอร์จะเปลี่ยนไปเพื่อสะท้อนถึงการใช้พลังงานในพื้นที่ของคุณ และให้คำแนะนำเกี่ยวกับกิจกรรมที่เหมาะสมที่คุณควรทำ แนวคิดเบื้องหลังระบบ 'จุดสี' นี้ได้รับแรงบันดาลใจจาก [ส่วนขยายเบราว์เซอร์ Energy Lollipop](https://energylollipop.com/) สำหรับการปล่อยพลังงานในแคลิฟอร์เนีย diff --git a/translations/th/5-browser-extension/start/README.md b/translations/th/5-browser-extension/start/README.md index 1dec8fb03..d4f4c7ac1 100644 --- a/translations/th/5-browser-extension/start/README.md +++ b/translations/th/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: ใช้ API C02 Signal ของ tmrow เพื่อติดตามการใช้ไฟฟ้า สร้างส่วนขยายเบราว์เซอร์เพื่อให้คุณมีการแจ้งเตือนในเบราว์เซอร์เกี่ยวกับการใช้ไฟฟ้าในภูมิภาคของคุณ การใช้ส่วนขยายนี้เป็นครั้งคราวจะช่วยให้คุณตัดสินใจเกี่ยวกับกิจกรรมต่าง ๆ โดยอิงจากข้อมูลนี้ -![ภาพหน้าจอส่วนขยาย](../../../../translated_images/th/extension-screenshot.0e7f5bfa110e92e3.png) +![ภาพหน้าจอส่วนขยาย](../../../../translated_images/th/extension-screenshot.0e7f5bfa110e92e3.webp) ## เริ่มต้นใช้งาน @@ -31,7 +31,7 @@ npm run build สำหรับการติดตั้งบน Edge ให้ใช้เมนู 'สามจุด' ที่มุมขวาบนของเบราว์เซอร์เพื่อค้นหาแผงส่วนขยาย จากนั้นเลือก 'โหลดแบบไม่บรรจุ' เพื่อโหลดส่วนขยายใหม่ เปิดโฟลเดอร์ 'dist' เมื่อมีการแจ้งเตือนและส่วนขยายจะถูกโหลด เพื่อใช้งาน คุณจะต้องมี API key สำหรับ API ของ CO2 Signal ([รับได้ที่นี่ผ่านอีเมล](https://www.co2signal.com/) - ใส่อีเมลของคุณในช่องบนหน้านี้) และ [รหัสสำหรับภูมิภาคของคุณ](http://api.electricitymap.org/v3/zones) ที่สอดคล้องกับ [Electricity Map](https://www.electricitymap.org/map) (เช่น ในบอสตัน ฉันใช้ 'US-NEISO') -![การติดตั้ง](../../../../translated_images/th/install-on-edge.78634f02842c4828.png) +![การติดตั้ง](../../../../translated_images/th/install-on-edge.78634f02842c4828.webp) เมื่อใส่ API key และรหัสภูมิภาคลงในอินเทอร์เฟซของส่วนขยายแล้ว จุดสีในแถบส่วนขยายเบราว์เซอร์ควรเปลี่ยนไปเพื่อสะท้อนการใช้พลังงานในภูมิภาคของคุณ และให้คำแนะนำเกี่ยวกับกิจกรรมที่ใช้พลังงานหนักที่เหมาะสมสำหรับคุณ แนวคิดเบื้องหลังระบบ 'จุดสี' นี้ได้รับแรงบันดาลใจจาก [ส่วนขยาย Energy Lollipop](https://energylollipop.com/) สำหรับการปล่อยก๊าซในแคลิฟอร์เนีย diff --git a/translations/th/6-space-game/2-drawing-to-canvas/README.md b/translations/th/6-space-game/2-drawing-to-canvas/README.md index ffa6f7ce2..5cd95457e 100644 --- a/translations/th/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/th/6-space-game/2-drawing-to-canvas/README.md @@ -105,7 +105,7 @@ quadrantChart Power-up: [0.7, 0.6] UI Elements: [0.9, 0.1] ``` -![กริดของแคนวาส](../../../../translated_images/th/canvas_grid.5f209da785ded492.png) +![กริดของแคนวาส](../../../../translated_images/th/canvas_grid.5f209da785ded492.webp) > ภาพจาก [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) ในการวาดบนองค์ประกอบแคนวาส คุณจะทำตามกระบวนการสามขั้นตอนพื้นฐานนี้ซึ่งเป็นรากฐานของกราฟิกบนแคนวาส เมื่อคุณทำได้สักพักจะกลายเป็นเรื่องง่าย: @@ -323,11 +323,11 @@ flowchart TD - เรือฮีโร่ - ![Hero ship](../../../../translated_images/th/player.dd24c1afa8c71e9b.png) + ![Hero ship](../../../../translated_images/th/player.dd24c1afa8c71e9b.webp) - มอนสเตอร์ขนาด 5*5 - ![Monster ship](../../../../translated_images/th/enemyShip.5df2a822c16650c2.png) + ![Monster ship](../../../../translated_images/th/enemyShip.5df2a822c16650c2.webp) ### ขั้นตอนแนะนำสำหรับเริ่มพัฒนา @@ -463,7 +463,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { ผลลัพธ์ที่เสร็จสมบูรณ์ควรมีลักษณะดังนี้: -![Black screen with a hero and 5*5 monsters](../../../../translated_images/th/partI-solution.36c53b48c9ffae2a.png) +![Black screen with a hero and 5*5 monsters](../../../../translated_images/th/partI-solution.36c53b48c9ffae2a.webp) ## วิธีแก้ปัญหา diff --git a/translations/th/6-space-game/5-keeping-score/README.md b/translations/th/6-space-game/5-keeping-score/README.md index ee3b72b5b..12c2a3644 100644 --- a/translations/th/6-space-game/5-keeping-score/README.md +++ b/translations/th/6-space-game/5-keeping-score/README.md @@ -155,7 +155,7 @@ sequenceDiagram end ``` - **ระบบคะแนน**: ยานศัตรูแต่ละลำที่ถูกทำลายจะให้คะแนน 100 แต้ม (เลขกลมง่ายต่อการคำนวณในใจของผู้เล่น) คะแนนจะแสดงที่มุมล่างซ้าย -- **ตัวนับชีวิต**: ตัวละครของคุณเริ่มต้นด้วย 3 ชีวิต — มาตรฐานที่เกมอาเขตยุคแรกตั้งไว้เพื่อสมดุลความท้าทายกับความสามารถในการเล่น ทุกครั้งที่ชนกับศัตรูจะเสียชีวิตหนึ่งชีวิต เราจะแสดงชีวิตที่เหลืออยู่ที่มุมล่างขวาด้วยไอคอนยาน ![life image](../../../../translated_images/th/life.6fb9f50d53ee0413.png) +- **ตัวนับชีวิต**: ตัวละครของคุณเริ่มต้นด้วย 3 ชีวิต — มาตรฐานที่เกมอาเขตยุคแรกตั้งไว้เพื่อสมดุลความท้าทายกับความสามารถในการเล่น ทุกครั้งที่ชนกับศัตรูจะเสียชีวิตหนึ่งชีวิต เราจะแสดงชีวิตที่เหลืออยู่ที่มุมล่างขวาด้วยไอคอนยาน ![life image](../../../../translated_images/th/life.6fb9f50d53ee0413.webp) ## เริ่มลงมือสร้าง! diff --git a/translations/th/7-bank-project/1-template-route/README.md b/translations/th/7-bank-project/1-template-route/README.md index 171908995..8d57b956a 100644 --- a/translations/th/7-bank-project/1-template-route/README.md +++ b/translations/th/7-bank-project/1-template-route/README.md @@ -644,7 +644,7 @@ sequenceDiagram การใช้ `history.pushState` สร้างรายการใหม่ในประวัติการนำทางของเบราว์เซอร์ คุณสามารถตรวจสอบได้โดยการกดปุ่ม *ย้อนกลับ* ค้างไว้ เบราว์เซอร์จะแสดงประวัติประมาณนี้: -![Screenshot of navigation history](../../../../translated_images/th/history.7fdabbafa521e064.png) +![Screenshot of navigation history](../../../../translated_images/th/history.7fdabbafa521e064.webp) ถ้าคุณลองกดปุ่มย้อนกลับหลายครั้ง คุณจะเห็นว่า URL ปัจจุบันเปลี่ยนและประวัติได้รับการอัปเดต แต่เทมเพลตเดิมยังคงแสดงอยู่ diff --git a/translations/th/7-bank-project/2-forms/README.md b/translations/th/7-bank-project/2-forms/README.md index b3eb878c9..b959f453f 100644 --- a/translations/th/7-bank-project/2-forms/README.md +++ b/translations/th/7-bank-project/2-forms/README.md @@ -292,7 +292,7 @@ graph TD 2. สังเกตการเปลี่ยนแปลงในแถบที่อยู่ของเบราว์เซอร์ 3. สังเกตว่าหน้าดีโหลดใหม่และข้อมูลปรากฏใน URL -![ภาพหน้าจอการเปลี่ยน URL ของเบราว์เซอร์หลังคลิกปุ่ม Register](../../../../translated_images/th/click-register.e89a30bf0d4bc9ca.png) +![ภาพหน้าจอการเปลี่ยน URL ของเบราว์เซอร์หลังคลิกปุ่ม Register](../../../../translated_images/th/click-register.e89a30bf0d4bc9ca.webp) ### การเปรียบเทียบวิธี HTTP @@ -346,7 +346,7 @@ graph TD 2. **คลิก** ปุ่ม "Create Account" 3. **สังเกต** การตอบสนองจากเซิร์ฟเวอร์ในเบราว์เซอร์ของคุณ -![หน้าต่างเบราว์เซอร์ที่อยู่ localhost:5000/api/accounts แสดงสตริง JSON พร้อมข้อมูลผู้ใช้](../../../../translated_images/th/form-post.61de4ca1b964d91a.png) +![หน้าต่างเบราว์เซอร์ที่อยู่ localhost:5000/api/accounts แสดงสตริง JSON พร้อมข้อมูลผู้ใช้](../../../../translated_images/th/form-post.61de4ca1b964d91a.webp) **สิ่งที่คุณควรเห็น:** - **เบราว์เซอร์เปลี่ยนเส้นทาง** ไปที่ URL ของ API @@ -609,7 +609,7 @@ async function register() { 3. **คลิก** "สร้างบัญชี" 4. **สังเกต** ข้อความในคอนโซลและข้อเสนอแนะสำหรับผู้ใช้ -![Screenshot showing log message in the browser console](../../../../translated_images/th/browser-console.efaf0b51aaaf6778.png) +![Screenshot showing log message in the browser console](../../../../translated_images/th/browser-console.efaf0b51aaaf6778.webp) **สิ่งที่คุณควรเห็น:** - **สถานะโหลด** ปรากฏบนปุ่มส่ง @@ -783,7 +783,7 @@ input:focus:invalid { 3. **ลอง** ป้อนอักขระพิเศษในฟิลด์ชื่อผู้ใช้ 4. **ป้อน** ยอดคงเหลือลบ -![Screenshot showing the validation error when trying to submit the form](../../../../translated_images/th/validation-error.8bd23e98d416c22f.png) +![Screenshot showing the validation error when trying to submit the form](../../../../translated_images/th/validation-error.8bd23e98d416c22f.webp) **สิ่งที่คุณจะเห็น:** - **เบราว์เซอร์แสดง** ข้อความตรวจสอบพื้นฐานที่มีในตัว @@ -943,7 +943,7 @@ timeline นี่คือตัวอย่างของหน้าล็อกอินสุดท้ายที่ดูได้หลังจากเพิ่มสไตล์ CSS เล็กน้อย: -![ภาพหน้าจอของหน้าล็อกอินหลังจากเพิ่มสไตล์ CSS](../../../../translated_images/th/result.96ef01f607bf856a.png) +![ภาพหน้าจอของหน้าล็อกอินหลังจากเพิ่มสไตล์ CSS](../../../../translated_images/th/result.96ef01f607bf856a.webp) ## แบบทดสอบหลังบรรยาย diff --git a/translations/th/7-bank-project/3-data/README.md b/translations/th/7-bank-project/3-data/README.md index c1355c857..a687a908d 100644 --- a/translations/th/7-bank-project/3-data/README.md +++ b/translations/th/7-bank-project/3-data/README.md @@ -156,7 +156,7 @@ sequenceDiagram Server->>Browser: ส่งหน้าครบถ้วน HTML กลับ Browser->>User: แสดงหน้าผลใหม่ (กระพริบ/รีโหลด) ``` -![ลำดับการอัพเดตในแอพหลายหน้า](../../../../translated_images/th/mpa.7f7375a1a2d4aa77.png) +![ลำดับการอัพเดตในแอพหลายหน้า](../../../../translated_images/th/mpa.7f7375a1a2d4aa77.webp) **ทำไมวิธีนี้รู้สึกเกะกะ:** - ทุกคลิกหมายถึงการสร้างหน้าใหม่ทั้งหมด @@ -182,7 +182,7 @@ sequenceDiagram JavaScript->>Browser: อัปเดตองค์ประกอบหน้าเพจเฉพาะ Browser->>User: แสดงเนื้อหาที่อัปเดต (ไม่มีการโหลดใหม่) ``` -![ลำดับการอัพเดตในแอพหน้าเดียว](../../../../translated_images/th/spa.268ec73b41f992c2.png) +![ลำดับการอัพเดตในแอพหน้าเดียว](../../../../translated_images/th/spa.268ec73b41f992c2.webp) **ทำไม SPA ถึงรู้สึกดีกว่า:** - แค่ส่วนที่เปลี่ยนจริงๆ เท่านั้นที่อัพเดต (เจ๋งใช่ไหม?) @@ -516,7 +516,7 @@ if (data.error) { ตอนนี้เมื่อคุณทดสอบกับบัญชีไม่ถูกต้อง จะเห็นข้อความข้อผิดพลาดที่แสดงบนหน้าได้เลย! -![Screenshot showing the error message displayed during login](../../../../translated_images/th/login-error.416fe019b36a6327.png) +![Screenshot showing the error message displayed during login](../../../../translated_images/th/login-error.416fe019b36a6327.webp) #### ขั้นตอนที่ 4: ใส่ใจการเข้าถึง (Accessibility) @@ -950,7 +950,7 @@ timeline นี่คือตัวอย่างของแดชบอร์ดที่ผ่านการตกแต่งแล้ว: -![Screenshot of an example result of the dashboard after styling](../../../../translated_images/th/screen2.123c82a831a1d14a.png) +![Screenshot of an example result of the dashboard after styling](../../../../translated_images/th/screen2.123c82a831a1d14a.webp) ไม่ต้องรู้สึกว่าต้องทำตามนี้เป๊ะๆ ใช้มันเป็นแรงบันดาลใจและปรับแต่งให้เป็นของคุณเอง! diff --git a/translations/th/7-bank-project/4-state-management/README.md b/translations/th/7-bank-project/4-state-management/README.md index 89ee14c93..2ebe1e898 100644 --- a/translations/th/7-bank-project/4-state-management/README.md +++ b/translations/th/7-bank-project/4-state-management/README.md @@ -187,7 +187,7 @@ mindmap แทนที่จะวิ่งไล่ตามหางตัวเอง เราจะสร้างระบบ **จัดการสถานะแบบรวมศูนย์** เปรียบเสมือนคนที่จัดการเรื่องสำคัญๆ ทั้งหมดอย่างเป็นระเบียบคนเดียว: -![แผนภาพแสดงการไหลของข้อมูลระหว่าง HTML การกระทำของผู้ใช้และสถานะ](../../../../translated_images/th/data-flow.fa2354e0908fecc8.png) +![แผนภาพแสดงการไหลของข้อมูลระหว่าง HTML การกระทำของผู้ใช้และสถานะ](../../../../translated_images/th/data-flow.fa2354e0908fecc8.webp) ```mermaid flowchart TD @@ -798,7 +798,7 @@ timeline นี่คือตัวอย่างผลลัพธ์หลังจากทำการบ้านเสร็จ: -![Screenshot showing an example "Add transaction" dialog](../../../../translated_images/th/dialog.93bba104afeb79f1.png) +![Screenshot showing an example "Add transaction" dialog](../../../../translated_images/th/dialog.93bba104afeb79f1.webp) --- diff --git a/translations/th/7-bank-project/4-state-management/assignment.md b/translations/th/7-bank-project/4-state-management/assignment.md index 3868d97b0..b8fe7f5c9 100644 --- a/translations/th/7-bank-project/4-state-management/assignment.md +++ b/translations/th/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA: **ผลลัพธ์ที่คาดหวัง:** หลังจากทำงานนี้เสร็จ แอปธนาคารของคุณควรมีฟีเจอร์ "เพิ่มธุรกรรม" ที่ทำงานได้อย่างสมบูรณ์และดูเป็นมืออาชีพ: -![ภาพหน้าจอแสดงตัวอย่างหน้าต่าง "เพิ่มธุรกรรม"](../../../../translated_images/th/dialog.93bba104afeb79f1.png) +![ภาพหน้าจอแสดงตัวอย่างหน้าต่าง "เพิ่มธุรกรรม"](../../../../translated_images/th/dialog.93bba104afeb79f1.webp) ## การทดสอบการดำเนินการ diff --git a/translations/th/7-bank-project/README.md b/translations/th/7-bank-project/README.md index 36760a37d..8748d6e46 100644 --- a/translations/th/7-bank-project/README.md +++ b/translations/th/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: ในโปรเจกต์นี้ คุณจะได้เรียนรู้วิธีสร้างธนาคารสมมติ บทเรียนเหล่านี้จะรวมถึงคำแนะนำเกี่ยวกับการออกแบบเว็บแอปและการกำหนดเส้นทาง การสร้างฟอร์ม การจัดการสถานะ และการดึงข้อมูลจาก API ที่คุณสามารถใช้เพื่อดึงข้อมูลของธนาคารได้ -| ![Screen1](../../../translated_images/th/screen1.baccbba0f1f93364.png) | ![Screen2](../../../translated_images/th/screen2.123c82a831a1d14a.png) | +| ![Screen1](../../../translated_images/th/screen1.baccbba0f1f93364.webp) | ![Screen2](../../../translated_images/th/screen2.123c82a831a1d14a.webp) | |--------------------------------|--------------------------------| ## บทเรียน diff --git a/translations/th/8-code-editor/1-using-a-code-editor/README.md b/translations/th/8-code-editor/1-using-a-code-editor/README.md index 39cfcff89..3b41f6167 100644 --- a/translations/th/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/th/8-code-editor/1-using-a-code-editor/README.md @@ -182,7 +182,7 @@ VSCode.dev นำความสามารถเหล่านี้มาส เมื่อทุกอย่างโหลดขึ้น คุณจะเห็นพื้นที่ทำงานที่สะอาดสวยงาม ออกแบบมาเพื่อให้คุณมีสมาธิกับสิ่งที่สำคัญ – โค้ดของคุณ! -![อินเทอร์เฟซเริ่มต้นของ VSCode.dev](../../../../translated_images/th/default-vscode-dev.5d06881d65c1b323.png) +![อินเทอร์เฟซเริ่มต้นของ VSCode.dev](../../../../translated_images/th/default-vscode-dev.5d06881d65c1b323.webp) **นี่คือการพาทัวร์รอบบริเวณ:** - **แถบกิจกรรม** (แถบด้านซ้าย): ตัวนำทางหลักของคุณ โดยมี Explorer 📁, ค้นหา 🔍, ควบคุมต้นทาง 🌿, ส่วนขยาย 🧩 และ การตั้งค่า ⚙️ @@ -230,7 +230,7 @@ flowchart TB 1. ไปที่ [vscode.dev](https://vscode.dev) หากยังไม่เข้าสู่หน้า 2. มองหาปุ่ม "Open Remote Repository" บนหน้าต้อนรับและคลิก - ![เปิดรีโพสิทอรีระยะไกล](../../../../translated_images/th/open-remote-repository.bd9c2598b8949e7f.png) + ![เปิดรีโพสิทอรีระยะไกล](../../../../translated_images/th/open-remote-repository.bd9c2598b8949e7f.webp) 3. วาง URL รีโพสิทอรี GitHub ใดก็ได้ (ลองอันนี้: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. กด Enter แล้วดูเวทมนตร์เกิดขึ้น! @@ -239,7 +239,7 @@ flowchart TB อยากรู้สึกเป็นพ่อมดการโค้ดไหม? ลองทางลัดแป้นพิมพ์นี้: Ctrl+Shift+P (หรือ Cmd+Shift+P บน Mac) เพื่อเปิด Command Palette: -![Command Palette](../../../../translated_images/th/palette-menu.4946174e07f42622.png) +![Command Palette](../../../../translated_images/th/palette-menu.4946174e07f42622.webp) **Command Palette เหมือนกับเครื่องมือค้นหาของทุกอย่างที่คุณทำได้:** - พิมพ์ "open remote" แล้วมันจะหาเครื่องมือเปิดรีโพสิทอรีให้ @@ -301,7 +301,7 @@ flowchart TB 3. พิมพ์ชื่อไฟล์พร้อมนามสกุลที่เหมาะสม (`style.css`, `script.js`, `index.html`) 4. กด Enter เพื่อสร้างไฟล์ -![การสร้างไฟล์ใหม่](../../../../translated_images/th/create-new-file.2814e609c2af9aeb.png) +![การสร้างไฟล์ใหม่](../../../../translated_images/th/create-new-file.2814e609c2af9aeb.webp) **กฎการตั้งชื่อ:** - ใช้ชื่อที่บ่งบอกวัตถุประสงค์ของไฟล์ @@ -319,7 +319,7 @@ flowchart TB 2. เริ่มพิมพ์และดู VSCode.dev ช่วยด้วยสี, คำแนะนำ และการจับข้อผิดพลาด 3. บันทึกงานด้วย Ctrl+S (Windows/Linux) หรือ Cmd+S (Mac) – แม้มันจะเซฟอัตโนมัติด้วย! -![การแก้ไขไฟล์ใน VSCode.dev](../../../../translated_images/th/edit-a-file.52c0ee665ef19f08.png) +![การแก้ไขไฟล์ใน VSCode.dev](../../../../translated_images/th/edit-a-file.52c0ee665ef19f08.webp) **สิ่งเจ๋งที่เกิดขึ้นขณะเขียนโค้ด:** - โค้ดของคุณจะถูกทำสีสวยงามทำให้อ่านง่าย @@ -340,7 +340,7 @@ flowchart TB 2. ไฟล์ที่แก้ไขจะแสดงในส่วน "Changes" 3. การแยกสีบอกประเภทการเปลี่ยนแปลง: สีเขียวสำหรับการเพิ่ม, สีแดงสำหรับการลบ -![ดูการเปลี่ยนแปลงใน Source Control](../../../../translated_images/th/working-tree.c58eec08e6335c79.png) +![ดูการเปลี่ยนแปลงใน Source Control](../../../../translated_images/th/working-tree.c58eec08e6335c79.webp) **การบันทึกงาน (กระบวนการ commit):** @@ -432,7 +432,7 @@ mindmap 2. ลองเรียกดูหรือตามหาสิ่งเฉพาะที่ต้องการ 3. คลิกสิ่งที่ดูน่าสนใจเพื่อเรียนรู้เพิ่มเติม -![Interface ตลาดส่วนขยาย](../../../../translated_images/th/extensions.eca0e0c7f59a10b5.png) +![Interface ตลาดส่วนขยาย](../../../../translated_images/th/extensions.eca0e0c7f59a10b5.webp) **สิ่งที่คุณจะเห็นในนั้น:** @@ -485,7 +485,7 @@ mindmap 3. เลือก "Extension Settings" จากเมนูแบบเลื่อนลง 4. ปรับจนรู้สึกเหมาะกับเวิร์กโฟลว์ของคุณ -![ปรับแต่งการตั้งค่าส่วนขยาย](../../../../translated_images/th/extension-settings.21c752ae4f4cdb78.png) +![ปรับแต่งการตั้งค่าส่วนขยาย](../../../../translated_images/th/extension-settings.21c752ae4f4cdb78.webp) **สิ่งที่มักอยากปรับ:** - วิธีจัดรูปแบบโค้ดของคุณ (แท็บกับช่องว่าง, ความยาวบรรทัด เป็นต้น) diff --git a/translations/th/8-code-editor/1-using-a-code-editor/assignment.md b/translations/th/8-code-editor/1-using-a-code-editor/assignment.md index 43b6474d9..9a7d145fb 100644 --- a/translations/th/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/th/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ CO_OP_TRANSLATOR_METADATA: 4. **เขียน**ข้อความ commit: "Add initial HTML structure" 5. **คลิก** "Commit new file" เพื่อบันทึกการเปลี่ยนแปลงของคุณ -![สร้างไฟล์เริ่มต้นบน GitHub](../../../../translated_images/th/new-file-github.com.c886796d800e8056.png) +![สร้างไฟล์เริ่มต้นบน GitHub](../../../../translated_images/th/new-file-github.com.c886796d800e8056.webp) **สิ่งที่การตั้งค่าเริ่มต้นนี้ทำได้:** - **สร้าง**โครงสร้างเอกสาร HTML5 ที่เหมาะสมด้วยองค์ประกอบเชิงความหมาย @@ -104,7 +104,7 @@ CO_OP_TRANSLATOR_METADATA: ✅ **ตัวบ่งชี้ความสำเร็จ**: คุณควรเห็นไฟล์โปรเจกต์ของคุณในแถบด้านข้าง Explorer และ `index.html` พร้อมสำหรับการแก้ไขในพื้นที่เอดิเตอร์หลัก -![โปรเจกต์โหลดใน VSCode.dev](../../../../translated_images/th/project-on-vscode.dev.e79815a9a95ee7fe.png) +![โปรเจกต์โหลดใน VSCode.dev](../../../../translated_images/th/project-on-vscode.dev.e79815a9a95ee7fe.webp) **สิ่งที่คุณจะเห็นในอินเทอร์เฟซ:** - **แถบด้านข้าง Explorer**: **แสดง**ไฟล์และโครงสร้างโฟลเดอร์ของ repository ของคุณ @@ -448,7 +448,7 @@ li:before { **ผลลัพธ์ทันทีหลังการติดตั้ง:** เมื่อ CodeSwing ถูกติดตั้ง คุณจะเห็นการดูตัวอย่างสดของเว็บไซต์เรซูเม่ของคุณปรากฏในเอดิเตอร์ สิ่งนี้ช่วยให้คุณเห็นว่าเว็บไซต์ของคุณมีลักษณะอย่างไรในขณะที่คุณทำการเปลี่ยนแปลง -![การขยาย CodeSwing แสดงการดูตัวอย่างสด](../../../../translated_images/th/after-codeswing-extension-pb.0ebddddcf73b5509.png) +![การขยาย CodeSwing แสดงการดูตัวอย่างสด](../../../../translated_images/th/after-codeswing-extension-pb.0ebddddcf73b5509.webp) **การทำความเข้าใจอินเทอร์เฟซที่ปรับปรุง:** - **มุมมองแยก**: **แสดง**โค้ดของคุณด้านหนึ่งและการดูตัวอย่างสดอีกด้านหนึ่ง diff --git a/translations/th/9-chat-project/README.md b/translations/th/9-chat-project/README.md index 9c0e11b72..04cdc51a1 100644 --- a/translations/th/9-chat-project/README.md +++ b/translations/th/9-chat-project/README.md @@ -60,7 +60,7 @@ print(response.choices[0].message.content) นี่คือลักษณะโปรเจกต์สำเร็จรูปของคุณ: -![Chat app interface showing conversation between user and AI assistant](../../../translated_images/th/screenshot.0a1ee0d123df681b.png) +![Chat app interface showing conversation between user and AI assistant](../../../translated_images/th/screenshot.0a1ee0d123df681b.webp) ## 🗺️ การเดินทางเรียนรู้ของคุณผ่านการพัฒนาแอป AI @@ -189,7 +189,7 @@ mindmap ``` **หลักการสำคัญ**: การพัฒนาแอป AI ผสมผสานทักษะการพัฒนาเว็บแบบดั้งเดิมกับการผสานบริการ AI สร้างแอปอัจฉริยะที่ตอบสนองและเป็นธรรมชาติต่อผู้ใช้ -![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/th/playground.d2b927122224ff8f.png) +![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/th/playground.d2b927122224ff8f.webp) **นี่คือเหตุผลที่ playground มีประโยชน์มาก:** - **ลองใช้งาน** โมเดล AI ต่าง ๆ เช่น GPT-4o-mini, Claude และอื่น ๆ (ฟรีทั้งหมด!) @@ -199,7 +199,7 @@ mindmap เมื่อลองเล่นสักพัก แค่คลิกแท็บ "Code" และเลือกภาษาการเขียนโปรแกรมเพื่อรับโค้ดสำหรับใช้งานจริง -![Playground choice showing code generation options for different programming languages](../../../translated_images/th/playground-choice.1d23ba7d407f4758.png) +![Playground choice showing code generation options for different programming languages](../../../translated_images/th/playground-choice.1d23ba7d407f4758.webp) ## การตั้งค่า Python Backend Integration @@ -2354,14 +2354,14 @@ mindmap - **ไปที่** [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) - **คลิก** "Use this template" ที่มุมขวาบน (ตรวจสอบว่าคุณเข้าสู่ระบบ GitHub แล้ว) -![Create from template interface showing the green "Use this template" button](../../../translated_images/th/template.67ad477109d29a2b.png) +![Create from template interface showing the green "Use this template" button](../../../translated_images/th/template.67ad477109d29a2b.webp) **ขั้นตอนที่ 2: เปิด Codespaces** - **เปิด** รีโพซิทอรีที่คุณสร้างขึ้นใหม่ - **คลิก** ปุ่มสีเขียว "Code" และเลือก "Codespaces" - **เลือก** "Create codespace on main" เพื่อเริ่มสภาพแวดล้อมการพัฒนาของคุณ -![Create codespace interface with options for launching cloud development environment](../../../translated_images/th/codespace.bcecbdf5d2747d3d.png) +![Create codespace interface with options for launching cloud development environment](../../../translated_images/th/codespace.bcecbdf5d2747d3d.webp) **ขั้นตอนที่ 3: การตั้งค่าสภาพแวดล้อม** เมื่อ Codespace ของคุณโหลด คุณจะสามารถเข้าถึง: diff --git a/translations/th/README.md b/translations/th/README.md index 44854fa01..bdec04bd5 100644 --- a/translations/th/README.md +++ b/translations/th/README.md @@ -72,13 +72,13 @@ CO_OP_TRANSLATOR_METADATA: เยี่ยมชม [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) เพื่อเริ่มต้น! -![Background](../../translated_images/th/background.148a8d43afde5730.png) +![Background](../../translated_images/th/background.148a8d43afde5730.webp) - บทเรียนครอบคลุมตั้งแต่พื้นฐานจนถึง RAG - มีปฏิสัมพันธ์กับตัวละครในประวัติศาสตร์โดยใช้ GenAI และแอปช่วยเหลือของเรา - เรื่องเล่าสนุก ๆ และน่าติดตาม คุณจะได้เดินทางข้ามเวลา! -![character](../../translated_images/th/character.5c0dd8e067ffd693.png) +![character](../../translated_images/th/character.5c0dd8e067ffd693.webp) แต่ละบทเรียนมีการมอบหมายงานให้ทำ การตรวจสอบความรู้ และความท้าทายเพื่อแนะนำคุณในการเรียนรู้หัวข้อต่าง ๆ เช่น: - การกระตุ้นและการออกแบบคำกระตุ้น (prompt engineering) @@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA: ในสำเนาของที่เก็บนี้ที่คุณสร้างขึ้น คลิกปุ่ม **Code** และเลือก **Open with Codespaces** ซึ่งจะสร้าง Codespace ใหม่ให้คุณใช้งาน -![Codespace](../../translated_images/th/createcodespace.0238bbf4d7a8d955.png) +![Codespace](../../translated_images/th/createcodespace.0238bbf4d7a8d955.webp) #### ใช้งานหลักสูตรในเครื่องคอมพิวเตอร์ของคุณ diff --git a/translations/th/for-teachers.md b/translations/th/for-teachers.md index ae676cd9c..1c35102fb 100644 --- a/translations/th/for-teachers.md +++ b/translations/th/for-teachers.md @@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA: - Moodle Cloud มีการรองรับ Common Cartridge ที่จำกัด ควรใช้ไฟล์ Moodle ด้านบน ซึ่งสามารถอัปโหลดเข้า Canvas ได้เช่นกัน - หลังการนำเข้า ให้ตรวจสอบโมดูล วันที่กำหนดส่ง และการตั้งค่าแบบทดสอบให้ตรงกับตารางเรียนของคุณ -![Moodle](../../translated_images/th/moodle.94eb93d714a50cb2.png) +![Moodle](../../translated_images/th/moodle.94eb93d714a50cb2.webp) > หลักสูตรในห้องเรียน Moodle -![Canvas](../../translated_images/th/canvas.fbd605ff8e5b8aff.png) +![Canvas](../../translated_images/th/canvas.fbd605ff8e5b8aff.webp) > หลักสูตรใน Canvas ### การใช้งาน repo โดยตรง (ไม่ใช้ Classroom) diff --git a/translations/tl/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/tl/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 49be2812d..267492f95 100644 --- a/translations/tl/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/tl/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ Alam mo, naiintindihan ko kung bakit nakakatakot ang programming sa simula. Noon Ngayon, sisilipin natin ang mga kamangha-manghang tools na ginagawang posible ang modernong web development – at sobrang nakakaadik! Pinag-uusapan natin ang parehong editors, browsers, at workflows na ginagamit ng mga developer sa Netflix, Spotify, at sa paborito mong indie app studio araw-araw. At eto ang magpapasayaw sa'yo: karamihan sa mga propesyonal-grade, industry-standard tools na ito ay ganap na libre! -![Intro Programming](../../../../translated_images/tl/webdev101-programming.d6e3f98e61ac4bff.png) +![Intro Programming](../../../../translated_images/tl/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/tl/1-getting-started-lessons/2-github-basics/README.md b/translations/tl/1-getting-started-lessons/2-github-basics/README.md index 750abf178..d7c174429 100644 --- a/translations/tl/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/tl/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ Alam kong maaaring nakakatakot ito sa simula – naalala ko pa noong una kong ti Sama-sama nating tatahakin ang paglalakbay na ito, hakbang-hakbang. Walang pagmamadali, walang pressure – ikaw, ako, at ilang napakagandang tool na magiging bago mong matalik na kaibigan! -![Panimula sa GitHub](../../../../translated_images/tl/webdev101-github.8846d7971abef6f9.png) +![Panimula sa GitHub](../../../../translated_images/tl/webdev101-github.8846d7971abef6f9.webp) > Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -604,7 +604,7 @@ Una, maghanap tayo ng repository (o **repo**) sa GitHub na interesado ka at kung ✅ Isang magandang paraan para makahanap ng 'beginner-friendly' na mga repo ay [maghanap gamit ang tag na 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Kopyahin ang repo sa lokal](../../../../translated_images/tl/clone_repo.5085c48d666ead57.png) +![Kopyahin ang repo sa lokal](../../../../translated_images/tl/clone_repo.5085c48d666ead57.webp) May ilang paraan para kopyahin ang code. Isa sa mga paraan ay "i-clone" ang nilalaman ng repository, gamit ang HTTPS, SSH, o gamit ang GitHub CLI (Command Line Interface). diff --git a/translations/tl/1-getting-started-lessons/3-accessibility/README.md b/translations/tl/1-getting-started-lessons/3-accessibility/README.md index 07872d3d3..93b70e51d 100644 --- a/translations/tl/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/tl/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Paglikha ng Accessible na Mga Webpage -![Lahat Tungkol sa Accessibility](../../../../translated_images/tl/webdev101-a11y.8ef3025c858d897a.png) +![Lahat Tungkol sa Accessibility](../../../../translated_images/tl/webdev101-a11y.8ef3025c858d897a.webp) > Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/tl/2-js-basics/1-data-types/README.md b/translations/tl/2-js-basics/1-data-types/README.md index 3a5aac31a..d168decd6 100644 --- a/translations/tl/2-js-basics/1-data-types/README.md +++ b/translations/tl/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Mga Pangunahing Kaalaman sa JavaScript: Mga Uri ng Data -![Mga Pangunahing Kaalaman sa JavaScript - Mga Uri ng Data](../../../../translated_images/tl/webdev101-js-datatypes.4cc470179730702c.png) +![Mga Pangunahing Kaalaman sa JavaScript - Mga Uri ng Data](../../../../translated_images/tl/webdev101-js-datatypes.4cc470179730702c.webp) > Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/tl/2-js-basics/2-functions-methods/README.md b/translations/tl/2-js-basics/2-functions-methods/README.md index 45b9cc3a0..776be2140 100644 --- a/translations/tl/2-js-basics/2-functions-methods/README.md +++ b/translations/tl/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Mga Pangunahing Kaalaman sa JavaScript: Mga Pamamaraan at Function -![Mga Pangunahing Kaalaman sa JavaScript - Mga Function](../../../../translated_images/tl/webdev101-js-functions.be049c4726e94f8b.png) +![Mga Pangunahing Kaalaman sa JavaScript - Mga Function](../../../../translated_images/tl/webdev101-js-functions.be049c4726e94f8b.webp) > Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/tl/2-js-basics/3-making-decisions/README.md b/translations/tl/2-js-basics/3-making-decisions/README.md index ab43c542b..1d1259ae9 100644 --- a/translations/tl/2-js-basics/3-making-decisions/README.md +++ b/translations/tl/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Mga Pangunahing Kaalaman sa JavaScript: Paggawa ng Desisyon -![Mga Pangunahing Kaalaman sa JavaScript - Paggawa ng Desisyon](../../../../translated_images/tl/webdev101-js-decisions.69e1b20f272dd1f0.png) +![Mga Pangunahing Kaalaman sa JavaScript - Paggawa ng Desisyon](../../../../translated_images/tl/webdev101-js-decisions.69e1b20f272dd1f0.webp) > Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/tl/2-js-basics/4-arrays-loops/README.md b/translations/tl/2-js-basics/4-arrays-loops/README.md index 9bfd2150b..b93591cf2 100644 --- a/translations/tl/2-js-basics/4-arrays-loops/README.md +++ b/translations/tl/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Mga Pangunahing Kaalaman sa JavaScript: Arrays at Loops -![Mga Pangunahing Kaalaman sa JavaScript - Arrays](../../../../translated_images/tl/webdev101-js-arrays.439d7528b8a29455.png) +![Mga Pangunahing Kaalaman sa JavaScript - Arrays](../../../../translated_images/tl/webdev101-js-arrays.439d7528b8a29455.webp) > Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/tl/3-terrarium/1-intro-to-html/README.md b/translations/tl/3-terrarium/1-intro-to-html/README.md index dad14903a..324716b80 100644 --- a/translations/tl/3-terrarium/1-intro-to-html/README.md +++ b/translations/tl/3-terrarium/1-intro-to-html/README.md @@ -26,7 +26,7 @@ journey Build terrarium: 5: Student ``` -![Panimula sa HTML](../../../../translated_images/tl/webdev101-html.4389c2067af68e98.png) +![Panimula sa HTML](../../../../translated_images/tl/webdev101-html.4389c2067af68e98.webp) > Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac) Ang HTML, o HyperText Markup Language, ang pundasyon ng bawat website na iyong binisita. Isipin ang HTML bilang balangkas na nagbibigay ng istruktura sa mga web page – ito ang nagtatakda kung saan ilalagay ang nilalaman, paano ito iaayos, at ano ang kinakatawan ng bawat bahagi. Habang ang CSS ang magpapaganda sa iyong HTML gamit ang mga kulay at layout, at ang JavaScript ang magdadagdag ng interaktibidad, ang HTML ang nagbibigay ng mahalagang istruktura na nagpapahintulot sa lahat ng iba pang aspeto na maging posible. @@ -88,7 +88,7 @@ Gagawa ka ng dedikadong folder para sa iyong proyekto ng terrarium at magdadagda 4. Sa Explorer pane, i-click ang "New File" icon 5. Pangalanan ang iyong file na `index.html` -![VS Code Explorer na nagpapakita ng paggawa ng bagong file](../../../../translated_images/tl/vs-code-index.e2986cf919471eb9.png) +![VS Code Explorer na nagpapakita ng paggawa ng bagong file](../../../../translated_images/tl/vs-code-index.e2986cf919471eb9.webp) **Opsyon 2: Gamit ang Terminal Commands** ```bash diff --git a/translations/tl/3-terrarium/2-intro-to-css/README.md b/translations/tl/3-terrarium/2-intro-to-css/README.md index af05ce745..60f2d76b5 100644 --- a/translations/tl/3-terrarium/2-intro-to-css/README.md +++ b/translations/tl/3-terrarium/2-intro-to-css/README.md @@ -30,7 +30,7 @@ journey Glass reflections: 5: Student ``` -![Panimula sa CSS](../../../../translated_images/tl/webdev101-css.3f7af5991bf53a20.png) +![Panimula sa CSS](../../../../translated_images/tl/webdev101-css.3f7af5991bf53a20.webp) > Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac) Naalala mo ba kung gaano kasimple ang hitsura ng iyong HTML terrarium? Sa CSS, binabago natin ang simpleng istruktura na iyon upang maging mas kaakit-akit sa paningin. @@ -205,7 +205,7 @@ body { Buksan ang developer tools ng iyong browser (F12), pumunta sa Elements tab, at i-inspect ang iyong `

` element. Makikita mo na namamana nito ang font family mula sa body: -![namana na font](../../../../translated_images/tl/1.cc07a5cbe114ad1d.png) +![namana na font](../../../../translated_images/tl/1.cc07a5cbe114ad1d.webp) ✅ **Experiment Time**: Subukang mag-set ng iba pang inheritable properties sa `` tulad ng `color`, `line-height`, o `text-align`. Ano ang nangyayari sa iyong heading at iba pang elemento? @@ -599,7 +599,7 @@ Handa ka na bang pagandahin ang iyong terrarium gamit ang realistic glass reflec Gagawa ka ng subtle highlights na ginagaya kung paano nagre-reflect ang ilaw sa glass surfaces. Ang approach na ito ay kahalintulad ng paraan ng mga pintor noong Renaissance tulad ni Jan van Eyck na gumamit ng ilaw at reflection upang gawing three-dimensional ang painted glass. Narito ang layunin mo: -![finished terrarium](../../../../translated_images/tl/terrarium-final.2f07047ffc597d0a.png) +![finished terrarium](../../../../translated_images/tl/terrarium-final.2f07047ffc597d0a.webp) **Ang iyong hamon:** - **Gumawa** ng subtle white o light-colored oval shapes para sa glass reflections diff --git a/translations/tl/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/tl/3-terrarium/3-intro-to-DOM-and-closures/README.md index cc5a187e5..a6698821f 100644 --- a/translations/tl/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/tl/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -26,7 +26,7 @@ journey Complete terrarium: 5: Student ``` -![DOM at isang closure](../../../../translated_images/tl/webdev101-js.10280393044d7eaa.png) +![DOM at isang closure](../../../../translated_images/tl/webdev101-js.10280393044d7eaa.webp) > Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac) Maligayang pagdating sa isa sa mga pinaka-kapanapanabik na aspeto ng web development - ang paggawa ng mga bagay na interactive! Ang Document Object Model (DOM) ay parang tulay sa pagitan ng iyong HTML at JavaScript, at ngayon gagamitin natin ito upang buhayin ang iyong terrarium. Nang likhain ni Tim Berners-Lee ang unang web browser, inisip niya ang isang web kung saan ang mga dokumento ay maaaring maging dynamic at interactive - ang DOM ang nagpapaganap ng pangitain na iyon. @@ -105,7 +105,7 @@ flowchart TD style Q fill:#ffebee ``` -![Representasyon ng DOM tree](../../../../translated_images/tl/dom-tree.7daf0e763cbbba92.png) +![Representasyon ng DOM tree](../../../../translated_images/tl/dom-tree.7daf0e763cbbba92.webp) > Isang representasyon ng DOM at ang HTML markup na tumutukoy dito. Mula kay [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -150,7 +150,7 @@ flowchart LR > 💡 **Pag-unawa sa Closures**: Ang closures ay isang mahalagang paksa sa JavaScript, at maraming developer ang gumagamit nito sa loob ng maraming taon bago lubos na maunawaan ang lahat ng teoretikal na aspeto. Ngayon, magpo-focus tayo sa praktikal na aplikasyon - makikita mo ang closures na natural na lumilitaw habang binubuo natin ang ating mga interactive na feature. Ang pag-unawa ay lalago habang nakikita mo kung paano nila nilulutas ang mga totoong problema. -![Representasyon ng DOM tree](../../../../translated_images/tl/dom-tree.7daf0e763cbbba92.png) +![Representasyon ng DOM tree](../../../../translated_images/tl/dom-tree.7daf0e763cbbba92.webp) > Isang representasyon ng DOM at ang HTML markup na tumutukoy dito. Mula kay [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -598,7 +598,7 @@ Ngayon, subukan ang iyong interactive terrarium! Buksan ang iyong `index.html` f - **Suporta sa iba't ibang device**: Gumagana sa desktop at mobile - **Performance conscious**: Walang memory leaks o redundant calculations -![finished terrarium](../../../../translated_images/tl/terrarium-final.0920f16e87c13a84.png) +![finished terrarium](../../../../translated_images/tl/terrarium-final.0920f16e87c13a84.webp) --- diff --git a/translations/tl/3-terrarium/solution/README.md b/translations/tl/3-terrarium/solution/README.md index b8bb3a16d..80bb3afbe 100644 --- a/translations/tl/3-terrarium/solution/README.md +++ b/translations/tl/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Isang maliit na drag and drop na code-meditation. Sa kaunting HTML, JS, at CSS, maaari kang gumawa ng web interface, i-style ito, at magdagdag ng interaksyon. -![ang aking terrarium](../../../../translated_images/tl/screenshot_gray.0c796099a1f9f25e.png) +![ang aking terrarium](../../../../translated_images/tl/screenshot_gray.0c796099a1f9f25e.webp) ## Mga Kredito diff --git a/translations/tl/5-browser-extension/1-about-browsers/README.md b/translations/tl/5-browser-extension/1-about-browsers/README.md index 0587798e2..a75a1d8c6 100644 --- a/translations/tl/5-browser-extension/1-about-browsers/README.md +++ b/translations/tl/5-browser-extension/1-about-browsers/README.md @@ -26,7 +26,7 @@ journey Polish experience: 5: Student ``` -![Browser sketchnote](../../../../translated_images/tl/browser.60317c9be8b7f84a.jpg) +![Browser sketchnote](../../../../translated_images/tl/browser.60317c9be8b7f84a.webp) > Sketchnote ni [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## Pre-Lecture Quiz @@ -79,7 +79,7 @@ Ang prosesong ito ay sumasalamin sa disenyo ng unang web browser, ang WorldWideW ✅ **Kaunting Kasaysayan**: Ang unang browser ay tinawag na 'WorldWideWeb' at nilikha ni Sir Timothy Berners-Lee noong 1990. -![early browsers](../../../../translated_images/tl/earlybrowsers.d984b711cdf3a42d.jpg) +![early browsers](../../../../translated_images/tl/earlybrowsers.d984b711cdf3a42d.webp) > Ilang maagang browser, mula kay [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### Paano Pinoproseso ng Mga Browser ang Web Content @@ -198,7 +198,7 @@ quadrantChart Ang pag-unawa sa proseso ng pag-install ng extension ay tumutulong sa iyo na ma-anticipate ang karanasan ng user kapag ini-install nila ang iyong extension. Ang proseso ng pag-install ay standardized sa mga modernong browser, na may kaunting pagkakaiba sa disenyo ng interface. -![screenshot ng Edge browser na nagpapakita ng bukas na edge://extensions page at bukas na settings menu](../../../../translated_images/tl/install-on-edge.d68781acaf0b3d3d.png) +![screenshot ng Edge browser na nagpapakita ng bukas na edge://extensions page at bukas na settings menu](../../../../translated_images/tl/install-on-edge.d68781acaf0b3d3d.webp) > **Mahalaga**: Siguraduhing i-toggle ang developer mode at payagan ang mga extension mula sa ibang mga tindahan kapag sinusubukan ang iyong sariling mga extension. @@ -313,10 +313,10 @@ Ito ay sumusunod sa prinsipyo ng progressive disclosure na ginagamit sa disenyo ### Overview ng Extension Views **Setup View** - Paunang configuration ng user: -![screenshot ng tapos na extension na bukas sa browser, nagpapakita ng form na may mga input para sa pangalan ng rehiyon at API key.](../../../../translated_images/tl/1.b6da8c1394b07491.png) +![screenshot ng tapos na extension na bukas sa browser, nagpapakita ng form na may mga input para sa pangalan ng rehiyon at API key.](../../../../translated_images/tl/1.b6da8c1394b07491.webp) **Results View** - Pagpapakita ng data ng carbon footprint: -![screenshot ng tapos na extension na nagpapakita ng mga halaga para sa carbon usage at fossil fuel percentage para sa rehiyong US-NEISO.](../../../../translated_images/tl/2.1dae52ff08042246.png) +![screenshot ng tapos na extension na nagpapakita ng mga halaga para sa carbon usage at fossil fuel percentage para sa rehiyong US-NEISO.](../../../../translated_images/tl/2.1dae52ff08042246.webp) ### Pagbuo ng Configuration Form diff --git a/translations/tl/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/tl/5-browser-extension/2-forms-browsers-local-storage/README.md index 43925a2d2..5942ee835 100644 --- a/translations/tl/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/tl/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -268,7 +268,7 @@ stateDiagram-v2 ClearStorage --> FirstTime: Back to setup ``` -![Local storage pane](../../../../translated_images/tl/localstorage.472f8147b6a3f8d1.png) +![Local storage pane](../../../../translated_images/tl/localstorage.472f8147b6a3f8d1.webp) > ⚠️ **Pagsasaalang-alang sa Seguridad**: Sa mga production application, ang pag-iimbak ng API keys sa LocalStorage ay may panganib sa seguridad dahil maa-access ito ng JavaScript. Para sa layunin ng pag-aaral, ang approach na ito ay maayos, ngunit ang mga totoong application ay dapat gumamit ng secure server-side storage para sa mga sensitibong credentials. diff --git a/translations/tl/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/tl/5-browser-extension/3-background-tasks-and-performance/README.md index 81f56c7f8..c7c53b21e 100644 --- a/translations/tl/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/tl/5-browser-extension/3-background-tasks-and-performance/README.md @@ -126,7 +126,7 @@ Upang buksan ang Developer Tools sa Edge, i-click ang tatlong tuldok sa kanang i Subukan natin ito. Buksan ang isang website (Microsoft.com ay maganda para dito) at i-click ang 'Record' button. Ngayon i-refresh ang pahina at panoorin ang profiler na kinukuha ang lahat ng nangyayari. Kapag tumigil ka sa pag-record, makikita mo ang detalyadong breakdown kung paano 'scripts', 'renders', at 'paints' ng browser ang site. Parang kung paano mino-monitor ng mission control ang bawat sistema sa panahon ng paglulunsad ng rocket - makakakuha ka ng real-time na data sa eksaktong nangyayari at kailan. -![Edge profiler](../../../../translated_images/tl/profiler.5a4a62479c5df01c.png) +![Edge profiler](../../../../translated_images/tl/profiler.5a4a62479c5df01c.webp) ✅ Ang [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) ay may maraming detalye kung nais mong mas malalim na pag-aralan. @@ -136,11 +136,11 @@ Piliin ang mga elemento ng profile timeline upang mag-zoom in sa mga event na na Kumuha ng snapshot ng performance ng iyong pahina sa pamamagitan ng pagpili ng bahagi ng profile timeline at pagtingin sa summary pane: -![Edge profiler snapshot](../../../../translated_images/tl/snapshot.97750180ebcad737.png) +![Edge profiler snapshot](../../../../translated_images/tl/snapshot.97750180ebcad737.webp) Suriin ang Event Log pane upang makita kung may anumang event na tumagal ng higit sa 15 ms: -![Edge event log](../../../../translated_images/tl/log.804026979f3707e0.png) +![Edge event log](../../../../translated_images/tl/log.804026979f3707e0.webp) ✅ Kilalanin ang iyong profiler! Buksan ang developer tools sa site na ito at tingnan kung may mga bottleneck. Ano ang pinakamabagal na naglo-load na asset? Ang pinakamabilis? diff --git a/translations/tl/5-browser-extension/README.md b/translations/tl/5-browser-extension/README.md index ef29d88de..89737572e 100644 --- a/translations/tl/5-browser-extension/README.md +++ b/translations/tl/5-browser-extension/README.md @@ -23,7 +23,7 @@ Ang extension na ito ay maaaring tawagin ng isang user kapag ang isang API key a ### Mga Kredito -![isang berdeng browser extension](../../../translated_images/tl/extension-screenshot.0e7f5bfa110e92e3.png) +![isang berdeng browser extension](../../../translated_images/tl/extension-screenshot.0e7f5bfa110e92e3.webp) ## Mga Kredito diff --git a/translations/tl/5-browser-extension/solution/README.md b/translations/tl/5-browser-extension/solution/README.md index f6dc8ecf4..e53e55ab4 100644 --- a/translations/tl/5-browser-extension/solution/README.md +++ b/translations/tl/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Gamit ang tmrow's CO2 Signal API para subaybayan ang paggamit ng kuryente, gumawa ng browser extension upang magkaroon ka ng paalala sa iyong browser tungkol sa bigat ng paggamit ng kuryente sa iyong rehiyon. Ang paggamit ng extension na ito nang ad hoc ay makakatulong sa iyo na gumawa ng mas maingat na desisyon sa iyong mga aktibidad batay sa impormasyong ito. -![screenshot ng extension](../../../../translated_images/tl/extension-screenshot.0e7f5bfa110e92e3.png) +![screenshot ng extension](../../../../translated_images/tl/extension-screenshot.0e7f5bfa110e92e3.webp) ## Pagsisimula @@ -31,7 +31,7 @@ npm run build Para i-install sa Edge, gamitin ang menu na 'three dot' sa kanang itaas na bahagi ng browser upang hanapin ang Extensions panel. Mula roon, piliin ang 'Load Unpacked' upang mag-load ng bagong extension. Buksan ang 'dist' folder kapag lumitaw ang prompt, at mai-load ang extension. Upang magamit ito, kakailanganin mo ng API key para sa CO2 Signal's API ([kumuha dito sa pamamagitan ng email](https://www.co2signal.com/) - ilagay ang iyong email sa kahon sa pahinang ito) at ang [code para sa iyong rehiyon](http://api.electricitymap.org/v3/zones) na tumutugma sa [Electricity Map](https://www.electricitymap.org/map) (halimbawa, sa Boston, ginagamit ko ang 'US-NEISO'). -![pag-install](../../../../translated_images/tl/install-on-edge.78634f02842c4828.png) +![pag-install](../../../../translated_images/tl/install-on-edge.78634f02842c4828.webp) Kapag na-input na ang API key at rehiyon sa interface ng extension, ang kulay ng tuldok sa browser extension bar ay magbabago upang ipakita ang paggamit ng enerhiya sa iyong rehiyon at magbibigay ng ideya kung anong mga aktibidad na mabigat sa enerhiya ang angkop na gawin. Ang konsepto sa likod ng sistemang 'tuldok' na ito ay inspirasyon mula sa [Energy Lollipop extension](https://energylollipop.com/) para sa emissions sa California. diff --git a/translations/tl/5-browser-extension/solution/translation/README.fr.md b/translations/tl/5-browser-extension/solution/translation/README.fr.md index dfafb2ed0..b3478584f 100644 --- a/translations/tl/5-browser-extension/solution/translation/README.fr.md +++ b/translations/tl/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Gamit ang API ng CO2 Signal mula sa tmrow para subaybayan ang konsumo ng kuryente, gumawa ng browser extension upang magkaroon ka ng paalala direkta sa iyong browser tungkol sa konsumo ng kuryente sa iyong lugar. Ang paggamit ng extension na ito ay makakatulong sa iyo na magpasya sa iyong mga aktibidad base sa impormasyong ito. -![screenshot ng extension](../../../../../translated_images/tl/extension-screenshot.0e7f5bfa110e92e3.png) +![screenshot ng extension](../../../../../translated_images/tl/extension-screenshot.0e7f5bfa110e92e3.webp) ## Pagsisimula @@ -31,7 +31,7 @@ npm run build Para i-install sa Edge, gamitin ang menu na 'tatlong tuldok' sa kanang itaas na bahagi ng browser upang hanapin ang panel ng Extensions. Mula doon, piliin ang 'Load unpacked extension' upang mag-load ng bagong extension. Buksan ang folder na 'dist' kapag na-prompt, at ang extension ay maglo-load. Para magamit ito, kakailanganin mo ng API key para sa CO2 Signal API ([kumuha ng isa dito sa pamamagitan ng email](https://www.co2signal.com/) - ilagay ang iyong email sa kahon sa pahinang ito) at ang [code para sa iyong rehiyon](http://api.electricitymap.org/v3/zones) na tumutugma sa [Electricity Map](https://www.electricitymap.org/map) (halimbawa, sa Boston, ginagamit ko ang 'US-NEISO'). -![pag-install](../../../../../translated_images/tl/install-on-edge.78634f02842c4828.png) +![pag-install](../../../../../translated_images/tl/install-on-edge.78634f02842c4828.webp) Kapag nailagay na ang API key at rehiyon sa interface ng extension, ang kulay ng tuldok sa extension bar ng browser ay dapat magbago upang ipakita ang konsumo ng enerhiya sa iyong lugar at magbigay ng indikasyon kung anong mga aktibidad na mataas sa enerhiya ang angkop gawin. Ang konsepto sa likod ng sistemang ito ng 'mga tuldok' ay inspirasyon ng [extension na Energy Lollipop](https://energylollipop.com/) para sa mga emisyon sa California. diff --git a/translations/tl/5-browser-extension/solution/translation/README.hi.md b/translations/tl/5-browser-extension/solution/translation/README.hi.md index 5b8a56021..b0a214686 100644 --- a/translations/tl/5-browser-extension/solution/translation/README.hi.md +++ b/translations/tl/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Gamit ang CO2 Signal API ng tmrow para subaybayan ang paggamit ng kuryente, gumawa ng isang browser extension na magbibigay sa iyo ng paalala kung gaano kabigat ang paggamit ng kuryente sa iyong lugar habang ginagamit ang iyong browser. Ang extension na ito ay makakatulong sa iyo na gumawa ng mga desisyon batay sa impormasyong ito para sa iyong mga aktibidad. -![Screenshot ng Extension](../../../../../translated_images/tl/extension-screenshot.0e7f5bfa110e92e3.png) +![Screenshot ng Extension](../../../../../translated_images/tl/extension-screenshot.0e7f5bfa110e92e3.webp) ## Pagsisimula @@ -31,7 +31,7 @@ npm run build Para i-install sa Edge, gamitin ang 'tatlong tuldok' na menu sa kanang itaas ng browser para hanapin ang extension panel. Mula doon, piliin ang 'Load Unpacked' para mag-load ng bagong extension. Sa prompt, buksan ang 'dist' folder at ma-load ang extension. Para magamit ito, kakailanganin mo ng API key mula sa CO2 Signal ([makukuha dito sa pamamagitan ng email](https://www.co2signal.com/) - ilagay ang iyong email sa kahon sa page na iyon) at [code para sa iyong lugar](http://api.electricitymap.org/v3/zones) mula sa [Electricity Map](https://www.electricitymap.org/map) (halimbawa, sa Boston, ginagamit ko ang 'US-NEISO'). -![Pag-install](../../../../../translated_images/tl/install-on-edge.78634f02842c4828.png) +![Pag-install](../../../../../translated_images/tl/install-on-edge.78634f02842c4828.webp) Kapag na-input na ang API key at lugar sa extension interface, ang makikita mong makulay na tuldok sa browser extension bar ay magbabago upang ipakita ang paggamit ng enerhiya sa iyong lugar. Magbibigay ito sa iyo ng indikasyon kung ang mga energy-intensive na aktibidad ay angkop sa iyong kasalukuyang sitwasyon. Ang konsepto ng 'dot' system na ito ay inspirasyon ng [Energy Lollipop Extension](https://energylollipop.com/) para sa emissions sa California. diff --git a/translations/tl/5-browser-extension/solution/translation/README.it.md b/translations/tl/5-browser-extension/solution/translation/README.it.md index c12683c42..fc8705ef7 100644 --- a/translations/tl/5-browser-extension/solution/translation/README.it.md +++ b/translations/tl/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Gagamitin ang Signal CO2 API ng tmrow upang subaybayan ang paggamit ng kuryente at lumikha ng isang browser extension na magbibigay ng paalala direkta sa iyong browser kung gaano kabigat ang paggamit ng kuryente sa iyong rehiyon. Ang paggamit ng extension na ito ay makakatulong sa iyo na suriin ang iyong mga aktibidad batay sa impormasyong ito. -![screenshot ng extension](../../../../../translated_images/tl/extension-screenshot.0e7f5bfa110e92e3.png) +![screenshot ng extension](../../../../../translated_images/tl/extension-screenshot.0e7f5bfa110e92e3.webp) ## Paano Magsimula @@ -31,7 +31,7 @@ npm run build Para i-install sa Edge, gamitin ang menu na "tatlong tuldok" sa kanang itaas na bahagi ng browser upang mahanap ang panel ng Mga Extension. Kung hindi pa naka-activate, i-on ang Developer Mode (nasa ibabang kaliwa). Piliin ang "Load unpacked" upang mag-load ng bagong extension. Buksan ang folder na "dist" sa prompt, at ang extension ay mai-load. Upang magamit ito, kakailanganin mo ng API key para sa CO2 Signal API (maaari kang [kumuha nito sa pamamagitan ng email](https://www.co2signal.com/) - ilagay ang iyong email sa kahon sa pahinang ito) at ang [code para sa iyong rehiyon](http://api.electricitymap.org/v3/zones) na tumutugma sa [electricity map](https://www.electricitymap.org/map) (halimbawa, sa Boston, "US-NEISO"). -![pag-install](../../../../../translated_images/tl/install-on-edge.78634f02842c4828.png) +![pag-install](../../../../../translated_images/tl/install-on-edge.78634f02842c4828.webp) Kapag nailagay na ang API key at rehiyon sa interface ng extension, ang kulay ng tuldok sa extension bar ng browser ay magbabago upang ipakita ang paggamit ng enerhiya sa rehiyon at magbibigay ng ideya kung aling mga aktibidad na mataas ang konsumo ng enerhiya ang angkop na gawin. Ang konsepto sa likod ng sistemang ito ng "mga tuldok" ay hango sa [Energy Lollipop extension](https://energylollipop.com/) para sa mga emisyon sa California. diff --git a/translations/tl/5-browser-extension/solution/translation/README.ja.md b/translations/tl/5-browser-extension/solution/translation/README.ja.md index 58926d15a..6a2fc8624 100644 --- a/translations/tl/5-browser-extension/solution/translation/README.ja.md +++ b/translations/tl/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Gagamitin natin ang CO2 Signal API ng tmrow upang subaybayan ang paggamit ng kuryente sa iyong lugar at ipapakita ito bilang paalala sa iyong browser. Sa pamamagitan ng browser extension na ito, maaari mong gamitin ang impormasyong ito upang magdesisyon sa iyong mga aktibidad. -![screenshot ng extension](../../../../../translated_images/tl/extension-screenshot.0e7f5bfa110e92e3.png) +![screenshot ng extension](../../../../../translated_images/tl/extension-screenshot.0e7f5bfa110e92e3.webp) ## Panimula @@ -31,7 +31,7 @@ npm run build Upang mai-install sa Edge, hanapin ang "Extensions" panel mula sa menu na "tatlong tuldok" sa kanang itaas ng browser. Piliin ang "Load Unpacked" at i-load ang bagong extension. Sa prompt, buksan ang "dist" folder upang ma-load ang extension. Upang magamit ito, kakailanganin mo ng API key mula sa CO2 Signal API ([kumuha dito sa pamamagitan ng email](https://www.co2signal.com/) - ilagay ang iyong email sa kahon sa pahinang iyon) at ang [code para sa iyong rehiyon](http://api.electricitymap.org/v3/zones) na tugma sa [Electricity Map](https://www.electricitymap.org/map) (halimbawa, sa Boston, ginagamit ang 'US-NEISO'). -![pag-install](../../../../../translated_images/tl/install-on-edge.78634f02842c4828.png) +![pag-install](../../../../../translated_images/tl/install-on-edge.78634f02842c4828.webp) Kapag nailagay mo na ang API key at rehiyon sa interface ng extension, magbabago ang kulay ng dot na makikita sa extension bar ng iyong browser. Ang kulay ng dot ay sumasalamin sa paggamit ng enerhiya sa iyong lugar at nagbibigay ng ideya kung anong mga aktibidad ang angkop batay sa pangangailangan ng enerhiya. Ang konsepto ng "dot" system na ito ay inspirasyon ng [Energy Lollipop extension](https://energylollipop.com/) para sa emissions sa California. diff --git a/translations/tl/5-browser-extension/solution/translation/README.ms.md b/translations/tl/5-browser-extension/solution/translation/README.ms.md index 4efda3e61..d3dfca08c 100644 --- a/translations/tl/5-browser-extension/solution/translation/README.ms.md +++ b/translations/tl/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Gamit ang API ng CO2 Signal mula sa tmrow para subaybayan ang paggamit ng kuryente, gumawa ng isang browser extension na magbibigay ng abiso sa iyong browser tungkol sa bigat ng paggamit ng kuryente sa iyong lugar. Ang paggamit ng extension na ito ay makakatulong sa iyo na magdesisyon tungkol sa iyong mga aktibidad base sa impormasyong ito. -![screenshot ng browser extension](../../../../../translated_images/tl/extension-screenshot.0e7f5bfa110e92e3.png) +![screenshot ng browser extension](../../../../../translated_images/tl/extension-screenshot.0e7f5bfa110e92e3.webp) ## Paano Magsimula @@ -31,7 +31,7 @@ npm run build Para i-install sa Edge, gamitin ang menu na 'tatlong tuldok' sa kanang itaas na bahagi ng browser para hanapin ang panel ng Extensions. Mula roon, piliin ang 'Load Unpacked' para mag-load ng bagong extension. Buksan ang folder na 'dist' kapag hiniling, at ang extension ay mai-load. Para magamit ito, kakailanganin mo ng API key para sa CO2 Signal API ([kumuha ng isa dito sa pamamagitan ng email](https://www.co2signal.com/) - ilagay ang iyong email sa kahon sa pahinang ito) at [code para sa iyong rehiyon](http://api.electricitymap.org/v3/zones) na tumutugma sa [Electricity Map](https://www.electricitymap.org/map) (halimbawa, sa Boston, ginamit ko ang 'US-NEISO'). -![nagda-download](../../../../../translated_images/tl/install-on-edge.78634f02842c4828.png) +![nagda-download](../../../../../translated_images/tl/install-on-edge.78634f02842c4828.webp) Kapag nailagay na ang API key at rehiyon sa interface ng extension, ang kulay ng tuldok sa extension bar ng browser ay magbabago upang ipakita ang paggamit ng enerhiya sa iyong lugar at magbibigay ng mga rekomendasyon tungkol sa mga aktibidad na angkop gawin. Ang konsepto sa likod ng sistemang 'dot' na ito ay nakuha ko mula sa [Energy Lollipop browser extension](https://energylollipop.com/) para sa emissions sa California. diff --git a/translations/tl/5-browser-extension/start/README.md b/translations/tl/5-browser-extension/start/README.md index 018813524..520aeb8a4 100644 --- a/translations/tl/5-browser-extension/start/README.md +++ b/translations/tl/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Gamit ang tmrow's C02 Signal API para subaybayan ang paggamit ng kuryente, gumawa ng browser extension upang magkaroon ka ng paalala sa iyong browser tungkol sa bigat ng paggamit ng kuryente sa iyong rehiyon. Ang paggamit ng extension na ito nang ad hoc ay makakatulong sa iyo na gumawa ng mas maingat na desisyon sa iyong mga aktibidad batay sa impormasyong ito. -![extension screenshot](../../../../translated_images/tl/extension-screenshot.0e7f5bfa110e92e3.png) +![extension screenshot](../../../../translated_images/tl/extension-screenshot.0e7f5bfa110e92e3.webp) ## Pagsisimula @@ -31,7 +31,7 @@ npm run build Para i-install sa Edge, gamitin ang menu na 'three dot' sa kanang itaas na bahagi ng browser upang hanapin ang Extensions panel. Mula doon, piliin ang 'Load Unpacked' upang mag-load ng bagong extension. Buksan ang 'dist' folder sa prompt at maglo-load ang extension. Para magamit ito, kakailanganin mo ng API key para sa CO2 Signal's API ([kumuha dito sa pamamagitan ng email](https://www.co2signal.com/) - ilagay ang iyong email sa kahon sa pahinang ito) at ang [code para sa iyong rehiyon](http://api.electricitymap.org/v3/zones) na tumutugma sa [Electricity Map](https://www.electricitymap.org/map) (halimbawa, sa Boston, ginagamit ko ang 'US-NEISO'). -![installing](../../../../translated_images/tl/install-on-edge.78634f02842c4828.png) +![installing](../../../../translated_images/tl/install-on-edge.78634f02842c4828.webp) Kapag na-input na ang API key at rehiyon sa interface ng extension, ang kulay ng tuldok sa browser extension bar ay dapat magbago upang ipakita ang paggamit ng enerhiya sa iyong rehiyon at magbigay ng gabay kung anong mga aktibidad na mabigat sa enerhiya ang angkop na gawin. Ang konsepto sa likod ng sistemang 'dot' na ito ay ibinigay sa akin ng [Energy Lollipop extension](https://energylollipop.com/) para sa emissions sa California. diff --git a/translations/tl/6-space-game/2-drawing-to-canvas/README.md b/translations/tl/6-space-game/2-drawing-to-canvas/README.md index d4cd8e294..fc752f041 100644 --- a/translations/tl/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/tl/6-space-game/2-drawing-to-canvas/README.md @@ -108,7 +108,7 @@ quadrantChart UI Elements: [0.9, 0.1] ``` -![ang grid ng canvas](../../../../translated_images/tl/canvas_grid.5f209da785ded492.png) +![ang grid ng canvas](../../../../translated_images/tl/canvas_grid.5f209da785ded492.webp) > Imahe mula sa [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) Para mag-drawing sa canvas element, susundin mo ang parehong tatlong hakbang na proseso na bumubuo sa pundasyon ng lahat ng canvas graphics. Kapag nagawa mo ito nang ilang beses, magiging natural na ito: @@ -329,11 +329,11 @@ Gagawa ka ng web page na may Canvas element. Dapat itong mag-render ng black scr - Hero ship - ![Hero ship](../../../../translated_images/tl/player.dd24c1afa8c71e9b.png) + ![Hero ship](../../../../translated_images/tl/player.dd24c1afa8c71e9b.webp) - 5*5 monster - ![Monster ship](../../../../translated_images/tl/enemyShip.5df2a822c16650c2.png) + ![Monster ship](../../../../translated_images/tl/enemyShip.5df2a822c16650c2.webp) ### Mga Inirerekomendang Hakbang para Simulan ang Development @@ -470,7 +470,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { Ang tapos na resulta ay dapat magmukhang ganito: -![Itim na screen na may isang bayani at 5*5 na mga halimaw](../../../../translated_images/tl/partI-solution.36c53b48c9ffae2a.png) +![Itim na screen na may isang bayani at 5*5 na mga halimaw](../../../../translated_images/tl/partI-solution.36c53b48c9ffae2a.webp) ## Solusyon diff --git a/translations/tl/6-space-game/5-keeping-score/README.md b/translations/tl/6-space-game/5-keeping-score/README.md index aac8125f1..09f3c3892 100644 --- a/translations/tl/6-space-game/5-keeping-score/README.md +++ b/translations/tl/6-space-game/5-keeping-score/README.md @@ -160,7 +160,7 @@ sequenceDiagram ``` - **Sistema ng puntos**: Ang bawat nasirang barko ng kalaban ay nagbibigay ng 100 puntos (mas madaling kalkulahin ng mga manlalaro ang mga bilog na numero). Ang score ay makikita sa ibabang kaliwang sulok. -- **Counter ng buhay**: Ang iyong hero ay magsisimula sa tatlong buhay - isang pamantayan na itinatag ng mga unang arcade games para balansehin ang hamon at kasiyahan sa paglalaro. Ang bawat banggaan sa kalaban ay magbabawas ng isang buhay. Ipapakita natin ang natitirang buhay sa ibabang kanan gamit ang mga icon ng barko ![life image](../../../../translated_images/tl/life.6fb9f50d53ee0413.png). +- **Counter ng buhay**: Ang iyong hero ay magsisimula sa tatlong buhay - isang pamantayan na itinatag ng mga unang arcade games para balansehin ang hamon at kasiyahan sa paglalaro. Ang bawat banggaan sa kalaban ay magbabawas ng isang buhay. Ipapakita natin ang natitirang buhay sa ibabang kanan gamit ang mga icon ng barko ![life image](../../../../translated_images/tl/life.6fb9f50d53ee0413.webp). ## Simulan na Natin ang Paggawa! diff --git a/translations/tl/7-bank-project/1-template-route/README.md b/translations/tl/7-bank-project/1-template-route/README.md index ec91126ae..65cc5d9ee 100644 --- a/translations/tl/7-bank-project/1-template-route/README.md +++ b/translations/tl/7-bank-project/1-template-route/README.md @@ -652,7 +652,7 @@ sequenceDiagram Ang paggamit ng `history.pushState` ay lumilikha ng mga bagong entry sa navigation history ng browser. Maaari mong suriin iyon sa pamamagitan ng pag-hold sa *back button* ng iyong browser, dapat itong magpakita ng ganito: -![Screenshot ng navigation history](../../../../translated_images/tl/history.7fdabbafa521e064.png) +![Screenshot ng navigation history](../../../../translated_images/tl/history.7fdabbafa521e064.webp) Kung susubukan mong mag-click sa back button nang ilang beses, makikita mo na nagbabago ang kasalukuyang URL at na-update ang history, ngunit ang parehong template ang patuloy na ipinapakita. diff --git a/translations/tl/7-bank-project/2-forms/README.md b/translations/tl/7-bank-project/2-forms/README.md index e0bb82e50..a26020515 100644 --- a/translations/tl/7-bank-project/2-forms/README.md +++ b/translations/tl/7-bank-project/2-forms/README.md @@ -295,7 +295,7 @@ Una, obserbahan natin kung ano ang nangyayari sa basic form submission: 2. Obserbahan ang mga pagbabago sa address bar ng iyong browser 3. Pansinin kung paano nagre-reload ang page at lumalabas ang data sa URL -![Screenshot ng pagbabago sa URL ng browser pagkatapos i-click ang Register button](../../../../translated_images/tl/click-register.e89a30bf0d4bc9ca.png) +![Screenshot ng pagbabago sa URL ng browser pagkatapos i-click ang Register button](../../../../translated_images/tl/click-register.e89a30bf0d4bc9ca.webp) ### Paghahambing ng HTTP Methods @@ -350,7 +350,7 @@ I-configure natin ang iyong registration form para maayos na makipag-ugnayan sa 2. **I-click** ang "Create Account" button 3. **Obserbahan** ang server response sa iyong browser -![Isang browser window sa address na localhost:5000/api/accounts, nagpapakita ng JSON string na may user data](../../../../translated_images/tl/form-post.61de4ca1b964d91a.png) +![Isang browser window sa address na localhost:5000/api/accounts, nagpapakita ng JSON string na may user data](../../../../translated_images/tl/form-post.61de4ca1b964d91a.webp) **Ang dapat mong makita:** - **Ang browser ay nagre-redirect** sa API endpoint URL @@ -615,7 +615,7 @@ async function register() { 3. **I-click** ang "Create Account" 4. **Obserbahan** ang mga mensahe sa console at feedback ng user -![Screenshot na nagpapakita ng log message sa console ng browser](../../../../translated_images/tl/browser-console.efaf0b51aaaf6778.png) +![Screenshot na nagpapakita ng log message sa console ng browser](../../../../translated_images/tl/browser-console.efaf0b51aaaf6778.webp) **Ano ang dapat mong makita:** - **Loading state** na lumalabas sa submit button @@ -790,7 +790,7 @@ Palakasin natin ang iyong registration form gamit ang matibay na pag-validate na 3. **Subukan** ang mga espesyal na karakter sa field ng username 4. **Mag-input** ng negatibong halaga ng balanse -![Screenshot na nagpapakita ng error sa pag-validate kapag sinusubukang isumite ang form](../../../../translated_images/tl/validation-error.8bd23e98d416c22f.png) +![Screenshot na nagpapakita ng error sa pag-validate kapag sinusubukang isumite ang form](../../../../translated_images/tl/validation-error.8bd23e98d416c22f.webp) **Ano ang iyong mapapansin:** - **Ipinapakita ng browser** ang mga native na mensahe ng pag-validate @@ -932,7 +932,7 @@ Magpakita ng error message sa HTML kung ang user ay umiiral na. Narito ang isang halimbawa ng kung ano ang magiging hitsura ng final login page pagkatapos ng kaunting pag-istilo: -![Screenshot ng login page pagkatapos magdagdag ng mga estilo sa CSS](../../../../translated_images/tl/result.96ef01f607bf856a.png) +![Screenshot ng login page pagkatapos magdagdag ng mga estilo sa CSS](../../../../translated_images/tl/result.96ef01f607bf856a.webp) ## Post-Lecture Quiz diff --git a/translations/tl/7-bank-project/3-data/README.md b/translations/tl/7-bank-project/3-data/README.md index eca320469..af81f448a 100644 --- a/translations/tl/7-bank-project/3-data/README.md +++ b/translations/tl/7-bank-project/3-data/README.md @@ -160,7 +160,7 @@ sequenceDiagram Browser->>User: Displays new page (flash/reload) ``` -![Workflow ng pag-update sa multi-page application](../../../../translated_images/tl/mpa.7f7375a1a2d4aa77.png) +![Workflow ng pag-update sa multi-page application](../../../../translated_images/tl/mpa.7f7375a1a2d4aa77.webp) **Bakit pakiramdam na clunky ang approach na ito:** - Bawat click ay nangangahulugan ng pag-rebuild ng buong page mula sa simula @@ -187,7 +187,7 @@ sequenceDiagram Browser->>User: Shows updated content (no reload) ``` -![Workflow ng pag-update sa single-page application](../../../../translated_images/tl/spa.268ec73b41f992c2.png) +![Workflow ng pag-update sa single-page application](../../../../translated_images/tl/spa.268ec73b41f992c2.webp) **Bakit mas maganda ang pakiramdam ng SPAs:** - Ang mga bahagi lang na talagang nagbago ang na-update (matalino, di ba?) @@ -523,7 +523,7 @@ if (data.error) { Ngayon, kapag sinubukan mong mag-login gamit ang invalid na account, makikita mo ang isang kapaki-pakinabang na mensahe ng error sa mismong pahina! -![Screenshot na nagpapakita ng mensahe ng error na lumalabas sa pag-login](../../../../translated_images/tl/login-error.416fe019b36a6327.png) +![Screenshot na nagpapakita ng mensahe ng error na lumalabas sa pag-login](../../../../translated_images/tl/login-error.416fe019b36a6327.webp) #### Hakbang 4: Pagiging Inclusive sa Accessibility @@ -961,7 +961,7 @@ Handa ka na bang dalhin ang iyong banking app sa susunod na antas? Gawin natin i Ganito ang maaaring hitsura ng isang polished na dashboard: -![Screenshot ng isang halimbawa ng resulta ng dashboard pagkatapos ng styling](../../../../translated_images/tl/screen2.123c82a831a1d14a.png) +![Screenshot ng isang halimbawa ng resulta ng dashboard pagkatapos ng styling](../../../../translated_images/tl/screen2.123c82a831a1d14a.webp) Huwag kang mag-alala kung hindi mo ito eksaktong ma-match - gamitin ito bilang inspirasyon at gawin itong sarili mo! diff --git a/translations/tl/7-bank-project/4-state-management/README.md b/translations/tl/7-bank-project/4-state-management/README.md index 0c6a3f9e4..7b4d1bbed 100644 --- a/translations/tl/7-bank-project/4-state-management/README.md +++ b/translations/tl/7-bank-project/4-state-management/README.md @@ -190,7 +190,7 @@ Ang [state management](https://en.wikipedia.org/wiki/State_management) ay tungko Sa halip na maguluhan, gagawa tayo ng **centralized state management** system. Isipin ito na parang may isang organisadong tao na namamahala sa lahat ng mahahalagang bagay: -![Schema na nagpapakita ng daloy ng data sa pagitan ng HTML, mga aksyon ng user, at estado](../../../../translated_images/tl/data-flow.fa2354e0908fecc8.png) +![Schema na nagpapakita ng daloy ng data sa pagitan ng HTML, mga aksyon ng user, at estado](../../../../translated_images/tl/data-flow.fa2354e0908fecc8.webp) ```mermaid flowchart TD @@ -803,7 +803,7 @@ Ang hamon na ito ay makakatulong sa iyo na mag-isip tulad ng isang propesyonal n Narito ang isang halimbawa ng resulta pagkatapos makumpleto ang assignment: -![Screenshot na nagpapakita ng halimbawa ng "Add transaction" dialog](../../../../translated_images/tl/dialog.93bba104afeb79f1.png) +![Screenshot na nagpapakita ng halimbawa ng "Add transaction" dialog](../../../../translated_images/tl/dialog.93bba104afeb79f1.webp) --- diff --git a/translations/tl/7-bank-project/4-state-management/assignment.md b/translations/tl/7-bank-project/4-state-management/assignment.md index 70a3a80e6..bd9225c7b 100644 --- a/translations/tl/7-bank-project/4-state-management/assignment.md +++ b/translations/tl/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ Tingnan ang [server API documentation](../api/README.md) para sa: **Inaasahang Resulta:** Pagkatapos makumpleto ang assignment na ito, ang iyong banking app ay dapat magkaroon ng ganap na functional na "Magdagdag ng Transaksyon" na tampok na mukhang propesyonal at maayos ang pagganap: -![Screenshot na nagpapakita ng halimbawa ng "Magdagdag ng Transaksyon" na dialog](../../../../translated_images/tl/dialog.93bba104afeb79f1.png) +![Screenshot na nagpapakita ng halimbawa ng "Magdagdag ng Transaksyon" na dialog](../../../../translated_images/tl/dialog.93bba104afeb79f1.webp) ## Pagsubok ng Iyong Pagpapatupad diff --git a/translations/tl/7-bank-project/README.md b/translations/tl/7-bank-project/README.md index 818805d43..338bc8915 100644 --- a/translations/tl/7-bank-project/README.md +++ b/translations/tl/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Sa proyektong ito, matututo kang gumawa ng isang kathang-isip na bangko. Kasama sa mga araling ito ang mga tagubilin kung paano mag-layout ng isang web app at magbigay ng mga ruta, gumawa ng mga form, pamahalaan ang estado, at kumuha ng data mula sa isang API kung saan maaari mong makuha ang datos ng bangko. -| ![Screen1](../../../translated_images/tl/screen1.baccbba0f1f93364.png) | ![Screen2](../../../translated_images/tl/screen2.123c82a831a1d14a.png) | +| ![Screen1](../../../translated_images/tl/screen1.baccbba0f1f93364.webp) | ![Screen2](../../../translated_images/tl/screen2.123c82a831a1d14a.webp) | |--------------------------------|--------------------------------| ## Mga Aralin diff --git a/translations/tl/8-code-editor/1-using-a-code-editor/README.md b/translations/tl/8-code-editor/1-using-a-code-editor/README.md index c6cf5fbe7..2e194e1e8 100644 --- a/translations/tl/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/tl/8-code-editor/1-using-a-code-editor/README.md @@ -185,7 +185,7 @@ Katulad ng kung paano nagkonekta ang telepono ni Alexander Graham Bell sa mga ma Kapag na-load na ang lahat, makikita mo ang isang malinis na workspace na dinisenyo para panatilihin kang nakatuon sa mahalaga – ang iyong code! -![Default VSCode.dev interface](../../../../translated_images/tl/default-vscode-dev.5d06881d65c1b323.png) +![Default VSCode.dev interface](../../../../translated_images/tl/default-vscode-dev.5d06881d65c1b323.webp) **Narito ang tour sa iyong bagong lugar:** - **Activity Bar** (ang strip sa kaliwa): Ang iyong pangunahing navigation na may Explorer 📁, Search 🔍, Source Control 🌿, Extensions 🧩, at Settings ⚙️ @@ -233,7 +233,7 @@ Perpekto ito kapag nagsisimula ka sa VSCode.dev at nais magbukas ng partikular n 1. Pumunta sa [vscode.dev](https://vscode.dev) kung hindi ka pa naroon 2. Hanapin ang "Open Remote Repository" button sa welcome screen at i-click ito - ![Open remote repository](../../../../translated_images/tl/open-remote-repository.bd9c2598b8949e7f.png) + ![Open remote repository](../../../../translated_images/tl/open-remote-repository.bd9c2598b8949e7f.webp) 3. I-paste ang anumang GitHub repository URL (subukan ito: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. Pindutin ang Enter at panoorin ang magic! @@ -242,7 +242,7 @@ Perpekto ito kapag nagsisimula ka sa VSCode.dev at nais magbukas ng partikular n Gusto mo bang maramdaman na parang coding wizard? Subukan ang keyboard shortcut na ito: Ctrl+Shift+P (o Cmd+Shift+P sa Mac) para buksan ang Command Palette: -![Command Palette](../../../../translated_images/tl/palette-menu.4946174e07f42622.png) +![Command Palette](../../../../translated_images/tl/palette-menu.4946174e07f42622.webp) **Ang Command Palette ay parang search engine para sa lahat ng magagawa mo:** - I-type ang "open remote" at hahanapin nito ang repository opener para sa iyo @@ -304,7 +304,7 @@ Katulad ng pag-aayos ng mga blueprint sa opisina ng isang arkitekto, ang paggawa 3. I-type ang filename kasama ang tamang extension (`style.css`, `script.js`, `index.html`) 4. Pindutin ang Enter para gawin ang file -![Creating a new file](../../../../translated_images/tl/create-new-file.2814e609c2af9aeb.png) +![Creating a new file](../../../../translated_images/tl/create-new-file.2814e609c2af9aeb.webp) **Mga Naming Conventions:** - Gumamit ng mga deskriptibong pangalan na nagpapahiwatig ng layunin ng file @@ -322,7 +322,7 @@ Dito nagsisimula ang totoong kasiyahan! Ang editor ng VSCode.dev ay puno ng mga 2. Simulan ang pag-type at panoorin ang VSCode.dev na tumutulong sa iyo gamit ang kulay, mga suggestion, at pag-detect ng error 3. I-save ang iyong trabaho gamit ang Ctrl+S (Windows/Linux) o Cmd+S (Mac) – bagama't auto-save din ito! -![Editing files in VSCode.dev](../../../../translated_images/tl/edit-a-file.52c0ee665ef19f08.png) +![Editing files in VSCode.dev](../../../../translated_images/tl/edit-a-file.52c0ee665ef19f08.webp) **Ang mga cool na bagay na nangyayari habang nagko-code ka:** - Ang iyong code ay nagiging maganda ang kulay kaya madali itong basahin @@ -343,7 +343,7 @@ Katulad ng kung paano gumagawa ng detalyadong tala ang mga archaeologist ng exca 2. Ang mga binagong file ay lumalabas sa seksyong "Changes" 3. Ang color coding ay nagpapahiwatig ng uri ng pagbabago: berde para sa mga dagdag, pula para sa mga binura -![Viewing changes in Source Control](../../../../translated_images/tl/working-tree.c58eec08e6335c79.png) +![Viewing changes in Source Control](../../../../translated_images/tl/working-tree.c58eec08e6335c79.webp) **Pag-save ng iyong trabaho (ang commit workflow):** @@ -438,7 +438,7 @@ Ang extension marketplace ay talagang maayos ang pagkakaorganisa, kaya hindi ka 2. Mag-browse o maghanap ng isang partikular na bagay 3. I-click ang anumang mukhang kawili-wili upang matuto pa tungkol dito -![Interface ng extension marketplace](../../../../translated_images/tl/extensions.eca0e0c7f59a10b5.png) +![Interface ng extension marketplace](../../../../translated_images/tl/extensions.eca0e0c7f59a10b5.webp) **Ano ang makikita mo roon:** @@ -491,7 +491,7 @@ Karamihan sa mga extension ay may mga setting na maaari mong i-tweak upang guman 3. Piliin ang "Extension Settings" mula sa dropdown 4. Ayusin ang mga bagay hanggang sa maging tama ang pakiramdam para sa iyong workflow -![Pag-customize ng mga setting ng extension](../../../../translated_images/tl/extension-settings.21c752ae4f4cdb78.png) +![Pag-customize ng mga setting ng extension](../../../../translated_images/tl/extension-settings.21c752ae4f4cdb78.webp) **Mga karaniwang bagay na maaaring gusto mong ayusin:** - Paano nafo-format ang iyong code (tabs vs spaces, haba ng linya, atbp.) diff --git a/translations/tl/8-code-editor/1-using-a-code-editor/assignment.md b/translations/tl/8-code-editor/1-using-a-code-editor/assignment.md index 999e95572..173748e50 100644 --- a/translations/tl/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/tl/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ Dahil ang VSCode.dev ay nangangailangan ng kahit isang file upang buksan ang rep 4. **Maglagay** ng commit message: "Magdagdag ng initial HTML structure" 5. **I-click** ang "Commit new file" upang i-save ang iyong mga pagbabago -![Paglikha ng initial file sa GitHub](../../../../translated_images/tl/new-file-github.com.c886796d800e8056.png) +![Paglikha ng initial file sa GitHub](../../../../translated_images/tl/new-file-github.com.c886796d800e8056.webp) **Narito ang nagagawa ng initial setup na ito:** - **Nag-eestablish** ng tamang HTML5 document structure gamit ang semantic elements @@ -104,7 +104,7 @@ Ngayon na ang pundasyon ng iyong repository ay na-set up, lumipat tayo sa VSCode ✅ **Indicator ng Tagumpay**: Makikita mo ang mga file ng iyong proyekto sa Explorer sidebar at ang `index.html` na available para i-edit sa pangunahing editor area. -![Proyekto na naka-load sa VSCode.dev](../../../../translated_images/tl/project-on-vscode.dev.e79815a9a95ee7fe.png) +![Proyekto na naka-load sa VSCode.dev](../../../../translated_images/tl/project-on-vscode.dev.e79815a9a95ee7fe.webp) **Ano ang makikita mo sa interface:** - **Explorer sidebar**: **Ipinapakita** ang mga file ng iyong repository at istruktura ng folder @@ -448,7 +448,7 @@ Ang mga extension ay nagpapahusay sa iyong development experience sa pamamagitan **Mga agarang resulta pagkatapos ng pag-install:** Kapag na-install ang CodeSwing, makikita mo ang live preview ng iyong resume website na lumalabas sa editor. Pinapayagan ka nitong makita kung paano eksaktong magmumukha ang iyong site habang gumagawa ng mga pagbabago. -![CodeSwing extension na nagpapakita ng live preview](../../../../translated_images/tl/after-codeswing-extension-pb.0ebddddcf73b5509.png) +![CodeSwing extension na nagpapakita ng live preview](../../../../translated_images/tl/after-codeswing-extension-pb.0ebddddcf73b5509.webp) **Pag-unawa sa pinahusay na interface:** - **Split view**: **Ipinapakita** ang iyong code sa isang bahagi at ang live preview sa kabila diff --git a/translations/tl/9-chat-project/README.md b/translations/tl/9-chat-project/README.md index 2140f0452..eb22a45db 100644 --- a/translations/tl/9-chat-project/README.md +++ b/translations/tl/9-chat-project/README.md @@ -61,7 +61,7 @@ print(response.choices[0].message.content) Ganito ang magiging hitsura ng iyong natapos na proyekto: -![Chat app interface na nagpapakita ng usapan sa pagitan ng user at AI assistant](../../../translated_images/tl/screenshot.0a1ee0d123df681b.png) +![Chat app interface na nagpapakita ng usapan sa pagitan ng user at AI assistant](../../../translated_images/tl/screenshot.0a1ee0d123df681b.webp) ## 🗺️ Ang Iyong Paglalakbay sa Pagbuo ng AI Application @@ -194,7 +194,7 @@ mindmap **Pangunahing Prinsipyo**: Ang pagbuo ng AI application ay pinagsasama ang tradisyunal na kasanayan sa web development at AI service integration, na lumilikha ng matatalinong aplikasyon na natural at tumutugon sa mga user. -![GitHub Models AI Playground interface na may model selection at testing area](../../../translated_images/tl/playground.d2b927122224ff8f.png) +![GitHub Models AI Playground interface na may model selection at testing area](../../../translated_images/tl/playground.d2b927122224ff8f.webp) **Narito kung bakit kapaki-pakinabang ang playground:** - **Subukan** ang iba't ibang AI models tulad ng GPT-4o-mini, Claude, at iba pa (lahat libre!) @@ -204,7 +204,7 @@ mindmap Kapag nakapaglaro ka na nang kaunti, i-click lang ang "Code" tab at piliin ang programming language para makuha ang implementation code na kailangan mo. -![Playground choice na nagpapakita ng code generation options para sa iba't ibang programming languages](../../../translated_images/tl/playground-choice.1d23ba7d407f4758.png) +![Playground choice na nagpapakita ng code generation options para sa iba't ibang programming languages](../../../translated_images/tl/playground-choice.1d23ba7d407f4758.webp) ## Pag-set Up ng Python Backend Integration @@ -2364,14 +2364,14 @@ Gusto mo bang subukan ang proyektong ito sa isang cloud development environment? - **Pumunta** sa [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) - **I-click** ang "Use this template" sa kanang itaas na bahagi (siguraduhing naka-log in ka sa GitHub) -![Interface ng paggawa mula sa template na nagpapakita ng berdeng "Use this template" button](../../../translated_images/tl/template.67ad477109d29a2b.png) +![Interface ng paggawa mula sa template na nagpapakita ng berdeng "Use this template" button](../../../translated_images/tl/template.67ad477109d29a2b.webp) **Hakbang 2: I-launch ang Codespaces** - **Buksan** ang iyong bagong likhang repository - **I-click** ang berdeng "Code" button at piliin ang "Codespaces" - **Piliin** ang "Create codespace on main" upang simulan ang iyong development environment -![Interface ng paggawa ng codespace na may mga opsyon para sa paglulunsad ng cloud development environment](../../../translated_images/tl/codespace.bcecbdf5d2747d3d.png) +![Interface ng paggawa ng codespace na may mga opsyon para sa paglulunsad ng cloud development environment](../../../translated_images/tl/codespace.bcecbdf5d2747d3d.webp) **Hakbang 3: Configuration ng Environment** Kapag nag-load ang iyong Codespace, magkakaroon ka ng access sa: diff --git a/translations/tl/README.md b/translations/tl/README.md index a286dceb7..99265868b 100644 --- a/translations/tl/README.md +++ b/translations/tl/README.md @@ -72,13 +72,13 @@ Huwag palampasin ang aming bagong Generative AI kurikulum! Bisitahin ang [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para makapagsimula! -![Background](../../translated_images/tl/background.148a8d43afde5730.png) +![Background](../../translated_images/tl/background.148a8d43afde5730.webp) - Mga aralin mula sa mga batayan hanggang sa RAG. - Makipag-ugnayan sa mga makasaysayang karakter gamit ang GenAI at aming companion app. - Masaya at nakakaaliw na kuwento, tulad ng paglalakbay sa panahon! -![character](../../translated_images/tl/character.5c0dd8e067ffd693.png) +![character](../../translated_images/tl/character.5c0dd8e067ffd693.webp) Bawat aralin ay may nakalakip na asignatura, pagsusuri ng kaalaman, at hamon upang gabayan ka sa pag-aaral ng mga paksang tulad ng: @@ -115,7 +115,7 @@ Sundin ang mga hakbang na ito: Sa iyong kopya ng repositoryo na ginawa mo, i-click ang **Code** button at piliin ang **Open with Codespaces**. Lilikha ito ng bagong Codespace para magtrabaho ka. -![Codespace](../../translated_images/tl/createcodespace.0238bbf4d7a8d955.png) +![Codespace](../../translated_images/tl/createcodespace.0238bbf4d7a8d955.webp) #### Pagpapatakbo ng kurikulum lokal sa iyong kompyuter diff --git a/translations/tl/for-teachers.md b/translations/tl/for-teachers.md index f67fe7040..ddc4061a7 100644 --- a/translations/tl/for-teachers.md +++ b/translations/tl/for-teachers.md @@ -42,10 +42,10 @@ Kasama sa kurikulum na ito ang mga importable na package para sa karaniwang mga - Limitado ang suporta ng Moodle Cloud para sa Common Cartridge. Mas mainam gamitin ang Moodle file sa itaas, na maaari ring i-upload sa Canvas. - Pagkatapos ng import, suriin ang mga module, petsa ng due, at mga setting ng pagsusulit upang tumugma sa iskedyul ng inyong term. -![Moodle](../../translated_images/tl/moodle.94eb93d714a50cb2.png) +![Moodle](../../translated_images/tl/moodle.94eb93d714a50cb2.webp) > Ang kurikulum sa isang Moodle classroom -![Canvas](../../translated_images/tl/canvas.fbd605ff8e5b8aff.png) +![Canvas](../../translated_images/tl/canvas.fbd605ff8e5b8aff.webp) > Ang kurikulum sa Canvas ### Direktang paggamit ng repositoryo (walang Classroom) diff --git a/translations/tr/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/tr/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 15a19a7b6..2cf1b397c 100644 --- a/translations/tr/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/tr/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ Bak, şu anda programlama gözünü korkutuyorsa seni tamamen anlıyorum. Ben il Bugün, modern web geliştirmeyi sadece mümkün kılmakla kalmayıp, aynı zamanda ciddi anlamda bağımlılık yapan inanılmaz araçları keşfedeceğiz. Netflix, Spotify ve en sevdiğin bağımsız uygulama stüdyosundaki geliştiricilerin her gün kullandığı tam olarak aynı editörler, tarayıcılar ve iş akışlarından bahsediyorum. Ve işte seni mutlu dans ettirecek kısım: Bu profesyonel düzeydeki, endüstri standardı araçların çoğu tamamen ücretsiz! -![Programlama Giriş](../../../../translated_images/tr/webdev101-programming.d6e3f98e61ac4bff.png) +![Programlama Giriş](../../../../translated_images/tr/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/tr/1-getting-started-lessons/2-github-basics/README.md b/translations/tr/1-getting-started-lessons/2-github-basics/README.md index 7ada24876..10cf9d06f 100644 --- a/translations/tr/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/tr/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ Başta bu biraz fazla gibi gelebilir – açıkçası, ilk GitHub sayfama bakark Bu yolculuğu birlikte, adım adım gerçekleştireceğiz. Acele yok, baskı yok – sadece sen, ben ve birazdan en iyi arkadaşların olacak gerçekten harika araçlar! -![GitHub'a Giriş](../../../../translated_images/tr/webdev101-github.8846d7971abef6f9.png) +![GitHub'a Giriş](../../../../translated_images/tr/webdev101-github.8846d7971abef6f9.webp) > Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -604,7 +604,7 @@ Burada sadece kod yazmayı öğrenmiyorsunuz – dijital dünyayı biraz daha iy ✅ 'Yeni başlayanlar için uygun' depoları bulmanın iyi bir yolu [‘good-first-issue’ etiketiyle arama yapmak](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)dır. -![Bir depoyu yerel olarak kopyalama](../../../../translated_images/tr/clone_repo.5085c48d666ead57.png) +![Bir depoyu yerel olarak kopyalama](../../../../translated_images/tr/clone_repo.5085c48d666ead57.webp) Kod kopyalamanın birkaç yolu vardır. Bir yol, HTTPS, SSH veya GitHub CLI (Komut Satırı Arayüzü) kullanarak depo içeriğini "klonlamaktır". diff --git a/translations/tr/1-getting-started-lessons/3-accessibility/README.md b/translations/tr/1-getting-started-lessons/3-accessibility/README.md index 6c76434d1..507bd4062 100644 --- a/translations/tr/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/tr/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Erişilebilir Web Sayfaları Oluşturma -![Erişilebilirlik Hakkında Her Şey](../../../../translated_images/tr/webdev101-a11y.8ef3025c858d897a.png) +![Erişilebilirlik Hakkında Her Şey](../../../../translated_images/tr/webdev101-a11y.8ef3025c858d897a.webp) > Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/tr/2-js-basics/1-data-types/README.md b/translations/tr/2-js-basics/1-data-types/README.md index a741bf397..b46b1f9eb 100644 --- a/translations/tr/2-js-basics/1-data-types/README.md +++ b/translations/tr/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript Temelleri: Veri Türleri -![JavaScript Temelleri - Veri Türleri](../../../../translated_images/tr/webdev101-js-datatypes.4cc470179730702c.png) +![JavaScript Temelleri - Veri Türleri](../../../../translated_images/tr/webdev101-js-datatypes.4cc470179730702c.webp) > Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/tr/2-js-basics/2-functions-methods/README.md b/translations/tr/2-js-basics/2-functions-methods/README.md index b52aa91df..b17b36336 100644 --- a/translations/tr/2-js-basics/2-functions-methods/README.md +++ b/translations/tr/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript Temelleri: Metotlar ve Fonksiyonlar -![JavaScript Temelleri - Fonksiyonlar](../../../../translated_images/tr/webdev101-js-functions.be049c4726e94f8b.png) +![JavaScript Temelleri - Fonksiyonlar](../../../../translated_images/tr/webdev101-js-functions.be049c4726e94f8b.webp) > Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/tr/2-js-basics/3-making-decisions/README.md b/translations/tr/2-js-basics/3-making-decisions/README.md index b4e05d085..5c6fe1592 100644 --- a/translations/tr/2-js-basics/3-making-decisions/README.md +++ b/translations/tr/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript Temelleri: Karar Verme -![JavaScript Temelleri - Karar Verme](../../../../translated_images/tr/webdev101-js-decisions.69e1b20f272dd1f0.png) +![JavaScript Temelleri - Karar Verme](../../../../translated_images/tr/webdev101-js-decisions.69e1b20f272dd1f0.webp) > Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/tr/2-js-basics/4-arrays-loops/README.md b/translations/tr/2-js-basics/4-arrays-loops/README.md index a89fc9624..d9ab6d04b 100644 --- a/translations/tr/2-js-basics/4-arrays-loops/README.md +++ b/translations/tr/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript Temelleri: Diziler ve Döngüler -![JavaScript Temelleri - Diziler](../../../../translated_images/tr/webdev101-js-arrays.439d7528b8a29455.png) +![JavaScript Temelleri - Diziler](../../../../translated_images/tr/webdev101-js-arrays.439d7528b8a29455.webp) > Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/tr/3-terrarium/1-intro-to-html/README.md b/translations/tr/3-terrarium/1-intro-to-html/README.md index 9cb09b599..3b0922383 100644 --- a/translations/tr/3-terrarium/1-intro-to-html/README.md +++ b/translations/tr/3-terrarium/1-intro-to-html/README.md @@ -26,7 +26,7 @@ journey Build terrarium: 5: Student ``` -![HTML'e Giriş](../../../../translated_images/tr/webdev101-html.4389c2067af68e98.png) +![HTML'e Giriş](../../../../translated_images/tr/webdev101-html.4389c2067af68e98.webp) > Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac) HTML, yani HyperText Markup Language, ziyaret ettiğiniz her web sitesinin temelini oluşturur. HTML'i web sayfalarına yapı kazandıran bir iskelet olarak düşünebilirsiniz – içeriklerin nereye gideceğini, nasıl organize edileceğini ve her bir parçanın neyi temsil ettiğini tanımlar. CSS daha sonra HTML'inizi renkler ve düzenlerle "süsler" ve JavaScript interaktivite ile "canlandırır", ancak HTML her şeyin mümkün olmasını sağlayan temel yapıyı sunar. @@ -88,7 +88,7 @@ Teraryum projeniz için özel bir klasör oluşturacak ve ilk HTML dosyanızı e 4. Explorer panelinde "New File" simgesine tıklayın 5. Dosyanıza `index.html` adını verin -![VS Code Explorer'da yeni dosya oluşturma](../../../../translated_images/tr/vs-code-index.e2986cf919471eb9.png) +![VS Code Explorer'da yeni dosya oluşturma](../../../../translated_images/tr/vs-code-index.e2986cf919471eb9.webp) **Seçenek 2: Terminal Komutlarını Kullanarak** ```bash diff --git a/translations/tr/3-terrarium/2-intro-to-css/README.md b/translations/tr/3-terrarium/2-intro-to-css/README.md index 7fc572d5c..0149b312d 100644 --- a/translations/tr/3-terrarium/2-intro-to-css/README.md +++ b/translations/tr/3-terrarium/2-intro-to-css/README.md @@ -30,7 +30,7 @@ journey Glass reflections: 5: Student ``` -![CSS'e Giriş](../../../../translated_images/tr/webdev101-css.3f7af5991bf53a20.png) +![CSS'e Giriş](../../../../translated_images/tr/webdev101-css.3f7af5991bf53a20.webp) > Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac) HTML teraryumunuzun oldukça basit göründüğünü hatırlıyor musunuz? CSS, bu sade yapıyı görsel olarak çekici bir şeye dönüştürdüğümüz yerdir. @@ -205,7 +205,7 @@ body { Tarayıcınızın geliştirici araçlarını (F12) açın, Elementler sekmesine gidin ve `

` öğenizi inceleyin. Body'den yazı tipi ailesini miras aldığını göreceksiniz: -![miras alınan yazı tipi](../../../../translated_images/tr/1.cc07a5cbe114ad1d.png) +![miras alınan yazı tipi](../../../../translated_images/tr/1.cc07a5cbe114ad1d.webp) ✅ **Deney Zamanı**: Body öğesinde `color`, `line-height` veya `text-align` gibi diğer miras alınabilir özellikleri ayarlamayı deneyin. Başlığınız ve diğer öğeler üzerinde ne olur? @@ -599,7 +599,7 @@ Teraryumunuzu gerçekçi cam yansımalarıyla geliştirmeye hazır mısınız? B Cam yüzeylerden ışığın nasıl yansıdığını simüle eden ince vurgular oluşturacaksınız. Bu yaklaşım, Jan van Eyck gibi Rönesans ressamlarının boyalı camı üç boyutlu göstermek için ışık ve yansımayı nasıl kullandıklarına benzer. İşte hedefiniz: -![bitmiş teraryum](../../../../translated_images/tr/terrarium-final.2f07047ffc597d0a.png) +![bitmiş teraryum](../../../../translated_images/tr/terrarium-final.2f07047ffc597d0a.webp) **Meydan okumanız:** - **Oluşturun** cam yansımaları için ince beyaz veya açık renkli oval şekiller diff --git a/translations/tr/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/tr/3-terrarium/3-intro-to-DOM-and-closures/README.md index 0fd8226a5..5ed02911e 100644 --- a/translations/tr/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/tr/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -26,7 +26,7 @@ journey Complete terrarium: 5: Student ``` -![DOM ve bir kapanış](../../../../translated_images/tr/webdev101-js.10280393044d7eaa.png) +![DOM ve bir kapanış](../../../../translated_images/tr/webdev101-js.10280393044d7eaa.webp) > Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac) Web geliştirme dünyasının en eğlenceli yönlerinden birine hoş geldiniz - şeyleri interaktif hale getirmek! Belge Nesne Modeli (DOM), HTML ve JavaScript arasında bir köprü gibidir ve bugün teraryumunuzu hayata geçirmek için onu kullanacağız. Tim Berners-Lee ilk web tarayıcısını oluşturduğunda, belgelerin dinamik ve etkileşimli olabileceği bir web hayal etmişti - DOM bu vizyonu mümkün kılıyor. @@ -105,7 +105,7 @@ flowchart TD style Q fill:#ffebee ``` -![DOM ağacı temsili](../../../../translated_images/tr/dom-tree.7daf0e763cbbba92.png) +![DOM ağacı temsili](../../../../translated_images/tr/dom-tree.7daf0e763cbbba92.webp) > DOM'un ve onu referans alan HTML işaretlemesinin bir temsili. Kaynak: [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -150,7 +150,7 @@ flowchart LR > 💡 **Kapanışları Anlamak**: Kapanışlar JavaScript'te önemli bir konudur ve birçok geliştirici yıllarca teorik yönlerini tam olarak kavramadan kullanır. Bugün pratik uygulamaya odaklanıyoruz - interaktif özelliklerimizi oluştururken kapanışların doğal olarak nasıl ortaya çıktığını göreceksiniz. Anlayışınız, onların gerçek sorunları nasıl çözdüğünü gördükçe gelişecektir. -![DOM ağacı temsili](../../../../translated_images/tr/dom-tree.7daf0e763cbbba92.png) +![DOM ağacı temsili](../../../../translated_images/tr/dom-tree.7daf0e763cbbba92.webp) > DOM'un ve onu referans alan HTML işaretlemesinin bir temsili. Kaynak: [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -598,7 +598,7 @@ Tebrikler! Vanilla JavaScript kullanarak sofistike bir sürükle-bırak sistemi - **Cihazlar arası destek**: Masaüstü ve mobilde çalışır - **Performans bilinci**: Bellek sızıntısı veya gereksiz hesaplama yok -![bitmiş teraryum](../../../../translated_images/tr/terrarium-final.0920f16e87c13a84.png) +![bitmiş teraryum](../../../../translated_images/tr/terrarium-final.0920f16e87c13a84.webp) --- diff --git a/translations/tr/3-terrarium/solution/README.md b/translations/tr/3-terrarium/solution/README.md index 30fcffe34..cb2cd7351 100644 --- a/translations/tr/3-terrarium/solution/README.md +++ b/translations/tr/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Küçük bir sürükle ve bırak kod meditasyonu. Biraz HTML, JS ve CSS ile bir web arayüzü oluşturabilir, stil verebilir ve etkileşim ekleyebilirsiniz. -![teraryumum](../../../../translated_images/tr/screenshot_gray.0c796099a1f9f25e.png) +![teraryumum](../../../../translated_images/tr/screenshot_gray.0c796099a1f9f25e.webp) ## Katkıda Bulunanlar diff --git a/translations/tr/5-browser-extension/1-about-browsers/README.md b/translations/tr/5-browser-extension/1-about-browsers/README.md index 20c94cde7..88ff3707e 100644 --- a/translations/tr/5-browser-extension/1-about-browsers/README.md +++ b/translations/tr/5-browser-extension/1-about-browsers/README.md @@ -26,7 +26,7 @@ journey Polish experience: 5: Student ``` -![Tarayıcı sketchnote](../../../../translated_images/tr/browser.60317c9be8b7f84a.jpg) +![Tarayıcı sketchnote](../../../../translated_images/tr/browser.60317c9be8b7f84a.webp) > Sketchnote: [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## Ders Öncesi Test @@ -79,7 +79,7 @@ Bu süreç, Tim Berners-Lee'nin 1990 yılında herkesin hiper bağlantılı belg ✅ **Biraz tarih**: İlk tarayıcı 'WorldWideWeb' olarak adlandırıldı ve 1990 yılında Sir Timothy Berners-Lee tarafından oluşturuldu. -![erken tarayıcılar](../../../../translated_images/tr/earlybrowsers.d984b711cdf3a42d.jpg) +![erken tarayıcılar](../../../../translated_images/tr/earlybrowsers.d984b711cdf3a42d.webp) > Bazı erken tarayıcılar, [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) aracılığıyla ### Tarayıcılar Web İçeriğini Nasıl İşler? @@ -198,7 +198,7 @@ quadrantChart Uzantı yükleme sürecini anlamak, insanların uzantınızı yüklediğinde yaşayacakları kullanıcı deneyimini tahmin etmenize yardımcı olur. Yükleme süreci modern tarayıcılar arasında standartlaştırılmıştır, arayüz tasarımında küçük farklılıklar vardır. -![Edge tarayıcısının edge://extensions sayfasını ve açık ayarlar menüsünü gösteren ekran görüntüsü](../../../../translated_images/tr/install-on-edge.d68781acaf0b3d3d.png) +![Edge tarayıcısının edge://extensions sayfasını ve açık ayarlar menüsünü gösteren ekran görüntüsü](../../../../translated_images/tr/install-on-edge.d68781acaf0b3d3d.webp) > **Önemli**: Kendi uzantılarınızı test ederken geliştirici modunu açmayı ve diğer mağazalardan uzantılara izin vermeyi unutmayın. @@ -313,10 +313,10 @@ Bu, bilgi ve seçenekleri mantıklı bir sırayla ortaya çıkararak kullanıcı ### Uzantı Görünümleri Genel Bakış **Kurulum Görünümü** - İlk kez kullanıcı yapılandırması: -![Tamamlanmış uzantının bir tarayıcıda açık olduğu, bölge adı ve API anahtarı için girişler içeren bir formun görüntülendiği ekran görüntüsü.](../../../../translated_images/tr/1.b6da8c1394b07491.png) +![Tamamlanmış uzantının bir tarayıcıda açık olduğu, bölge adı ve API anahtarı için girişler içeren bir formun görüntülendiği ekran görüntüsü.](../../../../translated_images/tr/1.b6da8c1394b07491.webp) **Sonuç Görünümü** - Karbon ayak izi veri görüntüleme: -![Tamamlanmış uzantının US-NEISO bölgesi için karbon kullanımı ve fosil yakıt yüzdesi değerlerini görüntülediği ekran görüntüsü.](../../../../translated_images/tr/2.1dae52ff08042246.png) +![Tamamlanmış uzantının US-NEISO bölgesi için karbon kullanımı ve fosil yakıt yüzdesi değerlerini görüntülediği ekran görüntüsü.](../../../../translated_images/tr/2.1dae52ff08042246.webp) ### Yapılandırma Formunu Oluşturma diff --git a/translations/tr/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/tr/5-browser-extension/2-forms-browsers-local-storage/README.md index a76e1baf7..66d98535b 100644 --- a/translations/tr/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/tr/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -268,7 +268,7 @@ stateDiagram-v2 ClearStorage --> FirstTime: Back to setup ``` -![Yerel depolama paneli](../../../../translated_images/tr/localstorage.472f8147b6a3f8d1.png) +![Yerel depolama paneli](../../../../translated_images/tr/localstorage.472f8147b6a3f8d1.webp) > ⚠️ **Güvenlik Düşüncesi**: Üretim uygulamalarında, API anahtarlarını Yerel Depolama'da saklamak güvenlik riskleri taşır çünkü JavaScript bu verilere erişebilir. Öğrenme amacıyla bu yaklaşım uygundur, ancak gerçek uygulamalar hassas kimlik bilgileri için güvenli sunucu tarafı depolama kullanmalıdır. diff --git a/translations/tr/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/tr/5-browser-extension/3-background-tasks-and-performance/README.md index 3488110ee..0b7141d62 100644 --- a/translations/tr/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/tr/5-browser-extension/3-background-tasks-and-performance/README.md @@ -126,7 +126,7 @@ Edge'de Geliştirici Araçlarını açmak için sağ üst köşedeki üç noktay Haydi bunu deneyelim. Bir web sitesi açın (Microsoft.com bu iş için iyi çalışır) ve 'Kaydı başlat' düğmesine tıklayın. Şimdi sayfayı yenileyin ve profil oluşturucu her şeyi yakalasın. Kaydı durdurduğunuzda, tarayıcının siteyi 'komut dosyaları', 'render' ve 'boyama' işlemleriyle nasıl işlediğine dair ayrıntılı bir döküm göreceksiniz. Bu, görev kontrolünün bir roket fırlatışı sırasında her sistemi izlediği gibi - tam olarak neler olduğunu ve ne zaman olduğunu gerçek zamanlı verilerle görüyorsunuz. -![Edge profiler](../../../../translated_images/tr/profiler.5a4a62479c5df01c.png) +![Edge profiler](../../../../translated_images/tr/profiler.5a4a62479c5df01c.webp) ✅ [Microsoft Belgeleri](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) daha fazla ayrıntı için harika bir kaynak @@ -136,11 +136,11 @@ Profil zaman çizelgesindeki öğeleri seçerek sayfanız yüklenirken gerçekle Profil zaman çizelgesinin bir bölümünü seçerek ve özet paneline bakarak sayfanızın performansının bir anlık görüntüsünü alın: -![Edge profiler snapshot](../../../../translated_images/tr/snapshot.97750180ebcad737.png) +![Edge profiler snapshot](../../../../translated_images/tr/snapshot.97750180ebcad737.webp) Olay Günlüğü panelini kontrol ederek herhangi bir olayın 15 ms'den uzun sürüp sürmediğini görebilirsiniz: -![Edge event log](../../../../translated_images/tr/log.804026979f3707e0.png) +![Edge event log](../../../../translated_images/tr/log.804026979f3707e0.webp) ✅ Profil oluşturucuyu tanıyın! Bu sitede geliştirici araçlarını açın ve herhangi bir darboğaz olup olmadığını kontrol edin. En yavaş yüklenen varlık hangisi? En hızlı olan hangisi? diff --git a/translations/tr/5-browser-extension/README.md b/translations/tr/5-browser-extension/README.md index 08a4caa6a..2bd0e876e 100644 --- a/translations/tr/5-browser-extension/README.md +++ b/translations/tr/5-browser-extension/README.md @@ -23,7 +23,7 @@ Bu uzantı, bir kullanıcı tarafından, bir API anahtarı ve bölge kodu bir fo ### Katkılar -![yeşil bir tarayıcı uzantısı](../../../translated_images/tr/extension-screenshot.0e7f5bfa110e92e3.png) +![yeşil bir tarayıcı uzantısı](../../../translated_images/tr/extension-screenshot.0e7f5bfa110e92e3.webp) ## Katkılar diff --git a/translations/tr/5-browser-extension/solution/README.md b/translations/tr/5-browser-extension/solution/README.md index 2f9878733..ab72b378b 100644 --- a/translations/tr/5-browser-extension/solution/README.md +++ b/translations/tr/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Elektrik kullanımını takip etmek için tmrow'un CO2 Signal API'sini kullanarak bir tarayıcı uzantısı oluşturun. Bu uzantı, bölgenizdeki elektrik kullanımının ne kadar yoğun olduğunu tarayıcınızda hatırlatıcı olarak gösterebilir. Bu uzantıyı anlık olarak kullanmak, bu bilgilere dayanarak aktiviteleriniz hakkında karar vermenize yardımcı olacaktır. -![uzantı ekran görüntüsü](../../../../translated_images/tr/extension-screenshot.0e7f5bfa110e92e3.png) +![uzantı ekran görüntüsü](../../../../translated_images/tr/extension-screenshot.0e7f5bfa110e92e3.webp) ## Başlarken @@ -31,7 +31,7 @@ npm run build Edge tarayıcısına yüklemek için, tarayıcının sağ üst köşesindeki 'üç nokta' menüsünü kullanarak Uzantılar panelini bulun. Buradan 'Paketlenmemiş Yükle' seçeneğini seçerek yeni bir uzantı yükleyin. İstendiğinde 'dist' klasörünü açın ve uzantı yüklenecektir. Kullanmak için CO2 Signal API'si için bir API anahtarına ([buradan e-posta ile alın](https://www.co2signal.com/) - bu sayfadaki kutuya e-posta adresinizi girin) ve [Electricity Map](https://www.electricitymap.org/map) ile ilgili bölgenizin koduna ([kodları burada bulabilirsiniz](http://api.electricitymap.org/v3/zones)) ihtiyacınız olacak (örneğin, Boston'da 'US-NEISO' kullanıyorum). -![yükleme](../../../../translated_images/tr/install-on-edge.78634f02842c4828.png) +![yükleme](../../../../translated_images/tr/install-on-edge.78634f02842c4828.webp) API anahtarı ve bölge uzantı arayüzüne girildikten sonra, tarayıcı uzantı çubuğundaki renkli nokta bölgenizin enerji kullanımını yansıtacak şekilde değişmelidir ve enerji yoğun aktiviteleriniz için uygun bir yönlendirme sağlayacaktır. Bu 'nokta' sisteminin konsepti, Kaliforniya emisyonları için [Energy Lollipop uzantısı](https://energylollipop.com/) tarafından bana önerildi. diff --git a/translations/tr/5-browser-extension/solution/translation/README.fr.md b/translations/tr/5-browser-extension/solution/translation/README.fr.md index ec80e8c13..c0133cb93 100644 --- a/translations/tr/5-browser-extension/solution/translation/README.fr.md +++ b/translations/tr/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Tmrow'un C02 Signal API'sini kullanarak elektrik tüketimini takip edin ve bölgenizdeki elektrik tüketimi hakkında doğrudan tarayıcınızda bir hatırlatıcı almanızı sağlayan bir tarayıcı uzantısı oluşturun. Bu özel uzantıyı kullanmak, bu bilgilere dayanarak aktiviteleriniz hakkında daha bilinçli kararlar vermenize yardımcı olacaktır. -![uzantı ekran görüntüsü](../../../../../translated_images/tr/extension-screenshot.0e7f5bfa110e92e3.png) +![uzantı ekran görüntüsü](../../../../../translated_images/tr/extension-screenshot.0e7f5bfa110e92e3.webp) ## Başlangıç @@ -31,7 +31,7 @@ npm run build Edge tarayıcısına yüklemek için, tarayıcının sağ üst köşesindeki 'üç nokta' menüsünü kullanarak Uzantılar panelini bulun. Buradan 'Sıkıştırılmamış uzantıyı yükle' seçeneğini seçerek yeni bir uzantı yükleyin. İstendiğinde 'dist' klasörünü açın ve uzantı yüklenecektir. Kullanabilmek için CO2 Signal API'si için bir API anahtarına ihtiyacınız olacak ([buradan e-posta ile alın](https://www.co2signal.com/) - bu sayfadaki kutuya e-posta adresinizi girin) ve [Elektrik Haritası](https://www.electricitymap.org/map) ile eşleşen bölgenizin [koduna](http://api.electricitymap.org/v3/zones) ihtiyacınız olacak (örneğin, Boston'da 'US-NEISO' kodunu kullanıyorum). -![kurulum](../../../../../translated_images/tr/install-on-edge.78634f02842c4828.png) +![kurulum](../../../../../translated_images/tr/install-on-edge.78634f02842c4828.webp) API anahtarı ve bölge uzantı arayüzüne girildikten sonra, tarayıcı uzantı çubuğundaki renkli nokta bölgenizdeki enerji tüketimini yansıtacak şekilde değişmelidir ve enerji yoğun aktiviteler için uygun bir gösterge sunmalıdır. Bu 'nokta' sistemi konsepti, [Energy Lollipop uzantısından](https://energylollipop.com/) Kaliforniya emisyonları için ilham alınarak geliştirilmiştir. diff --git a/translations/tr/5-browser-extension/solution/translation/README.hi.md b/translations/tr/5-browser-extension/solution/translation/README.hi.md index 2ea463efc..13a570817 100644 --- a/translations/tr/5-browser-extension/solution/translation/README.hi.md +++ b/translations/tr/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Elektrik kullanımını izlemek için tmrow'un CO2 Signal API'sini kullanarak, tarayıcınızda bölgenizdeki elektrik kullanımının ne kadar yoğun olduğunu hatırlatacak bir tarayıcı uzantısı oluşturmak. Bu uzantıyı kullanarak, bu bilgiye dayanarak aktiviteleriniz hakkında karar vermenize yardımcı olabilirsiniz. -![Uzantı Ekran Görüntüsü](../../../../../translated_images/tr/extension-screenshot.0e7f5bfa110e92e3.png) +![Uzantı Ekran Görüntüsü](../../../../../translated_images/tr/extension-screenshot.0e7f5bfa110e92e3.webp) ## Başlangıç @@ -31,7 +31,7 @@ npm run build Edge tarayıcısına yüklemek için, tarayıcının sağ üst köşesindeki 'üç nokta' menüsünü kullanarak uzantılar panelini bulun. Buradan, yeni bir uzantı yüklemek için 'Load unpacked' seçeneğini seçin. Açılan pencerede 'dist' klasörünü seçin ve uzantı yüklenecektir. Uzantıyı kullanabilmek için CO2 Signal API'sinden ([buradan e-posta ile alın](https://www.co2signal.com/)) bir API anahtarına ihtiyacınız olacak - bu sayfadaki kutuya e-posta adresinizi girin. Ayrıca [bölgeniz için kod](http://api.electricitymap.org/v3/zones) [Elektrik Haritası](https://www.electricitymap.org/map) üzerinden bulunabilir (örneğin, Boston için 'US-NEISO' kodunu kullanıyorum). -![Kurulum](../../../../../translated_images/tr/install-on-edge.78634f02842c4828.png) +![Kurulum](../../../../../translated_images/tr/install-on-edge.78634f02842c4828.webp) API anahtarı ve bölge kodu uzantı arayüzüne girildikten sonra, tarayıcı uzantı çubuğundaki renkli nokta bölgenizdeki enerji kullanımını yansıtacak şekilde değişmelidir ve enerji yoğun aktivitelerin performansınıza uygun olup olmadığını gösteren bir işaretçi sunmalıdır. Bu 'nokta' sistemi fikri, Kaliforniya emisyonları için [Energy Lollipop Uzantısı](https://energylollipop.com/) tarafından bana ilham verdi. diff --git a/translations/tr/5-browser-extension/solution/translation/README.it.md b/translations/tr/5-browser-extension/solution/translation/README.it.md index 109319e9e..0890bef68 100644 --- a/translations/tr/5-browser-extension/solution/translation/README.it.md +++ b/translations/tr/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Elektrik kullanımını izlemek için tmrow'un Signal CO2 API'sini kullanarak, bölgenizdeki elektrik kullanımının ne kadar yoğun olduğunu doğrudan tarayıcınızda hatırlatacak bir tarayıcı eklentisi oluşturacağız. Bu özel eklentiyi kullanmak, bu bilgilere dayanarak kendi aktivitelerinizi değerlendirmenize yardımcı olacaktır. -![eklenti ekran görüntüsü](../../../../../translated_images/tr/extension-screenshot.0e7f5bfa110e92e3.png) +![eklenti ekran görüntüsü](../../../../../translated_images/tr/extension-screenshot.0e7f5bfa110e92e3.webp) ## Başlangıç @@ -31,7 +31,7 @@ npm run build Edge'e yüklemek için, tarayıcının sağ üst köşesindeki "üç nokta" menüsünü kullanarak Eklentiler panelini bulun. Henüz etkin değilse, Geliştirici Modu'nu (sol alt köşede) etkinleştirin. Yeni bir eklenti yüklemek için "Sıkıştırılmamış yükle" seçeneğini seçin. İstemde "dist" klasörünü açın ve eklenti yüklenecektir. Kullanmak için, CO2 Signal API'si için bir API anahtarına ihtiyacınız olacak ([buradan e-posta yoluyla alabilirsiniz](https://www.co2signal.com/) - bu sayfadaki kutuya e-posta adresinizi girin) ve [elektrik haritasına](https://www.electricitymap.org/map) karşılık gelen [bölge koduna](http://api.electricitymap.org/v3/zones) ihtiyacınız olacak (örneğin, Boston için "US-NEISO"). -![kurulum](../../../../../translated_images/tr/install-on-edge.78634f02842c4828.png) +![kurulum](../../../../../translated_images/tr/install-on-edge.78634f02842c4828.webp) API anahtarı ve bölge eklenti arayüzüne girildiğinde, tarayıcı eklenti çubuğundaki renkli nokta, bölgenin enerji kullanımını yansıtacak şekilde değişmelidir ve yüksek enerji tüketen hangi aktivitelerin uygun olabileceği konusunda bir gösterge sağlayacaktır. Bu "nokta" sisteminin arkasındaki konsept, Kaliforniya emisyonları için [Energy Lollipop eklentisi](https://energylollipop.com/) tarafından sağlanmıştır. diff --git a/translations/tr/5-browser-extension/solution/translation/README.ja.md b/translations/tr/5-browser-extension/solution/translation/README.ja.md index c660de5f1..8513d42a5 100644 --- a/translations/tr/5-browser-extension/solution/translation/README.ja.md +++ b/translations/tr/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow'un CO2 Signal API'sini kullanarak enerji tüketiminizi takip etmek için, bölgenizdeki enerji kullanımının ne kadar yoğun olduğunu tarayıcıda bir hatırlatıcı olarak gösterebilen bir tarayıcı uzantısı oluşturacağız. Bu uzantıyı ad-hoc olarak kullanarak, bu bilgiye dayanarak aktivitelerinizi değerlendirebilirsiniz. -![uzantı ekran görüntüsü](../../../../../translated_images/tr/extension-screenshot.0e7f5bfa110e92e3.png) +![uzantı ekran görüntüsü](../../../../../translated_images/tr/extension-screenshot.0e7f5bfa110e92e3.webp) ## Başlangıç @@ -31,7 +31,7 @@ npm run build Edge'e yüklemek için, tarayıcının sağ üst köşesindeki "üç nokta" menüsünden "Uzantılar" panelini bulun. Buradan "Load Unpacked" seçeneğini seçerek yeni uzantıyı yükleyin. İstendiğinde "dist" klasörünü açın, böylece uzantı yüklenir. Kullanmak için, CO2 Signal API'nin API anahtarına ([buradan e-posta ile alın](https://www.co2signal.com/) - bu sayfadaki kutuya e-posta adresinizi girin) ve [Electricity Map](https://www.electricitymap.org/map) ile uyumlu [bölgenizin koduna](http://api.electricitymap.org/v3/zones) ihtiyacınız olacak (örneğin, Boston için 'US-NEISO' kullanabilirsiniz). -![yükleme](../../../../../translated_images/tr/install-on-edge.78634f02842c4828.png) +![yükleme](../../../../../translated_images/tr/install-on-edge.78634f02842c4828.webp) API anahtarını ve bölgenizi uzantı arayüzüne girdikten sonra, tarayıcı uzantı çubuğunda görünen renkli bir nokta değişir ve bölgenizdeki enerji kullanımını yansıtarak hangi tür enerji gerektiren aktiviteleri yapmanın uygun olduğunu gösterir. Bu "nokta" sistemi konsepti, Kaliforniya'daki emisyonlar için [Energy Lollipop uzantısı](https://energylollipop.com/) tarafından bana ilham verilmiştir. diff --git a/translations/tr/5-browser-extension/solution/translation/README.ms.md b/translations/tr/5-browser-extension/solution/translation/README.ms.md index 02994f839..fa3ff4486 100644 --- a/translations/tr/5-browser-extension/solution/translation/README.ms.md +++ b/translations/tr/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Elektrik kullanımını izlemek için tmrow CO2 Signal API'sini kullanarak, bölgenizdeki elektrik tüketiminin yoğunluğuna dair tarayıcınızda uyarılar almanızı sağlayan bir tarayıcı uzantısı oluşturun. Bu uzantıyı kullanmak, bu bilgiler doğrultusunda aktivitelerinizi değerlendirmenize yardımcı olacaktır. -![tarayıcı uzantısı ekran görüntüsü](../../../../../translated_images/tr/extension-screenshot.0e7f5bfa110e92e3.png) +![tarayıcı uzantısı ekran görüntüsü](../../../../../translated_images/tr/extension-screenshot.0e7f5bfa110e92e3.webp) ## Başlangıç @@ -31,7 +31,7 @@ npm run build Edge tarayıcısına yüklemek için, tarayıcının sağ üst köşesindeki 'üç nokta' menüsünü kullanarak Uzantılar panelini bulun. Buradan 'Load Unpacked' seçeneğini seçerek yeni bir uzantı yükleyin. İstendiğinde 'dist' klasörünü açın ve uzantı yüklenecektir. Kullanabilmek için CO2 Signal API için bir API anahtarına ihtiyacınız olacak ([buradan e-posta ile alın](https://www.co2signal.com/) - bu sayfadaki kutuya e-posta adresinizi girin) ve [Elektrik Haritası](https://www.electricitymap.org/map) ile uyumlu olan bölgenize ait [kod](http://api.electricitymap.org/v3/zones) (örneğin, Boston'da 'US-NEISO' kullanıyorum). -![yükleniyor](../../../../../translated_images/tr/install-on-edge.78634f02842c4828.png) +![yükleniyor](../../../../../translated_images/tr/install-on-edge.78634f02842c4828.webp) API anahtarı ve bölge bilgisi uzantı arayüzüne girildikten sonra, tarayıcı uzantı çubuğundaki renkli nokta, bölgenizdeki enerji tüketimini yansıtacak şekilde değişir ve size uygun aktiviteler hakkında önerilerde bulunur. Bu 'nokta' sisteminin konsepti, [California için Energy Lollipop tarayıcı uzantısından](https://energylollipop.com/) ilham alınmıştır. diff --git a/translations/tr/5-browser-extension/start/README.md b/translations/tr/5-browser-extension/start/README.md index 55ed41987..547607cb1 100644 --- a/translations/tr/5-browser-extension/start/README.md +++ b/translations/tr/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Elektrik kullanımını takip etmek için tmrow'un CO2 Signal API'sini kullanarak, bölgenizdeki elektrik kullanımının ne kadar yoğun olduğunu tarayıcınızda hatırlatıcı olarak görebileceğiniz bir tarayıcı uzantısı oluşturun. Bu uzantıyı rastgele kullanmak, bu bilgilere dayanarak aktiviteleriniz hakkında karar vermenize yardımcı olacaktır. -![uzantı ekran görüntüsü](../../../../translated_images/tr/extension-screenshot.0e7f5bfa110e92e3.png) +![uzantı ekran görüntüsü](../../../../translated_images/tr/extension-screenshot.0e7f5bfa110e92e3.webp) ## Başlarken @@ -31,7 +31,7 @@ npm run build Edge tarayıcısında yüklemek için, tarayıcının sağ üst köşesindeki 'üç nokta' menüsünü kullanarak Uzantılar panelini bulun. Buradan 'Paketlenmemiş Yükle' seçeneğini seçerek yeni bir uzantı yükleyin. İstendiğinde 'dist' klasörünü açın ve uzantı yüklenecektir. Kullanmak için, CO2 Signal API'si için bir API anahtarına ([buradan e-posta ile alın](https://www.co2signal.com/) - bu sayfadaki kutuya e-posta adresinizi girin) ve [Electricity Map](https://www.electricitymap.org/map) ile ilgili bölgenizin koduna ([kodları burada bulabilirsiniz](http://api.electricitymap.org/v3/zones)) ihtiyacınız olacak (örneğin, Boston'da 'US-NEISO' kullanıyorum). -![yükleme](../../../../translated_images/tr/install-on-edge.78634f02842c4828.png) +![yükleme](../../../../translated_images/tr/install-on-edge.78634f02842c4828.webp) API anahtarı ve bölge uzantı arayüzüne girildikten sonra, tarayıcı uzantı çubuğundaki renkli nokta bölgenizin enerji kullanımını yansıtacak şekilde değişmelidir ve enerji yoğun aktiviteleriniz için uygun bir yönlendirme sağlayacaktır. Bu 'nokta' sisteminin konsepti, California emisyonları için [Energy Lollipop uzantısı](https://energylollipop.com/) tarafından bana önerildi. diff --git a/translations/tr/6-space-game/2-drawing-to-canvas/README.md b/translations/tr/6-space-game/2-drawing-to-canvas/README.md index 5e3252ad7..5a72cc143 100644 --- a/translations/tr/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/tr/6-space-game/2-drawing-to-canvas/README.md @@ -108,7 +108,7 @@ quadrantChart UI Elements: [0.9, 0.1] ``` -![canvas'ın ızgarası](../../../../translated_images/tr/canvas_grid.5f209da785ded492.png) +![canvas'ın ızgarası](../../../../translated_images/tr/canvas_grid.5f209da785ded492.webp) > Görsel [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) üzerinden alınmıştır Canvas öğesi üzerinde çizim yapmak için, tüm canvas grafiklerinin temelini oluşturan aynı üç adımlı süreci takip edeceksiniz. Bunu birkaç kez yaptığınızda, doğal bir hale gelir: @@ -329,11 +329,11 @@ Bir Canvas öğesi içeren bir web sayfası oluşturacaksınız. `1024*768` boyu - Kahraman gemisi - ![Kahraman gemisi](../../../../translated_images/tr/player.dd24c1afa8c71e9b.png) + ![Kahraman gemisi](../../../../translated_images/tr/player.dd24c1afa8c71e9b.webp) - 5*5 canavar - ![Canavar gemisi](../../../../translated_images/tr/enemyShip.5df2a822c16650c2.png) + ![Canavar gemisi](../../../../translated_images/tr/enemyShip.5df2a822c16650c2.webp) ### Geliştirmeye Başlamak İçin Önerilen Adımlar @@ -470,7 +470,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { Sonuç aşağıdaki gibi görünmelidir: -![Siyah ekran, bir kahraman ve 5*5 canavarlar](../../../../translated_images/tr/partI-solution.36c53b48c9ffae2a.png) +![Siyah ekran, bir kahraman ve 5*5 canavarlar](../../../../translated_images/tr/partI-solution.36c53b48c9ffae2a.webp) ## Çözüm diff --git a/translations/tr/6-space-game/5-keeping-score/README.md b/translations/tr/6-space-game/5-keeping-score/README.md index 22fb33eee..94489accf 100644 --- a/translations/tr/6-space-game/5-keeping-score/README.md +++ b/translations/tr/6-space-game/5-keeping-score/README.md @@ -160,7 +160,7 @@ sequenceDiagram ``` - **Puanlama sistemi**: Yok edilen her düşman gemisi 100 puan kazandırır (yuvarlak sayılar oyuncuların zihinsel olarak hesaplamasını kolaylaştırır). Puan, sol alt köşede gösterilir. -- **Can sayacı**: Kahramanınız üç canla başlar - erken dönem arcade oyunlarının zorluk ile oynanabilirlik arasında denge kurmak için belirlediği bir standart. Düşmanla her çarpışma bir cana mal olur. Kalan canları sağ altta gemi ikonlarıyla göstereceğiz ![can görseli](../../../../translated_images/tr/life.6fb9f50d53ee0413.png). +- **Can sayacı**: Kahramanınız üç canla başlar - erken dönem arcade oyunlarının zorluk ile oynanabilirlik arasında denge kurmak için belirlediği bir standart. Düşmanla her çarpışma bir cana mal olur. Kalan canları sağ altta gemi ikonlarıyla göstereceğiz ![can görseli](../../../../translated_images/tr/life.6fb9f50d53ee0413.webp). ## Hadi İnşa Edelim! diff --git a/translations/tr/7-bank-project/1-template-route/README.md b/translations/tr/7-bank-project/1-template-route/README.md index dd1593846..ff7e0fe32 100644 --- a/translations/tr/7-bank-project/1-template-route/README.md +++ b/translations/tr/7-bank-project/1-template-route/README.md @@ -652,7 +652,7 @@ sequenceDiagram `history.pushState` kullanımı, tarayıcının navigasyon geçmişinde yeni girişler oluşturur. Tarayıcınızın *geri düğmesini* basılı tutarak bunu kontrol edebilirsiniz, şöyle bir şey göstermesi gerekir: -![Navigasyon geçmişi ekran görüntüsü](../../../../translated_images/tr/history.7fdabbafa521e064.png) +![Navigasyon geçmişi ekran görüntüsü](../../../../translated_images/tr/history.7fdabbafa521e064.webp) Geri düğmesine birkaç kez tıklamayı deneyin, URL'nin değiştiğini ve geçmişin güncellendiğini göreceksiniz, ancak aynı şablon görüntülenmeye devam eder. diff --git a/translations/tr/7-bank-project/2-forms/README.md b/translations/tr/7-bank-project/2-forms/README.md index 561131b22..7c0c7a59b 100644 --- a/translations/tr/7-bank-project/2-forms/README.md +++ b/translations/tr/7-bank-project/2-forms/README.md @@ -295,7 +295,7 @@ Birisi gönder düğmesine tıkladığında gerçekte ne olduğunu inceleyelim. 2. Tarayıcınızın adres çubuğundaki değişiklikleri gözlemleyin 3. Sayfanın yeniden yüklendiğini ve verilerin URL'de göründüğünü fark edin -![Kayıt Ol düğmesine tıkladıktan sonra tarayıcının URL değişikliğini gösteren ekran görüntüsü](../../../../translated_images/tr/click-register.e89a30bf0d4bc9ca.png) +![Kayıt Ol düğmesine tıkladıktan sonra tarayıcının URL değişikliğini gösteren ekran görüntüsü](../../../../translated_images/tr/click-register.e89a30bf0d4bc9ca.webp) ### HTTP Yöntemleri Karşılaştırması @@ -350,7 +350,7 @@ Kayıt formunuzu POST yöntemi kullanarak arka uç API ile doğru şekilde ileti 2. **"Hesap Oluştur"** düğmesine tıklayın 3. **Sunucu yanıtını** tarayıcınızda gözlemleyin -![localhost:5000/api/accounts adresinde bir tarayıcı penceresi, kullanıcı verileri içeren bir JSON dizesini gösteriyor](../../../../translated_images/tr/form-post.61de4ca1b964d91a.png) +![localhost:5000/api/accounts adresinde bir tarayıcı penceresi, kullanıcı verileri içeren bir JSON dizesini gösteriyor](../../../../translated_images/tr/form-post.61de4ca1b964d91a.webp) **Görmeniz gerekenler:** - **Tarayıcı** API uç noktasının URL'sine yönlendirme yapar @@ -615,7 +615,7 @@ async function register() { 3. **"Hesap Oluştur" düğmesine tıklayın** 4. **Konsol mesajlarını ve kullanıcı geri bildirimlerini gözlemleyin** -![Tarayıcı konsolunda günlük mesajını gösteren ekran görüntüsü](../../../../translated_images/tr/browser-console.efaf0b51aaaf6778.png) +![Tarayıcı konsolunda günlük mesajını gösteren ekran görüntüsü](../../../../translated_images/tr/browser-console.efaf0b51aaaf6778.webp) **Görmeniz gerekenler:** - **Gönder düğmesinde** yükleme durumu görünür @@ -790,7 +790,7 @@ Kayıt formunuzu mükemmel bir kullanıcı deneyimi ve veri kalitesi sağlayan s 3. **Kullanıcı adı alanına özel karakterler deneyin** 4. **Negatif bir bakiye miktarı girin** -![Formu göndermeye çalışırken doğrulama hatasını gösteren ekran görüntüsü](../../../../translated_images/tr/validation-error.8bd23e98d416c22f.png) +![Formu göndermeye çalışırken doğrulama hatasını gösteren ekran görüntüsü](../../../../translated_images/tr/validation-error.8bd23e98d416c22f.webp) **Gözlemleyecekleriniz:** - **Tarayıcı** yerel doğrulama mesajlarını gösterir @@ -938,7 +938,7 @@ Kullanıcı zaten varsa HTML'de bir hata mesajı gösterin. İşte biraz stil ekledikten sonra son giriş sayfasının nasıl görünebileceğine dair bir örnek: -![CSS stilleri eklendikten sonra giriş sayfasının ekran görüntüsü](../../../../translated_images/tr/result.96ef01f607bf856a.png) +![CSS stilleri eklendikten sonra giriş sayfasının ekran görüntüsü](../../../../translated_images/tr/result.96ef01f607bf856a.webp) ## Ders Sonrası Test diff --git a/translations/tr/7-bank-project/3-data/README.md b/translations/tr/7-bank-project/3-data/README.md index 3de0d0948..11503b75e 100644 --- a/translations/tr/7-bank-project/3-data/README.md +++ b/translations/tr/7-bank-project/3-data/README.md @@ -160,7 +160,7 @@ sequenceDiagram Browser->>User: Displays new page (flash/reload) ``` -![Çoklu sayfa uygulamasında güncelleme iş akışı](../../../../translated_images/tr/mpa.7f7375a1a2d4aa77.png) +![Çoklu sayfa uygulamasında güncelleme iş akışı](../../../../translated_images/tr/mpa.7f7375a1a2d4aa77.webp) **Bu yaklaşım neden hantal hissettiriyordu:** - Her tıklama tüm sayfanın baştan sona yeniden inşa edilmesi anlamına geliyordu @@ -187,7 +187,7 @@ sequenceDiagram Browser->>User: Shows updated content (no reload) ``` -![Tek sayfa uygulamasında güncelleme iş akışı](../../../../translated_images/tr/spa.268ec73b41f992c2.png) +![Tek sayfa uygulamasında güncelleme iş akışı](../../../../translated_images/tr/spa.268ec73b41f992c2.webp) **SPA'lar neden daha iyi hissettiriyor:** - Sadece gerçekten değişen bölümler güncellenir (akıllıca, değil mi?) @@ -523,7 +523,7 @@ if (data.error) { Şimdi geçersiz bir hesapla test ettiğinizde, sayfada yardımcı bir hata mesajı göreceksiniz! -![Giriş sırasında hata mesajını gösteren ekran görüntüsü](../../../../translated_images/tr/login-error.416fe019b36a6327.png) +![Giriş sırasında hata mesajını gösteren ekran görüntüsü](../../../../translated_images/tr/login-error.416fe019b36a6327.webp) #### Adım 4: Erişilebilirlik ile Kapsayıcı Olmak @@ -961,7 +961,7 @@ Bankacılık uygulamanızı bir üst seviyeye taşımaya hazır mısınız? İş İşte cilalanmış bir pano böyle görünebilir: -![Panonun stil eklenmiş örnek sonucu ekran görüntüsü](../../../../translated_images/tr/screen2.123c82a831a1d14a.png) +![Panonun stil eklenmiş örnek sonucu ekran görüntüsü](../../../../translated_images/tr/screen2.123c82a831a1d14a.webp) Bunu tam olarak eşleştirmek zorunda hissetmeyin - ilham kaynağı olarak kullanın ve kendi tarzınızı yaratın! diff --git a/translations/tr/7-bank-project/4-state-management/README.md b/translations/tr/7-bank-project/4-state-management/README.md index a76734153..f555a2b26 100644 --- a/translations/tr/7-bank-project/4-state-management/README.md +++ b/translations/tr/7-bank-project/4-state-management/README.md @@ -190,7 +190,7 @@ Titanik'in bölümlere ayrılmış tasarımı gibi, bu sorunları tek tek çözm Kendi etrafımızda dönmek yerine, **merkezi bir durum yönetim sistemi** oluşturacağız. Bunu, tüm önemli şeylerin sorumluluğunu üstlenen gerçekten organize bir kişi gibi düşünün: -![HTML, kullanıcı eylemleri ve durum arasındaki veri akışını gösteren şema](../../../../translated_images/tr/data-flow.fa2354e0908fecc8.png) +![HTML, kullanıcı eylemleri ve durum arasındaki veri akışını gösteren şema](../../../../translated_images/tr/data-flow.fa2354e0908fecc8.webp) ```mermaid flowchart TD @@ -804,7 +804,7 @@ Bu meydan okuma, hem kullanıcı deneyimini hem de uygulama verimliliğini düş İşte ödevi tamamladıktan sonra ortaya çıkan bir örnek: -![Bir örnek "İşlem ekleme" diyalog kutusunu gösteren ekran görüntüsü](../../../../translated_images/tr/dialog.93bba104afeb79f1.png) +![Bir örnek "İşlem ekleme" diyalog kutusunu gösteren ekran görüntüsü](../../../../translated_images/tr/dialog.93bba104afeb79f1.webp) --- diff --git a/translations/tr/7-bank-project/4-state-management/assignment.md b/translations/tr/7-bank-project/4-state-management/assignment.md index 82d368ca2..d641d60f7 100644 --- a/translations/tr/7-bank-project/4-state-management/assignment.md +++ b/translations/tr/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ Diyalogunuzu uygulamak için aşağıdaki iki yaklaşımdan birini seçin: **Beklenen Sonuç:** Bu görevi tamamladıktan sonra, bankacılık uygulamanız profesyonel bir görünüme ve davranışa sahip, tamamen işlevsel bir "İşlem Ekle" özelliğine sahip olmalıdır: -![Bir örnek "İşlem ekle" diyalog kutusunu gösteren ekran görüntüsü](../../../../translated_images/tr/dialog.93bba104afeb79f1.png) +![Bir örnek "İşlem ekle" diyalog kutusunu gösteren ekran görüntüsü](../../../../translated_images/tr/dialog.93bba104afeb79f1.webp) ## Uygulamanızı Test Etme diff --git a/translations/tr/7-bank-project/README.md b/translations/tr/7-bank-project/README.md index 09504861d..fe0e5192f 100644 --- a/translations/tr/7-bank-project/README.md +++ b/translations/tr/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Bu projede, hayali bir banka nasıl kurulur öğreneceksiniz. Bu dersler, bir web uygulamasının nasıl tasarlanacağı ve yönlendirmelerin nasıl sağlanacağı, formların nasıl oluşturulacağı, durumun nasıl yönetileceği ve bir API'den banka verilerini nasıl çekeceğiniz gibi konularda talimatlar içerir. -| ![Ekran1](../../../translated_images/tr/screen1.baccbba0f1f93364.png) | ![Ekran2](../../../translated_images/tr/screen2.123c82a831a1d14a.png) | +| ![Ekran1](../../../translated_images/tr/screen1.baccbba0f1f93364.webp) | ![Ekran2](../../../translated_images/tr/screen2.123c82a831a1d14a.webp) | |--------------------------------|--------------------------------| ## Dersler diff --git a/translations/tr/8-code-editor/1-using-a-code-editor/README.md b/translations/tr/8-code-editor/1-using-a-code-editor/README.md index 3c2c09464..790206436 100644 --- a/translations/tr/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/tr/8-code-editor/1-using-a-code-editor/README.md @@ -185,7 +185,7 @@ Alexander Graham Bell'in telefonu uzak yerleri nasıl birbirine bağladıysa, Gi Her şey yüklendikten sonra, odaklanmanızı sağlayacak şekilde tasarlanmış, güzel ve temiz bir çalışma alanı göreceksiniz – kodunuza! -![Varsayılan VSCode.dev arayüzü](../../../../translated_images/tr/default-vscode-dev.5d06881d65c1b323.png) +![Varsayılan VSCode.dev arayüzü](../../../../translated_images/tr/default-vscode-dev.5d06881d65c1b323.webp) **İşte mahallenizin turu:** - **Etkinlik Çubuğu** (soldaki şerit): Gezgini 📁, Aramayı 🔍, Kaynak Kontrolünü 🌿, Uzantıları 🧩 ve Ayarları ⚙️ içeren ana gezinme alanınız @@ -233,7 +233,7 @@ Bu yöntem, VSCode.dev'de yeni başlıyorsanız ve belirli bir depoyu açmak ist 1. [vscode.dev](https://vscode.dev) adresine gidin (henüz orada değilseniz) 2. Karşılama ekranında "Open Remote Repository" (Uzak Depo Aç) düğmesini arayın ve tıklayın - ![Uzak depo aç](../../../../translated_images/tr/open-remote-repository.bd9c2598b8949e7f.png) + ![Uzak depo aç](../../../../translated_images/tr/open-remote-repository.bd9c2598b8949e7f.webp) 3. Herhangi bir GitHub depo URL'sini yapıştırın (bunu deneyin: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. Enter tuşuna basın ve sihri izleyin! @@ -242,7 +242,7 @@ Bu yöntem, VSCode.dev'de yeni başlıyorsanız ve belirli bir depoyu açmak ist Kendinizi bir kodlama sihirbazı gibi hissetmek ister misiniz? Şu klavye kısayolunu deneyin: Ctrl+Shift+P (veya Mac'te Cmd+Shift+P) ile Komut Paletini açın: -![Komut Paleti](../../../../translated_images/tr/palette-menu.4946174e07f42622.png) +![Komut Paleti](../../../../translated_images/tr/palette-menu.4946174e07f42622.webp) **Komut Paleti, yapabileceğiniz her şey için bir arama motoru gibidir:** - "open remote" yazın ve sizin için depo açıcıyı bulacaktır @@ -304,7 +304,7 @@ Bir mimarın ofisinde planları düzenlemesi gibi, VSCode.dev'de dosya oluşturm 3. Uygun uzantıyı içeren dosya adını girin (`style.css`, `script.js`, `index.html`) 4. Dosyayı oluşturmak için Enter tuşuna basın -![Yeni bir dosya oluşturma](../../../../translated_images/tr/create-new-file.2814e609c2af9aeb.png) +![Yeni bir dosya oluşturma](../../../../translated_images/tr/create-new-file.2814e609c2af9aeb.webp) **Adlandırma kuralları:** - Dosyanın amacını belirten açıklayıcı adlar kullanın @@ -322,7 +322,7 @@ Asıl eğlence burada başlıyor! VSCode.dev'in editörü, kod yazmayı pürüzs 2. Yazmaya başlayın ve VSCode.dev'in renkler, öneriler ve hata tespiti ile size nasıl yardımcı olduğunu izleyin 3. Çalışmanızı Ctrl+S (Windows/Linux) veya Cmd+S (Mac) ile kaydedin – ancak otomatik kaydetme de mevcut! -![VSCode.dev'de dosyaları düzenleme](../../../../translated_images/tr/edit-a-file.52c0ee665ef19f08.png) +![VSCode.dev'de dosyaları düzenleme](../../../../translated_images/tr/edit-a-file.52c0ee665ef19f08.webp) **Kod yazarken olan harika şeyler:** - Kodunuz güzelce renklendirilir, böylece okunması kolaylaşır @@ -343,7 +343,7 @@ Arkeologların kazı katmanlarının ayrıntılı kayıtlarını oluşturması g 2. Değiştirilen dosyalar "Değişiklikler" bölümünde görünür 3. Renk kodlaması değişiklik türlerini belirtir: eklemeler için yeşil, silmeler için kırmızı -![Kaynak Kontrolde değişiklikleri görüntüleme](../../../../translated_images/tr/working-tree.c58eec08e6335c79.png) +![Kaynak Kontrolde değişiklikleri görüntüleme](../../../../translated_images/tr/working-tree.c58eec08e6335c79.webp) **Çalışmanızı kaydetme (commit iş akışı):** @@ -437,7 +437,7 @@ Uzantı pazarı gerçekten iyi organize edilmiştir, bu yüzden ihtiyacınız ol 2. Etrafı dolaşın veya belirli bir şey arayın 3. İlginç görünen bir şeye tıklayın ve daha fazla bilgi edinin -![Uzantı pazarı arayüzü](../../../../translated_images/tr/extensions.eca0e0c7f59a10b5.png) +![Uzantı pazarı arayüzü](../../../../translated_images/tr/extensions.eca0e0c7f59a10b5.webp) **Orada görecekleriniz:** @@ -490,7 +490,7 @@ Editörünüze yeni özellikler eklemek bir düğmeye tıklamak kadar basittir. 3. Açılır menüden "Uzantı Ayarları"nı seçin 4. İş akışınıza tam uyacak şekilde ayarları düzenleyin -![Uzantı ayarlarını özelleştirme](../../../../translated_images/tr/extension-settings.21c752ae4f4cdb78.png) +![Uzantı ayarlarını özelleştirme](../../../../translated_images/tr/extension-settings.21c752ae4f4cdb78.webp) **Düzenlemek isteyebileceğiniz yaygın şeyler:** - Kodunuzun nasıl biçimlendirileceği (sekme mi boşluk mu, satır uzunluğu vb.) diff --git a/translations/tr/8-code-editor/1-using-a-code-editor/assignment.md b/translations/tr/8-code-editor/1-using-a-code-editor/assignment.md index 918753fa3..4ef464c25 100644 --- a/translations/tr/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/tr/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ VSCode.dev'in bir depoyu açması için en az bir dosya gerektirdiğinden, web d 4. Bir commit mesajı yazın: "Add initial HTML structure" 5. Değişikliklerinizi kaydetmek için "Commit new file" düğmesine **tıklayın** -![GitHub'da ilk dosyayı oluşturma](../../../../translated_images/tr/new-file-github.com.c886796d800e8056.png) +![GitHub'da ilk dosyayı oluşturma](../../../../translated_images/tr/new-file-github.com.c886796d800e8056.webp) **Bu başlangıç kurulumu şunları sağlar:** - HTML5 belge yapısını semantik öğelerle **oluşturur** @@ -104,7 +104,7 @@ Depo temeliniz oluşturulduğuna göre, ana geliştirme çalışmaları için VS ✅ **Başarı göstergesi**: Proje dosyalarınızı Explorer yan çubuğunda ve `index.html` dosyasını düzenleme için ana düzenleyici alanında görmelisiniz. -![VSCode.dev'de yüklenen proje](../../../../translated_images/tr/project-on-vscode.dev.e79815a9a95ee7fe.png) +![VSCode.dev'de yüklenen proje](../../../../translated_images/tr/project-on-vscode.dev.e79815a9a95ee7fe.webp) **Arayüzde göreceğiniz şeyler:** - **Explorer yan çubuğu**: Depo dosyalarınızı ve klasör yapınızı **gösterir** @@ -448,7 +448,7 @@ Uzantılar, geliştirme deneyiminizi iyileştirerek canlı önizleme yetenekleri **Yükleme sonrası anında sonuçlar:** CodeSwing yüklendikten sonra, özgeçmiş web sitenizin canlı önizlemesi düzenleyicide görünür. Bu, siteyi düzenlerken tam olarak nasıl göründüğünü görmenizi sağlar. -![CodeSwing uzantısı canlı önizleme gösteriyor](../../../../translated_images/tr/after-codeswing-extension-pb.0ebddddcf73b5509.png) +![CodeSwing uzantısı canlı önizleme gösteriyor](../../../../translated_images/tr/after-codeswing-extension-pb.0ebddddcf73b5509.webp) **Geliştirilmiş arayüzü anlama:** - **Bölünmüş görünüm**: Kodunuzu bir tarafta ve canlı önizlemeyi diğer tarafta **gösterir** diff --git a/translations/tr/9-chat-project/README.md b/translations/tr/9-chat-project/README.md index 3e5cb000c..66bf53762 100644 --- a/translations/tr/9-chat-project/README.md +++ b/translations/tr/9-chat-project/README.md @@ -61,7 +61,7 @@ print(response.choices[0].message.content) İşte bitmiş projenizin nasıl görüneceği: -![Kullanıcı ve AI asistanı arasındaki sohbeti gösteren sohbet uygulaması arayüzü](../../../translated_images/tr/screenshot.0a1ee0d123df681b.png) +![Kullanıcı ve AI asistanı arasındaki sohbeti gösteren sohbet uygulaması arayüzü](../../../translated_images/tr/screenshot.0a1ee0d123df681b.webp) ## 🗺️ AI Uygulama Geliştirme Yolculuğunuz @@ -194,7 +194,7 @@ mindmap **Temel İlke**: AI uygulama geliştirme, geleneksel web geliştirme becerilerini AI hizmet entegrasyonu ile birleştirerek kullanıcılar için doğal ve duyarlı hissedilen akıllı uygulamalar oluşturur. -![Model seçimi ve test alanı içeren GitHub Models AI Playground arayüzü](../../../translated_images/tr/playground.d2b927122224ff8f.png) +![Model seçimi ve test alanı içeren GitHub Models AI Playground arayüzü](../../../translated_images/tr/playground.d2b927122224ff8f.webp) **Oyun alanını bu kadar kullanışlı yapan şey:** - **Farklı AI modellerini deneyin**: GPT-4o-mini, Claude ve diğerleri (hepsi ücretsiz!) @@ -204,7 +204,7 @@ mindmap Biraz oynadıktan sonra, sadece "Code" sekmesine tıklayın ve ihtiyacınız olan uygulama kodunu almak için programlama dilinizi seçin. -![Farklı programlama dilleri için kod oluşturma seçeneklerini gösteren oyun alanı seçimi](../../../translated_images/tr/playground-choice.1d23ba7d407f4758.png) +![Farklı programlama dilleri için kod oluşturma seçeneklerini gösteren oyun alanı seçimi](../../../translated_images/tr/playground-choice.1d23ba7d407f4758.webp) ## Python Backend Entegrasyonunu Kurma @@ -2355,14 +2355,14 @@ Bu projeyi bir bulut geliştirme ortamında denemek ister misiniz? GitHub Codesp - [Web Dev For Beginners deposuna](https://github.com/microsoft/Web-Dev-For-Beginners) **gidin** - Sağ üst köşedeki "Use this template" (Bu şablonu kullan) düğmesine **tıklayın** (GitHub'da oturum açtığınızdan emin olun) -![Şablondan oluşturma arayüzü, yeşil "Use this template" düğmesini gösteriyor](../../../translated_images/tr/template.67ad477109d29a2b.png) +![Şablondan oluşturma arayüzü, yeşil "Use this template" düğmesini gösteriyor](../../../translated_images/tr/template.67ad477109d29a2b.webp) **Adım 2: Codespaces'i Başlat** - Yeni oluşturduğunuz depoyu **açın** - Yeşil "Code" düğmesine **tıklayın** ve "Codespaces" seçeneğini seçin - Geliştirme ortamınızı başlatmak için "Create codespace on main" seçeneğini **seçin** -![Bulut geliştirme ortamını başlatma seçenekleriyle Codespace oluşturma arayüzü](../../../translated_images/tr/codespace.bcecbdf5d2747d3d.png) +![Bulut geliştirme ortamını başlatma seçenekleriyle Codespace oluşturma arayüzü](../../../translated_images/tr/codespace.bcecbdf5d2747d3d.webp) **Adım 3: Ortam Yapılandırması** Codespace yüklendiğinde, şu özelliklere erişiminiz olacak: diff --git a/translations/tr/README.md b/translations/tr/README.md index d8f0d394c..b27ece6be 100644 --- a/translations/tr/README.md +++ b/translations/tr/README.md @@ -56,13 +56,13 @@ Yeni Generative AI müfredatımızı kaçırmayın! Başlamak için ziyaret edin [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)! -![Background](../../translated_images/tr/background.148a8d43afde5730.png) +![Background](../../translated_images/tr/background.148a8d43afde5730.webp) - Temelden RAG'a kadar her şeyi kapsayan dersler. - GenAI ve yardımcı uygulamamızla tarihi karakterlerle etkileşim kurun. - Eğlenceli ve ilgi çekici anlatım, zamanda yolculuk yapacaksınız! -![character](../../translated_images/tr/character.5c0dd8e067ffd693.png) +![character](../../translated_images/tr/character.5c0dd8e067ffd693.webp) Her ders; tamamlanacak bir ödev, bilgi kontrolü ve şu konulara rehberlik eden bir zorluk içerir: @@ -99,7 +99,7 @@ Bu müfredat hazır bir geliştirme ortamına sahiptir! Başlarken, müfredatı Oluşturduğunuz deponuzda **Code** (Kod) düğmesine tıklayın ve **Open with Codespaces** (Codespaces ile Aç) seçeneğini seçin. Bu, üzerinde çalışmanız için yeni bir Codespace oluşturacaktır. -![Codespace](../../translated_images/tr/createcodespace.0238bbf4d7a8d955.png) +![Codespace](../../translated_images/tr/createcodespace.0238bbf4d7a8d955.webp) #### Müfredatı bilgisayarınızda yerel olarak çalıştırma diff --git a/translations/tr/for-teachers.md b/translations/tr/for-teachers.md index c6ea88a60..ab8ce5f5c 100644 --- a/translations/tr/for-teachers.md +++ b/translations/tr/for-teachers.md @@ -42,10 +42,10 @@ Bu müfredat, yaygın LMS iş akışları için içe aktarılabilir paketler iç - Moodle Cloud, Common Cartridge desteği sınırlıdır. Yukarıdaki Moodle dosyasını tercih edin; bu dosya ayrıca Canvas'a da yüklenebilir. - İçe aktarma işleminden sonra modülleri, teslim tarihlerini ve quiz ayarlarını dönem programınıza uygun şekilde gözden geçirin. -![Moodle](../../translated_images/tr/moodle.94eb93d714a50cb2.png) +![Moodle](../../translated_images/tr/moodle.94eb93d714a50cb2.webp) > Moodle sınıfında müfredat -![Canvas](../../translated_images/tr/canvas.fbd605ff8e5b8aff.png) +![Canvas](../../translated_images/tr/canvas.fbd605ff8e5b8aff.webp) > Canvas'ta müfredat ### Depoyu Doğrudan Kullanma (Classroom Olmadan) diff --git a/translations/tw/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/tw/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 68026636c..cf806530b 100644 --- a/translations/tw/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/tw/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: 今天，我們要探討一些令人驚嘆的工具，讓現代網頁開發不僅可能且讓人上癮。我說的正是Netflix、Spotify以及你最愛的獨立應用工作室每天使用的編輯器、瀏覽器和工作流程。這裡最酷的部分是：大多數這些專業級、業界標準的工具完全免費！ -![Intro Programming](../../../../translated_images/tw/webdev101-programming.d6e3f98e61ac4bff.png) +![Intro Programming](../../../../translated_images/tw/webdev101-programming.d6e3f98e61ac4bff.webp) > 筆記圖由 [Tomomi Imura](https://twitter.com/girlie_mac) 製作 ```mermaid diff --git a/translations/tw/1-getting-started-lessons/2-github-basics/README.md b/translations/tw/1-getting-started-lessons/2-github-basics/README.md index a5c057713..08fe8ce4b 100644 --- a/translations/tw/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/tw/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: 我們將一起逐步踏上這趟旅程。不要急，不要緊張－只有你我，還有一些即將成為你新好朋友的超酷工具！ -![Intro to GitHub](../../../../translated_images/tw/webdev101-github.8846d7971abef6f9.png) +![Intro to GitHub](../../../../translated_images/tw/webdev101-github.8846d7971abef6f9.webp) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -605,7 +605,7 @@ flowchart TD ✅ 找尋「適合新手」的優良程式碼庫的好方法是 [透過 'good-first-issue' 標籤搜尋](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)。 -![將程式庫複製到本機](../../../../translated_images/tw/clone_repo.5085c48d666ead57.png) +![將程式庫複製到本機](../../../../translated_images/tw/clone_repo.5085c48d666ead57.webp) 複製程式碼有多種方式。常見的一種是使用 HTTPS、SSH 或 GitHub CLI（命令列介面）來「克隆」整個程式庫內容。 diff --git a/translations/tw/1-getting-started-lessons/3-accessibility/README.md b/translations/tw/1-getting-started-lessons/3-accessibility/README.md index 7d35891f3..f8b53cc26 100644 --- a/translations/tw/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/tw/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # 建立無障礙網頁 -![關於無障礙的一切](../../../../translated_images/tw/webdev101-a11y.8ef3025c858d897a.png) +![關於無障礙的一切](../../../../translated_images/tw/webdev101-a11y.8ef3025c858d897a.webp) > 手繪筆記由 [Tomomi Imura](https://twitter.com/girlie_mac) 製作 ```mermaid diff --git a/translations/tw/2-js-basics/1-data-types/README.md b/translations/tw/2-js-basics/1-data-types/README.md index 60622a3c6..41dd63d0e 100644 --- a/translations/tw/2-js-basics/1-data-types/README.md +++ b/translations/tw/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript 基礎：資料型別 -![JavaScript 基礎 - 資料型別](../../../../translated_images/tw/webdev101-js-datatypes.4cc470179730702c.png) +![JavaScript 基礎 - 資料型別](../../../../translated_images/tw/webdev101-js-datatypes.4cc470179730702c.webp) > 手繪筆記作者：[Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/tw/2-js-basics/2-functions-methods/README.md b/translations/tw/2-js-basics/2-functions-methods/README.md index 02db88da4..81cd17a80 100644 --- a/translations/tw/2-js-basics/2-functions-methods/README.md +++ b/translations/tw/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript 基礎：方法與函式 -![JavaScript Basics - Functions](../../../../translated_images/tw/webdev101-js-functions.be049c4726e94f8b.png) +![JavaScript Basics - Functions](../../../../translated_images/tw/webdev101-js-functions.be049c4726e94f8b.webp) > 手繪筆記作者：[Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/tw/2-js-basics/3-making-decisions/README.md b/translations/tw/2-js-basics/3-making-decisions/README.md index 52d6c33f1..cfdd57aa1 100644 --- a/translations/tw/2-js-basics/3-making-decisions/README.md +++ b/translations/tw/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript 基礎：做出決策 -![JavaScript 基礎 - 做出決策](../../../../translated_images/tw/webdev101-js-decisions.69e1b20f272dd1f0.png) +![JavaScript 基礎 - 做出決策](../../../../translated_images/tw/webdev101-js-decisions.69e1b20f272dd1f0.webp) > 筆記圖示由 [Tomomi Imura](https://twitter.com/girlie_mac) 製作 diff --git a/translations/tw/2-js-basics/4-arrays-loops/README.md b/translations/tw/2-js-basics/4-arrays-loops/README.md index 573967d7b..d42f80536 100644 --- a/translations/tw/2-js-basics/4-arrays-loops/README.md +++ b/translations/tw/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript 基礎：陣列與迴圈 -![JavaScript Basics - Arrays](../../../../translated_images/tw/webdev101-js-arrays.439d7528b8a29455.png) +![JavaScript Basics - Arrays](../../../../translated_images/tw/webdev101-js-arrays.439d7528b8a29455.webp) > Sketchnote 由 [Tomomi Imura](https://twitter.com/girlie_mac) 製作 ```mermaid diff --git a/translations/tw/3-terrarium/1-intro-to-html/README.md b/translations/tw/3-terrarium/1-intro-to-html/README.md index 8279dd67f..6ce3e5ecf 100644 --- a/translations/tw/3-terrarium/1-intro-to-html/README.md +++ b/translations/tw/3-terrarium/1-intro-to-html/README.md @@ -25,7 +25,7 @@ journey 強化無障礙功能: 5: Student 建造生態瓶: 5: Student ``` -![HTML 入門](../../../../translated_images/tw/webdev101-html.4389c2067af68e98.png) +![HTML 入門](../../../../translated_images/tw/webdev101-html.4389c2067af68e98.webp) > 速寫筆記由 [Tomomi Imura](https://twitter.com/girlie_mac) 製作 HTML，也就是超文字標記語言，是你曾經造訪過的每個網站的基礎。想像 HTML 是賦予網頁結構的骨架——它定義了內容放置的位置、組織方式，以及每個部分的意義。CSS 稍後會用色彩和版面來「裝扮」你的 HTML，JavaScript 會帶來互動效果，但 HTML 提供了讓一切成為可能的基本結構。 @@ -86,7 +86,7 @@ mindmap 4. 在檔案總管窗格點擊「新增檔案」圖示 5. 檔名命名為 `index.html` -![VS Code 檔案總管示範建立新檔案](../../../../translated_images/tw/vs-code-index.e2986cf919471eb9.png) +![VS Code 檔案總管示範建立新檔案](../../../../translated_images/tw/vs-code-index.e2986cf919471eb9.webp) **選項二：使用終端機指令** ```bash diff --git a/translations/tw/3-terrarium/2-intro-to-css/README.md b/translations/tw/3-terrarium/2-intro-to-css/README.md index 2a970fb76..1046155f3 100644 --- a/translations/tw/3-terrarium/2-intro-to-css/README.md +++ b/translations/tw/3-terrarium/2-intro-to-css/README.md @@ -29,7 +29,7 @@ journey 響應式設計: 5: Student 玻璃反射: 5: Student ``` -![Introduction to CSS](../../../../translated_images/tw/webdev101-css.3f7af5991bf53a20.png) +![Introduction to CSS](../../../../translated_images/tw/webdev101-css.3f7af5991bf53a20.webp) > 筆記作者：[Tomomi Imura](https://twitter.com/girlie_mac) 還記得你的 HTML 陸地生態箱看起來相當簡單嗎？CSS 正是我們將這個樸素結構轉變成視覺吸引之物的關鍵所在。 @@ -202,7 +202,7 @@ body { 打開瀏覽器開發者工具（F12），切換到元素檢視，查看你的 `

` 元素。你會看到它繼承了 body 的字型： -![inherited font](../../../../translated_images/tw/1.cc07a5cbe114ad1d.png) +![inherited font](../../../../translated_images/tw/1.cc07a5cbe114ad1d.webp) ✅ **實驗時間**：試著在 `` 設定其他可繼承屬性，如 `color`、`line-height`、`text-align`。你的標題和其他元素會有什麼變化？ @@ -594,7 +594,7 @@ flowchart LR 你將製作細膩高光，模擬光線如何在玻璃表面反射。此作法類似文藝復興畫家揚·范艾克運用光與反射使玻璃畫作呈現立體感。目標如下： -![finished terrarium](../../../../translated_images/tw/terrarium-final.2f07047ffc597d0a.png) +![finished terrarium](../../../../translated_images/tw/terrarium-final.2f07047ffc597d0a.webp) **你的挑戰：** - **製作** 細膩的白色或淺色橢圓形反光 diff --git a/translations/tw/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/tw/3-terrarium/3-intro-to-DOM-and-closures/README.md index 810f47a15..baa09e5a0 100644 --- a/translations/tw/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/tw/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -25,7 +25,7 @@ journey 測試功能: 5: Student 完成陸地生態箱: 5: Student ``` -![DOM 和閉包](../../../../translated_images/tw/webdev101-js.10280393044d7eaa.png) +![DOM 和閉包](../../../../translated_images/tw/webdev101-js.10280393044d7eaa.webp) > 筆記作者 [Tomomi Imura](https://twitter.com/girlie_mac) 歡迎來到網頁開發中最有趣的部分 —— 讓網頁變得互動！文件物件模型（DOM）就像 HTML 與 JavaScript 之間的橋樑，今天我們將利用它讓你的玻璃花房活起來。當 Tim Berners-Lee 創造第一個瀏覽器時，他設想了一個文件可以是動態且互動的網頁 —— DOM 讓這個願景成真。 @@ -102,7 +102,7 @@ flowchart TD style P fill:#ffebee style Q fill:#ffebee ``` -![DOM 樹狀圖表示](../../../../translated_images/tw/dom-tree.7daf0e763cbbba92.png) +![DOM 樹狀圖表示](../../../../translated_images/tw/dom-tree.7daf0e763cbbba92.webp) > DOM 與參照它的 HTML 標記的表示圖。取自 [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -146,7 +146,7 @@ flowchart LR ``` > 💡 **認識閉包**：閉包是 JavaScript 重要議題，許多開發者花好幾年才完全理解其理論面。今天我們重點在實際應用——隨著互動功能開發，閉包會自然出現。理解會隨觀察實際解決問題過程逐漸建立。 -![DOM 樹狀圖表示](../../../../translated_images/tw/dom-tree.7daf0e763cbbba92.png) +![DOM 樹狀圖表示](../../../../translated_images/tw/dom-tree.7daf0e763cbbba92.webp) > DOM 與參照它的 HTML 標記的表示圖。取自 [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -591,7 +591,7 @@ function stopElementDrag() { - **跨裝置支援**：同時適用桌面與行動裝置 - **效能意識**：避免記憶體洩漏和重複計算 -![finished terrarium](../../../../translated_images/tw/terrarium-final.0920f16e87c13a84.png) +![finished terrarium](../../../../translated_images/tw/terrarium-final.0920f16e87c13a84.webp) --- diff --git a/translations/tw/5-browser-extension/1-about-browsers/README.md b/translations/tw/5-browser-extension/1-about-browsers/README.md index 321fb0a97..2b2601070 100644 --- a/translations/tw/5-browser-extension/1-about-browsers/README.md +++ b/translations/tw/5-browser-extension/1-about-browsers/README.md @@ -25,7 +25,7 @@ journey 偵錯問題: 4: Student 打磨使用體驗: 5: Student ``` -![瀏覽器速寫筆記](../../../../translated_images/tw/browser.60317c9be8b7f84a.jpg) +![瀏覽器速寫筆記](../../../../translated_images/tw/browser.60317c9be8b7f84a.webp) > 速寫筆記由 [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) 製作 ## 課前測驗 @@ -77,7 +77,7 @@ mindmap ✅ **小歷史**：第一個瀏覽器叫做「WorldWideWeb」，由 Sir Timothy Berners-Lee 於 1990 年創建。 -![早期瀏覽器](../../../../translated_images/tw/earlybrowsers.d984b711cdf3a42d.jpg) +![早期瀏覽器](../../../../translated_images/tw/earlybrowsers.d984b711cdf3a42d.webp) > 一些早期瀏覽器，圖片來源 [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### 瀏覽器如何處理網頁內容 @@ -194,7 +194,7 @@ quadrantChart 了解擴充功能安裝流程，能幫助您預期使用者安裝時的體驗。安裝流程在現代瀏覽器中有標準化，介面設計上略有差異。 -![Edge瀏覽器截圖，顯示打開的 edge://extensions 頁面和設定選單](../../../../translated_images/tw/install-on-edge.d68781acaf0b3d3d.png) +![Edge瀏覽器截圖，顯示打開的 edge://extensions 頁面和設定選單](../../../../translated_images/tw/install-on-edge.d68781acaf0b3d3d.webp) > **重要提示**：測試自己開發的擴充功能時，請務必開啟開發者模式，並允許來自其他商店的擴充功能。 @@ -308,10 +308,10 @@ project-root/ ### 擴充功能畫面總覽 **設定畫面** - 初次使用者配置： -![完成的擴充功能畫面截圖，顯示包含區域名稱和API金鑰輸入欄的表單。](../../../../translated_images/tw/1.b6da8c1394b07491.png) +![完成的擴充功能畫面截圖，顯示包含區域名稱和API金鑰輸入欄的表單。](../../../../translated_images/tw/1.b6da8c1394b07491.webp) **結果畫面** - 碳足跡資料展示： -![完成的擴充功能結果畫面截圖，顯示 US-NEISO 區域的碳使用數值及化石燃料占比。](../../../../translated_images/tw/2.1dae52ff08042246.png) +![完成的擴充功能結果畫面截圖，顯示 US-NEISO 區域的碳使用數值及化石燃料占比。](../../../../translated_images/tw/2.1dae52ff08042246.webp) ### 建立設定表單 diff --git a/translations/tw/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/tw/5-browser-extension/2-forms-browsers-local-storage/README.md index e8e1f248c..8a83235d9 100644 --- a/translations/tw/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/tw/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -263,7 +263,7 @@ stateDiagram-v2 Reset --> ClearStorage: 移除儲存資料 ClearStorage --> FirstTime: 返回設定 ``` -![本機儲存面板](../../../../translated_images/tw/localstorage.472f8147b6a3f8d1.png) +![本機儲存面板](../../../../translated_images/tw/localstorage.472f8147b6a3f8d1.webp) > ⚠️ **安全性考量**：在正式應用程式中，將 API 金鑰存放於 LocalStorage 有安全風險，因為 JavaScript 可讀取此資料。學習階段可接受，但實際應用應使用安全的伺服器端儲存機制保存敏感憑證。 diff --git a/translations/tw/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/tw/5-browser-extension/3-background-tasks-and-performance/README.md index 19f572a49..7996812c6 100644 --- a/translations/tw/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/tw/5-browser-extension/3-background-tasks-and-performance/README.md @@ -123,7 +123,7 @@ flowchart LR 試試看這個方法。開啟一個網站（Microsoft.com 效果不錯），按「錄製」。現在重新整理頁面，觀察分析器捕捉的過程。停止錄製後，您會看到瀏覽器如何「腳本執行」、「渲染」及「繪製」的詳細流程。這讓我想起火箭發射任務控制中心監控所有系統的即時數據──您可以確切知道何時發生了什麼。 -![Edge profiler](../../../../translated_images/tw/profiler.5a4a62479c5df01c.png) +![Edge profiler](../../../../translated_images/tw/profiler.5a4a62479c5df01c.webp) ✅ [Microsoft 文件](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon)提供了更多深入細節，想深入了解請參考 @@ -133,11 +133,11 @@ flowchart LR 挑選部分分析時間軸，查看摘要面板，就能獲得您的頁面效能快照： -![Edge profiler snapshot](../../../../translated_images/tw/snapshot.97750180ebcad737.png) +![Edge profiler snapshot](../../../../translated_images/tw/snapshot.97750180ebcad737.webp) 檢查事件記錄面板，看看是否有事件耗時超過 15 毫秒： -![Edge event log](../../../../translated_images/tw/log.804026979f3707e0.png) +![Edge event log](../../../../translated_images/tw/log.804026979f3707e0.webp) ✅ 熟悉您的分析器！打開本網站的開發者工具，檢查是否有瓶頸。哪個資源載入最慢？最快的是哪個？ diff --git a/translations/tw/6-space-game/2-drawing-to-canvas/README.md b/translations/tw/6-space-game/2-drawing-to-canvas/README.md index d008bfe76..f047c9408 100644 --- a/translations/tw/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/tw/6-space-game/2-drawing-to-canvas/README.md @@ -105,7 +105,7 @@ quadrantChart Power-up: [0.7, 0.6] UI Elements: [0.9, 0.1] ``` -![the canvas's grid](../../../../translated_images/tw/canvas_grid.5f209da785ded492.png) +![the canvas's grid](../../../../translated_images/tw/canvas_grid.5f209da785ded492.webp) > 圖片來源：[MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) 在 canvas 元素上繪圖，你需要遵循所有 canvas 圖形基礎的三個步驟。多練習幾次後，這將成為你的第二天性： @@ -323,11 +323,11 @@ flowchart TD - 英雄飛船 - ![Hero ship](../../../../translated_images/tw/player.dd24c1afa8c71e9b.png) + ![Hero ship](../../../../translated_images/tw/player.dd24c1afa8c71e9b.webp) - 5×5 的怪物陣列 - ![Monster ship](../../../../translated_images/tw/enemyShip.5df2a822c16650c2.png) + ![Monster ship](../../../../translated_images/tw/enemyShip.5df2a822c16650c2.webp) ### 推薦的開發步驟 @@ -463,7 +463,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { 完成的結果應如下圖所示： -![黑色螢幕，有一名英雄與 5*5 怪物](../../../../translated_images/tw/partI-solution.36c53b48c9ffae2a.png) +![黑色螢幕，有一名英雄與 5*5 怪物](../../../../translated_images/tw/partI-solution.36c53b48c9ffae2a.webp) ## 解答 diff --git a/translations/tw/6-space-game/5-keeping-score/README.md b/translations/tw/6-space-game/5-keeping-score/README.md index c575cad8e..eeb9c4909 100644 --- a/translations/tw/6-space-game/5-keeping-score/README.md +++ b/translations/tw/6-space-game/5-keeping-score/README.md @@ -155,7 +155,7 @@ sequenceDiagram end ``` - **計分系統**：每擊落一艘敵機獲得 100 分（整數分數讓玩家更容易心算）。分數顯示在左下角。 -- **生命計數器**：你的英雄從三條命開始——這是早期街機遊戲為了挑戰與可玩性平衡而建立的標準。每碰撞一次敵人就損失一條命。我們會用飛船圖示在右下角顯示剩餘生命 ![life image](../../../../translated_images/tw/life.6fb9f50d53ee0413.png)。 +- **生命計數器**：你的英雄從三條命開始——這是早期街機遊戲為了挑戰與可玩性平衡而建立的標準。每碰撞一次敵人就損失一條命。我們會用飛船圖示在右下角顯示剩餘生命 ![life image](../../../../translated_images/tw/life.6fb9f50d53ee0413.webp)。 ## 開始動手做吧！ diff --git a/translations/tw/7-bank-project/1-template-route/README.md b/translations/tw/7-bank-project/1-template-route/README.md index 113e26c6c..d114f3561 100644 --- a/translations/tw/7-bank-project/1-template-route/README.md +++ b/translations/tw/7-bank-project/1-template-route/README.md @@ -644,7 +644,7 @@ sequenceDiagram 使用 `history.pushState` 會在瀏覽器導覽歷史新增紀錄。你可以長按瀏覽器的 *後退鍵* 查看，應該會顯示類似以下內容： -![Screenshot of navigation history](../../../../translated_images/tw/history.7fdabbafa521e064.png) +![Screenshot of navigation history](../../../../translated_images/tw/history.7fdabbafa521e064.webp) 若嘗試點擊後退鍵幾次，你會看到 URL 變更且歷史紀錄更新，但畫面模板不變。 diff --git a/translations/tw/7-bank-project/2-forms/README.md b/translations/tw/7-bank-project/2-forms/README.md index 7cdaf334e..332b46cf7 100644 --- a/translations/tw/7-bank-project/2-forms/README.md +++ b/translations/tw/7-bank-project/2-forms/README.md @@ -292,7 +292,7 @@ graph TD 2. 觀察瀏覽器網址列變化 3. 注意頁面重載且資料顯示在 URL 中 -![點擊註冊按鈕後瀏覽器 URL 變化截圖](../../../../translated_images/tw/click-register.e89a30bf0d4bc9ca.png) +![點擊註冊按鈕後瀏覽器 URL 變化截圖](../../../../translated_images/tw/click-register.e89a30bf0d4bc9ca.webp) ### HTTP 方法比較 @@ -346,7 +346,7 @@ graph TD 2. **點擊**「建立帳號」按鈕 3. **觀察**伺服器回應在瀏覽器中 -![瀏覽器視窗位於 localhost:5000/api/accounts，顯示帶有使用者資料的 JSON 字串](../../../../translated_images/tw/form-post.61de4ca1b964d91a.png) +![瀏覽器視窗位於 localhost:5000/api/accounts，顯示帶有使用者資料的 JSON 字串](../../../../translated_images/tw/form-post.61de4ca1b964d91a.webp) **你應該看到：** - **瀏覽器導向**至 API 端點網址 @@ -609,7 +609,7 @@ async function register() { 3. **點擊**「建立帳號」 4. **觀察** 控制台訊息與使用者反饋 -![Screenshot showing log message in the browser console](../../../../translated_images/tw/browser-console.efaf0b51aaaf6778.png) +![Screenshot showing log message in the browser console](../../../../translated_images/tw/browser-console.efaf0b51aaaf6778.webp) **你應該會看到：** - **提交按鈕** 顯示載入狀態 @@ -783,7 +783,7 @@ input:focus:invalid { 3. **使用者名稱欄位試輸入特殊字元** 4. **輸入負數餘額** -![Screenshot showing the validation error when trying to submit the form](../../../../translated_images/tw/validation-error.8bd23e98d416c22f.png) +![Screenshot showing the validation error when trying to submit the form](../../../../translated_images/tw/validation-error.8bd23e98d416c22f.webp) **你會看到：** - **瀏覽器顯示** 原生驗證訊息 @@ -943,7 +943,7 @@ timeline 下面是經過一些樣式設計後，登入頁面的範例： -![Screenshot of the login page after adding CSS styles](../../../../translated_images/tw/result.96ef01f607bf856a.png) +![Screenshot of the login page after adding CSS styles](../../../../translated_images/tw/result.96ef01f607bf856a.webp) ## 課後小考 diff --git a/translations/tw/7-bank-project/3-data/README.md b/translations/tw/7-bank-project/3-data/README.md index 3945f29b6..0767c1ff4 100644 --- a/translations/tw/7-bank-project/3-data/README.md +++ b/translations/tw/7-bank-project/3-data/README.md @@ -156,7 +156,7 @@ sequenceDiagram Server->>Browser: 回傳完整的 HTML 頁面 Browser->>User: 顯示新頁面（閃爍/重新載入） ``` -![多頁應用的更新流程](../../../../translated_images/tw/mpa.7f7375a1a2d4aa77.png) +![多頁應用的更新流程](../../../../translated_images/tw/mpa.7f7375a1a2d4aa77.webp) **這種方式的笨重之處：** - 每次點擊都要重新載入整頁 @@ -182,7 +182,7 @@ sequenceDiagram JavaScript->>Browser: 更新特定的頁面元素 Browser->>User: 顯示更新內容（無重新載入） ``` -![單頁應用的更新流程](../../../../translated_images/tw/spa.268ec73b41f992c2.png) +![單頁應用的更新流程](../../../../translated_images/tw/spa.268ec73b41f992c2.webp) **SPA 讓使用體驗更好的原因：** - 只更新真的改變的部分（很聰明！） @@ -516,7 +516,7 @@ if (data.error) { 現在測試無效帳號，就會看到頁面上的錯誤訊息囉！ -![登入時顯示錯誤訊息的截圖](../../../../translated_images/tw/login-error.416fe019b36a6327.png) +![登入時顯示錯誤訊息的截圖](../../../../translated_images/tw/login-error.416fe019b36a6327.webp) #### 第四步：做出無障礙友善設計 @@ -950,7 +950,7 @@ timeline 這是經過樣式美化後的儀表板範例： -![Screenshot of an example result of the dashboard after styling](../../../../translated_images/tw/screen2.123c82a831a1d14a.png) +![Screenshot of an example result of the dashboard after styling](../../../../translated_images/tw/screen2.123c82a831a1d14a.webp) 不用一定要一模一樣，拿來當靈感並做出自己的風格吧！ diff --git a/translations/tw/7-bank-project/4-state-management/README.md b/translations/tw/7-bank-project/4-state-management/README.md index 323f3e40f..dfbebcc27 100644 --- a/translations/tw/7-bank-project/4-state-management/README.md +++ b/translations/tw/7-bank-project/4-state-management/README.md @@ -187,7 +187,7 @@ mindmap 不用再東奔西跑，我們要建立一個**集中式狀態管理**系統。想像它是一位非常有組織的人，負責所有重要事項： -![Schema showing the data flows between the HTML, user actions and state](../../../../translated_images/tw/data-flow.fa2354e0908fecc8.png) +![Schema showing the data flows between the HTML, user actions and state](../../../../translated_images/tw/data-flow.fa2354e0908fecc8.webp) ```mermaid flowchart TD @@ -798,7 +798,7 @@ timeline 完成作業後範例呈現： -![截圖顯示範例「新增交易」對話框](../../../../translated_images/tw/dialog.93bba104afeb79f1.png) +![截圖顯示範例「新增交易」對話框](../../../../translated_images/tw/dialog.93bba104afeb79f1.webp) --- diff --git a/translations/tw/7-bank-project/4-state-management/assignment.md b/translations/tw/7-bank-project/4-state-management/assignment.md index efd7c2b71..ccdc77ef4 100644 --- a/translations/tw/7-bank-project/4-state-management/assignment.md +++ b/translations/tw/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA: **預期成果：** 完成此作業後，你的銀行應用程式應該擁有一個外觀專業且功能完整的「新增交易」功能： -![顯示範例「新增交易」對話框截圖](../../../../translated_images/tw/dialog.93bba104afeb79f1.png) +![顯示範例「新增交易」對話框截圖](../../../../translated_images/tw/dialog.93bba104afeb79f1.webp) ## 測試你的實作 diff --git a/translations/tw/8-code-editor/1-using-a-code-editor/README.md b/translations/tw/8-code-editor/1-using-a-code-editor/README.md index 03ccec6be..4082d188e 100644 --- a/translations/tw/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/tw/8-code-editor/1-using-a-code-editor/README.md @@ -182,7 +182,7 @@ VSCode.dev 將這些能力帶到瀏覽器中： 完成載入後，你將看到一個潔淨、專注於程式碼的工作環境！ -![Default VSCode.dev interface](../../../../translated_images/tw/default-vscode-dev.5d06881d65c1b323.png) +![Default VSCode.dev interface](../../../../translated_images/tw/default-vscode-dev.5d06881d65c1b323.webp) **社區導覽：** - **活動列**（左側那條）：主導航，有檔案總管 📁、搜尋 🔍、版本控制 🌿、擴充功能 🧩 和設定 ⚙️ @@ -229,7 +229,7 @@ flowchart TB 1. 若還沒開啟，先前往 [vscode.dev](https://vscode.dev) 2. 在歡迎畫面按「Open Remote Repository」（開啟遠端倉庫）按鈕 - ![Open remote repository](../../../../translated_images/tw/open-remote-repository.bd9c2598b8949e7f.png) + ![Open remote repository](../../../../translated_images/tw/open-remote-repository.bd9c2598b8949e7f.webp) 3. 貼上任意 GitHub 倉庫網址（例如：`https://github.com/microsoft/Web-Dev-For-Beginners`） 4. 按 Enter，驚喜等著你！ @@ -238,7 +238,7 @@ flowchart TB 想像自己是程式大師？用 Ctrl+Shift+P（Mac 版是 Cmd+Shift+P）開啟命令選單： -![Command Palette](../../../../translated_images/tw/palette-menu.4946174e07f42622.png) +![Command Palette](../../../../translated_images/tw/palette-menu.4946174e07f42622.webp) **命令選單就像萬能搜索引擎：** - 輸入「open remote」可快速找到打開遠端倉庫功能 @@ -300,7 +300,7 @@ flowchart TB 3. 輸入檔名並包含適當副檔名（如 `style.css`、`script.js`、`index.html`） 4. 按 Enter 建立檔案 -![Creating a new file](../../../../translated_images/tw/create-new-file.2814e609c2af9aeb.png) +![Creating a new file](../../../../translated_images/tw/create-new-file.2814e609c2af9aeb.webp) **命名規範：** - 使用描述性名稱便於辨識檔案用途 @@ -318,7 +318,7 @@ flowchart TB 2. 開始輸入，觀察 VSCode.dev 用顏色、建議與錯誤偵測協助你 3. 使用 Ctrl+S（Windows/Linux）或 Cmd+S（Mac）儲存 — 編輯器也會自動儲存！ -![Editing files in VSCode.dev](../../../../translated_images/tw/edit-a-file.52c0ee665ef19f08.png) +![Editing files in VSCode.dev](../../../../translated_images/tw/edit-a-file.52c0ee665ef19f08.webp) **編碼中的貼心功能：** - 程式碼自動色彩標記，閱讀清晰 @@ -339,7 +339,7 @@ flowchart TB 2. 有修改的檔案會出現在「變更 (Changes)」中 3. 顏色代表變更種類：新增為綠色，刪除為紅色 -![Viewing changes in Source Control](../../../../translated_images/tw/working-tree.c58eec08e6335c79.png) +![Viewing changes in Source Control](../../../../translated_images/tw/working-tree.c58eec08e6335c79.webp) **保存進度（提交流程）：** @@ -431,7 +431,7 @@ mindmap 2. 瀏覽或搜尋特定功能 3. 點擊任何看起來有趣的項目，查看更多資訊 -![Extension marketplace interface](../../../../translated_images/tw/extensions.eca0e0c7f59a10b5.png) +![Extension marketplace interface](../../../../translated_images/tw/extensions.eca0e0c7f59a10b5.webp) **你將看到的內容：** @@ -484,7 +484,7 @@ mindmap 3. 從下拉選單選擇「擴充功能設定」 4. 調整設定直到符合你的工作流程需求 -![Customizing extension settings](../../../../translated_images/tw/extension-settings.21c752ae4f4cdb78.png) +![Customizing extension settings](../../../../translated_images/tw/extension-settings.21c752ae4f4cdb78.webp) **常見你可能想調整的項目：** - 程式碼格式化方式（tab 或空格、行寬等等） diff --git a/translations/tw/8-code-editor/1-using-a-code-editor/assignment.md b/translations/tw/8-code-editor/1-using-a-code-editor/assignment.md index 32ec79408..0d14676fd 100644 --- a/translations/tw/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/tw/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ CO_OP_TRANSLATOR_METADATA: 4. **填寫** commit 訊息：「Add initial HTML structure」 5. **點擊**「Commit new file」儲存變更 -![在 GitHub 建立初始檔案](../../../../translated_images/tw/new-file-github.com.c886796d800e8056.png) +![在 GitHub 建立初始檔案](../../../../translated_images/tw/new-file-github.com.c886796d800e8056.webp) **這個初始設定完成了：** - **建立** 正確的 HTML5 文件結構並使用語義元素 @@ -104,7 +104,7 @@ CO_OP_TRANSLATOR_METADATA: ✅ **成功指標**：你將在 Explorer 側欄看到專案檔案，並在主編輯區可以編輯 `index.html`。 -![VSCode.dev 中載入專案](../../../../translated_images/tw/project-on-vscode.dev.e79815a9a95ee7fe.png) +![VSCode.dev 中載入專案](../../../../translated_images/tw/project-on-vscode.dev.e79815a9a95ee7fe.webp) **介面會顯示：** - **Explorer 側欄**：**呈現** 程式庫檔案與資料夾結構 @@ -448,7 +448,7 @@ li:before { **安裝後立即呈現成果：** CodeSwing 安裝完成後，你會在編輯器看到履歷網站的即時預覽，能直接觀看網站實際效果。 -![CodeSwing 擴充即時預覽](../../../../translated_images/tw/after-codeswing-extension-pb.0ebddddcf73b5509.png) +![CodeSwing 擴充即時預覽](../../../../translated_images/tw/after-codeswing-extension-pb.0ebddddcf73b5509.webp) **加強版介面說明：** - **分割視窗**：同時呈現程式碼與實時預覽 diff --git a/translations/tw/9-chat-project/README.md b/translations/tw/9-chat-project/README.md index 50419ef78..6e1f4fec9 100644 --- a/translations/tw/9-chat-project/README.md +++ b/translations/tw/9-chat-project/README.md @@ -60,7 +60,7 @@ print(response.choices[0].message.content) 下面是完成的專案示意圖： -![聊天應用介面顯示使用者與 AI 助理的對話](../../../translated_images/tw/screenshot.0a1ee0d123df681b.png) +![聊天應用介面顯示使用者與 AI 助理的對話](../../../translated_images/tw/screenshot.0a1ee0d123df681b.webp) ## 🗺️ 你的 AI 應用開發學習旅程 @@ -189,7 +189,7 @@ mindmap ``` **核心原則**：AI 應用開發結合傳統網頁開發技巧與 AI 服務整合，打造對使用者來說自然且反應靈敏的智慧應用。 -![GitHub Models AI Playground 介面，包含模型選擇及測試區](../../../translated_images/tw/playground.d2b927122224ff8f.png) +![GitHub Models AI Playground 介面，包含模型選擇及測試區](../../../translated_images/tw/playground.d2b927122224ff8f.webp) **Playground 這麼好用的原因：** - **試用** 不同 AI 模型如 GPT-4o-mini、Claude 等（皆免費！） @@ -199,7 +199,7 @@ mindmap 玩過一輪後，只要點「Code」頁籤，選擇程式語言，就能取得所需實作程式碼。 -![Playground 選擇顯示不同程式語言的程式碼產生選項](../../../translated_images/tw/playground-choice.1d23ba7d407f4758.png) +![Playground 選擇顯示不同程式語言的程式碼產生選項](../../../translated_images/tw/playground-choice.1d23ba7d407f4758.webp) ## 設定 Python 後端整合 @@ -2356,14 +2356,14 @@ mindmap - **前往** [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) - **點擊** 右上角的「Use this template」（確保已登入 GitHub） -![Create from template interface showing the green "Use this template" button](../../../translated_images/tw/template.67ad477109d29a2b.png) +![Create from template interface showing the green "Use this template" button](../../../translated_images/tw/template.67ad477109d29a2b.webp) **步驟 2：啟動 Codespaces** - **打開** 新建立的版本庫 - **點擊** 綠色的「Code」按鈕並選擇「Codespaces」 - **選擇** 「Create codespace on main」以啟動開發環境 -![Create codespace interface with options for launching cloud development environment](../../../translated_images/tw/codespace.bcecbdf5d2747d3d.png) +![Create codespace interface with options for launching cloud development environment](../../../translated_images/tw/codespace.bcecbdf5d2747d3d.webp) **步驟 3：環境設定** Codespace 讀取後，你將擁有： diff --git a/translations/tw/README.md b/translations/tw/README.md index 6a34e1847..34c0a8c01 100644 --- a/translations/tw/README.md +++ b/translations/tw/README.md @@ -72,13 +72,13 @@ CO_OP_TRANSLATOR_METADATA: 造訪 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 開始學習！ -![Background](../../translated_images/tw/background.148a8d43afde5730.png) +![Background](../../translated_images/tw/background.148a8d43afde5730.webp) - 授課內容涵蓋從基礎至 RAG。 - 使用生成式 AI 與我們的伴隨應用程式與歷史人物互動。 - 有趣且引人入勝的敘事，你會穿越時光！ -![character](../../translated_images/tw/character.5c0dd8e067ffd693.png) +![character](../../translated_images/tw/character.5c0dd8e067ffd693.webp) 每堂課皆含作業、知識測驗及挑戰，引導你學習： - 提示語和提示工程 @@ -114,7 +114,7 @@ CO_OP_TRANSLATOR_METADATA: 在你建立的此儲存庫副本中，點擊 **Code** 按鈕，並選擇 **Open with Codespaces**，系統將為你建立一個新的 Codespace 讓你作業。 -![Codespace](../../translated_images/tw/createcodespace.0238bbf4d7a8d955.png) +![Codespace](../../translated_images/tw/createcodespace.0238bbf4d7a8d955.webp) #### 在本機執行課程 diff --git a/translations/tw/for-teachers.md b/translations/tw/for-teachers.md index 7e46e4e4a..bc3b5114d 100644 --- a/translations/tw/for-teachers.md +++ b/translations/tw/for-teachers.md @@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA: - Moodle Cloud 對 Common Cartridge 的支持有限。建議使用上述 Moodle 文件，該文件也可上傳到 Canvas。 - 導入後，請檢查模組、截止日期和測驗設置，以匹配您的學期安排。 -![Moodle](../../translated_images/tw/moodle.94eb93d714a50cb2.png) +![Moodle](../../translated_images/tw/moodle.94eb93d714a50cb2.webp) > Moodle 課堂中的課程內容 -![Canvas](../../translated_images/tw/canvas.fbd605ff8e5b8aff.png) +![Canvas](../../translated_images/tw/canvas.fbd605ff8e5b8aff.webp) > Canvas 課堂中的課程內容 ### 直接使用倉庫（不使用 Classroom） diff --git a/translations/uk/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/uk/1-getting-started-lessons/1-intro-to-programming-languages/README.md index e81c6c654..2b60e1295 100644 --- a/translations/uk/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/uk/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: Сьогодні ми дослідимо неймовірні інструменти, які роблять сучасну веб-розробку не просто можливою, а дійсно захоплюючою. Я говорю про ті самі редактори, браузери та робочі процеси, які розробники Netflix, Spotify та твоєї улюбленої студії інді-додатків використовують щодня. І ось частина, яка змусить тебе танцювати від радості: більшість із цих професійних, стандартних для галузі інструментів абсолютно безкоштовні! -![Intro Programming](../../../../translated_images/uk/webdev101-programming.d6e3f98e61ac4bff.png) +![Intro Programming](../../../../translated_images/uk/webdev101-programming.d6e3f98e61ac4bff.webp) > Скетчнот від [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/uk/1-getting-started-lessons/2-github-basics/README.md b/translations/uk/1-getting-started-lessons/2-github-basics/README.md index 54b6e0f1a..72686cc24 100644 --- a/translations/uk/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/uk/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: Ми пройдемо цей шлях разом, крок за кроком. Без поспіху, без тиску – лише ти, я і кілька дійсно крутих інструментів, які стануть твоїми новими найкращими друзями! -![Вступ до GitHub](../../../../translated_images/uk/webdev101-github.8846d7971abef6f9.png) +![Вступ до GitHub](../../../../translated_images/uk/webdev101-github.8846d7971abef6f9.webp) > Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -583,7 +583,7 @@ flowchart TD ✅ Хороший спосіб знайти репозиторії, дружні до новачків, – це [шукати за тегом 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Скопіювати репозиторій локально](../../../../translated_images/uk/clone_repo.5085c48d666ead57.png) +![Скопіювати репозиторій локально](../../../../translated_images/uk/clone_repo.5085c48d666ead57.webp) Існує кілька способів копіювання коду. Один із них – "клонувати" вміст репозиторію, використовуючи HTTPS, SSH або GitHub CLI (Command Line Interface). diff --git a/translations/uk/1-getting-started-lessons/3-accessibility/README.md b/translations/uk/1-getting-started-lessons/3-accessibility/README.md index 00cd0330f..42ff0e4ed 100644 --- a/translations/uk/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/uk/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Створення доступних веб-сторінок -![Все про доступність](../../../../translated_images/uk/webdev101-a11y.8ef3025c858d897a.png) +![Все про доступність](../../../../translated_images/uk/webdev101-a11y.8ef3025c858d897a.webp) > Скетчнот від [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/uk/2-js-basics/1-data-types/README.md b/translations/uk/2-js-basics/1-data-types/README.md index 6158d13b5..4ea763e81 100644 --- a/translations/uk/2-js-basics/1-data-types/README.md +++ b/translations/uk/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Основи JavaScript: Типи даних -![Основи JavaScript - Типи даних](../../../../translated_images/uk/webdev101-js-datatypes.4cc470179730702c.png) +![Основи JavaScript - Типи даних](../../../../translated_images/uk/webdev101-js-datatypes.4cc470179730702c.webp) > Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/uk/2-js-basics/2-functions-methods/README.md b/translations/uk/2-js-basics/2-functions-methods/README.md index 6cb871839..13525dbd3 100644 --- a/translations/uk/2-js-basics/2-functions-methods/README.md +++ b/translations/uk/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Основи JavaScript: Методи та функції -![Основи JavaScript - Функції](../../../../translated_images/uk/webdev101-js-functions.be049c4726e94f8b.png) +![Основи JavaScript - Функції](../../../../translated_images/uk/webdev101-js-functions.be049c4726e94f8b.webp) > Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/uk/2-js-basics/3-making-decisions/README.md b/translations/uk/2-js-basics/3-making-decisions/README.md index 5b5fdb54a..f8c3eb1e6 100644 --- a/translations/uk/2-js-basics/3-making-decisions/README.md +++ b/translations/uk/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Основи JavaScript: Прийняття рішень -![Основи JavaScript - Прийняття рішень](../../../../translated_images/uk/webdev101-js-decisions.69e1b20f272dd1f0.png) +![Основи JavaScript - Прийняття рішень](../../../../translated_images/uk/webdev101-js-decisions.69e1b20f272dd1f0.webp) > Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/uk/2-js-basics/4-arrays-loops/README.md b/translations/uk/2-js-basics/4-arrays-loops/README.md index c22885511..346c4390a 100644 --- a/translations/uk/2-js-basics/4-arrays-loops/README.md +++ b/translations/uk/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Основи JavaScript: Масиви та Цикли -![Основи JavaScript - Масиви](../../../../translated_images/uk/webdev101-js-arrays.439d7528b8a29455.png) +![Основи JavaScript - Масиви](../../../../translated_images/uk/webdev101-js-arrays.439d7528b8a29455.webp) > Скетчнот від [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/uk/3-terrarium/1-intro-to-html/README.md b/translations/uk/3-terrarium/1-intro-to-html/README.md index 59c798445..38cdf4885 100644 --- a/translations/uk/3-terrarium/1-intro-to-html/README.md +++ b/translations/uk/3-terrarium/1-intro-to-html/README.md @@ -26,7 +26,7 @@ journey Build terrarium: 5: Student ``` -![Вступ до HTML](../../../../translated_images/uk/webdev101-html.4389c2067af68e98.png) +![Вступ до HTML](../../../../translated_images/uk/webdev101-html.4389c2067af68e98.webp) > Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac) HTML, або HyperText Markup Language, є основою кожного вебсайту, який ви коли-небудь відвідували. Уявіть HTML як скелет, який надає структуру вебсторінкам – він визначає, де розміщується контент, як він організований і що кожен елемент представляє. Хоча CSS пізніше "одягне" ваш HTML кольорами та макетами, а JavaScript оживить його інтерактивністю, HTML забезпечує основну структуру, яка робить усе інше можливим. @@ -88,7 +88,7 @@ mindmap 4. У панелі Explorer натисніть на іконку "New File" 5. Назвіть ваш файл `index.html` -![Explorer VS Code, що показує створення нового файлу](../../../../translated_images/uk/vs-code-index.e2986cf919471eb9.png) +![Explorer VS Code, що показує створення нового файлу](../../../../translated_images/uk/vs-code-index.e2986cf919471eb9.webp) **Варіант 2: Використання команд терміналу** ```bash diff --git a/translations/uk/3-terrarium/2-intro-to-css/README.md b/translations/uk/3-terrarium/2-intro-to-css/README.md index b822ee355..48b7c60eb 100644 --- a/translations/uk/3-terrarium/2-intro-to-css/README.md +++ b/translations/uk/3-terrarium/2-intro-to-css/README.md @@ -30,7 +30,7 @@ journey Glass reflections: 5: Student ``` -![Вступ до CSS](../../../../translated_images/uk/webdev101-css.3f7af5991bf53a20.png) +![Вступ до CSS](../../../../translated_images/uk/webdev101-css.3f7af5991bf53a20.webp) > Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac) Пам'ятаєте, як ваш HTML-тераріум виглядав досить просто? Завдяки CSS ми перетворимо цю просту структуру на щось візуально привабливе. @@ -205,7 +205,7 @@ body { Відкрийте інструменти розробника вашого браузера (F12), перейдіть на вкладку Elements і перевірте ваш елемент `

`. Ви побачите, що він успадковує шрифт від body: -![успадкований шрифт](../../../../translated_images/uk/1.cc07a5cbe114ad1d.png) +![успадкований шрифт](../../../../translated_images/uk/1.cc07a5cbe114ad1d.webp) ✅ **Час експерименту**: Спробуйте встановити інші властивості, які можна успадкувати, для ``, такі як `color`, `line-height` або `text-align`. Що відбувається з вашим заголовком та іншими елементами? @@ -560,7 +560,7 @@ flowchart LR Ви створите тонкі відблиски, які імітують, як світло відбивається від скляних поверхонь. Цей підхід схожий на те, як художники епохи Відродження, такі як Ян ван Ейк, використовували світло і відображення, щоб зробити намальоване скло тривимірним. Ось до чого ви прагнете: -![finished terrarium](../../../../translated_images/uk/terrarium-final.2f07047ffc597d0a.png) +![finished terrarium](../../../../translated_images/uk/terrarium-final.2f07047ffc597d0a.webp) **Ваш виклик:** - **Створіть** тонкі овальні форми білого або світлого кольору для відображень скла diff --git a/translations/uk/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/uk/3-terrarium/3-intro-to-DOM-and-closures/README.md index d8282c2dd..8aa84c201 100644 --- a/translations/uk/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/uk/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -26,7 +26,7 @@ journey Complete terrarium: 5: Student ``` -![DOM і замикання](../../../../translated_images/uk/webdev101-js.10280393044d7eaa.png) +![DOM і замикання](../../../../translated_images/uk/webdev101-js.10280393044d7eaa.webp) > Скетчнот від [Tomomi Imura](https://twitter.com/girlie_mac) Ласкаво просимо до одного з найцікавіших аспектів веб-розробки — створення інтерактивності! Document Object Model (DOM) — це як міст між вашим HTML і JavaScript, і сьогодні ми використаємо його, щоб оживити ваш тераріум. Коли Тім Бернерс-Лі створив перший веб-браузер, він уявляв веб як динамічний і інтерактивний простір — DOM робить це можливим. @@ -105,7 +105,7 @@ flowchart TD style Q fill:#ffebee ``` -![Представлення дерева DOM](../../../../translated_images/uk/dom-tree.7daf0e763cbbba92.png) +![Представлення дерева DOM](../../../../translated_images/uk/dom-tree.7daf0e763cbbba92.webp) > Представлення DOM і HTML-розмітки, яка його описує. Від [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -150,7 +150,7 @@ flowchart LR > 💡 **Розуміння замикань**: Замикання — це важлива тема в JavaScript, і багато розробників використовують їх роками, перш ніж повністю зрозуміти всі теоретичні аспекти. Сьогодні ми зосередимося на практичному застосуванні — ви побачите, як замикання природно виникають під час створення наших інтерактивних функцій. Розуміння розвиватиметься, коли ви побачите, як вони вирішують реальні проблеми. -![Представлення дерева DOM](../../../../translated_images/uk/dom-tree.7daf0e763cbbba92.png) +![Представлення дерева DOM](../../../../translated_images/uk/dom-tree.7daf0e763cbbba92.webp) > Представлення DOM і HTML-розмітки, яка його описує. Від [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -573,7 +573,7 @@ function stopElementDrag() { - **Підтримка різних пристроїв**: Працює на настільних комп'ютерах і мобільних пристроях - **Свідомість продуктивності**: Без витоків пам'яті чи зайвих обчислень -![готовий тераріум](../../../../translated_images/uk/terrarium-final.0920f16e87c13a84.png) +![готовий тераріум](../../../../translated_images/uk/terrarium-final.0920f16e87c13a84.webp) --- diff --git a/translations/uk/3-terrarium/solution/README.md b/translations/uk/3-terrarium/solution/README.md index e41b29bd2..665120cee 100644 --- a/translations/uk/3-terrarium/solution/README.md +++ b/translations/uk/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Невелика вправа з перетягування елементів. За допомогою трохи HTML, JS і CSS ви можете створити веб-інтерфейс, стилізувати його та додати взаємодію. -![мій тераріум](../../../../translated_images/uk/screenshot_gray.0c796099a1f9f25e.png) +![мій тераріум](../../../../translated_images/uk/screenshot_gray.0c796099a1f9f25e.webp) ## Авторство diff --git a/translations/uk/5-browser-extension/1-about-browsers/README.md b/translations/uk/5-browser-extension/1-about-browsers/README.md index 6a712b8f5..d7a6f39e5 100644 --- a/translations/uk/5-browser-extension/1-about-browsers/README.md +++ b/translations/uk/5-browser-extension/1-about-browsers/README.md @@ -26,7 +26,7 @@ journey Polish experience: 5: Student ``` -![Скетчноут браузера](../../../../translated_images/uk/browser.60317c9be8b7f84a.jpg) +![Скетчноут браузера](../../../../translated_images/uk/browser.60317c9be8b7f84a.webp) > Скетчноут від [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## Тест перед лекцією @@ -79,7 +79,7 @@ mindmap ✅ **Трохи історії**: Перший браузер називався 'WorldWideWeb' і був створений сером Тімоті Бернерсом-Лі у 1990 році. -![ранні браузери](../../../../translated_images/uk/earlybrowsers.d984b711cdf3a42d.jpg) +![ранні браузери](../../../../translated_images/uk/earlybrowsers.d984b711cdf3a42d.webp) > Деякі ранні браузери, через [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### Як браузери обробляють веб-контент @@ -198,7 +198,7 @@ quadrantChart Розуміння процесу встановлення розширень допомагає передбачити досвід користувача під час встановлення вашого розширення. Процес встановлення стандартизований у сучасних браузерах, з невеликими варіаціями в дизайні інтерфейсу. -![скріншот браузера Edge, що показує відкриту сторінку edge://extensions і меню налаштувань](../../../../translated_images/uk/install-on-edge.d68781acaf0b3d3d.png) +![скріншот браузера Edge, що показує відкриту сторінку edge://extensions і меню налаштувань](../../../../translated_images/uk/install-on-edge.d68781acaf0b3d3d.webp) > **Важливо**: Переконайтеся, що ви увімкнули режим розробника та дозволили розширення з інших магазинів під час тестування власних розширень. @@ -313,10 +313,10 @@ project-root/ ### Огляд вигляду розширення **Екран налаштувань** - Конфігурація для першого використання: -![скріншот завершеного розширення, відкритого в браузері, що показує форму з полями для введення назви регіону та ключа API.](../../../../translated_images/uk/1.b6da8c1394b07491.png) +![скріншот завершеного розширення, відкритого в браузері, що показує форму з полями для введення назви регіону та ключа API.](../../../../translated_images/uk/1.b6da8c1394b07491.webp) **Екран результатів** - Відображення даних про вуглецевий слід: -![скріншот завершеного розширення, що показує значення використання вуглецю та відсоток викопного палива для регіону US-NEISO.](../../../../translated_images/uk/2.1dae52ff08042246.png) +![скріншот завершеного розширення, що показує значення використання вуглецю та відсоток викопного палива для регіону US-NEISO.](../../../../translated_images/uk/2.1dae52ff08042246.webp) ### Створення форми конфігурації diff --git a/translations/uk/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/uk/5-browser-extension/2-forms-browsers-local-storage/README.md index 8d541dabb..24587c4f7 100644 --- a/translations/uk/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/uk/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -268,7 +268,7 @@ stateDiagram-v2 ClearStorage --> FirstTime: Back to setup ``` -![Панель локального сховища](../../../../translated_images/uk/localstorage.472f8147b6a3f8d1.png) +![Панель локального сховища](../../../../translated_images/uk/localstorage.472f8147b6a3f8d1.webp) > ⚠️ **Міркування про безпеку**: У виробничих додатках зберігання ключів API у LocalStorage становить ризики безпеки, оскільки JavaScript може отримати доступ до цих даних. Для навчальних цілей цей підхід підходить, але реальні додатки повинні використовувати безпечне серверне сховище для конфіденційних даних. diff --git a/translations/uk/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/uk/5-browser-extension/3-background-tasks-and-performance/README.md index a47196634..9bdde9b65 100644 --- a/translations/uk/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/uk/5-browser-extension/3-background-tasks-and-performance/README.md @@ -126,7 +126,7 @@ flowchart LR Спробуймо це. Відкрийте веб-сайт (Microsoft.com добре підходить для цього) і натисніть кнопку 'Record'. Тепер оновіть сторінку і спостерігайте, як профайлер фіксує все, що відбувається. Коли ви зупините запис, ви побачите детальний розподіл того, як браузер "скриптує", "рендерить" і "малює" сайт. Це нагадує, як центр управління польотами моніторить кожну систему під час запуску ракети - ви отримуєте дані в реальному часі про те, що саме відбувається і коли. -![Edge profiler](../../../../translated_images/uk/profiler.5a4a62479c5df01c.png) +![Edge profiler](../../../../translated_images/uk/profiler.5a4a62479c5df01c.webp) ✅ [Документація Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) має багато додаткових деталей, якщо ви хочете заглибитися. @@ -136,11 +136,11 @@ flowchart LR Отримайте знімок продуктивності вашої сторінки, вибравши частину шкали часу профілю та переглянувши панель зведення: -![Edge profiler snapshot](../../../../translated_images/uk/snapshot.97750180ebcad737.png) +![Edge profiler snapshot](../../../../translated_images/uk/snapshot.97750180ebcad737.webp) Перевірте панель журналу подій, щоб побачити, чи будь-яка подія тривала більше 15 мс: -![Edge event log](../../../../translated_images/uk/log.804026979f3707e0.png) +![Edge event log](../../../../translated_images/uk/log.804026979f3707e0.webp) ✅ Ознайомтеся з вашим профайлером! Відкрийте інструменти розробника на цьому сайті і перевірте, чи є якісь вузькі місця. Який ресурс завантажується найповільніше? Найшвидше? diff --git a/translations/uk/5-browser-extension/README.md b/translations/uk/5-browser-extension/README.md index 5c5a7c219..4c668fed5 100644 --- a/translations/uk/5-browser-extension/README.md +++ b/translations/uk/5-browser-extension/README.md @@ -23,7 +23,7 @@ CO_OP_TRANSLATOR_METADATA: ### Подяки -![зелене розширення для браузера](../../../translated_images/uk/extension-screenshot.0e7f5bfa110e92e3.png) +![зелене розширення для браузера](../../../translated_images/uk/extension-screenshot.0e7f5bfa110e92e3.webp) ## Подяки diff --git a/translations/uk/5-browser-extension/solution/README.md b/translations/uk/5-browser-extension/solution/README.md index 9cbc4f308..371e49026 100644 --- a/translations/uk/5-browser-extension/solution/README.md +++ b/translations/uk/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Використовуючи API C02 Signal від tmrow для відстеження споживання електроенергії, створіть розширення для браузера, щоб мати нагадування прямо у вашому браузері про те, наскільки інтенсивним є споживання електроенергії у вашому регіоні. Використання цього розширення допоможе вам приймати обґрунтовані рішення щодо ваших дій на основі цієї інформації. -![знімок екрану розширення](../../../../translated_images/uk/extension-screenshot.0e7f5bfa110e92e3.png) +![знімок екрану розширення](../../../../translated_images/uk/extension-screenshot.0e7f5bfa110e92e3.webp) ## Початок роботи @@ -31,7 +31,7 @@ npm run build Щоб встановити розширення в Edge, скористайтеся меню з трьома крапками у верхньому правому куті браузера, щоб знайти панель розширень. Там виберіть "Завантажити розпаковане" для завантаження нового розширення. У вікні вибору відкрийте папку 'dist', і розширення буде завантажено. Для використання вам знадобиться API-ключ для API CO2 Signal ([отримайте його тут через електронну пошту](https://www.co2signal.com/) - введіть свою електронну адресу у відповідне поле на цій сторінці) і [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [Electricity Map](https://www.electricitymap.org/map) (наприклад, у Бостоні я використовую 'US-NEISO'). -![встановлення](../../../../translated_images/uk/install-on-edge.78634f02842c4828.png) +![встановлення](../../../../translated_images/uk/install-on-edge.78634f02842c4828.webp) Після введення API-ключа та регіону в інтерфейс розширення, кольорова точка на панелі розширення браузера повинна змінитися, щоб відобразити споживання енергії у вашому регіоні, і надати вам підказку щодо того, які енергоємні дії будуть доречними. Концепція цієї системи "точок" була запозичена з [розширення Energy Lollipop](https://energylollipop.com/) для викидів у Каліфорнії. diff --git a/translations/uk/5-browser-extension/solution/translation/README.fr.md b/translations/uk/5-browser-extension/solution/translation/README.fr.md index 4a370bb6f..e9b8f1f77 100644 --- a/translations/uk/5-browser-extension/solution/translation/README.fr.md +++ b/translations/uk/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Використовуючи API C02 Signal від tmrow для відстеження споживання електроенергії, створіть розширення для браузера, щоб ви могли отримувати нагадування безпосередньо у своєму браузері про споживання електроенергії у вашому регіоні. Використання цього розширення допоможе вам приймати рішення щодо ваших дій на основі цієї інформації. -![знімок розширення](../../../../../translated_images/uk/extension-screenshot.0e7f5bfa110e92e3.png) +![знімок розширення](../../../../../translated_images/uk/extension-screenshot.0e7f5bfa110e92e3.webp) ## Початок роботи @@ -31,7 +31,7 @@ npm run build Щоб встановити на Edge, скористайтеся меню "три крапки" у верхньому правому куті браузера, щоб знайти панель Розширення. Звідти виберіть "Завантажити розпаковане розширення", щоб додати нове розширення. Укажіть папку 'dist' у запиті, і розширення буде завантажено. Для використання вам знадобиться API-ключ для API CO2 Signal ([отримайте його тут через електронну пошту](https://www.co2signal.com/) – введіть свою електронну адресу у відповідне поле на цій сторінці) і [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [Карті електроенергії](https://www.electricitymap.org/map) (наприклад, у Бостоні я використовую 'US-NEISO'). -![встановлення](../../../../../translated_images/uk/install-on-edge.78634f02842c4828.png) +![встановлення](../../../../../translated_images/uk/install-on-edge.78634f02842c4828.webp) Після введення API-ключа та регіону в інтерфейсі розширення кольорова точка на панелі розширень браузера повинна змінюватися, відображаючи споживання енергії у вашому регіоні, і надавати вам індикатор щодо енергоємних дій, які вам варто виконувати. Концепція цієї системи "точок" була натхненна [розширенням Energy Lollipop](https://energylollipop.com/) для каліфорнійських викидів. diff --git a/translations/uk/5-browser-extension/solution/translation/README.hi.md b/translations/uk/5-browser-extension/solution/translation/README.hi.md index 76d37b47e..98203875a 100644 --- a/translations/uk/5-browser-extension/solution/translation/README.hi.md +++ b/translations/uk/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Використання API CO2 Signal від tmrow для відстеження споживання електроенергії, створення розширення для браузера, яке нагадуватиме вам про те, наскільки інтенсивно використовується електроенергія у вашому регіоні. Використання цього розширення допоможе вам приймати рішення щодо ваших дій на основі цієї інформації. -![Скріншот розширення](../../../../../translated_images/uk/extension-screenshot.0e7f5bfa110e92e3.png) +![Скріншот розширення](../../../../../translated_images/uk/extension-screenshot.0e7f5bfa110e92e3.webp) ## Початок роботи @@ -31,7 +31,7 @@ npm run build Щоб встановити на Edge, скористайтеся меню "три крапки" у верхньому правому куті браузера, щоб знайти панель розширень. Звідти виберіть "Завантажити неупаковане" для завантаження нового розширення. У вікні виберіть папку "dist", і розширення буде завантажено. Для використання вам знадобиться API-ключ CO2 Signal ([отримайте його через електронну пошту тут](https://www.co2signal.com/) — введіть свою електронну адресу у поле на сторінці) та [код вашого регіону](http://api.electricitymap.org/v3/zones) [на електричній карті](https://www.electricitymap.org/map) (наприклад, для Бостона я використовую 'US-NEISO'). -![встановлення](../../../../../translated_images/uk/install-on-edge.78634f02842c4828.png) +![встановлення](../../../../../translated_images/uk/install-on-edge.78634f02842c4828.webp) Після введення API-ключа та регіону в інтерфейс розширення, кольорова точка у панелі розширень браузера повинна змінитися, відображаючи споживання енергії у вашому регіоні, і надавати вам індикатор того, які енергоємні дії будуть доречними. Концепція цієї системи "точок" була запропонована мені розширенням [Energy Lollipop](https://energylollipop.com/) для каліфорнійських викидів. diff --git a/translations/uk/5-browser-extension/solution/translation/README.it.md b/translations/uk/5-browser-extension/solution/translation/README.it.md index 17dc3dc36..4979455f8 100644 --- a/translations/uk/5-browser-extension/solution/translation/README.it.md +++ b/translations/uk/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Ви будете використовувати API Signal CO2 від tmrow для моніторингу споживання електроенергії, щоб створити розширення для браузера, яке надаватиме нагадування безпосередньо у вашому браузері про те, наскільки інтенсивним є використання електроенергії у вашому регіоні. Використання цього спеціального розширення допоможе оцінити ваші дії на основі цієї інформації. -![знімок екрану розширення](../../../../../translated_images/uk/extension-screenshot.0e7f5bfa110e92e3.png) +![знімок екрану розширення](../../../../../translated_images/uk/extension-screenshot.0e7f5bfa110e92e3.webp) ## Початок роботи @@ -31,7 +31,7 @@ npm run build Для встановлення в Edge скористайтеся меню "три крапки" у верхньому правому куті браузера, щоб знайти панель Розширення. Якщо ще не активовано, увімкніть Режим розробника (внизу ліворуч). Виберіть "Завантажити розпаковане", щоб завантажити нове розширення. Укажіть папку "dist" у запиті, і розширення буде завантажено. Для використання вам знадобиться API-ключ для API CO2 Signal (його можна [отримати тут через електронну пошту](https://www.co2signal.com/) — введіть свою електронну адресу у відповідне поле на цій сторінці) і [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [електричній мапі](https://www.electricitymap.org/map) (наприклад, для Бостона це "US-NEISO"). -![встановлення](../../../../../translated_images/uk/install-on-edge.78634f02842c4828.png) +![встановлення](../../../../../translated_images/uk/install-on-edge.78634f02842c4828.webp) Після введення API-ключа та регіону в інтерфейсі розширення кольорова точка на панелі розширення браузера має змінитися, щоб відображати споживання енергії у вашому регіоні, і надавати підказки щодо того, які енергоємні дії доцільно виконувати. Концепція цієї системи "точок" була запозичена з [розширення Energy Lollipop](https://energylollipop.com/) для викидів у Каліфорнії. diff --git a/translations/uk/5-browser-extension/solution/translation/README.ja.md b/translations/uk/5-browser-extension/solution/translation/README.ja.md index fe1872d50..267bd90db 100644 --- a/translations/uk/5-browser-extension/solution/translation/README.ja.md +++ b/translations/uk/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Ми створимо розширення для браузера, яке використовує API CO2 Signal від tmrow, щоб відстежувати споживання електроенергії у вашому регіоні. Це розширення відображатиме нагадування у вашому браузері про рівень споживання електроенергії, що дозволить вам приймати рішення щодо вашої діяльності на основі цієї інформації. -![скріншот розширення](../../../../../translated_images/uk/extension-screenshot.0e7f5bfa110e92e3.png) +![скріншот розширення](../../../../../translated_images/uk/extension-screenshot.0e7f5bfa110e92e3.webp) ## Початок роботи @@ -31,7 +31,7 @@ npm run build Щоб встановити розширення в Edge, знайдіть панель "Розширення" через меню з "трьома крапками" у верхньому правому куті браузера. Там виберіть "Load Unpacked" і завантажте нове розширення. У вікні, що з'явиться, відкрийте папку "dist", і розширення буде завантажено. Для використання вам знадобиться API-ключ CO2 Signal ([отримайте його тут через email](https://www.co2signal.com/) - введіть вашу електронну адресу у відповідне поле на сторінці) та [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [Electricity Map](https://www.electricitymap.org/map) (наприклад, для Бостона використовується 'US-NEISO'). -![встановлення](../../../../../translated_images/uk/install-on-edge.78634f02842c4828.png) +![встановлення](../../../../../translated_images/uk/install-on-edge.78634f02842c4828.webp) Після введення API-ключа та регіону в інтерфейс розширення, кольорова точка, що відображається на панелі розширень браузера, змінюватиметься відповідно до рівня енергоспоживання у вашому регіоні. Це допоможе вам визначити, які види діяльності, що потребують енергії, є доцільними в даний момент. Концепція цієї "точкової" системи була натхненна розширенням [Energy Lollipop](https://energylollipop.com/) для відстеження викидів у Каліфорнії. diff --git a/translations/uk/5-browser-extension/solution/translation/README.ms.md b/translations/uk/5-browser-extension/solution/translation/README.ms.md index 22ca2de7f..a89ff6d7f 100644 --- a/translations/uk/5-browser-extension/solution/translation/README.ms.md +++ b/translations/uk/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Використовуючи API CO2 Signal від tmrow для відстеження споживання електроенергії, створіть розширення для браузера, яке дозволить вам отримувати сповіщення про рівень споживання електроенергії у вашому регіоні. Використання цього розширення допоможе вам приймати рішення щодо ваших дій, спираючись на цю інформацію. -![скріншот розширення браузера](../../../../../translated_images/uk/extension-screenshot.0e7f5bfa110e92e3.png) +![скріншот розширення браузера](../../../../../translated_images/uk/extension-screenshot.0e7f5bfa110e92e3.webp) ## Початок роботи @@ -31,7 +31,7 @@ npm run build Щоб встановити в Edge, скористайтеся меню "три точки" у верхньому правому куті браузера, щоб знайти панель Розширення. Звідти виберіть "Load Unpacked", щоб завантажити нове розширення. Відкрийте папку 'dist' за запитом, і розширення буде завантажено. Для використання вам знадобиться API-ключ для CO2 Signal ([отримайте його тут через електронну пошту](https://www.co2signal.com/) - введіть вашу електронну адресу у відповідне поле на сторінці) і [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [Електричній карті](https://www.electricitymap.org/map) (наприклад, у Бостоні я використовую 'US-NEISO'). -![завантаження](../../../../../translated_images/uk/install-on-edge.78634f02842c4828.png) +![завантаження](../../../../../translated_images/uk/install-on-edge.78634f02842c4828.webp) Після введення API-ключа та регіону в інтерфейс розширення, кольорова точка на панелі розширення браузера змінюватиметься, відображаючи рівень споживання енергії у вашому регіоні, і надаватиме вам рекомендації щодо відповідних дій. Ідея системи "точок" була запозичена з [розширення браузера Energy Lollipop](https://energylollipop.com/) для Каліфорнії. diff --git a/translations/uk/5-browser-extension/start/README.md b/translations/uk/5-browser-extension/start/README.md index 4f7c816cc..ea798f39f 100644 --- a/translations/uk/5-browser-extension/start/README.md +++ b/translations/uk/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Використовуючи API CO2 Signal від tmrow для відстеження споживання електроенергії, створіть розширення для браузера, щоб мати нагадування прямо у вашому браузері про те, наскільки інтенсивно використовується електроенергія у вашому регіоні. Використання цього розширення допоможе вам приймати рішення щодо ваших дій, спираючись на цю інформацію. -![знімок екрана розширення](../../../../translated_images/uk/extension-screenshot.0e7f5bfa110e92e3.png) +![знімок екрана розширення](../../../../translated_images/uk/extension-screenshot.0e7f5bfa110e92e3.webp) ## Початок роботи @@ -31,7 +31,7 @@ npm run build Щоб встановити розширення в Edge, скористайтеся меню з трьома крапками у верхньому правому куті браузера, щоб знайти панель розширень. Там виберіть "Завантажити розпаковане" для додавання нового розширення. У вікні вибору відкрийте папку 'dist', і розширення буде завантажено. Для використання вам знадобиться API-ключ для API CO2 Signal ([отримайте його тут через електронну пошту](https://www.co2signal.com/) - введіть свою електронну адресу у відповідне поле на цій сторінці) і [код вашого регіону](http://api.electricitymap.org/v3/zones), який відповідає [Electricity Map](https://www.electricitymap.org/map) (наприклад, у Бостоні я використовую 'US-NEISO'). -![встановлення](../../../../translated_images/uk/install-on-edge.78634f02842c4828.png) +![встановлення](../../../../translated_images/uk/install-on-edge.78634f02842c4828.webp) Після введення API-ключа та регіону в інтерфейс розширення, кольорова точка в панелі розширення браузера має змінитися, відображаючи споживання енергії у вашому регіоні, і підказувати, які енергоємні дії вам варто виконувати. Концепція цієї системи "точок" була запозичена з [розширення Energy Lollipop](https://energylollipop.com/) для відстеження викидів у Каліфорнії. diff --git a/translations/uk/6-space-game/2-drawing-to-canvas/README.md b/translations/uk/6-space-game/2-drawing-to-canvas/README.md index 746b05aab..d4fe3632d 100644 --- a/translations/uk/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/uk/6-space-game/2-drawing-to-canvas/README.md @@ -108,7 +108,7 @@ quadrantChart UI Elements: [0.9, 0.1] ``` -![сітка canvas](../../../../translated_images/uk/canvas_grid.5f209da785ded492.png) +![сітка canvas](../../../../translated_images/uk/canvas_grid.5f209da785ded492.webp) > Зображення з [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) Щоб малювати на елементі canvas, ви будете дотримуватися того самого триетапного процесу, який є основою всієї графіки canvas. Після кількох спроб це стане для вас природним: @@ -329,11 +329,11 @@ flowchart TD - Корабель героя - ![Корабель героя](../../../../translated_images/uk/player.dd24c1afa8c71e9b.png) + ![Корабель героя](../../../../translated_images/uk/player.dd24c1afa8c71e9b.webp) - 5×5 монстрів - ![Корабель монстра](../../../../translated_images/uk/enemyShip.5df2a822c16650c2.png) + ![Корабель монстра](../../../../translated_images/uk/enemyShip.5df2a822c16650c2.webp) ### Рекомендовані кроки для початку розробки @@ -455,7 +455,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { Готовий результат має виглядати так: -![Чорний екран з героєм і 5*5 монстрами](../../../../translated_images/uk/partI-solution.36c53b48c9ffae2a.png) +![Чорний екран з героєм і 5*5 монстрами](../../../../translated_images/uk/partI-solution.36c53b48c9ffae2a.webp) ## Рішення diff --git a/translations/uk/6-space-game/5-keeping-score/README.md b/translations/uk/6-space-game/5-keeping-score/README.md index 25cfecc7e..033397882 100644 --- a/translations/uk/6-space-game/5-keeping-score/README.md +++ b/translations/uk/6-space-game/5-keeping-score/README.md @@ -160,7 +160,7 @@ sequenceDiagram ``` - **Система очок**: Кожен знищений ворожий корабель приносить 100 очок (круглі числа легше підраховувати подумки). Очки відображаються в нижньому лівому куті. -- **Лічильник життя**: Ваш герой починає з трьох життів — стандарт, встановлений ранніми аркадними іграми для балансу між викликом і зручністю гри. Кожне зіткнення з ворогом коштує одного життя. Ми відобразимо залишок життів у нижньому правому куті за допомогою ікон кораблів ![зображення життя](../../../../translated_images/uk/life.6fb9f50d53ee0413.png). +- **Лічильник життя**: Ваш герой починає з трьох життів — стандарт, встановлений ранніми аркадними іграми для балансу між викликом і зручністю гри. Кожне зіткнення з ворогом коштує одного життя. Ми відобразимо залишок життів у нижньому правому куті за допомогою ікон кораблів ![зображення життя](../../../../translated_images/uk/life.6fb9f50d53ee0413.webp). ## Починаємо будувати! diff --git a/translations/uk/7-bank-project/1-template-route/README.md b/translations/uk/7-bank-project/1-template-route/README.md index b4de572e0..bb699a465 100644 --- a/translations/uk/7-bank-project/1-template-route/README.md +++ b/translations/uk/7-bank-project/1-template-route/README.md @@ -615,7 +615,7 @@ sequenceDiagram Використання `history.pushState` створює нові записи в історії навігації браузера. Ви можете перевірити це, утримуючи *кнопку назад* вашого браузера, вона повинна показувати щось на кшталт цього: -![Скріншот історії навігації](../../../../translated_images/uk/history.7fdabbafa521e064.png) +![Скріншот історії навігації](../../../../translated_images/uk/history.7fdabbafa521e064.webp) Якщо ви спробуєте кілька разів натиснути кнопку назад, ви побачите, що поточний URL змінюється, а історія оновлюється, але той самий шаблон продовжує відображатися. diff --git a/translations/uk/7-bank-project/2-forms/README.md b/translations/uk/7-bank-project/2-forms/README.md index eefb84fb6..b81ae2cdc 100644 --- a/translations/uk/7-bank-project/2-forms/README.md +++ b/translations/uk/7-bank-project/2-forms/README.md @@ -295,7 +295,7 @@ graph TD 2. Спостерігайте зміни в адресному рядку вашого браузера 3. Зверніть увагу, як сторінка перезавантажується, і дані з'являються в URL -![Скріншот зміни URL браузера після натискання кнопки Реєстрація](../../../../translated_images/uk/click-register.e89a30bf0d4bc9ca.png) +![Скріншот зміни URL браузера після натискання кнопки Реєстрація](../../../../translated_images/uk/click-register.e89a30bf0d4bc9ca.webp) ### Порівняння HTTP методів @@ -350,7 +350,7 @@ graph TD 2. **Натисніть** кнопку "Створити обліковий запис" 3. **Спостерігайте** відповідь сервера у вашому браузері -![Вікно браузера на адресі localhost:5000/api/accounts, що показує JSON-рядок з даними користувача](../../../../translated_images/uk/form-post.61de4ca1b964d91a.png) +![Вікно браузера на адресі localhost:5000/api/accounts, що показує JSON-рядок з даними користувача](../../../../translated_images/uk/form-post.61de4ca1b964d91a.webp) **Що ви повинні побачити:** - **Браузер перенаправляє** на URL кінцевого пункту API @@ -532,7 +532,7 @@ async function register() { 3. **Натисніть** "Створити акаунт" 4. **Спостерігайте** повідомлення в консолі та зворотний зв'язок для користувача -![Скріншот, що показує повідомлення в консолі браузера](../../../../translated_images/uk/browser-console.efaf0b51aaaf6778.png) +![Скріншот, що показує повідомлення в консолі браузера](../../../../translated_images/uk/browser-console.efaf0b51aaaf6778.webp) **Що ви повинні побачити:** - **Стан завантаження** з'являється на кнопці надсилання @@ -707,7 +707,7 @@ input:focus:invalid { 3. **Спробуйте** спеціальні символи в полі імені користувача 4. **Введіть** негативну суму балансу -![Скріншот, що показує помилку перевірки при спробі надіслати форму](../../../../translated_images/uk/validation-error.8bd23e98d416c22f.png) +![Скріншот, що показує помилку перевірки при спробі надіслати форму](../../../../translated_images/uk/validation-error.8bd23e98d416c22f.webp) **Що ви спостерігатимете:** - **Браузер відображає** нативні повідомлення про перевірку @@ -829,7 +829,7 @@ timeline Ось приклад того, як може виглядати фінальна сторінка входу після невеликого стилювання: -![Скріншот сторінки входу після додавання стилів CSS](../../../../translated_images/uk/result.96ef01f607bf856a.png) +![Скріншот сторінки входу після додавання стилів CSS](../../../../translated_images/uk/result.96ef01f607bf856a.webp) ## Тест після лекції diff --git a/translations/uk/7-bank-project/3-data/README.md b/translations/uk/7-bank-project/3-data/README.md index db85e52f1..499a49e9a 100644 --- a/translations/uk/7-bank-project/3-data/README.md +++ b/translations/uk/7-bank-project/3-data/README.md @@ -160,7 +160,7 @@ sequenceDiagram Browser->>User: Displays new page (flash/reload) ``` -![Робочий процес оновлення в багатосторінковому додатку](../../../../translated_images/uk/mpa.7f7375a1a2d4aa77.png) +![Робочий процес оновлення в багатосторінковому додатку](../../../../translated_images/uk/mpa.7f7375a1a2d4aa77.webp) **Чому цей підхід здавався незручним:** - Кожен клік означав повне перезавантаження сторінки @@ -187,7 +187,7 @@ sequenceDiagram Browser->>User: Shows updated content (no reload) ``` -![Робочий процес оновлення в односторінковому додатку](../../../../translated_images/uk/spa.268ec73b41f992c2.png) +![Робочий процес оновлення в односторінковому додатку](../../../../translated_images/uk/spa.268ec73b41f992c2.webp) **Чому SPA здаються набагато кращими:** - Оновлюються лише ті частини, які дійсно змінилися (розумно, правда?) @@ -504,7 +504,7 @@ if (data.error) { Тепер, коли ви тестуєте з недійсним обліковим записом, ви побачите корисне повідомлення про помилку прямо на сторінці! -![Скріншот, що показує повідомлення про помилку під час входу](../../../../translated_images/uk/login-error.416fe019b36a6327.png) +![Скріншот, що показує повідомлення про помилку під час входу](../../../../translated_images/uk/login-error.416fe019b36a6327.webp) #### Крок 4: Бути інклюзивним з доступністю @@ -836,7 +836,7 @@ timeline Ось як може виглядати відполірована панель управління: -![Скріншот прикладу результату панелі управління після стилізації](../../../../translated_images/uk/screen2.123c82a831a1d14a.png) +![Скріншот прикладу результату панелі управління після стилізації](../../../../translated_images/uk/screen2.123c82a831a1d14a.webp) Не обов'язково точно повторювати це - використовуйте як натхнення і створіть щось своє! diff --git a/translations/uk/7-bank-project/4-state-management/README.md b/translations/uk/7-bank-project/4-state-management/README.md index 31da2c542..f87d51712 100644 --- a/translations/uk/7-bank-project/4-state-management/README.md +++ b/translations/uk/7-bank-project/4-state-management/README.md @@ -190,7 +190,7 @@ mindmap Замість того, щоб бігати по колу, ми створимо **централізовану систему управління станом**. Уявіть це як одну дуже організовану людину, яка відповідає за всі важливі речі: -![Схема, що показує потоки даних між HTML, діями користувача та станом](../../../../translated_images/uk/data-flow.fa2354e0908fecc8.png) +![Схема, що показує потоки даних між HTML, діями користувача та станом](../../../../translated_images/uk/data-flow.fa2354e0908fecc8.webp) ```mermaid flowchart TD diff --git a/translations/uk/7-bank-project/4-state-management/assignment.md b/translations/uk/7-bank-project/4-state-management/assignment.md index cc62ed826..5869e488d 100644 --- a/translations/uk/7-bank-project/4-state-management/assignment.md +++ b/translations/uk/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA: **Очікуваний результат:** Після завершення цього завдання ваш банківський додаток повинен мати повністю функціональну функцію "Додати транзакцію", яка виглядає та працює професійно: -![Скріншот, що показує приклад діалогу "Додати транзакцію"](../../../../translated_images/uk/dialog.93bba104afeb79f1.png) +![Скріншот, що показує приклад діалогу "Додати транзакцію"](../../../../translated_images/uk/dialog.93bba104afeb79f1.webp) ## Тестування вашої реалізації diff --git a/translations/uk/7-bank-project/README.md b/translations/uk/7-bank-project/README.md index f38a62892..bef3ef196 100644 --- a/translations/uk/7-bank-project/README.md +++ b/translations/uk/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: У цьому проєкті ви навчитеся створювати вигаданий банк. Ці уроки включають інструкції щодо створення макету веб-додатку, налаштування маршрутів, створення форм, управління станом і отримання даних з API, з якого можна отримати дані банку. -| ![Screen1](../../../translated_images/uk/screen1.baccbba0f1f93364.png) | ![Screen2](../../../translated_images/uk/screen2.123c82a831a1d14a.png) | +| ![Screen1](../../../translated_images/uk/screen1.baccbba0f1f93364.webp) | ![Screen2](../../../translated_images/uk/screen2.123c82a831a1d14a.webp) | |--------------------------------|--------------------------------| ## Уроки diff --git a/translations/uk/8-code-editor/1-using-a-code-editor/README.md b/translations/uk/8-code-editor/1-using-a-code-editor/README.md index 534919b16..d764aff15 100644 --- a/translations/uk/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/uk/8-code-editor/1-using-a-code-editor/README.md @@ -185,7 +185,7 @@ VSCode.dev приносить ці можливості у ваш браузер Коли все завантажиться, ви побачите красиво оформлений робочий простір, створений для того, щоб ви могли зосередитися на найважливішому — вашому коді! -![Інтерфейс VSCode.dev за замовчуванням](../../../../translated_images/uk/default-vscode-dev.5d06881d65c1b323.png) +![Інтерфейс VSCode.dev за замовчуванням](../../../../translated_images/uk/default-vscode-dev.5d06881d65c1b323.webp) **Ось ваш тур по околицях:** - **Панель активності** (та смужка зліва): Ваш основний навігатор з Explorer 📁, Search 🔍, Source Control 🌿, Extensions 🧩 та Settings ⚙️ @@ -233,7 +233,7 @@ flowchart TB 1. Перейдіть на [vscode.dev](https://vscode.dev), якщо ви ще не там 2. Знайдіть кнопку "Open Remote Repository" на екрані привітання та натисніть її - ![Відкриття віддаленого репозиторію](../../../../translated_images/uk/open-remote-repository.bd9c2598b8949e7f.png) + ![Відкриття віддаленого репозиторію](../../../../translated_images/uk/open-remote-repository.bd9c2598b8949e7f.webp) 3. Вставте будь-який URL репозиторію GitHub (спробуйте цей: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. Натисніть Enter і спостерігайте за магією! @@ -242,7 +242,7 @@ flowchart TB Хочете відчути себе чарівником програмування? Спробуйте цей ярлик клавіатури: Ctrl+Shift+P (або Cmd+Shift+P на Mac), щоб відкрити Command Palette: -![Command Palette](../../../../translated_images/uk/palette-menu.4946174e07f42622.png) +![Command Palette](../../../../translated_images/uk/palette-menu.4946174e07f42622.webp) **Command Palette — це як пошукова система для всього, що ви можете зробити:** - Введіть "open remote", і вона знайде відкривач репозиторіїв для вас @@ -304,7 +304,7 @@ flowchart TB 3. Введіть назву файлу, включаючи відповідне розширення (`style.css`, `script.js`, `index.html`) 4. Натисніть Enter, щоб створити файл -![Створення нового файлу](../../../../translated_images/uk/create-new-file.2814e609c2af9aeb.png) +![Створення нового файлу](../../../../translated_images/uk/create-new-file.2814e609c2af9aeb.webp) **Правила іменування:** - Використовуйте описові назви, які вказують на призначення файлу @@ -386,7 +386,7 @@ mindmap 2. Переглядайте або шукайте щось конкретне 3. Натисніть на те, що здається цікавим, щоб дізнатися більше -![Інтерфейс маркетплейсу розширень](../../../../translated_images/uk/extensions.eca0e0c7f59a10b5.png) +![Інтерфейс маркетплейсу розширень](../../../../translated_images/uk/extensions.eca0e0c7f59a10b5.webp) **Що ви побачите там:** @@ -439,7 +439,7 @@ mindmap 3. Виберіть "Extension Settings" у випадаючому меню 4. Налаштуйте все так, щоб це відповідало вашому робочому процесу -![Налаштування розширень](../../../../translated_images/uk/extension-settings.21c752ae4f4cdb78.png) +![Налаштування розширень](../../../../translated_images/uk/extension-settings.21c752ae4f4cdb78.webp) **Загальні речі, які ви можете налаштувати:** - Як форматувати ваш код (табуляція проти пробілів, довжина рядка тощо) diff --git a/translations/uk/8-code-editor/1-using-a-code-editor/assignment.md b/translations/uk/8-code-editor/1-using-a-code-editor/assignment.md index 3f8f6554d..b2c29d271 100644 --- a/translations/uk/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/uk/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ CO_OP_TRANSLATOR_METADATA: 4. **Напишіть** повідомлення про коміт: "Додано початкову структуру HTML" 5. **Натисніть** "Commit new file", щоб зберегти зміни -![Створення початкового файлу на GitHub](../../../../translated_images/uk/new-file-github.com.c886796d800e8056.png) +![Створення початкового файлу на GitHub](../../../../translated_images/uk/new-file-github.com.c886796d800e8056.webp) **Що забезпечує це початкове налаштування:** - **Встановлює** правильну структуру документа HTML5 із семантичними елементами @@ -104,7 +104,7 @@ CO_OP_TRANSLATOR_METADATA: ✅ **Індикатор успіху**: Ви повинні побачити файли вашого проєкту у боковій панелі Explorer, а `index.html` буде доступний для редагування у головній області редактора. -![Проєкт завантажено у VSCode.dev](../../../../translated_images/uk/project-on-vscode.dev.e79815a9a95ee7fe.png) +![Проєкт завантажено у VSCode.dev](../../../../translated_images/uk/project-on-vscode.dev.e79815a9a95ee7fe.webp) **Що ви побачите в інтерфейсі:** - **Бокова панель Explorer**: **Відображає** файли вашого репозиторію та структуру папок @@ -448,7 +448,7 @@ li:before { **Результати після встановлення:** Після встановлення CodeSwing ви побачите живий попередній перегляд вашого вебсайту-резюме в редакторі. Це дозволяє вам бачити, як виглядає ваш сайт, у міру внесення змін. -![Розширення CodeSwing показує живий попередній перегляд](../../../../translated_images/uk/after-codeswing-extension-pb.0ebddddcf73b5509.png) +![Розширення CodeSwing показує живий попередній перегляд](../../../../translated_images/uk/after-codeswing-extension-pb.0ebddddcf73b5509.webp) **Розуміння покращеного інтерфейсу:** - **Розділений вигляд**: **Показує** ваш код з одного боку та живий попередній перегляд з іншого diff --git a/translations/uk/9-chat-project/README.md b/translations/uk/9-chat-project/README.md index 64a235d15..3fc5948c9 100644 --- a/translations/uk/9-chat-project/README.md +++ b/translations/uk/9-chat-project/README.md @@ -61,7 +61,7 @@ print(response.choices[0].message.content) Ось як виглядатиме ваш готовий проєкт: -![Інтерфейс чату, що показує розмову між користувачем і AI-асистентом](../../../translated_images/uk/screenshot.0a1ee0d123df681b.png) +![Інтерфейс чату, що показує розмову між користувачем і AI-асистентом](../../../translated_images/uk/screenshot.0a1ee0d123df681b.webp) ## 🗺️ Ваш навчальний шлях через розробку AI-додатків @@ -194,7 +194,7 @@ mindmap **Основний принцип**: Розробка AI-додатків поєднує традиційні навички веб-розробки з інтеграцією AI-сервісів, створюючи інтелектуальні додатки, які здаються природними і чуйними для користувачів. -![Інтерфейс GitHub Models AI Playground з вибором моделі і тестовою зоною](../../../translated_images/uk/playground.d2b927122224ff8f.png) +![Інтерфейс GitHub Models AI Playground з вибором моделі і тестовою зоною](../../../translated_images/uk/playground.d2b927122224ff8f.webp) **Ось що робить Playground таким корисним:** - **Спробуйте** різні AI-моделі, такі як GPT-4o-mini, Claude та інші (усі безкоштовні!) @@ -204,7 +204,7 @@ mindmap Після того, як ви трохи пограєте, просто натисніть вкладку "Code" і виберіть вашу мову програмування, щоб отримати код для реалізації. -![Вибір Playground, що показує опції генерації коду для різних мов програмування](../../../translated_images/uk/playground-choice.1d23ba7d407f4758.png) +![Вибір Playground, що показує опції генерації коду для різних мов програмування](../../../translated_images/uk/playground-choice.1d23ba7d407f4758.webp) ## Налаштування бекенд-інтеграції на Python @@ -2102,14 +2102,14 @@ mindmap - **Перейдіть** до [репозиторію Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners) - **Натисніть** "Use this template" у верхньому правому куті (переконайтеся, що ви увійшли до GitHub) -![Інтерфейс створення з шаблону з зеленою кнопкою "Use this template"](../../../translated_images/uk/template.67ad477109d29a2b.png) +![Інтерфейс створення з шаблону з зеленою кнопкою "Use this template"](../../../translated_images/uk/template.67ad477109d29a2b.webp) **Крок 2: Запуск Codespaces** - **Відкрийте** щойно створений репозиторій - **Натисніть** зелену кнопку "Code" і виберіть "Codespaces" - **Виберіть** "Create codespace on main", щоб запустити середовище розробки -![Інтерфейс створення Codespace з опціями для запуску хмарного середовища розробки](../../../translated_images/uk/codespace.bcecbdf5d2747d3d.png) +![Інтерфейс створення Codespace з опціями для запуску хмарного середовища розробки](../../../translated_images/uk/codespace.bcecbdf5d2747d3d.webp) **Крок 3: Налаштування середовища** Після завантаження Codespace ви отримаєте доступ до: diff --git a/translations/uk/README.md b/translations/uk/README.md index e0c5a196d..8bd77bfbf 100644 --- a/translations/uk/README.md +++ b/translations/uk/README.md @@ -72,13 +72,13 @@ CO_OP_TRANSLATOR_METADATA: Відвідайте [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course), щоб почати! -![Фон](../../translated_images/uk/background.148a8d43afde5730.png) +![Фон](../../translated_images/uk/background.148a8d43afde5730.webp) - Уроки, що охоплюють все від основ до RAG. - Взаємодійте з історичними персонажами за допомогою GenAI і нашого супутнього додатку. - Весела та захоплююча розповідь, ви будете подорожувати в часі! -![персонаж](../../translated_images/uk/character.5c0dd8e067ffd693.png) +![персонаж](../../translated_images/uk/character.5c0dd8e067ffd693.webp) Кожен урок включає завдання для виконання, перевірку знань і виклик, щоб допомогти вам у вивченні таких тем: - Запити і інженерія запитів @@ -114,7 +114,7 @@ CO_OP_TRANSLATOR_METADATA: У вашій копії цього репозиторію, яку ви створили, натисніть кнопку **Code** і виберіть **Open with Codespaces**. Це створить для вас новий Codespace для роботи. -![Codespace](../../translated_images/uk/createcodespace.0238bbf4d7a8d955.png) +![Codespace](../../translated_images/uk/createcodespace.0238bbf4d7a8d955.webp) #### Запуск навчальної програми локально на вашому комп’ютері diff --git a/translations/uk/for-teachers.md b/translations/uk/for-teachers.md index beba88f48..088f911db 100644 --- a/translations/uk/for-teachers.md +++ b/translations/uk/for-teachers.md @@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA: - Moodle Cloud має обмежену підтримку Common Cartridge. Віддавайте перевагу файлу Moodle вище, який також можна завантажити в Canvas. - Після імпорту перегляньте модулі, дати здачі та налаштування вікторин, щоб вони відповідали вашому розкладу. -![Moodle](../../translated_images/uk/moodle.94eb93d714a50cb2.png) +![Moodle](../../translated_images/uk/moodle.94eb93d714a50cb2.webp) > Навчальна програма в Moodle -![Canvas](../../translated_images/uk/canvas.fbd605ff8e5b8aff.png) +![Canvas](../../translated_images/uk/canvas.fbd605ff8e5b8aff.webp) > Навчальна програма в Canvas ### Використання репозиторію напряму (без Classroom) diff --git a/translations/ur/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/ur/1-getting-started-lessons/1-intro-to-programming-languages/README.md index e50a157c3..552059211 100644 --- a/translations/ur/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/ur/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: آج، ہم ان حیرت انگیز ٹولز کو دریافت کرنے جا رہے ہیں جو جدید ویب ڈیولپمنٹ کو نہ صرف ممکن بناتے ہیں بلکہ واقعی دلچسپ بناتے ہیں۔ میں ان ایڈیٹرز، براؤزرز، اور ورک فلو کے بارے میں بات کر رہا ہوں جو نیٹ فلکس، اسپاٹیفائی، اور آپ کے پسندیدہ انڈی ایپ اسٹوڈیو کے ڈیولپرز ہر روز استعمال کرتے ہیں۔ اور یہاں وہ حصہ ہے جو آپ کو خوشی سے جھومنے پر مجبور کر دے گا: ان میں سے زیادہ تر پروفیشنل گریڈ، انڈسٹری اسٹینڈرڈ ٹولز مکمل طور پر مفت ہیں! -![پروگرامنگ کا تعارف](../../../../translated_images/ur/webdev101-programming.d6e3f98e61ac4bff.png) +![پروگرامنگ کا تعارف](../../../../translated_images/ur/webdev101-programming.d6e3f98e61ac4bff.webp) > اسکیچ نوٹ [Tomomi Imura](https://twitter.com/girlie_mac) کی طرف سے ```mermaid diff --git a/translations/ur/1-getting-started-lessons/2-github-basics/README.md b/translations/ur/1-getting-started-lessons/2-github-basics/README.md index 12d597a11..6bd0098db 100644 --- a/translations/ur/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/ur/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: ہم یہ سفر ایک ساتھ کریں گے، ایک قدم بہ ایک قدم۔ کوئی جلدی نہیں، کوئی دباؤ نہیں – بس آپ، میں، اور کچھ واقعی زبردست ٹولز جو آپ کے نئے بہترین دوست بننے والے ہیں! -![GitHub کا تعارف](../../../../translated_images/ur/webdev101-github.8846d7971abef6f9.png) +![GitHub کا تعارف](../../../../translated_images/ur/webdev101-github.8846d7971abef6f9.webp) > اسکیچ نوٹ از [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -583,7 +583,7 @@ flowchart TD ✅ 'beginner-friendly' ریپوزٹریز تلاش کرنے کا ایک اچھا طریقہ [tag 'good-first-issue' کے ذریعے تلاش کرنا](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/) ہے۔ -![ریپو کو لوکل کاپی کریں](../../../../translated_images/ur/clone_repo.5085c48d666ead57.png) +![ریپو کو لوکل کاپی کریں](../../../../translated_images/ur/clone_repo.5085c48d666ead57.webp) کوڈ کو کاپی کرنے کے کئی طریقے ہیں۔ ایک طریقہ یہ ہے کہ ریپوزٹری کے مواد کو "کلون" کریں، HTTPS، SSH، یا GitHub CLI (کمانڈ لائن انٹرفیس) کا استعمال کرتے ہوئے۔ diff --git a/translations/ur/1-getting-started-lessons/3-accessibility/README.md b/translations/ur/1-getting-started-lessons/3-accessibility/README.md index 0f0db3f69..79a82663b 100644 --- a/translations/ur/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/ur/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # قابل رسائی ویب صفحات بنانا -![سب کچھ قابل رسائی کے بارے میں](../../../../translated_images/ur/webdev101-a11y.8ef3025c858d897a.png) +![سب کچھ قابل رسائی کے بارے میں](../../../../translated_images/ur/webdev101-a11y.8ef3025c858d897a.webp) > اسکیچ نوٹ از [ٹومومی ایمورا](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/ur/2-js-basics/1-data-types/README.md b/translations/ur/2-js-basics/1-data-types/README.md index 89d58dde1..e988f43ae 100644 --- a/translations/ur/2-js-basics/1-data-types/README.md +++ b/translations/ur/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # جاوا اسکرپٹ کی بنیادی باتیں: ڈیٹا کی اقسام -![جاوا اسکرپٹ کی بنیادی باتیں - ڈیٹا کی اقسام](../../../../translated_images/ur/webdev101-js-datatypes.4cc470179730702c.png) +![جاوا اسکرپٹ کی بنیادی باتیں - ڈیٹا کی اقسام](../../../../translated_images/ur/webdev101-js-datatypes.4cc470179730702c.webp) > اسکیچ نوٹ [Tomomi Imura](https://twitter.com/girlie_mac) کی طرف سے ```mermaid diff --git a/translations/ur/2-js-basics/2-functions-methods/README.md b/translations/ur/2-js-basics/2-functions-methods/README.md index 6e8211279..4f80c377d 100644 --- a/translations/ur/2-js-basics/2-functions-methods/README.md +++ b/translations/ur/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # جاوا اسکرپٹ کی بنیادی باتیں: طریقے اور فنکشنز -![جاوا اسکرپٹ کی بنیادی باتیں - فنکشنز](../../../../translated_images/ur/webdev101-js-functions.be049c4726e94f8b.png) +![جاوا اسکرپٹ کی بنیادی باتیں - فنکشنز](../../../../translated_images/ur/webdev101-js-functions.be049c4726e94f8b.webp) > اسکیچ نوٹ از [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/ur/2-js-basics/3-making-decisions/README.md b/translations/ur/2-js-basics/3-making-decisions/README.md index de422c18d..5c0cb2257 100644 --- a/translations/ur/2-js-basics/3-making-decisions/README.md +++ b/translations/ur/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # جاوا اسکرپٹ کی بنیادی باتیں: فیصلے کرنا -![جاوا اسکرپٹ کی بنیادی باتیں - فیصلے کرنا](../../../../translated_images/ur/webdev101-js-decisions.69e1b20f272dd1f0.png) +![جاوا اسکرپٹ کی بنیادی باتیں - فیصلے کرنا](../../../../translated_images/ur/webdev101-js-decisions.69e1b20f272dd1f0.webp) > اسکیچ نوٹ از [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/ur/2-js-basics/4-arrays-loops/README.md b/translations/ur/2-js-basics/4-arrays-loops/README.md index d528074c9..748974dc8 100644 --- a/translations/ur/2-js-basics/4-arrays-loops/README.md +++ b/translations/ur/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # جاوا اسکرپٹ کی بنیادی باتیں: Arrays اور Loops -![جاوا اسکرپٹ کی بنیادی باتیں - Arrays](../../../../translated_images/ur/webdev101-js-arrays.439d7528b8a29455.png) +![جاوا اسکرپٹ کی بنیادی باتیں - Arrays](../../../../translated_images/ur/webdev101-js-arrays.439d7528b8a29455.webp) > اسکیچ نوٹ [Tomomi Imura](https://twitter.com/girlie_mac) کی طرف سے ```mermaid diff --git a/translations/ur/3-terrarium/1-intro-to-html/README.md b/translations/ur/3-terrarium/1-intro-to-html/README.md index bf13e0093..ef837f1f5 100644 --- a/translations/ur/3-terrarium/1-intro-to-html/README.md +++ b/translations/ur/3-terrarium/1-intro-to-html/README.md @@ -26,7 +26,7 @@ journey Build terrarium: 5: Student ``` -![HTML کا تعارف](../../../../translated_images/ur/webdev101-html.4389c2067af68e98.png) +![HTML کا تعارف](../../../../translated_images/ur/webdev101-html.4389c2067af68e98.webp) > اسکیچ نوٹ [Tomomi Imura](https://twitter.com/girlie_mac) کی طرف سے HTML، یا HyperText Markup Language، ہر ویب سائٹ کی بنیاد ہے جو آپ نے کبھی دیکھی ہے۔ HTML کو ویب صفحات کا ڈھانچہ سمجھیں – یہ بتاتا ہے کہ مواد کہاں جائے گا، کیسے منظم ہوگا، اور ہر حصہ کیا ظاہر کرتا ہے۔ جبکہ CSS بعد میں آپ کے HTML کو رنگوں اور لے آؤٹ کے ساتھ "سجائے گا"، اور JavaScript اسے انٹرایکٹیویٹی کے ساتھ زندہ کرے گا، HTML وہ بنیادی ڈھانچہ فراہم کرتا ہے جو باقی سب کچھ ممکن بناتا ہے۔ @@ -88,7 +88,7 @@ HTML کوڈ میں جانے سے پہلے، آئیے آپ کے ٹیریریم پ 4. Explorer پین میں، "New File" آئیکن پر کلک کریں 5. اپنی فائل کا نام `index.html` رکھیں -![VS Code Explorer میں نئی فائل بنانے کا عمل](../../../../translated_images/ur/vs-code-index.e2986cf919471eb9.png) +![VS Code Explorer میں نئی فائل بنانے کا عمل](../../../../translated_images/ur/vs-code-index.e2986cf919471eb9.webp) **آپشن 2: ٹرمینل کمانڈز کا استعمال** ```bash diff --git a/translations/ur/3-terrarium/2-intro-to-css/README.md b/translations/ur/3-terrarium/2-intro-to-css/README.md index 02280f3cf..22fcaf667 100644 --- a/translations/ur/3-terrarium/2-intro-to-css/README.md +++ b/translations/ur/3-terrarium/2-intro-to-css/README.md @@ -30,7 +30,7 @@ journey Glass reflections: 5: Student ``` -![CSS کا تعارف](../../../../translated_images/ur/webdev101-css.3f7af5991bf53a20.png) +![CSS کا تعارف](../../../../translated_images/ur/webdev101-css.3f7af5991bf53a20.webp) > اسکیچ نوٹ [Tomomi Imura](https://twitter.com/girlie_mac) کی طرف سے یاد ہے آپ کا HTML ٹیریریم کتنا سادہ نظر آ رہا تھا؟ CSS وہ جگہ ہے جہاں ہم اس سادہ ڈھانچے کو بصری طور پر دلکش چیز میں تبدیل کرتے ہیں۔ @@ -205,7 +205,7 @@ body { اپنے براؤزر کے ڈیولپر ٹولز (F12) کھولیں، ایلیمنٹس ٹیب پر جائیں، اور اپنے `

` عنصر کا معائنہ کریں۔ آپ دیکھیں گے کہ یہ باڈی سے فونٹ فیملی وراثت میں لیتا ہے: -![وراثت میں لیا گیا فونٹ](../../../../translated_images/ur/1.cc07a5cbe114ad1d.png) +![وراثت میں لیا گیا فونٹ](../../../../translated_images/ur/1.cc07a5cbe114ad1d.webp) ✅ **تجربہ کا وقت**: باڈی پر دیگر وراثت میں ملنے والی پراپرٹیز جیسے `color`, `line-height`, یا `text-align` سیٹ کرنے کی کوشش کریں۔ آپ کے ہیڈنگ اور دیگر عناصر کے ساتھ کیا ہوتا ہے؟ @@ -561,7 +561,7 @@ Agent mode کا استعمال کرتے ہوئے درج ذیل چیلنج مکم آپ ہلکے سفید یا ہلکے رنگ کے بیضوی شکلیں بنائیں گے جو شیشے کی عکاسی کی نقل کرتے ہیں۔ یہ طریقہ اس طرح ہے جیسے Renaissance کے مصور جیسے Jan van Eyck نے روشنی اور عکاسی کا استعمال کرتے ہوئے پینٹ شدہ شیشے کو تین جہتی ظاہر کیا۔ آپ کا مقصد یہ ہے: -![finished terrarium](../../../../translated_images/ur/terrarium-final.2f07047ffc597d0a.png) +![finished terrarium](../../../../translated_images/ur/terrarium-final.2f07047ffc597d0a.webp) **آپ کا چیلنج:** - **بنائیں** ہلکے سفید یا روشنی والے بیضوی شکلیں شیشے کی عکاسی کے لیے diff --git a/translations/ur/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/ur/3-terrarium/3-intro-to-DOM-and-closures/README.md index d39d532d3..9558a727a 100644 --- a/translations/ur/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/ur/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -26,7 +26,7 @@ journey Complete terrarium: 5: Student ``` -![DOM اور ایک کلوزر](../../../../translated_images/ur/webdev101-js.10280393044d7eaa.png) +![DOM اور ایک کلوزر](../../../../translated_images/ur/webdev101-js.10280393044d7eaa.webp) > اسکیچ نوٹ [Tomomi Imura](https://twitter.com/girlie_mac) کی طرف سے ویب ڈیولپمنٹ کے سب سے دلچسپ پہلو میں خوش آمدید - چیزوں کو انٹرایکٹو بنانا! دستاویز آبجیکٹ ماڈل (DOM) آپ کے HTML اور جاوا اسکرپٹ کے درمیان ایک پل کی طرح ہے، اور آج ہم اسے آپ کے ٹیریریم کو زندہ کرنے کے لیے استعمال کریں گے۔ جب ٹم برنرز لی نے پہلا ویب براؤزر بنایا، تو انہوں نے ایک ایسی ویب کا تصور کیا جہاں دستاویزات متحرک اور انٹرایکٹو ہو سکیں - DOM اس تصور کو ممکن بناتا ہے۔ @@ -105,7 +105,7 @@ flowchart TD style Q fill:#ffebee ``` -![DOM درخت کی نمائندگی](../../../../translated_images/ur/dom-tree.7daf0e763cbbba92.png) +![DOM درخت کی نمائندگی](../../../../translated_images/ur/dom-tree.7daf0e763cbbba92.webp) > DOM اور HTML مارک اپ کی نمائندگی جو اس کا حوالہ دیتا ہے۔ [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) کی طرف سے @@ -150,7 +150,7 @@ flowchart LR > 💡 **کلوزرز کو سمجھنا**: کلوزرز جاوا اسکرپٹ میں ایک اہم موضوع ہیں، اور بہت سے ڈیولپرز انہیں سالوں تک استعمال کرتے ہیں اس سے پہلے کہ وہ تمام نظریاتی پہلوؤں کو مکمل طور پر سمجھ سکیں۔ آج، ہم عملی اطلاق پر توجہ مرکوز کر رہے ہیں - آپ دیکھیں گے کہ کلوزرز قدرتی طور پر ابھرتے ہیں جب ہم اپنی انٹرایکٹو خصوصیات بناتے ہیں۔ سمجھنا اس وقت ترقی کرے گا جب آپ دیکھیں گے کہ وہ حقیقی مسائل کو کیسے حل کرتے ہیں۔ -![DOM درخت کی نمائندگی](../../../../translated_images/ur/dom-tree.7daf0e763cbbba92.png) +![DOM درخت کی نمائندگی](../../../../translated_images/ur/dom-tree.7daf0e763cbbba92.webp) > DOM اور HTML مارک اپ کی نمائندگی جو اس کا حوالہ دیتا ہے۔ [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) کی طرف سے @@ -554,7 +554,7 @@ function stopElementDrag() { - **کراس ڈیوائس سپورٹ**: ڈیسک ٹاپ اور موبائل پر کام کرتا ہے - **پرفارمنس کا خیال**: کوئی میموری لیکس یا غیر ضروری حسابات نہیں -![مکمل شدہ ٹیریریم](../../../../translated_images/ur/terrarium-final.0920f16e87c13a84.png) +![مکمل شدہ ٹیریریم](../../../../translated_images/ur/terrarium-final.0920f16e87c13a84.webp) --- diff --git a/translations/ur/3-terrarium/solution/README.md b/translations/ur/3-terrarium/solution/README.md index a756c272a..ea9850b4c 100644 --- a/translations/ur/3-terrarium/solution/README.md +++ b/translations/ur/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: ایک چھوٹا سا ڈریگ اینڈ ڈراپ کوڈ-میڈیٹیشن۔ تھوڑے سے HTML، JS اور CSS کے ساتھ، آپ ایک ویب انٹرفیس بنا سکتے ہیں، اسے اسٹائل دے سکتے ہیں، اور اس میں انٹریکشن شامل کر سکتے ہیں۔ -![میرا ٹیریریم](../../../../translated_images/ur/screenshot_gray.0c796099a1f9f25e.png) +![میرا ٹیریریم](../../../../translated_images/ur/screenshot_gray.0c796099a1f9f25e.webp) ## کریڈٹس diff --git a/translations/ur/5-browser-extension/1-about-browsers/README.md b/translations/ur/5-browser-extension/1-about-browsers/README.md index 53aba05b3..e41d54f20 100644 --- a/translations/ur/5-browser-extension/1-about-browsers/README.md +++ b/translations/ur/5-browser-extension/1-about-browsers/README.md @@ -26,7 +26,7 @@ journey Polish experience: 5: Student ``` -![براؤزر اسکیچ نوٹ](../../../../translated_images/ur/browser.60317c9be8b7f84a.jpg) +![براؤزر اسکیچ نوٹ](../../../../translated_images/ur/browser.60317c9be8b7f84a.webp) > اسکیچ نوٹ از [وسیم چگم](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## لیکچر سے پہلے کا کوئز @@ -79,7 +79,7 @@ mindmap ✅ **تھوڑا سا تاریخ کے بارے میں**: پہلا براؤزر 'ورلڈ وائڈ ویب' کہلاتا تھا اور اسے سر ٹموتھی برنرز لی نے 1990 میں بنایا تھا۔ -![ابتدائی براؤزرز](../../../../translated_images/ur/earlybrowsers.d984b711cdf3a42d.jpg) +![ابتدائی براؤزرز](../../../../translated_images/ur/earlybrowsers.d984b711cdf3a42d.webp) > کچھ ابتدائی براؤزرز، از [کیرن میکگرین](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### براؤزرز ویب مواد کو کیسے پروسیس کرتے ہیں @@ -198,7 +198,7 @@ quadrantChart ایکسٹینشن انسٹالیشن کے عمل کو سمجھنا آپ کو صارف کے تجربے کی پیش گوئی کرنے میں مدد دیتا ہے جب لوگ آپ کا ایکسٹینشن انسٹال کرتے ہیں۔ انسٹالیشن کا عمل جدید براؤزرز میں معیاری ہے، انٹرفیس ڈیزائن میں معمولی فرق کے ساتھ۔ -![ایج براؤزر کا اسکرین شاٹ جس میں edge://extensions صفحہ اور سیٹنگز مینو کھلا ہوا دکھایا گیا ہے](../../../../translated_images/ur/install-on-edge.d68781acaf0b3d3d.png) +![ایج براؤزر کا اسکرین شاٹ جس میں edge://extensions صفحہ اور سیٹنگز مینو کھلا ہوا دکھایا گیا ہے](../../../../translated_images/ur/install-on-edge.d68781acaf0b3d3d.webp) > **اہم**: جب آپ اپنے ایکسٹینشنز کی جانچ کر رہے ہوں تو ڈویلپر موڈ کو آن کریں اور دوسرے اسٹورز سے ایکسٹینشنز کی اجازت دیں۔ diff --git a/translations/ur/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/ur/5-browser-extension/2-forms-browsers-local-storage/README.md index ec904a078..9779251a9 100644 --- a/translations/ur/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/ur/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -268,7 +268,7 @@ stateDiagram-v2 ClearStorage --> FirstTime: Back to setup ``` -![لوکل اسٹوریج پین](../../../../translated_images/ur/localstorage.472f8147b6a3f8d1.png) +![لوکل اسٹوریج پین](../../../../translated_images/ur/localstorage.472f8147b6a3f8d1.webp) > ⚠️ **سیکیورٹی غور و فکر**: پروڈکشن ایپلیکیشنز میں، لوکل اسٹوریج میں API کلیدوں کو محفوظ کرنا سیکیورٹی خطرات پیدا کرتا ہے کیونکہ جاوا اسکرپٹ اس ڈیٹا تک رسائی حاصل کر سکتا ہے۔ سیکھنے کے مقاصد کے لیے، یہ طریقہ ٹھیک کام کرتا ہے، لیکن حقیقی ایپلیکیشنز کو حساس اسناد کے لیے محفوظ سرور سائیڈ اسٹوریج استعمال کرنا چاہیے۔ diff --git a/translations/ur/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/ur/5-browser-extension/3-background-tasks-and-performance/README.md index 020250a22..67990bad4 100644 --- a/translations/ur/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/ur/5-browser-extension/3-background-tasks-and-performance/README.md @@ -126,7 +126,7 @@ flowchart LR آئیے اسے آزمائیں۔ ایک ویب سائٹ کھولیں (Microsoft.com اس کے لیے اچھی ہے) اور 'ریکارڈ' بٹن پر کلک کریں۔ اب صفحہ کو ریفریش کریں اور پروفائلر کو ہر وہ چیز کیپچر کرتے ہوئے دیکھیں جو ہو رہی ہے۔ جب آپ ریکارڈنگ بند کریں گے، تو آپ کو ایک تفصیلی تجزیہ نظر آئے گا کہ براؤزر سائٹ کو 'اسکرپٹ'، 'رینڈر'، اور 'پینٹ' کیسے کرتا ہے۔ یہ بالکل مشن کنٹرول کی طرح ہے جو راکٹ لانچ کے دوران ہر سسٹم کی نگرانی کرتا ہے - آپ کو بالکل معلوم ہوتا ہے کہ کیا ہو رہا ہے اور کب۔ -![ایج پروفائلر](../../../../translated_images/ur/profiler.5a4a62479c5df01c.png) +![ایج پروفائلر](../../../../translated_images/ur/profiler.5a4a62479c5df01c.webp) ✅ [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) میں مزید تفصیلات موجود ہیں اگر آپ مزید گہرائی میں جانا چاہتے ہیں۔ @@ -136,11 +136,11 @@ flowchart LR پروفائل ٹائم لائن کے ایک حصے کو منتخب کرکے اور خلاصہ پین کو دیکھ کر اپنے صفحے کی کارکردگی کا اسنیپ شاٹ حاصل کریں: -![ایج پروفائلر اسنیپ شاٹ](../../../../translated_images/ur/snapshot.97750180ebcad737.png) +![ایج پروفائلر اسنیپ شاٹ](../../../../translated_images/ur/snapshot.97750180ebcad737.webp) ایونٹ لاگ پین کو چیک کریں تاکہ دیکھ سکیں کہ آیا کوئی ایونٹ 15 ملی سیکنڈ سے زیادہ وقت لے رہا ہے: -![ایج ایونٹ لاگ](../../../../translated_images/ur/log.804026979f3707e0.png) +![ایج ایونٹ لاگ](../../../../translated_images/ur/log.804026979f3707e0.webp) ✅ اپنے پروفائلر کو جانیں! اس سائٹ پر ڈیولپر ٹولز کھولیں اور دیکھیں کہ کیا کوئی رکاوٹیں ہیں۔ سب سے سست لوڈ ہونے والا اثاثہ کون سا ہے؟ سب سے تیز؟ diff --git a/translations/ur/5-browser-extension/README.md b/translations/ur/5-browser-extension/README.md index caf26b526..56596dcd0 100644 --- a/translations/ur/5-browser-extension/README.md +++ b/translations/ur/5-browser-extension/README.md @@ -23,7 +23,7 @@ CO_OP_TRANSLATOR_METADATA: ### کریڈٹس -![ایک سبز براؤزر ایکسٹینشن](../../../translated_images/ur/extension-screenshot.0e7f5bfa110e92e3.png) +![ایک سبز براؤزر ایکسٹینشن](../../../translated_images/ur/extension-screenshot.0e7f5bfa110e92e3.webp) ## کریڈٹس diff --git a/translations/ur/5-browser-extension/solution/README.md b/translations/ur/5-browser-extension/solution/README.md index 13907ca4f..134bea353 100644 --- a/translations/ur/5-browser-extension/solution/README.md +++ b/translations/ur/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow کے C02 Signal API کا استعمال کرتے ہوئے بجلی کے استعمال کو ٹریک کریں اور ایک براؤزر ایکسٹینشن بنائیں تاکہ آپ کے براؤزر میں یاد دہانی ہو کہ آپ کے علاقے میں بجلی کا استعمال کتنا زیادہ ہے۔ اس ایکسٹینشن کو استعمال کرنے سے آپ کو اپنی سرگرمیوں کے بارے میں بہتر فیصلے کرنے میں مدد ملے گی۔ -![ایکسٹینشن اسکرین شاٹ](../../../../translated_images/ur/extension-screenshot.0e7f5bfa110e92e3.png) +![ایکسٹینشن اسکرین شاٹ](../../../../translated_images/ur/extension-screenshot.0e7f5bfa110e92e3.webp) ## شروعات کرنا @@ -31,7 +31,7 @@ npm run build Edge پر انسٹال کرنے کے لیے، براؤزر کے اوپر دائیں کونے میں موجود 'تین نقطے' والے مینو کا استعمال کریں تاکہ ایکسٹینشنز پینل تک پہنچ سکیں۔ وہاں سے 'Load Unpacked' کو منتخب کریں تاکہ ایک نیا ایکسٹینشن لوڈ کیا جا سکے۔ جب پرامپٹ آئے تو 'dist' فولڈر کھولیں اور ایکسٹینشن لوڈ ہو جائے گا۔ اسے استعمال کرنے کے لیے آپ کو CO2 Signal کے API کے لیے ایک API key کی ضرورت ہوگی ([یہاں ای میل کے ذریعے حاصل کریں](https://www.co2signal.com/) - اس صفحے پر اپنا ای میل درج کریں) اور اپنے علاقے کے لیے [Electricity Map](https://www.electricitymap.org/map) کے مطابق [کوڈ](http://api.electricitymap.org/v3/zones) کی ضرورت ہوگی (مثال کے طور پر، بوسٹن میں، میں 'US-NEISO' استعمال کرتا ہوں)۔ -![انسٹال کرنا](../../../../translated_images/ur/install-on-edge.78634f02842c4828.png) +![انسٹال کرنا](../../../../translated_images/ur/install-on-edge.78634f02842c4828.webp) جب API key اور علاقائی کوڈ ایکسٹینشن انٹرفیس میں درج کر دیے جائیں، تو براؤزر ایکسٹینشن بار میں موجود رنگین نقطہ آپ کے علاقے کے توانائی کے استعمال کو ظاہر کرے گا اور آپ کو یہ مشورہ دے گا کہ کون سی توانائی سے متعلق سرگرمیاں آپ کے لیے مناسب ہوں گی۔ اس 'نقطہ' سسٹم کا تصور مجھے [Energy Lollipop ایکسٹینشن](https://energylollipop.com/) سے ملا تھا جو کیلیفورنیا کے اخراجات کے لیے بنایا گیا ہے۔ diff --git a/translations/ur/5-browser-extension/solution/translation/README.fr.md b/translations/ur/5-browser-extension/solution/translation/README.fr.md index 11040fc24..433066507 100644 --- a/translations/ur/5-browser-extension/solution/translation/README.fr.md +++ b/translations/ur/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow کی CO2 Signal API کا استعمال کرتے ہوئے بجلی کی کھپت کو ٹریک کریں اور ایک براؤزر ایکسٹینشن بنائیں تاکہ آپ کو اپنے براؤزر میں براہ راست اپنی علاقے کی بجلی کی کھپت کا یاد دہانی مل سکے۔ اس ایڈہاک ایکسٹینشن کا استعمال آپ کو ان معلومات کی بنیاد پر اپنی سرگرمیوں کے بارے میں بہتر فیصلہ کرنے میں مدد دے گا۔ -![ایکسٹینشن کا اسکرین شاٹ](../../../../../translated_images/ur/extension-screenshot.0e7f5bfa110e92e3.png) +![ایکسٹینشن کا اسکرین شاٹ](../../../../../translated_images/ur/extension-screenshot.0e7f5bfa110e92e3.webp) ## شروعات @@ -31,7 +31,7 @@ npm run build Edge پر انسٹال کرنے کے لیے، براؤزر کے اوپری دائیں کونے میں 'تین نقطے' والے مینو کا استعمال کریں تاکہ ایکسٹینشنز کا پینل تلاش کریں۔ وہاں سے، 'غیر کمپریسڈ ایکسٹینشن لوڈ کریں' کو منتخب کریں تاکہ ایک نئی ایکسٹینشن لوڈ کی جا سکے۔ پرامپٹ پر 'dist' فولڈر کھولیں اور ایکسٹینشن لوڈ ہو جائے گی۔ استعمال کے لیے، آپ کو CO2 Signal API کے لیے ایک API کلید کی ضرورت ہوگی ([یہاں ای میل کے ذریعے حاصل کریں](https://www.co2signal.com/) - اس صفحے پر دیے گئے باکس میں اپنا ای میل درج کریں) اور اپنے علاقے کے لیے [کوڈ](http://api.electricitymap.org/v3/zones) جو [الیکٹریسٹی میپ](https://www.electricitymap.org/map) سے مطابقت رکھتا ہو (مثال کے طور پر، بوسٹن میں، میں 'US-NEISO' استعمال کرتا ہوں)۔ -![انسٹالیشن](../../../../../translated_images/ur/install-on-edge.78634f02842c4828.png) +![انسٹالیشن](../../../../../translated_images/ur/install-on-edge.78634f02842c4828.webp) ایک بار جب API کلید اور علاقہ ایکسٹینشن کے انٹرفیس میں درج ہو جائیں، تو براؤزر کی ایکسٹینشن بار میں رنگین نقطہ آپ کے علاقے کی توانائی کی کھپت کو ظاہر کرنے کے لیے تبدیل ہو جانا چاہیے اور آپ کو توانائی کے زیادہ استعمال والی سرگرمیوں کے بارے میں اشارہ دینا چاہیے جو آپ کے لیے مناسب ہو سکتی ہیں۔ اس 'نقطہ' سسٹم کے پیچھے تصور مجھے [Energy Lollipop ایکسٹینشن](https://energylollipop.com/) سے ملا، جو کیلیفورنیا کے اخراجات کے لیے بنایا گیا ہے۔ diff --git a/translations/ur/5-browser-extension/solution/translation/README.hi.md b/translations/ur/5-browser-extension/solution/translation/README.hi.md index 1d00c2c35..09fe6575a 100644 --- a/translations/ur/5-browser-extension/solution/translation/README.hi.md +++ b/translations/ur/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow کے C02 سگنل API کا استعمال کرتے ہوئے بجلی کے استعمال کو ٹریک کرنے کے لیے ایک براؤزر ایکسٹینشن بنائیں تاکہ آپ کے براؤزر میں آپ کے علاقے کی بجلی کے استعمال کی شدت کے بارے میں آپ کو یاد دہانی مل سکے۔ اس ایکسٹینشن کا استعمال آپ کو اس معلومات کی بنیاد پر اپنی سرگرمیوں کے بارے میں فیصلے کرنے میں مدد دے گا۔ -![ایکسٹینشن اسکرین شاٹ](../../../../../translated_images/ur/extension-screenshot.0e7f5bfa110e92e3.png) +![ایکسٹینشن اسکرین شاٹ](../../../../../translated_images/ur/extension-screenshot.0e7f5bfa110e92e3.webp) ## شروعات کرنا @@ -31,7 +31,7 @@ npm run build ایج پر انسٹال کرنے کے لیے، براؤزر کے اوپری دائیں کونے میں 'تین ڈاٹ' مینو کا استعمال کرتے ہوئے ایکسٹینشن پینل تلاش کریں۔ وہاں سے، ایک نیا ایکسٹینشن لوڈ کرنے کے لیے 'لوڈ ان پیکڈ' کا انتخاب کریں۔ پرامپٹ پر 'dist' فولڈر کھولیں اور ایکسٹینشن لوڈ ہو جائے گا۔ اس کا استعمال کرنے کے لیے، آپ کو CO2 سگنل API ([یہاں ای میل کے ذریعے حاصل کریں](https://www.co2snal.com/)) کے لیے ایک API کلید کی ضرورت ہوگی - اس صفحے پر باکس میں اپنا ای میل درج کریں) اور [اپنے علاقے کے لیے کوڈ](http://api.electricitymap.org/v3/zones) [الیکٹریسٹی میپ](https://www.electricitymap.org/map) سے حاصل کریں (مثال کے طور پر، بوسٹن میں، میں 'US-NEISO' استعمال کرتا ہوں)۔ -![انسٹال کرنا](../../../../../translated_images/ur/install-on-edge.78634f02842c4828.png) +![انسٹال کرنا](../../../../../translated_images/ur/install-on-edge.78634f02842c4828.webp) ایک بار جب API کلید اور علاقہ ایکسٹینشن انٹرفیس میں درج ہو جائیں، تو براؤزر ایکسٹینشن بار میں رنگین ڈاٹ آپ کے علاقے کی توانائی کے استعمال کی عکاسی کرنے کے لیے تبدیل ہو جانا چاہیے اور آپ کو یہ اشارہ دینا چاہیے کہ توانائی سے بھرپور سرگرمیاں آپ کے لیے کب موزوں ہوں گی۔ اس 'ڈاٹ' سسٹم کے پیچھے کا تصور مجھے کیلیفورنیا کے اخراج کے لیے [انرجی لالی پاپ ایکسٹینشن](https://energylollipop.com/) سے ملا تھا۔ diff --git a/translations/ur/5-browser-extension/solution/translation/README.it.md b/translations/ur/5-browser-extension/solution/translation/README.it.md index 226d24e16..12ff71896 100644 --- a/translations/ur/5-browser-extension/solution/translation/README.it.md +++ b/translations/ur/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: آپ tmrow کی Signal CO2 API کا استعمال کریں گے تاکہ بجلی کے استعمال کی نگرانی کی جا سکے اور ایک براؤزر ایکسٹینشن بنائی جا سکے، جس سے آپ کو اپنے براؤزر میں براہ راست یاد دہانی ملے کہ آپ کے علاقے میں بجلی کا استعمال کتنا زیادہ ہے۔ اس خاص ایکسٹینشن کا استعمال آپ کو اپنی سرگرمیوں کا جائزہ لینے میں مدد دے گا، ان معلومات کی بنیاد پر۔ -![ایکسٹینشن کا اسکرین شاٹ](../../../../../translated_images/ur/extension-screenshot.0e7f5bfa110e92e3.png) +![ایکسٹینشن کا اسکرین شاٹ](../../../../../translated_images/ur/extension-screenshot.0e7f5bfa110e92e3.webp) ## شروعات کے لیے @@ -31,7 +31,7 @@ npm run build Edge پر انسٹال کرنے کے لیے، براؤزر کے اوپری دائیں کونے میں "تین نقطے" والے مینو کا استعمال کریں تاکہ ایکسٹینشنز کا پینل تلاش کیا جا سکے۔ اگر پہلے سے فعال نہیں ہے، تو ڈویلپر موڈ کو فعال کریں (نیچے بائیں جانب)۔ "غیر کمپریسڈ لوڈ کریں" کو منتخب کریں تاکہ ایک نئی ایکسٹینشن لوڈ کی جا سکے۔ پرامپٹ پر "dist" فولڈر کھولیں، اور ایکسٹینشن لوڈ ہو جائے گی۔ استعمال کے لیے، آپ کو CO2 Signal API کے لیے ایک API کلید کی ضرورت ہوگی (آپ اسے [یہاں ای میل کے ذریعے حاصل کر سکتے ہیں](https://www.co2signal.com/) - اس صفحے پر موجود باکس میں اپنا ای میل درج کریں) اور اپنی [بجلی کی نقشے](https://www.electricitymap.org/map) کے مطابق [علاقے کا کوڈ](http://api.electricitymap.org/v3/zones) (مثال کے طور پر، بوسٹن میں "US-NEISO")۔ -![انسٹالیشن](../../../../../translated_images/ur/install-on-edge.78634f02842c4828.png) +![انسٹالیشن](../../../../../translated_images/ur/install-on-edge.78634f02842c4828.webp) ایک بار جب API کلید اور علاقہ ایکسٹینشن کے انٹرفیس میں درج کر دیے جائیں، تو براؤزر کی ایکسٹینشن بار میں رنگین نقطہ علاقے کے توانائی کے استعمال کی عکاسی کرنے کے لیے تبدیل ہو جانا چاہیے اور یہ اشارہ فراہم کرے گا کہ کون سی زیادہ توانائی استعمال کرنے والی سرگرمیاں انجام دینے کے لیے موزوں ہوں گی۔ اس "نقطہ" سسٹم کا تصور [Energy Lollipop ایکسٹینشن](https://energylollipop.com/) سے لیا گیا ہے، جو کیلیفورنیا کی اخراجات کے لیے بنایا گیا تھا۔ diff --git a/translations/ur/5-browser-extension/solution/translation/README.ja.md b/translations/ur/5-browser-extension/solution/translation/README.ja.md index e06cfbd82..b321b1167 100644 --- a/translations/ur/5-browser-extension/solution/translation/README.ja.md +++ b/translations/ur/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow کے CO2 سگنل API کا استعمال کرتے ہوئے، آپ کے علاقے میں بجلی کے استعمال کی مقدار کو ٹریک کرنے کے لیے ایک براؤزر ایکسٹینشن بنایا گیا ہے جو آپ کے براؤزر پر ایک یاد دہانی کے طور پر ظاہر ہوتا ہے۔ اس ایکسٹینشن کو استعمال کرتے ہوئے، آپ اپنی سرگرمیوں کا فیصلہ اس معلومات کی بنیاد پر کر سکتے ہیں۔ -![ایکسٹینشن کا اسکرین شاٹ](../../../../../translated_images/ur/extension-screenshot.0e7f5bfa110e92e3.png) +![ایکسٹینشن کا اسکرین شاٹ](../../../../../translated_images/ur/extension-screenshot.0e7f5bfa110e92e3.webp) ## شروعات کریں @@ -31,7 +31,7 @@ npm run build Edge میں انسٹال کرنے کے لیے، براؤزر کے اوپر دائیں کونے میں موجود "تین نقطے" والے مینو سے "ایکسٹینشنز" پینل کو تلاش کریں۔ وہاں سے "Load Unpacked" کو منتخب کریں اور نئی ایکسٹینشن لوڈ کریں۔ جب پرامپٹ آئے تو "dist" فولڈر کو کھولیں، اور ایکسٹینشن لوڈ ہو جائے گی۔ استعمال کے لیے، آپ کو CO2 سگنل API کی API کلید ([یہاں ای میل کے ذریعے حاصل کریں](https://www.co2signal.com/) - اس صفحے کے باکس میں اپنا ای میل درج کریں) اور [Electricity Map](https://www.electricitymap.org/map) کے مطابق اپنے علاقے کا [کوڈ](http://api.electricitymap.org/v3/zones) درکار ہوگا (مثال کے طور پر، بوسٹن کے لیے 'US-NEISO' استعمال کیا جاتا ہے)۔ -![انسٹالیشن](../../../../../translated_images/ur/install-on-edge.78634f02842c4828.png) +![انسٹالیشن](../../../../../translated_images/ur/install-on-edge.78634f02842c4828.webp) جب آپ API کلید اور علاقہ ایکسٹینشن انٹرفیس میں درج کریں گے، تو براؤزر کے ایکسٹینشن بار میں ظاہر ہونے والا رنگین ڈاٹ آپ کے علاقے کی توانائی کے استعمال کی عکاسی کرے گا اور یہ بتائے گا کہ کس قسم کی توانائی کی ضرورت والی سرگرمیاں انجام دینا مناسب ہے۔ اس "ڈاٹ" سسٹم کا تصور مجھے کیلیفورنیا کے اخراجات کے لیے [Energy Lollipop extension](https://energylollipop.com/) سے ملا۔ diff --git a/translations/ur/5-browser-extension/solution/translation/README.ms.md b/translations/ur/5-browser-extension/solution/translation/README.ms.md index 2167866fa..3d907df3b 100644 --- a/translations/ur/5-browser-extension/solution/translation/README.ms.md +++ b/translations/ur/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow کے CO2 سگنل API کا استعمال کرتے ہوئے بجلی کے استعمال کا پتہ لگائیں اور ایک براؤزر ایکسٹینشن بنائیں تاکہ آپ کو اپنے علاقے میں بجلی کے استعمال کی شدت کے بارے میں براؤزر میں الرٹس مل سکیں۔ اس ایکسٹینشن کا استعمال خاص طور پر آپ کو اپنی سرگرمیوں کے بارے میں بہتر فیصلے کرنے میں مدد دے گا۔ -![براؤزر ایکسٹینشن کا اسکرین شاٹ](../../../../../translated_images/ur/extension-screenshot.0e7f5bfa110e92e3.png) +![براؤزر ایکسٹینشن کا اسکرین شاٹ](../../../../../translated_images/ur/extension-screenshot.0e7f5bfa110e92e3.webp) ## شروعات یہاں سے کریں @@ -31,7 +31,7 @@ npm run build Edge میں انسٹال کرنے کے لیے، براؤزر کے دائیں اوپری کونے میں 'تین نقطے' والے مینو کا استعمال کریں تاکہ ایکسٹینشن پینل تلاش کریں۔ وہاں سے، 'Load Unpacked' کو منتخب کریں تاکہ نیا ایکسٹینشن لوڈ کیا جا سکے۔ درخواست پر 'dist' فولڈر کھولیں اور ایکسٹینشن لوڈ ہو جائے گی۔ اسے استعمال کرنے کے لیے، آپ کو CO2 سگنل API کے لیے ایک API کلید کی ضرورت ہوگی ([یہاں ای میل کے ذریعے حاصل کریں](https://www.co2signal.com/) - اس صفحے پر اپنے ای میل کو باکس میں ڈالیں) اور [اپنے علاقے کے لیے کوڈ](http://api.electricitymap.org/v3/zones) جو [الیکٹریسٹی میپ](https://www.electricitymap.org/map) سے مطابقت رکھتا ہو (مثال کے طور پر، بوسٹن میں، میں 'US-NEISO' استعمال کرتا ہوں)۔ -![ڈاؤن لوڈ ہو رہا ہے](../../../../../translated_images/ur/install-on-edge.78634f02842c4828.png) +![ڈاؤن لوڈ ہو رہا ہے](../../../../../translated_images/ur/install-on-edge.78634f02842c4828.webp) ایک بار جب API کلید اور علاقہ ایکسٹینشن کے انٹرفیس میں ڈال دیا جائے، تو براؤزر ایکسٹینشن بار میں رنگین نقطہ آپ کے علاقے کے توانائی کے استعمال کی عکاسی کرنے کے لیے بدل جائے گا اور آپ کو یہ مشورہ دے گا کہ کون سی بھاری سرگرمیاں آپ کے لیے مناسب ہیں۔ اس 'ڈاٹ' سسٹم کا تصور مجھے [انرجی لالی پاپ براؤزر ایکسٹینشن](https://energylollipop.com/) سے ملا، جو کیلیفورنیا کے اخراجات کے لیے بنایا گیا ہے۔ diff --git a/translations/ur/5-browser-extension/start/README.md b/translations/ur/5-browser-extension/start/README.md index f4b70f12e..e9ecacae6 100644 --- a/translations/ur/5-browser-extension/start/README.md +++ b/translations/ur/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: tmrow کے C02 Signal API کا استعمال کرتے ہوئے بجلی کے استعمال کو ٹریک کریں اور ایک براؤزر ایکسٹینشن بنائیں تاکہ آپ کے براؤزر میں یاد دہانی ہو کہ آپ کے علاقے میں بجلی کا استعمال کتنا زیادہ ہے۔ اس ایکسٹینشن کو وقتی طور پر استعمال کرنے سے آپ کو اپنی سرگرمیوں کے بارے میں بہتر فیصلے کرنے میں مدد ملے گی۔ -![ایکسٹینشن اسکرین شاٹ](../../../../translated_images/ur/extension-screenshot.0e7f5bfa110e92e3.png) +![ایکسٹینشن اسکرین شاٹ](../../../../translated_images/ur/extension-screenshot.0e7f5bfa110e92e3.webp) ## شروعات کریں @@ -31,7 +31,7 @@ npm run build Edge پر انسٹال کرنے کے لیے، براؤزر کے اوپر دائیں کونے میں موجود 'تین نقطے' والے مینو کا استعمال کریں تاکہ ایکسٹینشنز پینل تک پہنچ سکیں۔ وہاں سے 'Load Unpacked' کو منتخب کریں تاکہ نئی ایکسٹینشن لوڈ کی جا سکے۔ جب پرامپٹ آئے تو 'dist' فولڈر کھولیں اور ایکسٹینشن لوڈ ہو جائے گی۔ اسے استعمال کرنے کے لیے، آپ کو CO2 Signal کے API کے لیے ایک API key ([یہاں ای میل کے ذریعے حاصل کریں](https://www.co2signal.com/) - اس صفحے پر موجود باکس میں اپنا ای میل درج کریں) اور اپنے علاقے کے لیے [Electricity Map](https://www.electricitymap.org/map) کے مطابق [کوڈ](http://api.electricitymap.org/v3/zones) کی ضرورت ہوگی (مثال کے طور پر، بوسٹن میں، میں 'US-NEISO' استعمال کرتا ہوں)۔ -![انسٹال کرنا](../../../../translated_images/ur/install-on-edge.78634f02842c4828.png) +![انسٹال کرنا](../../../../translated_images/ur/install-on-edge.78634f02842c4828.webp) جب API key اور علاقائی کوڈ ایکسٹینشن انٹرفیس میں درج کر دیے جائیں، تو براؤزر ایکسٹینشن بار میں موجود رنگین نقطہ آپ کے علاقے کے توانائی کے استعمال کو ظاہر کرے گا اور آپ کو یہ مشورہ دے گا کہ کون سی توانائی سے متعلق سرگرمیاں آپ کے لیے مناسب ہوں گی۔ اس 'نقطہ' نظام کا تصور مجھے [Energy Lollipop ایکسٹینشن](https://energylollipop.com/) سے ملا تھا جو کیلیفورنیا کے اخراجات کے لیے بنایا گیا ہے۔ diff --git a/translations/ur/6-space-game/2-drawing-to-canvas/README.md b/translations/ur/6-space-game/2-drawing-to-canvas/README.md index 696d044fe..fdf47f298 100644 --- a/translations/ur/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/ur/6-space-game/2-drawing-to-canvas/README.md @@ -108,7 +108,7 @@ quadrantChart UI Elements: [0.9, 0.1] ``` -![کینوس کا گرڈ](../../../../translated_images/ur/canvas_grid.5f209da785ded492.png) +![کینوس کا گرڈ](../../../../translated_images/ur/canvas_grid.5f209da785ded492.webp) > تصویر [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) سے کینوس عنصر پر ڈرائنگ کرنے کے لیے، آپ وہی تین قدمی عمل اپنائیں گے جو تمام کینوس گرافکس کی بنیاد بناتا ہے۔ ایک بار جب آپ یہ چند بار کریں گے، تو یہ آپ کے لیے آسان ہو جائے گا: @@ -181,7 +181,7 @@ ctx.fillRect(0, 0, 200, 200); // x, y, width, height حتمی نتیجہ کچھ اس طرح نظر آنا چاہیے: -![کالا اسکرین جس پر ایک ہیرو اور 5*5 مونسٹرز ہیں](../../../../translated_images/ur/partI-solution.36c53b48c9ffae2a.png) +![کالا اسکرین جس پر ایک ہیرو اور 5*5 مونسٹرز ہیں](../../../../translated_images/ur/partI-solution.36c53b48c9ffae2a.webp) ## حل diff --git a/translations/ur/6-space-game/5-keeping-score/README.md b/translations/ur/6-space-game/5-keeping-score/README.md index 8135694cb..7b628a57c 100644 --- a/translations/ur/6-space-game/5-keeping-score/README.md +++ b/translations/ur/6-space-game/5-keeping-score/README.md @@ -160,7 +160,7 @@ sequenceDiagram ``` - **اسکورنگ سسٹم**: ہر تباہ شدہ دشمن جہاز 100 پوائنٹس دیتا ہے (گول نمبر کھلاڑیوں کے لیے ذہنی طور پر حساب لگانا آسان بناتے ہیں)۔ اسکور نیچے بائیں کونے میں دکھایا جاتا ہے۔ -- **زندگی کا کاؤنٹر**: آپ کا ہیرو تین زندگیوں کے ساتھ شروع ہوتا ہے - ابتدائی آرکیڈ گیمز کے ذریعہ چیلنج اور کھیلنے کی صلاحیت کو متوازن کرنے کے لیے قائم کردہ معیار۔ دشمن کے ساتھ ہر تصادم ایک زندگی کی قیمت پر ہوتا ہے۔ ہم نیچے دائیں کونے میں جہاز کے آئیکنز کے ذریعے باقی زندگیوں کو دکھائیں گے ![زندگی کی تصویر](../../../../translated_images/ur/life.6fb9f50d53ee0413.png)۔ +- **زندگی کا کاؤنٹر**: آپ کا ہیرو تین زندگیوں کے ساتھ شروع ہوتا ہے - ابتدائی آرکیڈ گیمز کے ذریعہ چیلنج اور کھیلنے کی صلاحیت کو متوازن کرنے کے لیے قائم کردہ معیار۔ دشمن کے ساتھ ہر تصادم ایک زندگی کی قیمت پر ہوتا ہے۔ ہم نیچے دائیں کونے میں جہاز کے آئیکنز کے ذریعے باقی زندگیوں کو دکھائیں گے ![زندگی کی تصویر](../../../../translated_images/ur/life.6fb9f50d53ee0413.webp)۔ ## آئیے تعمیر شروع کریں! diff --git a/translations/ur/7-bank-project/1-template-route/README.md b/translations/ur/7-bank-project/1-template-route/README.md index a2453208a..2e7d7babe 100644 --- a/translations/ur/7-bank-project/1-template-route/README.md +++ b/translations/ur/7-bank-project/1-template-route/README.md @@ -616,7 +616,7 @@ sequenceDiagram `history.pushState` براؤزر کے نیویگیشن history میں نئے entries بناتا ہے۔ آپ اسے چیک کر سکتے ہیں براؤزر کے *back button* کو دبائے رکھ کر، یہ کچھ اس طرح دکھائے گا: -![نیویگیشن history کا اسکرین شاٹ](../../../../translated_images/ur/history.7fdabbafa521e064.png) +![نیویگیشن history کا اسکرین شاٹ](../../../../translated_images/ur/history.7fdabbafa521e064.webp) اگر آپ back button پر چند بار کلک کرنے کی کوشش کریں، تو آپ دیکھیں گے کہ موجودہ URL تبدیل ہوتا ہے اور history اپ ڈیٹ ہوتی ہے، لیکن وہی template ظاہر ہوتا رہتا ہے۔ diff --git a/translations/ur/7-bank-project/2-forms/README.md b/translations/ur/7-bank-project/2-forms/README.md index d9607a35f..7c00b1ed5 100644 --- a/translations/ur/7-bank-project/2-forms/README.md +++ b/translations/ur/7-bank-project/2-forms/README.md @@ -295,7 +295,7 @@ graph TD 2. اپنے براؤزر کے ایڈریس بار میں تبدیلیوں کا مشاہدہ کریں 3. دیکھیں کہ صفحہ کیسے ری لوڈ ہوتا ہے اور ڈیٹا URL میں ظاہر ہوتا ہے -![رجسٹر بٹن پر کلک کرنے کے بعد براؤزر کے URL میں تبدیلی کا اسکرین شاٹ](../../../../translated_images/ur/click-register.e89a30bf0d4bc9ca.png) +![رجسٹر بٹن پر کلک کرنے کے بعد براؤزر کے URL میں تبدیلی کا اسکرین شاٹ](../../../../translated_images/ur/click-register.e89a30bf0d4bc9ca.webp) ### HTTP طریقوں کا موازنہ @@ -350,7 +350,7 @@ graph TD 2. **"اکاؤنٹ بنائیں" بٹن پر کلک کریں** 3. **اپنے براؤزر میں سرور کے جواب کا مشاہدہ کریں** -![براؤزر ونڈو ایڈریس localhost:5000/api/accounts پر، صارف کے ڈیٹا کے ساتھ JSON اسٹرنگ دکھا رہا ہے](../../../../translated_images/ur/form-post.61de4ca1b964d91a.png) +![براؤزر ونڈو ایڈریس localhost:5000/api/accounts پر، صارف کے ڈیٹا کے ساتھ JSON اسٹرنگ دکھا رہا ہے](../../../../translated_images/ur/form-post.61de4ca1b964d91a.webp) **آپ کو کیا دیکھنا چاہیے:** - **براؤزر ری ڈائریکٹ** API اینڈ پوائنٹ URL پر @@ -554,7 +554,7 @@ async function register() { 3. **"اکاؤنٹ بنائیں" پر کلک کریں** 4. **کنسول پیغامات اور صارف تاثرات کا مشاہدہ کریں** -![براؤزر کنسول میں لاگ پیغام دکھانے والا اسکرین شاٹ](../../../../translated_images/ur/browser-console.efaf0b51aaaf6778.png) +![براؤزر کنسول میں لاگ پیغام دکھانے والا اسکرین شاٹ](../../../../translated_images/ur/browser-console.efaf0b51aaaf6778.webp) **آپ کو کیا دیکھنا چاہیے:** - **لوڈنگ اسٹیٹ** جمع کرانے کے بٹن پر ظاہر ہوتا ہے @@ -729,7 +729,7 @@ input:focus:invalid { 3. **صارف نام کے فیلڈ میں خصوصی کردار آزمائیں** 4. **منفی بیلنس کی رقم درج کریں** -![فارم جمع کرانے کی کوشش کرتے وقت توثیق کی خرابی دکھانے والا اسکرین شاٹ](../../../../translated_images/ur/validation-error.8bd23e98d416c22f.png) +![فارم جمع کرانے کی کوشش کرتے وقت توثیق کی خرابی دکھانے والا اسکرین شاٹ](../../../../translated_images/ur/validation-error.8bd23e98d416c22f.webp) **آپ کیا مشاہدہ کریں گے:** - **براؤزر دکھاتا ہے** مقامی توثیق کے پیغامات @@ -858,7 +858,7 @@ timeline یہاں ایک مثال ہے کہ CSS اسٹائلز شامل کرنے کے بعد حتمی لاگ ان صفحہ کیسا نظر آ سکتا ہے: -![CSS اسٹائلز شامل کرنے کے بعد لاگ ان صفحہ کا اسکرین شاٹ](../../../../translated_images/ur/result.96ef01f607bf856a.png) +![CSS اسٹائلز شامل کرنے کے بعد لاگ ان صفحہ کا اسکرین شاٹ](../../../../translated_images/ur/result.96ef01f607bf856a.webp) ## لیکچر کے بعد کا کوئز diff --git a/translations/ur/7-bank-project/3-data/README.md b/translations/ur/7-bank-project/3-data/README.md index 26f71364e..9a2da03f1 100644 --- a/translations/ur/7-bank-project/3-data/README.md +++ b/translations/ur/7-bank-project/3-data/README.md @@ -160,7 +160,7 @@ sequenceDiagram Browser->>User: Displays new page (flash/reload) ``` -![ملٹی پیج ایپلیکیشن میں اپ ڈیٹ ورک فلو](../../../../translated_images/ur/mpa.7f7375a1a2d4aa77.png) +![ملٹی پیج ایپلیکیشن میں اپ ڈیٹ ورک فلو](../../../../translated_images/ur/mpa.7f7375a1a2d4aa77.webp) **یہ طریقہ کیوں بھاری محسوس ہوتا تھا:** - ہر کلک کا مطلب پورے صفحے کو شروع سے دوبارہ تعمیر کرنا تھا @@ -187,7 +187,7 @@ sequenceDiagram Browser->>User: Shows updated content (no reload) ``` -![سنگل پیج ایپلیکیشن میں اپ ڈیٹ ورک فلو](../../../../translated_images/ur/spa.268ec73b41f992c2.png) +![سنگل پیج ایپلیکیشن میں اپ ڈیٹ ورک فلو](../../../../translated_images/ur/spa.268ec73b41f992c2.webp) **SPA کیوں بہتر محسوس ہوتی ہیں:** - صرف وہ حصے جو واقعی تبدیل ہوئے ہیں اپ ڈیٹ ہوتے ہیں (سمارٹ، ہے نا؟) @@ -508,7 +508,7 @@ if (data.error) { اب جب آپ کسی غلط اکاؤنٹ کے ساتھ ٹیسٹ کریں گے، تو آپ صفحے پر ایک مددگار غلطی کا پیغام دیکھیں گے! -![لاگ ان کے دوران دکھائے جانے والے غلطی کے پیغام کا اسکرین شاٹ](../../../../translated_images/ur/login-error.416fe019b36a6327.png) +![لاگ ان کے دوران دکھائے جانے والے غلطی کے پیغام کا اسکرین شاٹ](../../../../translated_images/ur/login-error.416fe019b36a6327.webp) #### مرحلہ 4: رسائی کے ساتھ شامل ہونا @@ -891,7 +891,7 @@ Agent موڈ کے بارے میں مزید جانیں [یہاں](https://code.vi یہاں ایک پالش شدہ ڈیش بورڈ کی مثال کی طرح نظر آ سکتا ہے: -![ڈیش بورڈ کے اسٹائلنگ کے بعد کے نتیجے کی مثال کا اسکرین شاٹ](../../../../translated_images/ur/screen2.123c82a831a1d14a.png) +![ڈیش بورڈ کے اسٹائلنگ کے بعد کے نتیجے کی مثال کا اسکرین شاٹ](../../../../translated_images/ur/screen2.123c82a831a1d14a.webp) ایسا محسوس نہ کریں کہ آپ کو اسے بالکل اسی طرح سے ملانا ہے - اسے بطور تحریک استعمال کریں اور اسے اپنا بنائیں! diff --git a/translations/ur/7-bank-project/4-state-management/README.md b/translations/ur/7-bank-project/4-state-management/README.md index 6645b5cf8..2ac18cffb 100644 --- a/translations/ur/7-bank-project/4-state-management/README.md +++ b/translations/ur/7-bank-project/4-state-management/README.md @@ -190,7 +190,7 @@ mindmap اپنے دماغ کو الجھانے کے بجائے، ہم ایک **مرکزی اسٹیٹ مینجمنٹ** سسٹم بنائیں گے۔ اسے ایسے سمجھیں جیسے ایک بہت ہی منظم شخص تمام اہم چیزوں کا انچارج ہو: -![HTML، صارف کے اعمال اور اسٹیٹ کے درمیان ڈیٹا کے بہاؤ کو ظاہر کرنے والی اسکیمہ](../../../../translated_images/ur/data-flow.fa2354e0908fecc8.png) +![HTML، صارف کے اعمال اور اسٹیٹ کے درمیان ڈیٹا کے بہاؤ کو ظاہر کرنے والی اسکیمہ](../../../../translated_images/ur/data-flow.fa2354e0908fecc8.webp) ```mermaid flowchart TD diff --git a/translations/ur/7-bank-project/4-state-management/assignment.md b/translations/ur/7-bank-project/4-state-management/assignment.md index 0e85f6dd9..1e89aa871 100644 --- a/translations/ur/7-bank-project/4-state-management/assignment.md +++ b/translations/ur/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA: **متوقع نتیجہ:** اس اسائنمنٹ کو مکمل کرنے کے بعد، آپ کی بینکنگ ایپ میں ایک مکمل طور پر فعال "ٹرانزیکشن شامل کریں" فیچر ہونا چاہیے جو پیشہ ورانہ نظر آئے اور کام کرے: -![ایک مثال "ٹرانزیکشن شامل کریں" ڈائیلاگ دکھانے والا اسکرین شاٹ](../../../../translated_images/ur/dialog.93bba104afeb79f1.png) +![ایک مثال "ٹرانزیکشن شامل کریں" ڈائیلاگ دکھانے والا اسکرین شاٹ](../../../../translated_images/ur/dialog.93bba104afeb79f1.webp) ## اپنی نافذ کردہ چیز کی جانچ diff --git a/translations/ur/7-bank-project/README.md b/translations/ur/7-bank-project/README.md index c22b15c57..bec366c19 100644 --- a/translations/ur/7-bank-project/README.md +++ b/translations/ur/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: اس پروجیکٹ میں، آپ ایک خیالی بینک بنانے کا طریقہ سیکھیں گے۔ یہ اسباق آپ کو ویب ایپ کی ترتیب اور راستے فراہم کرنے، فارم بنانے، اسٹیٹ کو منظم کرنے، اور API سے ڈیٹا حاصل کرنے کے طریقے سکھائیں گے جس سے آپ بینک کا ڈیٹا حاصل کر سکتے ہیں۔ -| ![Screen1](../../../translated_images/ur/screen1.baccbba0f1f93364.png) | ![Screen2](../../../translated_images/ur/screen2.123c82a831a1d14a.png) | +| ![Screen1](../../../translated_images/ur/screen1.baccbba0f1f93364.webp) | ![Screen2](../../../translated_images/ur/screen2.123c82a831a1d14a.webp) | |--------------------------------|--------------------------------| ## اسباق diff --git a/translations/ur/8-code-editor/1-using-a-code-editor/README.md b/translations/ur/8-code-editor/1-using-a-code-editor/README.md index 3a6e693af..a81063961 100644 --- a/translations/ur/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/ur/8-code-editor/1-using-a-code-editor/README.md @@ -185,7 +185,7 @@ VSCode.dev یہ صلاحیتیں آپ کے براؤزر میں لاتا ہے: جب سب کچھ لوڈ ہو جائے، تو آپ ایک خوبصورت صاف ورک اسپیس دیکھیں گے جو آپ کو اس پر مرکوز رکھنے کے لیے ڈیزائن کیا گیا ہے جو اہم ہے – آپ کا کوڈ! -![ڈیفالٹ VSCode.dev انٹرفیس](../../../../translated_images/ur/default-vscode-dev.5d06881d65c1b323.png) +![ڈیفالٹ VSCode.dev انٹرفیس](../../../../translated_images/ur/default-vscode-dev.5d06881d65c1b323.webp) **یہاں آپ کے علاقے کا دورہ ہے:** - **ایکٹیویٹی بار** (بائیں طرف کی پٹی): آپ کی مرکزی نیویگیشن جس میں ایکسپلورر 📁، سرچ 🔍، سورس کنٹرول 🌿، ایکسٹینشنز 🧩، اور سیٹنگز ⚙️ شامل ہیں @@ -233,7 +233,7 @@ flowchart TB 1. [vscode.dev](https://vscode.dev) پر جائیں اگر آپ پہلے سے وہاں نہیں ہیں 2. ویلکم اسکرین پر "اوپن ریموٹ ریپوزیٹری" بٹن تلاش کریں اور اس پر کلک کریں - ![اوپن ریموٹ ریپوزیٹری](../../../../translated_images/ur/open-remote-repository.bd9c2598b8949e7f.png) + ![اوپن ریموٹ ریپوزیٹری](../../../../translated_images/ur/open-remote-repository.bd9c2598b8949e7f.webp) 3. کسی بھی GitHub ریپوزیٹری URL کو پیسٹ کریں (اسے آزمائیں: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. انٹر دبائیں اور جادو دیکھیں! @@ -242,7 +242,7 @@ flowchart TB کیا آپ کوڈنگ کے جادوگر کی طرح محسوس کرنا چاہتے ہیں؟ یہ کی بورڈ شارٹ کٹ آزمائیں: Ctrl+Shift+P (یا Mac پر Cmd+Shift+P) کمانڈ پیلیٹ کھولنے کے لیے: -![کمانڈ پیلیٹ](../../../../translated_images/ur/palette-menu.4946174e07f42622.png) +![کمانڈ پیلیٹ](../../../../translated_images/ur/palette-menu.4946174e07f42622.webp) **کمانڈ پیلیٹ ایسا ہے جیسے آپ کے پاس ہر چیز کے لیے سرچ انجن ہو:** - "اوپن ریموٹ" ٹائپ کریں اور یہ آپ کے لیے ریپوزیٹری اوپنر تلاش کرے گا @@ -304,7 +304,7 @@ flowchart TB 3. مناسب ایکسٹینشن سمیت فائل کا نام درج کریں (`style.css`, `script.js`, `index.html`) 4. فائل بنانے کے لیے انٹر دبائیں -![نئی فائل بنانا](../../../../translated_images/ur/create-new-file.2814e609c2af9aeb.png) +![نئی فائل بنانا](../../../../translated_images/ur/create-new-file.2814e609c2af9aeb.webp) **نام رکھنے کے اصول:** - وضاحتی نام استعمال کریں جو فائل کے مقصد کی نشاندہی کریں @@ -387,7 +387,7 @@ mindmap 2. ارد گرد براؤز کریں یا کسی خاص چیز کی تلاش کریں 3. جو دلچسپ لگے اس پر کلک کریں تاکہ اس کے بارے میں مزید جان سکیں -![ایکسٹینشن مارکیٹ پلیس انٹرفیس](../../../../translated_images/ur/extensions.eca0e0c7f59a10b5.png) +![ایکسٹینشن مارکیٹ پلیس انٹرفیس](../../../../translated_images/ur/extensions.eca0e0c7f59a10b5.webp) **آپ کو وہاں کیا نظر آئے گا:** @@ -440,7 +440,7 @@ mindmap 3. ڈراپ ڈاؤن سے "ایکسٹینشن سیٹنگز" منتخب کریں 4. چیزوں کو ایڈجسٹ کریں جب تک کہ وہ آپ کے ورک فلو کے لیے بالکل صحیح محسوس نہ ہوں -![ایکسٹینشن سیٹنگز کو حسب ضرورت بنانا](../../../../translated_images/ur/extension-settings.21c752ae4f4cdb78.png) +![ایکسٹینشن سیٹنگز کو حسب ضرورت بنانا](../../../../translated_images/ur/extension-settings.21c752ae4f4cdb78.webp) **عام چیزیں جو آپ ایڈجسٹ کرنا چاہیں گے:** - آپ کا کوڈ کیسے فارمیٹ ہوتا ہے (ٹیبز بمقابلہ اسپیسز، لائن کی لمبائی، وغیرہ) diff --git a/translations/ur/8-code-editor/1-using-a-code-editor/assignment.md b/translations/ur/8-code-editor/1-using-a-code-editor/assignment.md index 5d801ad5c..e882e6613 100644 --- a/translations/ur/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/ur/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ CO_OP_TRANSLATOR_METADATA: 4. ایک کمیٹ میسج لکھیں: "Add initial HTML structure" 5. "Commit new file" پر کلک کریں تاکہ آپ کی تبدیلیاں محفوظ ہو جائیں -![گٹ ہب پر ابتدائی فائل بنانا](../../../../translated_images/ur/new-file-github.com.c886796d800e8056.png) +![گٹ ہب پر ابتدائی فائل بنانا](../../../../translated_images/ur/new-file-github.com.c886796d800e8056.webp) **یہ ابتدائی سیٹ اپ کیا حاصل کرتا ہے:** - **مناسب ایچ ٹی ایم ایل 5 دستاویز کی ساخت قائم کرتا ہے** سیمینٹک عناصر کے ساتھ @@ -104,7 +104,7 @@ CO_OP_TRANSLATOR_METADATA: ✅ **کامیابی کا اشارہ**: آپ کو اپنے پروجیکٹ فائلز ایکسپلورر سائیڈ بار میں اور `index.html` کو مرکزی ایڈیٹر ایریا میں ایڈیٹنگ کے لیے دستیاب دیکھنا چاہیے۔ -![وی ایس کوڈ ڈاٹ ڈی وی میں پروجیکٹ لوڈ ہوا](../../../../translated_images/ur/project-on-vscode.dev.e79815a9a95ee7fe.png) +![وی ایس کوڈ ڈاٹ ڈی وی میں پروجیکٹ لوڈ ہوا](../../../../translated_images/ur/project-on-vscode.dev.e79815a9a95ee7fe.webp) **انٹرفیس میں آپ کیا دیکھیں گے:** - **ایکسپلورر سائیڈ بار**: **آپ کے ریپوزیٹری فائلز اور فولڈر کی ساخت دکھاتا ہے** @@ -448,7 +448,7 @@ li:before { **انسٹالیشن کے بعد فوری نتائج:** ایک بار کوڈ سوئنگ انسٹال ہو جائے، آپ کو اپنے ریزیوم ویب سائٹ کا لائیو پریویو ایڈیٹر میں نظر آئے گا۔ یہ آپ کو بالکل دکھاتا ہے کہ آپ کی سائٹ کیسی لگتی ہے جیسے آپ تبدیلیاں کرتے ہیں۔ -![کوڈ سوئنگ ایکسٹینشن لائیو پریویو دکھا رہا ہے](../../../../translated_images/ur/after-codeswing-extension-pb.0ebddddcf73b5509.png) +![کوڈ سوئنگ ایکسٹینشن لائیو پریویو دکھا رہا ہے](../../../../translated_images/ur/after-codeswing-extension-pb.0ebddddcf73b5509.webp) **بہتر انٹرفیس کو سمجھنا:** - **سپلٹ ویو**: **آپ کے کوڈ کو ایک طرف اور لائیو پریویو کو دوسری طرف دکھاتا ہے** diff --git a/translations/ur/9-chat-project/README.md b/translations/ur/9-chat-project/README.md index 160d7a911..53e9224fc 100644 --- a/translations/ur/9-chat-project/README.md +++ b/translations/ur/9-chat-project/README.md @@ -61,7 +61,7 @@ print(response.choices[0].message.content) یہ ہے کہ آپ کا مکمل شدہ پروجیکٹ کیسا نظر آئے گا: -![چیٹ ایپ انٹرفیس جو صارف اور AI اسسٹنٹ کے درمیان گفتگو دکھا رہا ہے](../../../translated_images/ur/screenshot.0a1ee0d123df681b.png) +![چیٹ ایپ انٹرفیس جو صارف اور AI اسسٹنٹ کے درمیان گفتگو دکھا رہا ہے](../../../translated_images/ur/screenshot.0a1ee0d123df681b.webp) ## 🗺️ AI ایپلیکیشن ڈویلپمنٹ کے ذریعے آپ کا سیکھنے کا سفر @@ -194,7 +194,7 @@ mindmap **بنیادی اصول**: AI ایپلیکیشن ڈویلپمنٹ روایتی ویب ڈویلپمنٹ کی مہارتوں کو AI سروس انٹیگریشن کے ساتھ جوڑتا ہے، ذہین ایپلیکیشنز تخلیق کرتا ہے جو صارفین کے لیے قدرتی اور جوابدہ محسوس ہوتی ہیں۔ -![GitHub Models AI Playground انٹرفیس ماڈل کے انتخاب اور ٹیسٹنگ ایریا کے ساتھ](../../../translated_images/ur/playground.d2b927122224ff8f.png) +![GitHub Models AI Playground انٹرفیس ماڈل کے انتخاب اور ٹیسٹنگ ایریا کے ساتھ](../../../translated_images/ur/playground.d2b927122224ff8f.webp) **یہاں ہے کہ پلے گراؤنڈ کو اتنا مفید کیا بناتا ہے:** - **مختلف AI ماڈلز آزمائیں** جیسے GPT-4o-mini، Claude، اور دیگر (سب مفت!) @@ -204,7 +204,7 @@ mindmap جب آپ تھوڑا سا کھیل چکے ہوں، تو بس "کوڈ" ٹیب پر کلک کریں اور اپنی پروگرامنگ زبان منتخب کریں تاکہ آپ کو وہ نفاذی کوڈ ملے جس کی آپ کو ضرورت ہے۔ -![پلے گراؤنڈ کا انتخاب مختلف پروگرامنگ زبانوں کے لیے کوڈ جنریشن کے اختیارات دکھا رہا ہے](../../../translated_images/ur/playground-choice.1d23ba7d407f4758.png) +![پلے گراؤنڈ کا انتخاب مختلف پروگرامنگ زبانوں کے لیے کوڈ جنریشن کے اختیارات دکھا رہا ہے](../../../translated_images/ur/playground-choice.1d23ba7d407f4758.webp) ## Python بیک اینڈ انٹیگریشن سیٹ اپ کرنا @@ -1930,14 +1930,14 @@ mindmap - [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) پر جائیں - اوپر دائیں کونے میں "Use this template" پر کلک کریں (یقینی بنائیں کہ آپ GitHub میں لاگ ان ہیں) -![ٹیمپلیٹ انٹرفیس دکھا رہا ہے جس میں سبز "Use this template" بٹن ہے](../../../translated_images/ur/template.67ad477109d29a2b.png) +![ٹیمپلیٹ انٹرفیس دکھا رہا ہے جس میں سبز "Use this template" بٹن ہے](../../../translated_images/ur/template.67ad477109d29a2b.webp) **مرحلہ 2: Codespaces لانچ کریں** - اپنی نئی بنائی گئی repository کھولیں - سبز "Code" بٹن پر کلک کریں اور "Codespaces" منتخب کریں - "Create codespace on main" منتخب کریں تاکہ آپ کا ڈیولپمنٹ ماحول شروع ہو سکے -![Codespace انٹرفیس دکھا رہا ہے جس میں کلاؤڈ ڈیولپمنٹ ماحول لانچ کرنے کے اختیارات ہیں](../../../translated_images/ur/codespace.bcecbdf5d2747d3d.png) +![Codespace انٹرفیس دکھا رہا ہے جس میں کلاؤڈ ڈیولپمنٹ ماحول لانچ کرنے کے اختیارات ہیں](../../../translated_images/ur/codespace.bcecbdf5d2747d3d.webp) **مرحلہ 3: ماحول کی ترتیب** جب آپ کا Codespace لوڈ ہو جائے، آپ کو رسائی حاصل ہوگی: diff --git a/translations/ur/README.md b/translations/ur/README.md index 013368a12..f60f8ca1c 100644 --- a/translations/ur/README.md +++ b/translations/ur/README.md @@ -60,13 +60,13 @@ CO_OP_TRANSLATOR_METADATA: شروع کرنے کے لیے وزٹ کریں [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course)! -![Background](../../translated_images/ur/background.148a8d43afde5730.png) +![Background](../../translated_images/ur/background.148a8d43afde5730.webp) - اسباق بنیادی باتوں سے لے کر RAG تک سب کچھ کور کرتے ہیں۔ - GenAI اور ہمارے معاون ایپ کے ذریعے تاریخی شخصیات سے بات چیت کریں۔ - دلچسپ اور مشغول نگارش، آپ وقت کے سفر پر ہوں گے! -![character](../../translated_images/ur/character.5c0dd8e067ffd693.png) +![character](../../translated_images/ur/character.5c0dd8e067ffd693.webp) ہر سبق میں ایک اسائنمنٹ، نالج چیک اور چیلنج شامل ہے تاکہ آپ اس طرح کے موضوعات پر سیکھنے میں رہنمائی کریں: @@ -103,7 +103,7 @@ CO_OP_TRANSLATOR_METADATA: اپنی بنائی گئی ریپوزیٹری میں، **Code** بٹن پر کلک کریں اور **Open with Codespaces** منتخب کریں۔ یہ آپ کے لیے ایک نیا Codespace بنائے گا جہاں آپ کام کر سکتے ہیں۔ -![Codespace](../../translated_images/ur/createcodespace.0238bbf4d7a8d955.png) +![Codespace](../../translated_images/ur/createcodespace.0238bbf4d7a8d955.webp) #### اپنے کمپیوٹر پر نصاب لوکل چلانا diff --git a/translations/ur/for-teachers.md b/translations/ur/for-teachers.md index e157cf65b..8da6364f2 100644 --- a/translations/ur/for-teachers.md +++ b/translations/ur/for-teachers.md @@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA: - Moodle Cloud میں Common Cartridge کی محدود حمایت ہے۔ اوپر دی گئی Moodle فائل کو ترجیح دیں، جسے Canvas میں بھی اپلوڈ کیا جا سکتا ہے۔ - درآمد کے بعد، ماڈیولز، مقررہ تاریخیں، اور کوئز کی ترتیبات کو اپنے ٹرم شیڈول کے مطابق دیکھیں۔ -![Moodle](../../translated_images/ur/moodle.94eb93d714a50cb2.png) +![Moodle](../../translated_images/ur/moodle.94eb93d714a50cb2.webp) > Moodle کلاس روم میں نصاب -![Canvas](../../translated_images/ur/canvas.fbd605ff8e5b8aff.png) +![Canvas](../../translated_images/ur/canvas.fbd605ff8e5b8aff.webp) > Canvas میں نصاب ### ریپو کو براہ راست استعمال کریں (بغیر Classroom کے) diff --git a/translations/vi/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/vi/1-getting-started-lessons/1-intro-to-programming-languages/README.md index de55371c6..3863ea515 100644 --- a/translations/vi/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/vi/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ Nghe này, tôi hoàn toàn hiểu nếu lập trình có vẻ đáng sợ ngay Hôm nay, chúng ta sẽ khám phá những công cụ tuyệt vời làm cho phát triển web hiện đại không chỉ khả thi mà còn thực sự gây nghiện. Tôi đang nói về chính những trình soạn thảo, trình duyệt và quy trình làm việc mà các nhà phát triển tại Netflix, Spotify, và studio ứng dụng indie yêu thích của bạn sử dụng mỗi ngày. Và đây là phần sẽ khiến bạn nhảy múa vui vẻ: hầu hết các công cụ chuyên nghiệp, tiêu chuẩn ngành này đều hoàn toàn miễn phí! -![Giới thiệu Lập trình](../../../../translated_images/vi/webdev101-programming.d6e3f98e61ac4bff.png) +![Giới thiệu Lập trình](../../../../translated_images/vi/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/vi/1-getting-started-lessons/2-github-basics/README.md b/translations/vi/1-getting-started-lessons/2-github-basics/README.md index c7fa6d831..191dcf150 100644 --- a/translations/vi/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/vi/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ Mình biết điều này có thể khiến bạn cảm thấy hơi quá tải l Chúng ta sẽ cùng nhau đi qua hành trình này, từng bước một. Không vội vàng, không áp lực – chỉ có bạn, mình, và một số công cụ cực kỳ thú vị sắp trở thành người bạn thân mới của bạn! -![Giới thiệu về GitHub](../../../../translated_images/vi/webdev101-github.8846d7971abef6f9.png) +![Giới thiệu về GitHub](../../../../translated_images/vi/webdev101-github.8846d7971abef6f9.webp) > Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -610,7 +610,7 @@ Bạn không chỉ học cách viết mã ở đây – bạn đang chuẩn bị ✅ Một cách tốt để tìm các repo 'thân thiện với người mới bắt đầu' là [tìm kiếm theo thẻ 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Sao chép repo về máy](../../../../translated_images/vi/clone_repo.5085c48d666ead57.png) +![Sao chép repo về máy](../../../../translated_images/vi/clone_repo.5085c48d666ead57.webp) Có nhiều cách để sao chép mã. Một cách là "clone" nội dung của repository, sử dụng HTTPS, SSH, hoặc GitHub CLI (Command Line Interface). diff --git a/translations/vi/1-getting-started-lessons/3-accessibility/README.md b/translations/vi/1-getting-started-lessons/3-accessibility/README.md index 402d8ddcf..dee75c770 100644 --- a/translations/vi/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/vi/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Tạo Trang Web Dễ Tiếp Cận -![Tất cả về khả năng tiếp cận](../../../../translated_images/vi/webdev101-a11y.8ef3025c858d897a.png) +![Tất cả về khả năng tiếp cận](../../../../translated_images/vi/webdev101-a11y.8ef3025c858d897a.webp) > Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/vi/2-js-basics/1-data-types/README.md b/translations/vi/2-js-basics/1-data-types/README.md index 2de08d975..e8a52affb 100644 --- a/translations/vi/2-js-basics/1-data-types/README.md +++ b/translations/vi/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Cơ bản về JavaScript: Kiểu dữ liệu -![Cơ bản về JavaScript - Kiểu dữ liệu](../../../../translated_images/vi/webdev101-js-datatypes.4cc470179730702c.png) +![Cơ bản về JavaScript - Kiểu dữ liệu](../../../../translated_images/vi/webdev101-js-datatypes.4cc470179730702c.webp) > Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/vi/2-js-basics/2-functions-methods/README.md b/translations/vi/2-js-basics/2-functions-methods/README.md index d893ec588..7cc2109a6 100644 --- a/translations/vi/2-js-basics/2-functions-methods/README.md +++ b/translations/vi/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Cơ bản về JavaScript: Phương thức và Hàm -![Cơ bản về JavaScript - Hàm](../../../../translated_images/vi/webdev101-js-functions.be049c4726e94f8b.png) +![Cơ bản về JavaScript - Hàm](../../../../translated_images/vi/webdev101-js-functions.be049c4726e94f8b.webp) > Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/vi/2-js-basics/3-making-decisions/README.md b/translations/vi/2-js-basics/3-making-decisions/README.md index f110a70a4..4ac634b45 100644 --- a/translations/vi/2-js-basics/3-making-decisions/README.md +++ b/translations/vi/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Cơ bản về JavaScript: Ra quyết định -![Cơ bản về JavaScript - Ra quyết định](../../../../translated_images/vi/webdev101-js-decisions.69e1b20f272dd1f0.png) +![Cơ bản về JavaScript - Ra quyết định](../../../../translated_images/vi/webdev101-js-decisions.69e1b20f272dd1f0.webp) > Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/vi/2-js-basics/4-arrays-loops/README.md b/translations/vi/2-js-basics/4-arrays-loops/README.md index fcb2ccd0f..d884a8d75 100644 --- a/translations/vi/2-js-basics/4-arrays-loops/README.md +++ b/translations/vi/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Cơ bản về JavaScript: Mảng và Vòng lặp -![Cơ bản về JavaScript - Mảng](../../../../translated_images/vi/webdev101-js-arrays.439d7528b8a29455.png) +![Cơ bản về JavaScript - Mảng](../../../../translated_images/vi/webdev101-js-arrays.439d7528b8a29455.webp) > Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/vi/3-terrarium/1-intro-to-html/README.md b/translations/vi/3-terrarium/1-intro-to-html/README.md index e4aff3c01..ceb747763 100644 --- a/translations/vi/3-terrarium/1-intro-to-html/README.md +++ b/translations/vi/3-terrarium/1-intro-to-html/README.md @@ -26,7 +26,7 @@ journey Build terrarium: 5: Student ``` -![Giới thiệu về HTML](../../../../translated_images/vi/webdev101-html.4389c2067af68e98.png) +![Giới thiệu về HTML](../../../../translated_images/vi/webdev101-html.4389c2067af68e98.webp) > Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac) HTML, hay HyperText Markup Language, là nền tảng của mọi trang web mà bạn từng truy cập. Hãy nghĩ về HTML như bộ khung xương cung cấp cấu trúc cho các trang web – nó xác định nơi nội dung sẽ xuất hiện, cách tổ chức và ý nghĩa của từng phần. Trong khi CSS sẽ "trang trí" HTML của bạn với màu sắc và bố cục, và JavaScript sẽ làm cho nó sống động với tính tương tác, HTML cung cấp cấu trúc cơ bản làm nền tảng cho mọi thứ khác. @@ -88,7 +88,7 @@ Bạn sẽ tạo một thư mục dành riêng cho dự án terrarium và thêm 4. Trong bảng Explorer, nhấp vào biểu tượng "New File" 5. Đặt tên tệp của bạn là `index.html` -![VS Code Explorer hiển thị việc tạo tệp mới](../../../../translated_images/vi/vs-code-index.e2986cf919471eb9.png) +![VS Code Explorer hiển thị việc tạo tệp mới](../../../../translated_images/vi/vs-code-index.e2986cf919471eb9.webp) **Cách 2: Sử dụng Lệnh Terminal** ```bash diff --git a/translations/vi/3-terrarium/2-intro-to-css/README.md b/translations/vi/3-terrarium/2-intro-to-css/README.md index feb2fba37..9ce5272a2 100644 --- a/translations/vi/3-terrarium/2-intro-to-css/README.md +++ b/translations/vi/3-terrarium/2-intro-to-css/README.md @@ -30,7 +30,7 @@ journey Glass reflections: 5: Student ``` -![Giới thiệu về CSS](../../../../translated_images/vi/webdev101-css.3f7af5991bf53a20.png) +![Giới thiệu về CSS](../../../../translated_images/vi/webdev101-css.3f7af5991bf53a20.webp) > Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac) Bạn còn nhớ terrarium HTML của mình trông khá đơn giản chứ? CSS chính là nơi chúng ta biến cấu trúc cơ bản đó thành một thứ hấp dẫn về mặt thị giác. @@ -205,7 +205,7 @@ body { Mở công cụ phát triển của trình duyệt (F12), điều hướng đến tab Elements, và kiểm tra phần tử `

` của bạn. Bạn sẽ thấy rằng nó thừa hưởng font family từ body: -![font thừa hưởng](../../../../translated_images/vi/1.cc07a5cbe114ad1d.png) +![font thừa hưởng](../../../../translated_images/vi/1.cc07a5cbe114ad1d.webp) ✅ **Thời gian thử nghiệm**: Hãy thử đặt các thuộc tính có thể thừa hưởng khác trên `` như `color`, `line-height`, hoặc `text-align`. Điều gì xảy ra với tiêu đề và các phần tử khác? @@ -599,7 +599,7 @@ Sẵn sàng nâng cấp terrarium của bạn với hiệu ứng phản chiếu Bạn sẽ tạo các điểm sáng tinh tế mô phỏng cách ánh sáng phản chiếu trên bề mặt thủy tinh. Cách tiếp cận này tương tự như cách các họa sĩ thời Phục hưng như Jan van Eyck sử dụng ánh sáng và phản chiếu để làm cho thủy tinh được vẽ trông như ba chiều. Đây là mục tiêu của bạn: -![terrarium hoàn thiện](../../../../translated_images/vi/terrarium-final.2f07047ffc597d0a.png) +![terrarium hoàn thiện](../../../../translated_images/vi/terrarium-final.2f07047ffc597d0a.webp) **Thử thách của bạn:** - **Tạo** các hình oval màu trắng hoặc sáng để làm hiệu ứng phản chiếu thủy tinh diff --git a/translations/vi/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/vi/3-terrarium/3-intro-to-DOM-and-closures/README.md index ea5127fd4..3c38e4884 100644 --- a/translations/vi/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/vi/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -26,7 +26,7 @@ journey Complete terrarium: 5: Student ``` -![DOM và một closure](../../../../translated_images/vi/webdev101-js.10280393044d7eaa.png) +![DOM và một closure](../../../../translated_images/vi/webdev101-js.10280393044d7eaa.webp) > Sketchnote bởi [Tomomi Imura](https://twitter.com/girlie_mac) Chào mừng bạn đến với một trong những khía cạnh thú vị nhất của phát triển web - làm cho mọi thứ trở nên tương tác! Mô hình Đối tượng Tài liệu (DOM) giống như một cây cầu giữa HTML và JavaScript của bạn, và hôm nay chúng ta sẽ sử dụng nó để làm cho terrarium của bạn sống động. Khi Tim Berners-Lee tạo ra trình duyệt web đầu tiên, ông đã hình dung một web nơi các tài liệu có thể động và tương tác - DOM làm cho tầm nhìn đó trở thành hiện thực. @@ -105,7 +105,7 @@ flowchart TD style Q fill:#ffebee ``` -![Biểu diễn cây DOM](../../../../translated_images/vi/dom-tree.7daf0e763cbbba92.png) +![Biểu diễn cây DOM](../../../../translated_images/vi/dom-tree.7daf0e763cbbba92.webp) > Một biểu diễn của DOM và mã HTML tham chiếu nó. Từ [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -150,7 +150,7 @@ flowchart LR > 💡 **Hiểu về Closures**: Closures là một chủ đề quan trọng trong JavaScript, và nhiều nhà phát triển sử dụng chúng trong nhiều năm trước khi hiểu đầy đủ tất cả các khía cạnh lý thuyết. Hôm nay, chúng ta tập trung vào ứng dụng thực tế - bạn sẽ thấy closures xuất hiện tự nhiên khi chúng ta xây dựng các tính năng tương tác. Hiểu biết sẽ phát triển khi bạn thấy cách chúng giải quyết các vấn đề thực tế. -![Biểu diễn cây DOM](../../../../translated_images/vi/dom-tree.7daf0e763cbbba92.png) +![Biểu diễn cây DOM](../../../../translated_images/vi/dom-tree.7daf0e763cbbba92.webp) > Một biểu diễn của DOM và mã HTML tham chiếu nó. Từ [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -598,7 +598,7 @@ Bây giờ hãy kiểm tra terrarium tương tác của bạn! Mở tệp `index - **Hỗ trợ đa thiết bị**: Hoạt động trên máy tính và di động - **Ý thức về hiệu suất**: Không có rò rỉ bộ nhớ hay tính toán dư thừa -![terrarium hoàn chỉnh](../../../../translated_images/vi/terrarium-final.0920f16e87c13a84.png) +![terrarium hoàn chỉnh](../../../../translated_images/vi/terrarium-final.0920f16e87c13a84.webp) --- diff --git a/translations/vi/3-terrarium/solution/README.md b/translations/vi/3-terrarium/solution/README.md index 090b914bd..064dd3126 100644 --- a/translations/vi/3-terrarium/solution/README.md +++ b/translations/vi/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Một bài tập nhỏ về kéo và thả. Với một chút HTML, JS và CSS, bạn có thể tạo giao diện web, định kiểu và thêm tương tác. -![terrarium của tôi](../../../../translated_images/vi/screenshot_gray.0c796099a1f9f25e.png) +![terrarium của tôi](../../../../translated_images/vi/screenshot_gray.0c796099a1f9f25e.webp) ## Tín dụng diff --git a/translations/vi/5-browser-extension/1-about-browsers/README.md b/translations/vi/5-browser-extension/1-about-browsers/README.md index 40e1c34a4..15efd7a9a 100644 --- a/translations/vi/5-browser-extension/1-about-browsers/README.md +++ b/translations/vi/5-browser-extension/1-about-browsers/README.md @@ -26,7 +26,7 @@ journey Polish experience: 5: Student ``` -![Ghi chú hình ảnh về trình duyệt](../../../../translated_images/vi/browser.60317c9be8b7f84a.jpg) +![Ghi chú hình ảnh về trình duyệt](../../../../translated_images/vi/browser.60317c9be8b7f84a.webp) > Ghi chú hình ảnh bởi [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## Câu hỏi trước bài giảng @@ -79,7 +79,7 @@ Quá trình này giống như cách trình duyệt web đầu tiên, WorldWideWe ✅ **Một chút lịch sử**: Trình duyệt đầu tiên được gọi là 'WorldWideWeb' và được tạo ra bởi Sir Timothy Berners-Lee vào năm 1990. -![trình duyệt đầu tiên](../../../../translated_images/vi/earlybrowsers.d984b711cdf3a42d.jpg) +![trình duyệt đầu tiên](../../../../translated_images/vi/earlybrowsers.d984b711cdf3a42d.webp) > Một số trình duyệt đầu tiên, qua [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### Cách Trình duyệt Xử lý Nội dung Web @@ -198,7 +198,7 @@ quadrantChart Hiểu quy trình cài đặt tiện ích mở rộng giúp bạn dự đoán trải nghiệm người dùng khi họ cài đặt tiện ích mở rộng của bạn. Quy trình cài đặt được chuẩn hóa trên các trình duyệt hiện đại, với những biến thể nhỏ trong thiết kế giao diện. -![ảnh chụp màn hình trình duyệt Edge hiển thị trang edge://extensions mở và menu cài đặt mở](../../../../translated_images/vi/install-on-edge.d68781acaf0b3d3d.png) +![ảnh chụp màn hình trình duyệt Edge hiển thị trang edge://extensions mở và menu cài đặt mở](../../../../translated_images/vi/install-on-edge.d68781acaf0b3d3d.webp) > **Quan trọng**: Đảm bảo bật chế độ nhà phát triển và cho phép tiện ích mở rộng từ các cửa hàng khác khi thử nghiệm tiện ích mở rộng của riêng bạn. @@ -313,10 +313,10 @@ Bây giờ chúng ta sẽ xây dựng các thành phần giao diện người d ### Tổng quan về Giao diện Tiện ích Mở rộng **Màn hình Cấu hình** - Cấu hình người dùng lần đầu: -![ảnh chụp màn hình tiện ích mở rộng hoàn chỉnh mở trong trình duyệt, hiển thị một biểu mẫu với các trường nhập cho tên vùng và khóa API.](../../../../translated_images/vi/1.b6da8c1394b07491.png) +![ảnh chụp màn hình tiện ích mở rộng hoàn chỉnh mở trong trình duyệt, hiển thị một biểu mẫu với các trường nhập cho tên vùng và khóa API.](../../../../translated_images/vi/1.b6da8c1394b07491.webp) **Màn hình Kết quả** - Hiển thị dữ liệu dấu chân carbon: -![ảnh chụp màn hình tiện ích mở rộng hoàn chỉnh hiển thị các giá trị về sử dụng carbon và tỷ lệ nhiên liệu hóa thạch cho vùng US-NEISO.](../../../../translated_images/vi/2.1dae52ff08042246.png) +![ảnh chụp màn hình tiện ích mở rộng hoàn chỉnh hiển thị các giá trị về sử dụng carbon và tỷ lệ nhiên liệu hóa thạch cho vùng US-NEISO.](../../../../translated_images/vi/2.1dae52ff08042246.webp) ### Xây dựng Biểu mẫu Cấu hình diff --git a/translations/vi/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/vi/5-browser-extension/2-forms-browsers-local-storage/README.md index 0f2f8ac01..c95af4dff 100644 --- a/translations/vi/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/vi/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -268,7 +268,7 @@ stateDiagram-v2 ClearStorage --> FirstTime: Back to setup ``` -![Bảng bộ nhớ cục bộ](../../../../translated_images/vi/localstorage.472f8147b6a3f8d1.png) +![Bảng bộ nhớ cục bộ](../../../../translated_images/vi/localstorage.472f8147b6a3f8d1.webp) > ⚠️ **Cân nhắc về bảo mật**: Trong các ứng dụng sản xuất, việc lưu trữ khóa API trong LocalStorage gây rủi ro bảo mật vì JavaScript có thể truy cập dữ liệu này. Đối với mục đích học tập, cách tiếp cận này hoạt động tốt, nhưng các ứng dụng thực tế nên sử dụng lưu trữ phía máy chủ an toàn cho thông tin đăng nhập nhạy cảm. diff --git a/translations/vi/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/vi/5-browser-extension/3-background-tasks-and-performance/README.md index d95202d0e..5eb7e216b 100644 --- a/translations/vi/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/vi/5-browser-extension/3-background-tasks-and-performance/README.md @@ -126,7 +126,7 @@ flowchart LR Hãy thử điều này. Mở một trang web (Microsoft.com hoạt động tốt cho việc này) và nhấp vào nút 'Record'. Bây giờ làm mới trang và xem profiler ghi lại mọi thứ xảy ra. Khi bạn dừng ghi, bạn sẽ thấy một phân tích chi tiết về cách trình duyệt 'scripts', 'renders', và 'paints' trang web. Nó làm tôi nhớ đến cách trung tâm điều khiển giám sát mọi hệ thống trong một lần phóng tên lửa - bạn nhận được dữ liệu thời gian thực về chính xác những gì đang xảy ra và khi nào. -![Edge profiler](../../../../translated_images/vi/profiler.5a4a62479c5df01c.png) +![Edge profiler](../../../../translated_images/vi/profiler.5a4a62479c5df01c.webp) ✅ [Tài liệu Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) có rất nhiều chi tiết nếu bạn muốn tìm hiểu sâu hơn @@ -136,11 +136,11 @@ Chọn các phần của dòng thời gian profile để phóng to các sự ki Lấy một ảnh chụp nhanh về hiệu suất trang của bạn bằng cách chọn một phần của dòng thời gian profile và nhìn vào bảng tóm tắt: -![Edge profiler snapshot](../../../../translated_images/vi/snapshot.97750180ebcad737.png) +![Edge profiler snapshot](../../../../translated_images/vi/snapshot.97750180ebcad737.webp) Kiểm tra bảng Event Log để xem liệu có sự kiện nào mất hơn 15 ms: -![Edge event log](../../../../translated_images/vi/log.804026979f3707e0.png) +![Edge event log](../../../../translated_images/vi/log.804026979f3707e0.webp) ✅ Làm quen với profiler của bạn! Mở công cụ dành cho nhà phát triển trên trang này và xem liệu có bất kỳ nút thắt nào không. Tài nguyên nào tải chậm nhất? Nhanh nhất? diff --git a/translations/vi/5-browser-extension/README.md b/translations/vi/5-browser-extension/README.md index 37ce53aff..efd1293fa 100644 --- a/translations/vi/5-browser-extension/README.md +++ b/translations/vi/5-browser-extension/README.md @@ -23,7 +23,7 @@ Tiện ích này có thể được người dùng gọi bất kỳ lúc nào sa ### Ghi nhận -![một tiện ích mở rộng trình duyệt màu xanh lá cây](../../../translated_images/vi/extension-screenshot.0e7f5bfa110e92e3.png) +![một tiện ích mở rộng trình duyệt màu xanh lá cây](../../../translated_images/vi/extension-screenshot.0e7f5bfa110e92e3.webp) ## Ghi nhận diff --git a/translations/vi/5-browser-extension/solution/README.md b/translations/vi/5-browser-extension/solution/README.md index 872019040..70c740ef5 100644 --- a/translations/vi/5-browser-extension/solution/README.md +++ b/translations/vi/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Sử dụng API C02 Signal của tmrow để theo dõi mức tiêu thụ điện, bạn có thể xây dựng một tiện ích mở rộng trình duyệt để nhận nhắc nhở ngay trong trình duyệt về mức độ tiêu thụ điện năng trong khu vực của bạn. Việc sử dụng tiện ích này một cách linh hoạt sẽ giúp bạn đưa ra quyết định về các hoạt động của mình dựa trên thông tin này. -![ảnh chụp tiện ích](../../../../translated_images/vi/extension-screenshot.0e7f5bfa110e92e3.png) +![ảnh chụp tiện ích](../../../../translated_images/vi/extension-screenshot.0e7f5bfa110e92e3.webp) ## Bắt Đầu @@ -31,7 +31,7 @@ npm run build Để cài đặt trên Edge, sử dụng menu 'ba chấm' ở góc trên bên phải của trình duyệt để tìm bảng Tiện Ích Mở Rộng (Extensions). Từ đó, chọn 'Tải Tiện Ích Không Đóng Gói' (Load Unpacked) để tải một tiện ích mới. Mở thư mục 'dist' khi được nhắc và tiện ích sẽ được tải. Để sử dụng, bạn cần một khóa API cho API của CO2 Signal ([lấy một khóa qua email tại đây](https://www.co2signal.com/) - nhập email của bạn vào ô trên trang này) và [mã khu vực của bạn](http://api.electricitymap.org/v3/zones) tương ứng với [Electricity Map](https://www.electricitymap.org/map) (ví dụ, ở Boston, tôi sử dụng 'US-NEISO'). -![cài đặt](../../../../translated_images/vi/install-on-edge.78634f02842c4828.png) +![cài đặt](../../../../translated_images/vi/install-on-edge.78634f02842c4828.webp) Khi bạn đã nhập khóa API và mã khu vực vào giao diện tiện ích, chấm màu trong thanh tiện ích mở rộng của trình duyệt sẽ thay đổi để phản ánh mức tiêu thụ năng lượng của khu vực bạn và cung cấp gợi ý về các hoạt động tiêu tốn năng lượng phù hợp. Ý tưởng đằng sau hệ thống 'chấm màu' này được lấy cảm hứng từ tiện ích mở rộng [Energy Lollipop](https://energylollipop.com/) dành cho lượng khí thải ở California. diff --git a/translations/vi/5-browser-extension/solution/translation/README.fr.md b/translations/vi/5-browser-extension/solution/translation/README.fr.md index ff504dc69..a8841d4af 100644 --- a/translations/vi/5-browser-extension/solution/translation/README.fr.md +++ b/translations/vi/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Sử dụng API C02 Signal của tmrow để theo dõi mức tiêu thụ điện năng, hãy tạo một tiện ích mở rộng trình duyệt để bạn có thể nhận được thông báo trực tiếp trong trình duyệt về mức tiêu thụ điện năng của khu vực bạn. Việc sử dụng tiện ích mở rộng này sẽ giúp bạn đưa ra quyết định về các hoạt động của mình dựa trên thông tin này. -![ảnh chụp tiện ích mở rộng](../../../../../translated_images/vi/extension-screenshot.0e7f5bfa110e92e3.png) +![ảnh chụp tiện ích mở rộng](../../../../../translated_images/vi/extension-screenshot.0e7f5bfa110e92e3.webp) ## Bắt đầu @@ -31,7 +31,7 @@ npm run build Để cài đặt trên Edge, sử dụng menu 'ba chấm' ở góc trên bên phải của trình duyệt để tìm bảng điều khiển Tiện ích mở rộng. Từ đó, chọn 'Tải tiện ích mở rộng chưa nén' để tải một tiện ích mới. Mở thư mục 'dist' khi được nhắc và tiện ích sẽ được tải. Để sử dụng, bạn cần một khóa API cho API CO2 Signal ([lấy một khóa qua email tại đây](https://www.co2signal.com/) - nhập email của bạn vào ô trên trang này) và [mã khu vực của bạn](http://api.electricitymap.org/v3/zones) tương ứng với [Bản đồ điện năng](https://www.electricitymap.org/map) (ví dụ, ở Boston, tôi sử dụng 'US-NEISO'). -![cài đặt](../../../../../translated_images/vi/install-on-edge.78634f02842c4828.png) +![cài đặt](../../../../../translated_images/vi/install-on-edge.78634f02842c4828.webp) Sau khi nhập khóa API và khu vực vào giao diện tiện ích mở rộng, điểm màu trong thanh tiện ích mở rộng của trình duyệt sẽ thay đổi để phản ánh mức tiêu thụ năng lượng của khu vực bạn và cung cấp cho bạn một chỉ báo về các hoạt động tiêu thụ năng lượng mà bạn nên thực hiện. Ý tưởng đằng sau hệ thống 'điểm' này được lấy cảm hứng từ [tiện ích mở rộng Energy Lollipop](https://energylollipop.com/) dành cho lượng khí thải ở California. diff --git a/translations/vi/5-browser-extension/solution/translation/README.hi.md b/translations/vi/5-browser-extension/solution/translation/README.hi.md index 84574e01c..86c6b7ce5 100644 --- a/translations/vi/5-browser-extension/solution/translation/README.hi.md +++ b/translations/vi/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Sử dụng API tín hiệu CO2 của tmrow để theo dõi mức tiêu thụ điện năng, xây dựng một tiện ích mở rộng trình duyệt nhằm nhắc nhở bạn về mức độ tiêu thụ điện năng trong khu vực của bạn ngay trong trình duyệt. Việc sử dụng tiện ích này sẽ giúp bạn đưa ra quyết định dựa trên thông tin đó về các hoạt động của mình. -![Ảnh chụp màn hình tiện ích mở rộng](../../../../../translated_images/vi/extension-screenshot.0e7f5bfa110e92e3.png) +![Ảnh chụp màn hình tiện ích mở rộng](../../../../../translated_images/vi/extension-screenshot.0e7f5bfa110e92e3.webp) ## Bắt đầu @@ -31,7 +31,7 @@ npm run build Để cài đặt trên Edge, sử dụng menu 'ba chấm' ở góc trên bên phải của trình duyệt để tìm bảng tiện ích mở rộng. Từ đó, chọn 'Load unpacked' để tải một tiện ích mở rộng mới. Khi được nhắc, mở thư mục 'dist' và tiện ích mở rộng sẽ được tải. Để sử dụng, bạn cần một khóa API của CO2 Signal ([nhận qua email tại đây](https://www.co2signal.com/) - nhập email của bạn vào hộp trên trang này) và [mã khu vực của bạn](http://api.electricitymap.org/v3/zones) từ [Electricity Map](https://www.electricitymap.org/map) (ví dụ: ở Boston, tôi sử dụng 'US-NEISO'). -![Cài đặt](../../../../../translated_images/vi/install-on-edge.78634f02842c4828.png) +![Cài đặt](../../../../../translated_images/vi/install-on-edge.78634f02842c4828.webp) Sau khi nhập khóa API và mã khu vực vào giao diện tiện ích mở rộng, dấu chấm màu trong thanh tiện ích mở rộng của trình duyệt sẽ thay đổi để phản ánh mức tiêu thụ năng lượng của khu vực bạn và cung cấp cho bạn một chỉ báo về các hoạt động tiêu thụ năng lượng phù hợp với hiệu suất của bạn. Ý tưởng về hệ thống 'dấu chấm' này được lấy cảm hứng từ tiện ích mở rộng [Energy Lollipop](https://energylollipop.com/) dành cho lượng khí thải ở California. diff --git a/translations/vi/5-browser-extension/solution/translation/README.it.md b/translations/vi/5-browser-extension/solution/translation/README.it.md index 804d34897..531e6b994 100644 --- a/translations/vi/5-browser-extension/solution/translation/README.it.md +++ b/translations/vi/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Chúng ta sẽ sử dụng API Signal CO2 của tmrow để theo dõi việc sử dụng điện và tạo một tiện ích mở rộng cho trình duyệt, giúp bạn nhận được thông báo trực tiếp trên trình duyệt về mức độ tiêu thụ điện năng trong khu vực của mình. Việc sử dụng tiện ích mở rộng này sẽ giúp bạn đánh giá các hoạt động của mình dựa trên thông tin này. -![ảnh chụp màn hình tiện ích mở rộng](../../../../../translated_images/vi/extension-screenshot.0e7f5bfa110e92e3.png) +![ảnh chụp màn hình tiện ích mở rộng](../../../../../translated_images/vi/extension-screenshot.0e7f5bfa110e92e3.webp) ## Bắt đầu @@ -31,7 +31,7 @@ npm run build Để cài đặt trên Edge, sử dụng menu "ba chấm" ở góc trên bên phải của trình duyệt để tìm bảng điều khiển Tiện ích mở rộng. Nếu chưa được kích hoạt, hãy bật Chế độ nhà phát triển (ở góc dưới bên trái). Chọn "Tải không nén" để tải một tiện ích mở rộng mới. Mở thư mục "dist" khi được nhắc và tiện ích mở rộng sẽ được tải lên. Để sử dụng, bạn sẽ cần một khóa API cho API CO2 Signal (bạn có thể [nhận tại đây qua email](https://www.co2signal.com/) - nhập email của bạn vào ô trên trang này) và [mã khu vực của bạn](http://api.electricitymap.org/v3/zones) tương ứng với [bản đồ điện](https://www.electricitymap.org/map) (ví dụ, ở Boston, mã là "US-NEISO"). -![cài đặt](../../../../../translated_images/vi/install-on-edge.78634f02842c4828.png) +![cài đặt](../../../../../translated_images/vi/install-on-edge.78634f02842c4828.webp) Khi bạn đã nhập khóa API và khu vực vào giao diện của tiện ích mở rộng, chấm màu trong thanh tiện ích mở rộng của trình duyệt sẽ thay đổi để phản ánh mức tiêu thụ năng lượng của khu vực và cung cấp gợi ý về những hoạt động tiêu tốn nhiều năng lượng nào phù hợp để thực hiện. Ý tưởng đằng sau hệ thống "chấm" này được lấy cảm hứng từ [tiện ích mở rộng Energy Lollipop](https://energylollipop.com/) dành cho lượng khí thải ở California. diff --git a/translations/vi/5-browser-extension/solution/translation/README.ja.md b/translations/vi/5-browser-extension/solution/translation/README.ja.md index 38fd85cd5..eb2396d17 100644 --- a/translations/vi/5-browser-extension/solution/translation/README.ja.md +++ b/translations/vi/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Xây dựng một tiện ích mở rộng trình duyệt để hiển thị lời nhắc trên trình duyệt về mức độ sử dụng điện trong khu vực của bạn, sử dụng API CO2 Signal của tmrow để theo dõi lượng điện tiêu thụ. Bằng cách sử dụng tiện ích mở rộng này, bạn có thể đưa ra quyết định về các hoạt động của mình dựa trên thông tin này. -![extension screenshot](../../../../../translated_images/vi/extension-screenshot.0e7f5bfa110e92e3.png) +![extension screenshot](../../../../../translated_images/vi/extension-screenshot.0e7f5bfa110e92e3.webp) ## Bắt đầu @@ -31,7 +31,7 @@ npm run build Để cài đặt trên Edge, hãy tìm bảng điều khiển "Tiện ích mở rộng" từ menu "ba chấm" ở góc trên bên phải của trình duyệt. Từ đó, chọn "Load Unpacked" để tải tiện ích mở rộng mới. Khi được nhắc, mở thư mục "dist" và tiện ích mở rộng sẽ được tải. Để sử dụng, bạn cần một API key của CO2 Signal ([lấy tại đây qua email](https://www.co2signal.com/) - nhập email của bạn vào ô trên trang này) và [mã khu vực tương ứng](http://api.electricitymap.org/v3/zones) từ [Electricity Map](https://www.electricitymap.org/map) (ví dụ, ở Boston, sử dụng 'US-NEISO'). -![installing](../../../../../translated_images/vi/install-on-edge.78634f02842c4828.png) +![installing](../../../../../translated_images/vi/install-on-edge.78634f02842c4828.webp) Sau khi nhập API key và khu vực vào giao diện tiện ích, một chấm màu sẽ xuất hiện trên thanh tiện ích mở rộng của trình duyệt, thay đổi màu sắc để phản ánh mức độ sử dụng năng lượng trong khu vực của bạn. Điều này giúp bạn biết khi nào là thời điểm thích hợp để thực hiện các hoạt động cần nhiều năng lượng. Ý tưởng về hệ thống "chấm màu" này được lấy cảm hứng từ [Energy Lollipop extension](https://energylollipop.com/) dành cho lượng phát thải ở California. diff --git a/translations/vi/5-browser-extension/solution/translation/README.ms.md b/translations/vi/5-browser-extension/solution/translation/README.ms.md index e3cb165a7..ad8e8982f 100644 --- a/translations/vi/5-browser-extension/solution/translation/README.ms.md +++ b/translations/vi/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Sử dụng API CO2 Signal của tmrow để theo dõi mức tiêu thụ điện năng, xây dựng tiện ích mở rộng trình duyệt để bạn có thể nhận được cảnh báo trong trình duyệt về mức độ tiêu thụ điện năng của khu vực bạn. Việc sử dụng tiện ích này sẽ giúp bạn cân nhắc các hoạt động của mình dựa trên thông tin này. -![ảnh chụp tiện ích mở rộng trình duyệt](../../../../../translated_images/vi/extension-screenshot.0e7f5bfa110e92e3.png) +![ảnh chụp tiện ích mở rộng trình duyệt](../../../../../translated_images/vi/extension-screenshot.0e7f5bfa110e92e3.webp) ## Bắt Đầu Từ Đây @@ -31,7 +31,7 @@ npm run build Để cài đặt trên Edge, sử dụng menu 'ba chấm' ở góc trên bên phải của trình duyệt để tìm bảng Tiện Ích Mở Rộng. Từ đó, chọn 'Load Unpacked' để tải tiện ích mở rộng mới. Mở thư mục 'dist' theo yêu cầu và tiện ích mở rộng sẽ được tải. Để sử dụng, bạn cần một khóa API cho API CO2 Signal ([lấy một khóa qua email tại đây](https://www.co2signal.com/) - nhập email của bạn vào ô trên trang này) và [mã khu vực của bạn](http://api.electricitymap.org/v3/zones) tương ứng với [Bản Đồ Điện](https://www.electricitymap.org/map) (ở Boston, ví dụ, tôi sử dụng 'US-NEISO'). -![đang tải xuống](../../../../../translated_images/vi/install-on-edge.78634f02842c4828.png) +![đang tải xuống](../../../../../translated_images/vi/install-on-edge.78634f02842c4828.webp) Sau khi khóa API và khu vực được nhập vào giao diện tiện ích mở rộng, điểm màu trên thanh tiện ích mở rộng của trình duyệt sẽ thay đổi để phản ánh mức tiêu thụ năng lượng của khu vực bạn và cung cấp cho bạn gợi ý về các hoạt động phù hợp với mức tiêu thụ đó. Ý tưởng về hệ thống 'điểm màu' này được lấy cảm hứng từ [tiện ích mở rộng trình duyệt Lollipop Năng Lượng](https://energylollipop.com/) dành cho khu vực California. diff --git a/translations/vi/5-browser-extension/start/README.md b/translations/vi/5-browser-extension/start/README.md index 9fd7dce64..836533803 100644 --- a/translations/vi/5-browser-extension/start/README.md +++ b/translations/vi/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Sử dụng API C02 Signal của tmrow để theo dõi mức tiêu thụ điện, bạn sẽ xây dựng một tiện ích mở rộng trình duyệt để có thể nhận được nhắc nhở ngay trong trình duyệt về mức độ tiêu thụ điện năng của khu vực bạn. Việc sử dụng tiện ích này một cách linh hoạt sẽ giúp bạn đưa ra quyết định về các hoạt động của mình dựa trên thông tin này. -![ảnh chụp tiện ích](../../../../translated_images/vi/extension-screenshot.0e7f5bfa110e92e3.png) +![ảnh chụp tiện ích](../../../../translated_images/vi/extension-screenshot.0e7f5bfa110e92e3.webp) ## Bắt đầu @@ -31,7 +31,7 @@ npm run build Để cài đặt trên Edge, sử dụng menu 'ba chấm' ở góc trên bên phải của trình duyệt để tìm bảng điều khiển Tiện ích mở rộng. Từ đó, chọn 'Tải không đóng gói' để tải một tiện ích mới. Mở thư mục 'dist' khi được nhắc và tiện ích sẽ được tải. Để sử dụng, bạn cần một API key cho API của CO2 Signal ([lấy tại đây qua email](https://www.co2signal.com/) - nhập email của bạn vào ô trên trang này) và [mã khu vực của bạn](http://api.electricitymap.org/v3/zones) tương ứng với [Electricity Map](https://www.electricitymap.org/map) (ví dụ, ở Boston, tôi sử dụng 'US-NEISO'). -![cài đặt](../../../../translated_images/vi/install-on-edge.78634f02842c4828.png) +![cài đặt](../../../../translated_images/vi/install-on-edge.78634f02842c4828.webp) Khi API key và mã khu vực được nhập vào giao diện tiện ích, chấm màu trong thanh tiện ích trình duyệt sẽ thay đổi để phản ánh mức tiêu thụ năng lượng của khu vực bạn và cung cấp cho bạn gợi ý về các hoạt động tiêu tốn năng lượng phù hợp. Ý tưởng đằng sau hệ thống 'chấm' này được lấy cảm hứng từ tiện ích mở rộng [Energy Lollipop](https://energylollipop.com/) dành cho lượng khí thải ở California. diff --git a/translations/vi/6-space-game/2-drawing-to-canvas/README.md b/translations/vi/6-space-game/2-drawing-to-canvas/README.md index 83ff4c68b..c01de2310 100644 --- a/translations/vi/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/vi/6-space-game/2-drawing-to-canvas/README.md @@ -108,7 +108,7 @@ quadrantChart UI Elements: [0.9, 0.1] ``` -![lưới của canvas](../../../../translated_images/vi/canvas_grid.5f209da785ded492.png) +![lưới của canvas](../../../../translated_images/vi/canvas_grid.5f209da785ded492.webp) > Hình ảnh từ [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) Để vẽ trên phần tử canvas, bạn sẽ làm theo quy trình ba bước giống nhau, tạo nền tảng cho tất cả đồ họa canvas. Một khi bạn làm điều này vài lần, nó sẽ trở thành bản năng: @@ -329,11 +329,11 @@ Bạn sẽ xây dựng một trang web với một phần tử Canvas. Nó sẽ - Tàu nhân vật chính - ![Tàu nhân vật chính](../../../../translated_images/vi/player.dd24c1afa8c71e9b.png) + ![Tàu nhân vật chính](../../../../translated_images/vi/player.dd24c1afa8c71e9b.webp) - 5*5 quái vật - ![Tàu quái vật](../../../../translated_images/vi/enemyShip.5df2a822c16650c2.png) + ![Tàu quái vật](../../../../translated_images/vi/enemyShip.5df2a822c16650c2.webp) ### Các bước được khuyến nghị để bắt đầu phát triển @@ -470,7 +470,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { Kết quả hoàn chỉnh sẽ trông như sau: -![Màn hình đen với một nhân vật chính và 5*5 quái vật](../../../../translated_images/vi/partI-solution.36c53b48c9ffae2a.png) +![Màn hình đen với một nhân vật chính và 5*5 quái vật](../../../../translated_images/vi/partI-solution.36c53b48c9ffae2a.webp) ## Giải pháp diff --git a/translations/vi/6-space-game/5-keeping-score/README.md b/translations/vi/6-space-game/5-keeping-score/README.md index b2dc1ee6c..c0cd62334 100644 --- a/translations/vi/6-space-game/5-keeping-score/README.md +++ b/translations/vi/6-space-game/5-keeping-score/README.md @@ -34,7 +34,7 @@ Việc hiển thị trực quan rất quan trọng - hiển thị biểu tượn Bây giờ chúng ta sẽ triển khai các hệ thống phản hồi cốt lõi để giữ người chơi tham gia: - **Hệ thống điểm số**: Mỗi tàu địch bị tiêu diệt sẽ thưởng 100 điểm (số tròn dễ tính toán hơn cho người chơi). Điểm số sẽ hiển thị ở góc dưới bên trái. -- **Bộ đếm mạng sống**: Nhân vật chính của bạn bắt đầu với ba mạng sống - một tiêu chuẩn được thiết lập bởi các trò chơi arcade đầu tiên để cân bằng giữa thử thách và khả năng chơi. Mỗi lần va chạm với kẻ địch sẽ mất một mạng sống. Chúng ta sẽ hiển thị số mạng sống còn lại ở góc dưới bên phải bằng biểu tượng tàu ![life image](../../../../translated_images/vi/life.6fb9f50d53ee0413.png). +- **Bộ đếm mạng sống**: Nhân vật chính của bạn bắt đầu với ba mạng sống - một tiêu chuẩn được thiết lập bởi các trò chơi arcade đầu tiên để cân bằng giữa thử thách và khả năng chơi. Mỗi lần va chạm với kẻ địch sẽ mất một mạng sống. Chúng ta sẽ hiển thị số mạng sống còn lại ở góc dưới bên phải bằng biểu tượng tàu ![life image](../../../../translated_images/vi/life.6fb9f50d53ee0413.webp). ## Bắt đầu xây dựng! diff --git a/translations/vi/7-bank-project/1-template-route/README.md b/translations/vi/7-bank-project/1-template-route/README.md index 2688e6e8c..fed2da7bd 100644 --- a/translations/vi/7-bank-project/1-template-route/README.md +++ b/translations/vi/7-bank-project/1-template-route/README.md @@ -652,7 +652,7 @@ sequenceDiagram Sử dụng `history.pushState` tạo các mục mới trong lịch sử điều hướng của trình duyệt. Bạn có thể kiểm tra điều đó bằng cách giữ *nút quay lại* của trình duyệt, nó sẽ hiển thị như sau: -![Ảnh chụp màn hình lịch sử điều hướng](../../../../translated_images/vi/history.7fdabbafa521e064.png) +![Ảnh chụp màn hình lịch sử điều hướng](../../../../translated_images/vi/history.7fdabbafa521e064.webp) Nếu bạn thử nhấp vào nút quay lại vài lần, bạn sẽ thấy rằng URL hiện tại thay đổi và lịch sử được cập nhật, nhưng cùng một mẫu vẫn được hiển thị. diff --git a/translations/vi/7-bank-project/2-forms/README.md b/translations/vi/7-bank-project/2-forms/README.md index 7c7a5ea56..61d12a3f5 100644 --- a/translations/vi/7-bank-project/2-forms/README.md +++ b/translations/vi/7-bank-project/2-forms/README.md @@ -295,7 +295,7 @@ Hãy cùng xem điều gì thực sự xảy ra khi ai đó nhấn nút gửi. 2. Quan sát các thay đổi trong thanh địa chỉ của trình duyệt 3. Lưu ý cách trang tải lại và dữ liệu xuất hiện trong URL -![Ảnh chụp màn hình thay đổi URL của trình duyệt sau khi nhấn nút Đăng ký](../../../../translated_images/vi/click-register.e89a30bf0d4bc9ca.png) +![Ảnh chụp màn hình thay đổi URL của trình duyệt sau khi nhấn nút Đăng ký](../../../../translated_images/vi/click-register.e89a30bf0d4bc9ca.webp) ### So sánh phương thức HTTP @@ -350,7 +350,7 @@ Hãy cấu hình biểu mẫu đăng ký của bạn để giao tiếp đúng c 2. **Nhấn** nút "Tạo tài khoản" 3. **Quan sát** phản hồi của máy chủ trong trình duyệt của bạn -![Một cửa sổ trình duyệt tại địa chỉ localhost:5000/api/accounts, hiển thị chuỗi JSON với dữ liệu người dùng](../../../../translated_images/vi/form-post.61de4ca1b964d91a.png) +![Một cửa sổ trình duyệt tại địa chỉ localhost:5000/api/accounts, hiển thị chuỗi JSON với dữ liệu người dùng](../../../../translated_images/vi/form-post.61de4ca1b964d91a.webp) **Những gì bạn nên thấy:** - **Trình duyệt chuyển hướng** đến URL điểm cuối API @@ -615,7 +615,7 @@ async function register() { 3. **Nhấp** vào "Tạo tài khoản" 4. **Quan sát** các thông báo trên bảng điều khiển và phản hồi của người dùng -![Ảnh chụp màn hình hiển thị thông báo nhật ký trong bảng điều khiển trình duyệt](../../../../translated_images/vi/browser-console.efaf0b51aaaf6778.png) +![Ảnh chụp màn hình hiển thị thông báo nhật ký trong bảng điều khiển trình duyệt](../../../../translated_images/vi/browser-console.efaf0b51aaaf6778.webp) **Những gì bạn sẽ thấy:** - **Trạng thái tải** xuất hiện trên nút gửi @@ -790,7 +790,7 @@ Hãy nâng cao biểu mẫu đăng ký của bạn với xác thực mạnh mẽ 3. **Thử** các ký tự đặc biệt trong trường tên người dùng 4. **Nhập** số dư âm -![Ảnh chụp màn hình hiển thị lỗi xác thực khi cố gắng gửi biểu mẫu](../../../../translated_images/vi/validation-error.8bd23e98d416c22f.png) +![Ảnh chụp màn hình hiển thị lỗi xác thực khi cố gắng gửi biểu mẫu](../../../../translated_images/vi/validation-error.8bd23e98d416c22f.webp) **Những gì bạn sẽ quan sát:** - **Trình duyệt hiển thị** các thông báo xác thực gốc @@ -940,7 +940,7 @@ Hiển thị thông báo lỗi trong HTML nếu người dùng đã tồn tại. Dưới đây là một ví dụ về giao diện trang đăng nhập cuối cùng sau khi thêm một chút kiểu dáng: -![Ảnh chụp màn hình của trang đăng nhập sau khi thêm kiểu dáng CSS](../../../../translated_images/vi/result.96ef01f607bf856a.png) +![Ảnh chụp màn hình của trang đăng nhập sau khi thêm kiểu dáng CSS](../../../../translated_images/vi/result.96ef01f607bf856a.webp) ## Câu hỏi sau bài giảng diff --git a/translations/vi/7-bank-project/3-data/README.md b/translations/vi/7-bank-project/3-data/README.md index 0154746b9..f9a87e225 100644 --- a/translations/vi/7-bank-project/3-data/README.md +++ b/translations/vi/7-bank-project/3-data/README.md @@ -160,7 +160,7 @@ sequenceDiagram Browser->>User: Displays new page (flash/reload) ``` -![Quy trình cập nhật trong ứng dụng nhiều trang](../../../../translated_images/vi/mpa.7f7375a1a2d4aa77.png) +![Quy trình cập nhật trong ứng dụng nhiều trang](../../../../translated_images/vi/mpa.7f7375a1a2d4aa77.webp) **Tại sao cách tiếp cận này cảm thấy cồng kềnh:** - Mỗi lần nhấp chuột đều yêu cầu xây dựng lại toàn bộ trang từ đầu @@ -187,7 +187,7 @@ sequenceDiagram Browser->>User: Shows updated content (no reload) ``` -![Quy trình cập nhật trong ứng dụng một trang](../../../../translated_images/vi/spa.268ec73b41f992c2.png) +![Quy trình cập nhật trong ứng dụng một trang](../../../../translated_images/vi/spa.268ec73b41f992c2.webp) **Tại sao SPA cảm thấy tốt hơn:** - Chỉ những phần thực sự thay đổi mới được cập nhật (thông minh, đúng không?) @@ -523,7 +523,7 @@ if (data.error) { Bây giờ khi bạn thử với tài khoản không hợp lệ, bạn sẽ thấy một thông báo lỗi hữu ích ngay trên trang! -![Ảnh chụp màn hình hiển thị thông báo lỗi trong quá trình đăng nhập](../../../../translated_images/vi/login-error.416fe019b36a6327.png) +![Ảnh chụp màn hình hiển thị thông báo lỗi trong quá trình đăng nhập](../../../../translated_images/vi/login-error.416fe019b36a6327.webp) #### Bước 4: Tạo Sự Bao Gồm Với Khả Năng Tiếp Cận @@ -958,7 +958,7 @@ Sẵn sàng nâng cấp ứng dụng ngân hàng của bạn lên một tầm ca Dưới đây là hình ảnh bảng điều khiển được chỉnh sửa: -![Ảnh chụp màn hình ví dụ về kết quả bảng điều khiển sau khi thêm kiểu dáng](../../../../translated_images/vi/screen2.123c82a831a1d14a.png) +![Ảnh chụp màn hình ví dụ về kết quả bảng điều khiển sau khi thêm kiểu dáng](../../../../translated_images/vi/screen2.123c82a831a1d14a.webp) Đừng cảm thấy rằng bạn phải làm giống hệt như vậy - hãy sử dụng nó làm nguồn cảm hứng và tạo dấu ấn riêng của bạn! diff --git a/translations/vi/7-bank-project/4-state-management/README.md b/translations/vi/7-bank-project/4-state-management/README.md index 3a0b8d251..b238eb13c 100644 --- a/translations/vi/7-bank-project/4-state-management/README.md +++ b/translations/vi/7-bank-project/4-state-management/README.md @@ -190,7 +190,7 @@ Giống như thiết kế ngăn cách của Titanic tưởng chừng như mạnh Thay vì chạy vòng quanh, chúng ta sẽ tạo một hệ thống **quản lý trạng thái tập trung**. Hãy nghĩ về nó như có một người thực sự tổ chức chịu trách nhiệm về tất cả những thứ quan trọng: -![Sơ đồ hiển thị luồng dữ liệu giữa HTML, hành động người dùng và trạng thái](../../../../translated_images/vi/data-flow.fa2354e0908fecc8.png) +![Sơ đồ hiển thị luồng dữ liệu giữa HTML, hành động người dùng và trạng thái](../../../../translated_images/vi/data-flow.fa2354e0908fecc8.webp) ```mermaid flowchart TD @@ -803,7 +803,7 @@ Thử thách này sẽ giúp bạn suy nghĩ như một nhà phát triển chuy Dưới đây là kết quả ví dụ sau khi hoàn thành bài tập: -![Ảnh chụp màn hình hiển thị hộp thoại "Thêm giao dịch" ví dụ](../../../../translated_images/vi/dialog.93bba104afeb79f1.png) +![Ảnh chụp màn hình hiển thị hộp thoại "Thêm giao dịch" ví dụ](../../../../translated_images/vi/dialog.93bba104afeb79f1.webp) --- diff --git a/translations/vi/7-bank-project/4-state-management/assignment.md b/translations/vi/7-bank-project/4-state-management/assignment.md index a96a70b0d..cbd722b91 100644 --- a/translations/vi/7-bank-project/4-state-management/assignment.md +++ b/translations/vi/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ Tham khảo [tài liệu API máy chủ](../api/README.md) để biết: **Kết quả mong đợi:** Sau khi hoàn thành bài tập này, ứng dụng ngân hàng của bạn sẽ có tính năng "Thêm giao dịch" hoạt động đầy đủ, trông chuyên nghiệp và hoạt động mượt mà: -![Ảnh chụp màn hình hiển thị ví dụ về hộp thoại "Thêm giao dịch"](../../../../translated_images/vi/dialog.93bba104afeb79f1.png) +![Ảnh chụp màn hình hiển thị ví dụ về hộp thoại "Thêm giao dịch"](../../../../translated_images/vi/dialog.93bba104afeb79f1.webp) ## Kiểm tra triển khai của bạn diff --git a/translations/vi/7-bank-project/README.md b/translations/vi/7-bank-project/README.md index 221177a02..c98da17c9 100644 --- a/translations/vi/7-bank-project/README.md +++ b/translations/vi/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Trong dự án này, bạn sẽ học cách xây dựng một ngân hàng giả tưởng. Những bài học này bao gồm hướng dẫn về cách thiết kế ứng dụng web và cung cấp các tuyến đường, xây dựng biểu mẫu, quản lý trạng thái, và lấy dữ liệu từ API để truy xuất thông tin của ngân hàng. -| ![Screen1](../../../translated_images/vi/screen1.baccbba0f1f93364.png) | ![Screen2](../../../translated_images/vi/screen2.123c82a831a1d14a.png) | +| ![Screen1](../../../translated_images/vi/screen1.baccbba0f1f93364.webp) | ![Screen2](../../../translated_images/vi/screen2.123c82a831a1d14a.webp) | |--------------------------------|--------------------------------| ## Các bài học diff --git a/translations/vi/8-code-editor/1-using-a-code-editor/README.md b/translations/vi/8-code-editor/1-using-a-code-editor/README.md index 0155c4027..5db75ce38 100644 --- a/translations/vi/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/vi/8-code-editor/1-using-a-code-editor/README.md @@ -185,7 +185,7 @@ Giống như cách điện thoại của Alexander Graham Bell kết nối các Khi mọi thứ đã tải lên, bạn sẽ thấy một không gian làm việc sạch sẽ được thiết kế để giúp bạn tập trung vào điều quan trọng – mã của bạn! -![Giao diện mặc định của VSCode.dev](../../../../translated_images/vi/default-vscode-dev.5d06881d65c1b323.png) +![Giao diện mặc định của VSCode.dev](../../../../translated_images/vi/default-vscode-dev.5d06881d65c1b323.webp) **Đây là chuyến tham quan khu vực của bạn:** - **Thanh Hoạt Động** (dải bên trái): Điều hướng chính của bạn với Explorer 📁, Tìm kiếm 🔍, Source Control 🌿, Tiện ích 🧩, và Cài đặt ⚙️ @@ -233,7 +233,7 @@ Khả năng này cho phép truy cập ngay lập tức vào bất kỳ kho công 1. Truy cập [vscode.dev](https://vscode.dev) nếu bạn chưa ở đó 2. Tìm nút "Open Remote Repository" trên màn hình chào mừng và nhấp vào nó - ![Mở kho từ xa](../../../../translated_images/vi/open-remote-repository.bd9c2598b8949e7f.png) + ![Mở kho từ xa](../../../../translated_images/vi/open-remote-repository.bd9c2598b8949e7f.webp) 3. Dán vào bất kỳ URL kho GitHub nào (thử cái này: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. Nhấn Enter và xem điều kỳ diệu xảy ra! @@ -242,7 +242,7 @@ Khả năng này cho phép truy cập ngay lập tức vào bất kỳ kho công Muốn cảm thấy như một phù thủy lập trình? Thử phím tắt này: Ctrl+Shift+P (hoặc Cmd+Shift+P trên Mac) để mở Command Palette: -![Command Palette](../../../../translated_images/vi/palette-menu.4946174e07f42622.png) +![Command Palette](../../../../translated_images/vi/palette-menu.4946174e07f42622.webp) **Command Palette giống như có một công cụ tìm kiếm cho mọi thứ bạn có thể làm:** - Gõ "open remote" và nó sẽ tìm trình mở kho cho bạn @@ -304,7 +304,7 @@ Giống như việc tổ chức các bản vẽ trong văn phòng kiến trúc s 3. Nhập tên tệp bao gồm phần mở rộng phù hợp (`style.css`, `script.js`, `index.html`) 4. Nhấn Enter để tạo tệp -![Tạo tệp mới](../../../../translated_images/vi/create-new-file.2814e609c2af9aeb.png) +![Tạo tệp mới](../../../../translated_images/vi/create-new-file.2814e609c2af9aeb.webp) **Quy ước đặt tên:** - Sử dụng tên mô tả chỉ ra mục đích của tệp @@ -322,7 +322,7 @@ Giống như việc tổ chức các bản vẽ trong văn phòng kiến trúc s 2. Bắt đầu gõ và xem VSCode.dev hỗ trợ bạn với màu sắc, gợi ý và phát hiện lỗi 3. Lưu công việc của bạn bằng Ctrl+S (Windows/Linux) hoặc Cmd+S (Mac) – mặc dù nó cũng tự động lưu! -![Chỉnh sửa tệp trong VSCode.dev](../../../../translated_images/vi/edit-a-file.52c0ee665ef19f08.png) +![Chỉnh sửa tệp trong VSCode.dev](../../../../translated_images/vi/edit-a-file.52c0ee665ef19f08.webp) **Những điều thú vị xảy ra khi bạn lập trình:** - Mã của bạn được tô màu đẹp mắt để dễ đọc @@ -343,7 +343,7 @@ Giống như cách các nhà khảo cổ tạo hồ sơ chi tiết về các l 2. Các tệp đã chỉnh sửa xuất hiện trong phần "Changes" 3. Mã màu chỉ ra loại thay đổi: xanh lá cho bổ sung, đỏ cho xóa -![Xem các thay đổi trong Source Control](../../../../translated_images/vi/working-tree.c58eec08e6335c79.png) +![Xem các thay đổi trong Source Control](../../../../translated_images/vi/working-tree.c58eec08e6335c79.webp) **Lưu công việc của bạn (quy trình commit):** @@ -438,7 +438,7 @@ Marketplace của extensions được tổ chức rất tốt, vì vậy bạn s 2. Duyệt qua hoặc tìm kiếm một thứ gì đó cụ thể 3. Nhấp vào bất kỳ thứ gì trông thú vị để tìm hiểu thêm về nó -![Giao diện marketplace của extensions](../../../../translated_images/vi/extensions.eca0e0c7f59a10b5.png) +![Giao diện marketplace của extensions](../../../../translated_images/vi/extensions.eca0e0c7f59a10b5.webp) **Những gì bạn sẽ thấy ở đó:** @@ -491,7 +491,7 @@ Hầu hết các extensions đi kèm với các cài đặt bạn có thể đi 3. Chọn "Extension Settings" từ menu thả xuống 4. Điều chỉnh mọi thứ cho đến khi cảm thấy phù hợp với quy trình làm việc của bạn -![Tùy chỉnh cài đặt extension](../../../../translated_images/vi/extension-settings.21c752ae4f4cdb78.png) +![Tùy chỉnh cài đặt extension](../../../../translated_images/vi/extension-settings.21c752ae4f4cdb78.webp) **Những điều phổ biến bạn có thể muốn điều chỉnh:** - Cách mã của bạn được định dạng (tab so với khoảng trắng, độ dài dòng, v.v.) diff --git a/translations/vi/8-code-editor/1-using-a-code-editor/assignment.md b/translations/vi/8-code-editor/1-using-a-code-editor/assignment.md index 2564b9c14..5671ec1e8 100644 --- a/translations/vi/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/vi/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ Vì VSCode.dev yêu cầu ít nhất một tệp để mở kho lưu trữ, chú 4. **Viết** thông điệp commit: "Thêm cấu trúc HTML ban đầu" 5. **Nhấn** "Commit new file" để lưu thay đổi của bạn -![Tạo tệp ban đầu trên GitHub](../../../../translated_images/vi/new-file-github.com.c886796d800e8056.png) +![Tạo tệp ban đầu trên GitHub](../../../../translated_images/vi/new-file-github.com.c886796d800e8056.webp) **Những gì thiết lập ban đầu này đạt được:** - **Thiết lập** cấu trúc tài liệu HTML5 đúng chuẩn với các phần tử ngữ nghĩa @@ -104,7 +104,7 @@ Bây giờ nền tảng kho lưu trữ của bạn đã được thiết lập, ✅ **Chỉ báo thành công**: Bạn sẽ thấy các tệp dự án của mình trong thanh bên Explorer và `index.html` có sẵn để chỉnh sửa trong khu vực chỉnh sửa chính. -![Dự án được tải trong VSCode.dev](../../../../translated_images/vi/project-on-vscode.dev.e79815a9a95ee7fe.png) +![Dự án được tải trong VSCode.dev](../../../../translated_images/vi/project-on-vscode.dev.e79815a9a95ee7fe.webp) **Những gì bạn sẽ thấy trong giao diện:** - **Thanh bên Explorer**: **Hiển thị** các tệp và cấu trúc thư mục của kho lưu trữ @@ -448,7 +448,7 @@ Các tiện ích mở rộng cải thiện trải nghiệm phát triển của b **Kết quả ngay sau khi cài đặt:** Khi CodeSwing được cài đặt, bạn sẽ thấy một bản xem trước trực tiếp của website sơ yếu lý lịch xuất hiện trong trình chỉnh sửa. Điều này cho phép bạn thấy chính xác cách website của bạn trông như thế nào khi thực hiện các thay đổi. -![Tiện ích CodeSwing hiển thị bản xem trước trực tiếp](../../../../translated_images/vi/after-codeswing-extension-pb.0ebddddcf73b5509.png) +![Tiện ích CodeSwing hiển thị bản xem trước trực tiếp](../../../../translated_images/vi/after-codeswing-extension-pb.0ebddddcf73b5509.webp) **Hiểu giao diện được cải tiến:** - **Chế độ xem chia đôi**: **Hiển thị** mã của bạn ở một bên và bản xem trước trực tiếp ở bên kia diff --git a/translations/vi/9-chat-project/README.md b/translations/vi/9-chat-project/README.md index e2231e915..4d31ac6e4 100644 --- a/translations/vi/9-chat-project/README.md +++ b/translations/vi/9-chat-project/README.md @@ -61,7 +61,7 @@ print(response.choices[0].message.content) Dưới đây là hình ảnh dự án hoàn chỉnh của bạn: -![Giao diện ứng dụng chat hiển thị cuộc trò chuyện giữa người dùng và trợ lý AI](../../../translated_images/vi/screenshot.0a1ee0d123df681b.png) +![Giao diện ứng dụng chat hiển thị cuộc trò chuyện giữa người dùng và trợ lý AI](../../../translated_images/vi/screenshot.0a1ee0d123df681b.webp) ## 🗺️ Hành trình học tập của bạn qua phát triển ứng dụng AI @@ -194,7 +194,7 @@ mindmap **Nguyên tắc cốt lõi**: Phát triển ứng dụng AI kết hợp các kỹ năng phát triển web truyền thống với tích hợp dịch vụ AI, tạo ra các ứng dụng thông minh mang lại cảm giác tự nhiên và phản hồi nhanh cho người dùng. -![Giao diện GitHub Models AI Playground với khu vực chọn mô hình và thử nghiệm](../../../translated_images/vi/playground.d2b927122224ff8f.png) +![Giao diện GitHub Models AI Playground với khu vực chọn mô hình và thử nghiệm](../../../translated_images/vi/playground.d2b927122224ff8f.webp) **Dưới đây là những gì làm cho playground trở nên hữu ích:** - **Thử nghiệm** các mô hình AI khác nhau như GPT-4o-mini, Claude và các mô hình khác (tất cả đều miễn phí!) @@ -204,7 +204,7 @@ mindmap Sau khi bạn đã thử nghiệm một chút, chỉ cần nhấp vào tab "Code" và chọn ngôn ngữ lập trình của bạn để nhận mã triển khai mà bạn cần. -![Lựa chọn playground hiển thị các tùy chọn tạo mã cho các ngôn ngữ lập trình khác nhau](../../../translated_images/vi/playground-choice.1d23ba7d407f4758.png) +![Lựa chọn playground hiển thị các tùy chọn tạo mã cho các ngôn ngữ lập trình khác nhau](../../../translated_images/vi/playground-choice.1d23ba7d407f4758.webp) ## Thiết lập tích hợp backend Python @@ -2352,14 +2352,14 @@ Bạn muốn thử dự án này trong môi trường phát triển trên đám - **Đi tới** [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) - **Nhấn** "Use this template" ở góc trên bên phải (đảm bảo bạn đã đăng nhập vào GitHub) -![Giao diện tạo từ mẫu hiển thị nút "Use this template" màu xanh lá cây](../../../translated_images/vi/template.67ad477109d29a2b.png) +![Giao diện tạo từ mẫu hiển thị nút "Use this template" màu xanh lá cây](../../../translated_images/vi/template.67ad477109d29a2b.webp) **Bước 2: Khởi chạy Codespaces** - **Mở** repository vừa tạo của bạn - **Nhấn** nút "Code" màu xanh lá cây và chọn "Codespaces" - **Chọn** "Create codespace on main" để bắt đầu môi trường phát triển của bạn -![Giao diện tạo codespace với các tùy chọn khởi chạy môi trường phát triển trên đám mây](../../../translated_images/vi/codespace.bcecbdf5d2747d3d.png) +![Giao diện tạo codespace với các tùy chọn khởi chạy môi trường phát triển trên đám mây](../../../translated_images/vi/codespace.bcecbdf5d2747d3d.webp) **Bước 3: Cấu hình môi trường** Khi Codespace của bạn tải xong, bạn sẽ có quyền truy cập vào: diff --git a/translations/vi/README.md b/translations/vi/README.md index e3893c0c7..a40ee248b 100644 --- a/translations/vi/README.md +++ b/translations/vi/README.md @@ -72,13 +72,13 @@ Dự án Trợ lý AI mới vừa được thêm, xem ngay [dự án](./9-chat-p Truy cập [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) để bắt đầu! -![Background](../../translated_images/vi/background.148a8d43afde5730.png) +![Background](../../translated_images/vi/background.148a8d43afde5730.webp) - Các bài học bao phủ từ cơ bản đến RAG. - Tương tác với các nhân vật lịch sử bằng GenAI và ứng dụng đồng hành của chúng tôi. - Câu chuyện thú vị và hấp dẫn, bạn sẽ du hành thời gian! -![character](../../translated_images/vi/character.5c0dd8e067ffd693.png) +![character](../../translated_images/vi/character.5c0dd8e067ffd693.webp) Mỗi bài học bao gồm một bài tập hoàn thành, kiểm tra kiến thức và một thử thách để hướng dẫn bạn học các chủ đề như: - Lời nhắc và kỹ thuật tạo lời nhắc @@ -114,7 +114,7 @@ Thực hiện theo các bước: Trong bản sao kho lưu trữ bạn đã tạo, nhấp nút **Code** và chọn **Open with Codespaces**. Điều này sẽ tạo Codespace mới để bạn làm việc. -![Codespace](../../translated_images/vi/createcodespace.0238bbf4d7a8d955.png) +![Codespace](../../translated_images/vi/createcodespace.0238bbf4d7a8d955.webp) #### Chạy chương trình trên máy tính của bạn diff --git a/translations/vi/for-teachers.md b/translations/vi/for-teachers.md index 558582095..16fe89bff 100644 --- a/translations/vi/for-teachers.md +++ b/translations/vi/for-teachers.md @@ -42,10 +42,10 @@ Giáo trình này bao gồm các gói có thể nhập vào để phù hợp v - Moodle Cloud có hỗ trợ hạn chế đối với Common Cartridge. Ưu tiên sử dụng tệp Moodle ở trên, tệp này cũng có thể được tải lên Canvas. - Sau khi nhập, hãy xem lại các mô-đun, ngày đến hạn và cài đặt bài kiểm tra để phù hợp với lịch học của bạn. -![Moodle](../../translated_images/vi/moodle.94eb93d714a50cb2.png) +![Moodle](../../translated_images/vi/moodle.94eb93d714a50cb2.webp) > Giáo trình trong lớp học Moodle -![Canvas](../../translated_images/vi/canvas.fbd605ff8e5b8aff.png) +![Canvas](../../translated_images/vi/canvas.fbd605ff8e5b8aff.webp) > Giáo trình trong Canvas ### Sử dụng kho lưu trữ trực tiếp (không dùng Classroom) diff --git a/translations/zh/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/zh/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 776107791..fa1594492 100644 --- a/translations/zh/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/zh/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: 今天，我们将探索那些让现代网页开发不仅可行而且极其上瘾的令人难以置信的工具。我说的是 Netflix、Spotify 和你最喜欢的独立应用工作室每天使用的同样的编辑器、浏览器和工作流程。最棒的是，这些专业级、行业标准的工具大多数是完全免费的！ -![Intro Programming](../../../../translated_images/zh/webdev101-programming.d6e3f98e61ac4bff.png) +![Intro Programming](../../../../translated_images/zh/webdev101-programming.d6e3f98e61ac4bff.webp) > 速写笔记由 [Tomomi Imura](https://twitter.com/girlie_mac) 制作 ```mermaid diff --git a/translations/zh/1-getting-started-lessons/2-github-basics/README.md b/translations/zh/1-getting-started-lessons/2-github-basics/README.md index 913817a74..ff0891944 100644 --- a/translations/zh/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/zh/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: 我们将一步步一起出发。没有急躁，没有压力——只有你我和一些即将成为你新朋友的酷炫工具！ -![Intro to GitHub](../../../../translated_images/zh/webdev101-github.8846d7971abef6f9.png) +![Intro to GitHub](../../../../translated_images/zh/webdev101-github.8846d7971abef6f9.webp) > 速记图由 [Tomomi Imura](https://twitter.com/girlie_mac) 制作 ```mermaid @@ -604,7 +604,7 @@ flowchart TD ✅ 一个很好的寻找“初学者友好”仓库的方法是[通过“good-first-issue”标签搜索](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)。 -![在本地复制仓库](../../../../translated_images/zh/clone_repo.5085c48d666ead57.png) +![在本地复制仓库](../../../../translated_images/zh/clone_repo.5085c48d666ead57.webp) 有几种方式可以复制代码。一种是使用 HTTPS、SSH，或者 GitHub CLI（命令行界面）“克隆”仓库内容。 diff --git a/translations/zh/1-getting-started-lessons/3-accessibility/README.md b/translations/zh/1-getting-started-lessons/3-accessibility/README.md index 8f06d7020..75df386ba 100644 --- a/translations/zh/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/zh/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # 创建无障碍网页 -![无障碍知识全览](../../../../translated_images/zh/webdev101-a11y.8ef3025c858d897a.png) +![无障碍知识全览](../../../../translated_images/zh/webdev101-a11y.8ef3025c858d897a.webp) > 草图笔记由 [Tomomi Imura](https://twitter.com/girlie_mac) 制作 ```mermaid diff --git a/translations/zh/2-js-basics/1-data-types/README.md b/translations/zh/2-js-basics/1-data-types/README.md index 25dc57bc4..717d0ae3f 100644 --- a/translations/zh/2-js-basics/1-data-types/README.md +++ b/translations/zh/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript 基础：数据类型 -![JavaScript Basics - Data types](../../../../translated_images/zh/webdev101-js-datatypes.4cc470179730702c.png) +![JavaScript Basics - Data types](../../../../translated_images/zh/webdev101-js-datatypes.4cc470179730702c.webp) > 手绘笔记，作者 [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/zh/2-js-basics/2-functions-methods/README.md b/translations/zh/2-js-basics/2-functions-methods/README.md index 60b942fa5..4a3f16f2c 100644 --- a/translations/zh/2-js-basics/2-functions-methods/README.md +++ b/translations/zh/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript 基础：方法与函数 -![JavaScript Basics - Functions](../../../../translated_images/zh/webdev101-js-functions.be049c4726e94f8b.png) +![JavaScript Basics - Functions](../../../../translated_images/zh/webdev101-js-functions.be049c4726e94f8b.webp) > 速记图由 [Tomomi Imura](https://twitter.com/girlie_mac) 制作 ```mermaid diff --git a/translations/zh/2-js-basics/3-making-decisions/README.md b/translations/zh/2-js-basics/3-making-decisions/README.md index d99fd0a7e..0c4774bca 100644 --- a/translations/zh/2-js-basics/3-making-decisions/README.md +++ b/translations/zh/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript基础：做出决策 -![JavaScript Basics - Making decisions](../../../../translated_images/zh/webdev101-js-decisions.69e1b20f272dd1f0.png) +![JavaScript Basics - Making decisions](../../../../translated_images/zh/webdev101-js-decisions.69e1b20f272dd1f0.webp) > 速写笔记由 [Tomomi Imura](https://twitter.com/girlie_mac) 提供 diff --git a/translations/zh/2-js-basics/4-arrays-loops/README.md b/translations/zh/2-js-basics/4-arrays-loops/README.md index 53c6bb4cf..9039b96ee 100644 --- a/translations/zh/2-js-basics/4-arrays-loops/README.md +++ b/translations/zh/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript 基础知识：数组和循环 -![JavaScript Basics - Arrays](../../../../translated_images/zh/webdev101-js-arrays.439d7528b8a29455.png) +![JavaScript Basics - Arrays](../../../../translated_images/zh/webdev101-js-arrays.439d7528b8a29455.webp) > 速写笔记，作者：[Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/zh/3-terrarium/1-intro-to-html/README.md b/translations/zh/3-terrarium/1-intro-to-html/README.md index 25e7d6a2b..294c2ad97 100644 --- a/translations/zh/3-terrarium/1-intro-to-html/README.md +++ b/translations/zh/3-terrarium/1-intro-to-html/README.md @@ -25,7 +25,7 @@ journey 提升无障碍性: 5: Student 建造生态瓶: 5: Student ``` -![HTML 入门](../../../../translated_images/zh/webdev101-html.4389c2067af68e98.png) +![HTML 入门](../../../../translated_images/zh/webdev101-html.4389c2067af68e98.webp) > 速记图由 [Tomomi Imura](https://twitter.com/girlie_mac) 提供 HTML，即超文本标记语言，是你访问过的每个网站的基础。把 HTML 想象成网页的骨架 —— 它定义了内容的位置、组织方式以及每个部分的含义。虽然 CSS 会在之后用颜色和布局“装饰”你的 HTML，JavaScript 会通过交互让它“活起来”，但 HTML 则提供了实现一切的基本结构。 @@ -86,7 +86,7 @@ mindmap 4. 在资源管理器面板点击“新建文件”图标 5. 将你的文件命名为 `index.html` -![VS Code 资源管理器显示新建文件](../../../../translated_images/zh/vs-code-index.e2986cf919471eb9.png) +![VS Code 资源管理器显示新建文件](../../../../translated_images/zh/vs-code-index.e2986cf919471eb9.webp) **选项 2：使用终端命令** ```bash diff --git a/translations/zh/3-terrarium/2-intro-to-css/README.md b/translations/zh/3-terrarium/2-intro-to-css/README.md index f5e3d489b..c3aea5e1a 100644 --- a/translations/zh/3-terrarium/2-intro-to-css/README.md +++ b/translations/zh/3-terrarium/2-intro-to-css/README.md @@ -29,7 +29,7 @@ journey 响应式设计: 5: Student 玻璃反光: 5: Student ``` -![Introduction to CSS](../../../../translated_images/zh/webdev101-css.3f7af5991bf53a20.png) +![Introduction to CSS](../../../../translated_images/zh/webdev101-css.3f7af5991bf53a20.webp) > 速写笔记作者 [Tomomi Imura](https://twitter.com/girlie_mac) 还记得你的 HTML 生态瓶看起来很基础吗？CSS 就是把那个普通的结构变成视觉上更吸引人的东西。 @@ -202,7 +202,7 @@ body { 打开浏览器开发者工具（F12），切换到 Elements 面板，检查 `

` 元素，你会看到它继承自 body 的字体： -![inherited font](../../../../translated_images/zh/1.cc07a5cbe114ad1d.png) +![inherited font](../../../../translated_images/zh/1.cc07a5cbe114ad1d.webp) ✅ **试验时间**：尝试给 `` 设置其他可继承属性如 `color`，`line-height` 或 `text-align`。你的标题和其他元素会发生什么变化？ @@ -594,7 +594,7 @@ flowchart LR 你将创建细腻的高光，模拟光在玻璃表面的反射。这与文艺复兴画家扬·凡·艾克（Jan van Eyck）使用光线和反射使绘画玻璃呈现三维感的手法类似。你的目标如下： -![finished terrarium](../../../../translated_images/zh/terrarium-final.2f07047ffc597d0a.png) +![finished terrarium](../../../../translated_images/zh/terrarium-final.2f07047ffc597d0a.webp) **你的挑战：** - **创建** 微妙的白色或浅色椭圆形反光 diff --git a/translations/zh/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/zh/3-terrarium/3-intro-to-DOM-and-closures/README.md index f230a727d..c29787026 100644 --- a/translations/zh/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/zh/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -25,7 +25,7 @@ journey 测试功能: 5: Student 完成生态箱: 5: Student ``` -![DOM 和闭包](../../../../translated_images/zh/webdev101-js.10280393044d7eaa.png) +![DOM 和闭包](../../../../translated_images/zh/webdev101-js.10280393044d7eaa.webp) > 草图笔记作者：[Tomomi Imura](https://twitter.com/girlie_mac) 欢迎来到网页开发中最具趣味性的部分之一——让页面变得互动！文档对象模型（DOM）就像是你的 HTML 和 JavaScript 之间的一座桥梁，今天我们将用它让你的生态瓶变得栩栩如生。当 Tim Berners-Lee 创建第一款网页浏览器时，他设想了一个可以动态交互的网页世界——而DOM让这个设想成为可能。 @@ -102,7 +102,7 @@ flowchart TD style P fill:#ffebee style Q fill:#ffebee ``` -![DOM 树结构表示](../../../../translated_images/zh/dom-tree.7daf0e763cbbba92.png) +![DOM 树结构表示](../../../../translated_images/zh/dom-tree.7daf0e763cbbba92.webp) > DOM 及其关联 HTML 标记的表示。来自 [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -146,7 +146,7 @@ flowchart LR ``` > 💡 **理解闭包**：闭包是 JavaScript 中的重要话题，许多开发者多年使用后才完全掌握所有理论细节。今天我们专注于实用应用——你将看到闭包在实现交互功能时自然而然出现。理解将随着你观察它们解决实际问题而逐步加深。 -![DOM 树结构表示](../../../../translated_images/zh/dom-tree.7daf0e763cbbba92.png) +![DOM 树结构表示](../../../../translated_images/zh/dom-tree.7daf0e763cbbba92.webp) > DOM 及其关联 HTML 标记的表示。来自 [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -591,7 +591,7 @@ function stopElementDrag() { - **跨设备支持**：兼容桌面和移动端 - **性能意识**：无内存泄漏或冗余计算 -![完成的花园](../../../../translated_images/zh/terrarium-final.0920f16e87c13a84.png) +![完成的花园](../../../../translated_images/zh/terrarium-final.0920f16e87c13a84.webp) --- diff --git a/translations/zh/5-browser-extension/1-about-browsers/README.md b/translations/zh/5-browser-extension/1-about-browsers/README.md index 8d651807e..633bb0464 100644 --- a/translations/zh/5-browser-extension/1-about-browsers/README.md +++ b/translations/zh/5-browser-extension/1-about-browsers/README.md @@ -25,7 +25,7 @@ journey 调试问题: 4: Student 优化体验: 5: Student ``` -![浏览器手绘笔记](../../../../translated_images/zh/browser.60317c9be8b7f84a.jpg) +![浏览器手绘笔记](../../../../translated_images/zh/browser.60317c9be8b7f84a.webp) > 手绘笔记作者：[Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## 课前测验 @@ -77,7 +77,7 @@ mindmap ✅ **一点历史**：第一款浏览器名为“WorldWideWeb”，由蒂姆·伯纳斯-李爵士于1990年创建。 -![早期浏览器](../../../../translated_images/zh/earlybrowsers.d984b711cdf3a42d.jpg) +![早期浏览器](../../../../translated_images/zh/earlybrowsers.d984b711cdf3a42d.webp) > 一些早期浏览器，来源：[Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### 浏览器如何处理网页内容 @@ -194,7 +194,7 @@ quadrantChart 了解扩展安装过程，有助于你预见用户安装你扩展时的体验。现代浏览器的安装流程标准化，界面设计略有差异。 -![Edge 浏览器扩展页面打开及设置菜单截图](../../../../translated_images/zh/install-on-edge.d68781acaf0b3d3d.png) +![Edge 浏览器扩展页面打开及设置菜单截图](../../../../translated_images/zh/install-on-edge.d68781acaf0b3d3d.webp) > **重要提示**：测试自己的扩展时，务必开启开发者模式并允许来自其他商店的扩展。 @@ -308,10 +308,10 @@ project-root/ ### 扩展视图概览 **设置视图** - 首次用户配置： -![扩展完整界面截图，显示包含地区名称和 API 密钥输入的表单](../../../../translated_images/zh/1.b6da8c1394b07491.png) +![扩展完整界面截图，显示包含地区名称和 API 密钥输入的表单](../../../../translated_images/zh/1.b6da8c1394b07491.webp) **结果视图** - 碳足迹数据显示： -![扩展显示 US-NEISO 区域碳使用量和化石燃料百分比的截图](../../../../translated_images/zh/2.1dae52ff08042246.png) +![扩展显示 US-NEISO 区域碳使用量和化石燃料百分比的截图](../../../../translated_images/zh/2.1dae52ff08042246.webp) ### 构建配置表单 diff --git a/translations/zh/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/zh/5-browser-extension/2-forms-browsers-local-storage/README.md index a51b92ba2..5a9a88962 100644 --- a/translations/zh/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/zh/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -263,7 +263,7 @@ stateDiagram-v2 Reset --> ClearStorage: 删除保存的数据 ClearStorage --> FirstTime: 返回设置 ``` -![本地存储面板](../../../../translated_images/zh/localstorage.472f8147b6a3f8d1.png) +![本地存储面板](../../../../translated_images/zh/localstorage.472f8147b6a3f8d1.webp) > ⚠️ **安全注意事项**：在生产环境中，将 API 密钥存储在 LocalStorage 存在安全风险，因为 JavaScript 代码可以访问这些数据。学习用途这样做可以，但实际应用应使用安全的服务器端存储敏感凭证。 diff --git a/translations/zh/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/zh/5-browser-extension/3-background-tasks-and-performance/README.md index 0542ccbfc..bea52a07d 100644 --- a/translations/zh/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/zh/5-browser-extension/3-background-tasks-and-performance/README.md @@ -123,7 +123,7 @@ flowchart LR 试试吧。打开一个网站（例如 Microsoft.com），点击“录制”然后刷新页面，查看性能分析器捕捉的一切。当停止录制，你会看到浏览器如何“脚本执行”（scripts）、“渲染”（renders）和“绘制”（paints）的详细分解。这让我想起火箭发射时指挥中心监控所有系统——你获取实时且详细的操作数据。 -![Edge profiler](../../../../translated_images/zh/profiler.5a4a62479c5df01c.png) +![Edge profiler](../../../../translated_images/zh/profiler.5a4a62479c5df01c.webp) ✅ 若想深入了解，请查阅 [微软文档](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) @@ -133,11 +133,11 @@ flowchart LR 通过选取时间线片段，查看摘要面板，获得页面性能快照： -![Edge profiler snapshot](../../../../translated_images/zh/snapshot.97750180ebcad737.png) +![Edge profiler snapshot](../../../../translated_images/zh/snapshot.97750180ebcad737.webp) 查看事件日志面板是否有事件耗时超过15毫秒： -![Edge event log](../../../../translated_images/zh/log.804026979f3707e0.png) +![Edge event log](../../../../translated_images/zh/log.804026979f3707e0.webp) ✅ 熟悉你的分析器！在本站打开开发者工具，看看是否存在瓶颈。加载最慢和最快的资源分别是什么？ diff --git a/translations/zh/6-space-game/2-drawing-to-canvas/README.md b/translations/zh/6-space-game/2-drawing-to-canvas/README.md index 2b24cab94..23347c541 100644 --- a/translations/zh/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/zh/6-space-game/2-drawing-to-canvas/README.md @@ -105,7 +105,7 @@ quadrantChart Power-up: [0.7, 0.6] UI Elements: [0.9, 0.1] ``` -![canvas 网格](../../../../translated_images/zh/canvas_grid.5f209da785ded492.png) +![canvas 网格](../../../../translated_images/zh/canvas_grid.5f209da785ded492.webp) > 图片来自 [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) 要在 canvas 元素上绘图，你需要遵循所有画布图形基础的三个步骤。重复几次后，会变得很自然： @@ -323,11 +323,11 @@ flowchart TD - 英雄飞船 - ![英雄飞船](../../../../translated_images/zh/player.dd24c1afa8c71e9b.png) + ![英雄飞船](../../../../translated_images/zh/player.dd24c1afa8c71e9b.webp) - 5*5 怪物阵型 - ![怪物飞船](../../../../translated_images/zh/enemyShip.5df2a822c16650c2.png) + ![怪物飞船](../../../../translated_images/zh/enemyShip.5df2a822c16650c2.webp) ### 推荐开发步骤 @@ -463,7 +463,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { 完成的结果应如下所示： -![带有英雄和 5*5 怪物的黑屏](../../../../translated_images/zh/partI-solution.36c53b48c9ffae2a.png) +![带有英雄和 5*5 怪物的黑屏](../../../../translated_images/zh/partI-solution.36c53b48c9ffae2a.webp) ## 解决方案 diff --git a/translations/zh/6-space-game/5-keeping-score/README.md b/translations/zh/6-space-game/5-keeping-score/README.md index f09bb91bc..86640b1bd 100644 --- a/translations/zh/6-space-game/5-keeping-score/README.md +++ b/translations/zh/6-space-game/5-keeping-score/README.md @@ -155,7 +155,7 @@ sequenceDiagram end ``` - **计分系统**：每摧毁一艘敌舰奖励100分（圆整数字更便于玩家心算）。分数显示在左下角。 -- **生命计数器**：你的英雄从三条命开始——这是早期街机游戏确立的标准，平衡挑战和可玩性。每次与敌人碰撞会损失一条命。我们将在右下用飞船图标显示剩余生命 ![life image](../../../../translated_images/zh/life.6fb9f50d53ee0413.png)。 +- **生命计数器**：你的英雄从三条命开始——这是早期街机游戏确立的标准，平衡挑战和可玩性。每次与敌人碰撞会损失一条命。我们将在右下用飞船图标显示剩余生命 ![life image](../../../../translated_images/zh/life.6fb9f50d53ee0413.webp)。 ## 开始构建吧！ diff --git a/translations/zh/7-bank-project/1-template-route/README.md b/translations/zh/7-bank-project/1-template-route/README.md index 68e1642dc..f9183bc18 100644 --- a/translations/zh/7-bank-project/1-template-route/README.md +++ b/translations/zh/7-bank-project/1-template-route/README.md @@ -644,7 +644,7 @@ sequenceDiagram 使用 `history.pushState` 创建了新的浏览历史条目。你可以按住浏览器的 *后退按钮* 来查看，如下图所示： -![浏览历史截图](../../../../translated_images/zh/history.7fdabbafa521e064.png) +![浏览历史截图](../../../../translated_images/zh/history.7fdabbafa521e064.webp) 如果你尝试点击后退几次，你会发现当前 URL 变化了，历史记录也更新了，但显示的模板却没有变化。 diff --git a/translations/zh/7-bank-project/2-forms/README.md b/translations/zh/7-bank-project/2-forms/README.md index 9cac46362..6fcc4a7c6 100644 --- a/translations/zh/7-bank-project/2-forms/README.md +++ b/translations/zh/7-bank-project/2-forms/README.md @@ -292,7 +292,7 @@ graph TD 2. 观察浏览器地址栏的变化 3. 注意页面如何重新加载，数据出现在 URL 中 -![点击注册按钮后浏览器 URL 变化截图](../../../../translated_images/zh/click-register.e89a30bf0d4bc9ca.png) +![点击注册按钮后浏览器 URL 变化截图](../../../../translated_images/zh/click-register.e89a30bf0d4bc9ca.webp) ### HTTP 方法对比 @@ -346,7 +346,7 @@ graph TD 2. **点击**“创建账户”按钮 3. **观察**浏览器中的服务器响应 -![浏览器窗口访问 localhost:5000/api/accounts，显示包含用户数据的 JSON 字符串](../../../../translated_images/zh/form-post.61de4ca1b964d91a.png) +![浏览器窗口访问 localhost:5000/api/accounts，显示包含用户数据的 JSON 字符串](../../../../translated_images/zh/form-post.61de4ca1b964d91a.webp) **你应该看到：** - **浏览器跳转到 API 端点 URL** @@ -609,7 +609,7 @@ async function register() { 3. **点击** “创建账户” 4. **观察** 控制台信息和用户反馈 -![浏览器控制台日志截图](../../../../translated_images/zh/browser-console.efaf0b51aaaf6778.png) +![浏览器控制台日志截图](../../../../translated_images/zh/browser-console.efaf0b51aaaf6778.webp) **你应该看到：** - **加载状态** 出现在提交按钮上 @@ -783,7 +783,7 @@ input:focus:invalid { 3. **尝试** 在用户名字段使用特殊字符 4. **输入** 负余额数值 -![尝试提交表单时显示验证错误截图](../../../../translated_images/zh/validation-error.8bd23e98d416c22f.png) +![尝试提交表单时显示验证错误截图](../../../../translated_images/zh/validation-error.8bd23e98d416c22f.webp) **你会看到：** - **浏览器显示** 原生验证消息 @@ -943,7 +943,7 @@ timeline 下面是经过一些样式调整后最终登录页面的示例： -![添加 CSS 样式后登录页面的截图](../../../../translated_images/zh/result.96ef01f607bf856a.png) +![添加 CSS 样式后登录页面的截图](../../../../translated_images/zh/result.96ef01f607bf856a.webp) ## 课后测验 diff --git a/translations/zh/7-bank-project/3-data/README.md b/translations/zh/7-bank-project/3-data/README.md index 7bc6b189f..8fb9bba25 100644 --- a/translations/zh/7-bank-project/3-data/README.md +++ b/translations/zh/7-bank-project/3-data/README.md @@ -156,7 +156,7 @@ sequenceDiagram Server->>Browser: 返回完整的HTML页面 Browser->>User: 显示新页面（闪烁/重载） ``` -![多页面应用的更新流程](../../../../translated_images/zh/mpa.7f7375a1a2d4aa77.png) +![多页面应用的更新流程](../../../../translated_images/zh/mpa.7f7375a1a2d4aa77.webp) **这种方式为何显得笨重：** - 每次点击都要重新构建整页 @@ -182,7 +182,7 @@ sequenceDiagram JavaScript->>Browser: 更新特定页面元素 Browser->>User: 显示更新内容（无刷新） ``` -![单页面应用的更新流程](../../../../translated_images/zh/spa.268ec73b41f992c2.png) +![单页面应用的更新流程](../../../../translated_images/zh/spa.268ec73b41f992c2.webp) **为何SPA体验更佳：** - 只更新实际变化部分（聪明吧？） @@ -516,7 +516,7 @@ if (data.error) { 现在测试输入无效账号时，页面上会出现有用的错误提示！ -![登录时显示错误消息的截图](../../../../translated_images/zh/login-error.416fe019b36a6327.png) +![登录时显示错误消息的截图](../../../../translated_images/zh/login-error.416fe019b36a6327.webp) #### 第四步：兼顾无障碍访问 @@ -950,7 +950,7 @@ timeline 这是美化后仪表盘的示例： -![Screenshot of an example result of the dashboard after styling](../../../../translated_images/zh/screen2.123c82a831a1d14a.png) +![Screenshot of an example result of the dashboard after styling](../../../../translated_images/zh/screen2.123c82a831a1d14a.webp) 不必完全照搬——以此为灵感，打造属于你自己的风格！ diff --git a/translations/zh/7-bank-project/4-state-management/README.md b/translations/zh/7-bank-project/4-state-management/README.md index 063cfb102..e5e65d137 100644 --- a/translations/zh/7-bank-project/4-state-management/README.md +++ b/translations/zh/7-bank-project/4-state-management/README.md @@ -187,7 +187,7 @@ mindmap 我们将创建一个**集中式状态管理**系统。把它想象成一个非常有条理的人掌管所有重要事务： -![显示HTML、用户操作与状态间数据流的架构图](../../../../translated_images/zh/data-flow.fa2354e0908fecc8.png) +![显示HTML、用户操作与状态间数据流的架构图](../../../../translated_images/zh/data-flow.fa2354e0908fecc8.webp) ```mermaid flowchart TD @@ -799,7 +799,7 @@ timeline 完成作业后的示例效果： -![显示“添加交易”对话框示例的截图](../../../../translated_images/zh/dialog.93bba104afeb79f1.png) +![显示“添加交易”对话框示例的截图](../../../../translated_images/zh/dialog.93bba104afeb79f1.webp) --- diff --git a/translations/zh/7-bank-project/4-state-management/assignment.md b/translations/zh/7-bank-project/4-state-management/assignment.md index aedf8187a..9c41def4c 100644 --- a/translations/zh/7-bank-project/4-state-management/assignment.md +++ b/translations/zh/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ CO_OP_TRANSLATOR_METADATA: **预期效果：** 完成本作业后，您的银行应用应具备一个功能齐全的“添加交易”功能，外观与行为均专业： -![显示示例“添加交易”对话框的截图](../../../../translated_images/zh/dialog.93bba104afeb79f1.png) +![显示示例“添加交易”对话框的截图](../../../../translated_images/zh/dialog.93bba104afeb79f1.webp) ## 测试您的实现 diff --git a/translations/zh/8-code-editor/1-using-a-code-editor/README.md b/translations/zh/8-code-editor/1-using-a-code-editor/README.md index 1754c156b..05e0777a8 100644 --- a/translations/zh/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/zh/8-code-editor/1-using-a-code-editor/README.md @@ -182,7 +182,7 @@ VSCode.dev 将这些能力带入浏览器： 加载完成后，你会看到一个清爽的工作区，设计围绕代码展开，让你专注于核心任务！ -![默认 VSCode.dev 界面](../../../../translated_images/zh/default-vscode-dev.5d06881d65c1b323.png) +![默认 VSCode.dev 界面](../../../../translated_images/zh/default-vscode-dev.5d06881d65c1b323.webp) **你的界面导览：** - **活动栏**（左侧条带）：主导航，含资源管理器 📁、搜索 🔍、源代码控制 🌿、扩展 🧩 及设置 ⚙️ @@ -229,7 +229,7 @@ flowchart TB 1. 如果没在页面，先访问 [vscode.dev](https://vscode.dev) 2. 在欢迎界面点击“Open Remote Repository”按钮 - ![打开远程仓库](../../../../translated_images/zh/open-remote-repository.bd9c2598b8949e7f.png) + ![打开远程仓库](../../../../translated_images/zh/open-remote-repository.bd9c2598b8949e7f.webp) 3. 粘贴任意 GitHub 仓库 URL（试试这个：`https://github.com/microsoft/Web-Dev-For-Beginners`） 4. 按回车，见证神奇！ @@ -238,7 +238,7 @@ flowchart TB 想更像编码巫师？试试 Ctrl+Shift+P（Mac 上为 Cmd+Shift+P）打开命令面板： -![命令面板](../../../../translated_images/zh/palette-menu.4946174e07f42622.png) +![命令面板](../../../../translated_images/zh/palette-menu.4946174e07f42622.webp) **命令面板是你所有操作的搜索引擎：** - 输入“open remote”即可找到打开远程仓库的功能 @@ -300,7 +300,7 @@ flowchart TB 3. 输入文件名并包含适当扩展名（如 `style.css`，`script.js`，`index.html`） 4. 按回车创建文件 -![创建新文件](../../../../translated_images/zh/create-new-file.2814e609c2af9aeb.png) +![创建新文件](../../../../translated_images/zh/create-new-file.2814e609c2af9aeb.webp) **命名规范：** - 使用描述性名称，体现文件用途 @@ -318,7 +318,7 @@ flowchart TB 2. 开始输入，感受 VSCode.dev 用颜色、高亮和错误提示支持你的创作 3. 用 Ctrl+S（Windows/Linux）或 Cmd+S（Mac）保存——其实它也会自动保存！ -![编辑文件](../../../../translated_images/zh/edit-a-file.52c0ee665ef19f08.png) +![编辑文件](../../../../translated_images/zh/edit-a-file.52c0ee665ef19f08.webp) **编码时的酷炫特性：** - 代码色彩丰富，易于阅读 @@ -339,7 +339,7 @@ flowchart TB 2. 已修改的文件会出现在“变更”区域 3. 用颜色区分变动类型：绿色表示新增，红色表示删除 -![查看源代码变更](../../../../translated_images/zh/working-tree.c58eec08e6335c79.png) +![查看源代码变更](../../../../translated_images/zh/working-tree.c58eec08e6335c79.webp) **保存工作（提交工作流）：** @@ -431,7 +431,7 @@ mindmap 2. 浏览或搜索特定内容 3. 点击感兴趣的扩展，了解更多信息 -![扩展市场界面](../../../../translated_images/zh/extensions.eca0e0c7f59a10b5.png) +![扩展市场界面](../../../../translated_images/zh/extensions.eca0e0c7f59a10b5.webp) **你会看到内容：** @@ -484,7 +484,7 @@ mindmap 3. 选择“扩展设置” 4. 进行调整，直到感觉顺手 -![自定义扩展设置](../../../../translated_images/zh/extension-settings.21c752ae4f4cdb78.png) +![自定义扩展设置](../../../../translated_images/zh/extension-settings.21c752ae4f4cdb78.webp) **你可能想调整的常见项：** - 代码格式化方式（制表符与空格，行宽等） diff --git a/translations/zh/8-code-editor/1-using-a-code-editor/assignment.md b/translations/zh/8-code-editor/1-using-a-code-editor/assignment.md index 1dcbac774..13382d342 100644 --- a/translations/zh/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/zh/8-code-editor/1-using-a-code-editor/assignment.md @@ -79,7 +79,7 @@ CO_OP_TRANSLATOR_METADATA: 4. **填写** 提交信息：“Add initial HTML structure” 5. **点击** “Commit new file” 保存更改 -![在 GitHub 上创建初始文件](../../../../translated_images/zh/new-file-github.com.c886796d800e8056.png) +![在 GitHub 上创建初始文件](../../../../translated_images/zh/new-file-github.com.c886796d800e8056.webp) **此初始设置功效：** - **建立** 合适的 HTML5 文档结构及语义元素 @@ -105,7 +105,7 @@ CO_OP_TRANSLATOR_METADATA: ✅ **成功标志**：您将在资源管理器侧边栏看到项目文件，并可在主编辑区打开 `index.html` 进行编辑。 -![VSCode.dev 中的项目加载界面](../../../../translated_images/zh/project-on-vscode.dev.e79815a9a95ee7fe.png) +![VSCode.dev 中的项目加载界面](../../../../translated_images/zh/project-on-vscode.dev.e79815a9a95ee7fe.webp) **界面包含内容：** - **资源管理器侧边栏**：显示仓库文件及目录结构 @@ -450,7 +450,7 @@ li:before { **安装后即时效果：** 安装完成后，编辑器内会显示简历网站的实时预览，方便您边编辑边查看网站实际效果。 -![CodeSwing 扩展实时预览](../../../../translated_images/zh/after-codeswing-extension-pb.0ebddddcf73b5509.png) +![CodeSwing 扩展实时预览](../../../../translated_images/zh/after-codeswing-extension-pb.0ebddddcf73b5509.webp) **增强界面解析：** - **分屏视图**：左侧显示代码，右侧实时预览 diff --git a/translations/zh/9-chat-project/README.md b/translations/zh/9-chat-project/README.md index 8a0ab86f0..09eb66f2d 100644 --- a/translations/zh/9-chat-project/README.md +++ b/translations/zh/9-chat-project/README.md @@ -60,7 +60,7 @@ print(response.choices[0].message.content) 这是你完成项目后的效果： -![聊天应用界面显示用户和 AI 助手之间的对话](../../../translated_images/zh/screenshot.0a1ee0d123df681b.png) +![聊天应用界面显示用户和 AI 助手之间的对话](../../../translated_images/zh/screenshot.0a1ee0d123df681b.webp) ## 🗺️ 你的 AI 应用开发学习之旅 @@ -189,7 +189,7 @@ mindmap ``` **核心原则**：AI 应用开发融合传统网页开发技能与 AI 服务集成，创建感觉自然且响应迅速的智能应用。 -![GitHub Models AI Playground 界面，包含模型选择和测试区域](../../../translated_images/zh/playground.d2b927122224ff8f.png) +![GitHub Models AI Playground 界面，包含模型选择和测试区域](../../../translated_images/zh/playground.d2b927122224ff8f.webp) **Playground 超有用的原因：** - **试用** 不同 AI 模型如 GPT-4o-mini、Claude 等（全都免费！） @@ -199,7 +199,7 @@ mindmap 玩过后，直接点“Code”标签选你要的编程语言，拿到实现代码。 -![Playground 选择界面，展示多编程语言代码生成选项](../../../translated_images/zh/playground-choice.1d23ba7d407f4758.png) +![Playground 选择界面，展示多编程语言代码生成选项](../../../translated_images/zh/playground-choice.1d23ba7d407f4758.webp) ## 配置 Python 后端集成 @@ -2352,14 +2352,14 @@ mindmap - **访问** [Web Dev For Beginners 仓库](https://github.com/microsoft/Web-Dev-For-Beginners) - **点击** 右上角的“Use this template”（确保已登录 GitHub） -![Create from template interface showing the green "Use this template" button](../../../translated_images/zh/template.67ad477109d29a2b.png) +![Create from template interface showing the green "Use this template" button](../../../translated_images/zh/template.67ad477109d29a2b.webp) **步骤 2：启动 Codespaces** - **打开** 你刚创建的仓库 - **点击** 绿色“Code”按钮，选择“Codespaces” - **选择** “Create codespace on main” 启动开发环境 -![Create codespace interface with options for launching cloud development environment](../../../translated_images/zh/codespace.bcecbdf5d2747d3d.png) +![Create codespace interface with options for launching cloud development environment](../../../translated_images/zh/codespace.bcecbdf5d2747d3d.webp) **步骤 3：环境配置** Codespace 加载完成后，你将获得： diff --git a/translations/zh/README.md b/translations/zh/README.md index 4b15c3b50..282ebc9d9 100644 --- a/translations/zh/README.md +++ b/translations/zh/README.md @@ -72,13 +72,13 @@ CO_OP_TRANSLATOR_METADATA: 访问 [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) 开始学习！ -![背景](../../translated_images/zh/background.148a8d43afde5730.png) +![背景](../../translated_images/zh/background.148a8d43afde5730.webp) - 涵盖从基础到 RAG 的课程。 - 使用生成式 AI 和我们的配套应用与历史人物互动。 - 趣味且引人入胜的叙事，你将体验时空穿越！ -![角色](../../translated_images/zh/character.5c0dd8e067ffd693.png) +![角色](../../translated_images/zh/character.5c0dd8e067ffd693.webp) 每节课均包含作业、知识检测和挑战，引导你学习以下主题： - 提示词及提示工程 @@ -114,7 +114,7 @@ CO_OP_TRANSLATOR_METADATA: 在你创建的仓库副本中，点击 **Code** 按钮，选择 **Open with Codespaces**。这将创建一个新的 Codespace 供你使用。 -![Codespace](../../translated_images/zh/createcodespace.0238bbf4d7a8d955.png) +![Codespace](../../translated_images/zh/createcodespace.0238bbf4d7a8d955.webp) #### 在本地计算机上运行课程 diff --git a/translations/zh/for-teachers.md b/translations/zh/for-teachers.md index 3cd92e49a..121013adb 100644 --- a/translations/zh/for-teachers.md +++ b/translations/zh/for-teachers.md @@ -42,10 +42,10 @@ CO_OP_TRANSLATOR_METADATA: - Moodle Cloud 对 Common Cartridge 的支持有限。建议优先使用上述 Moodle 文件，该文件也可以上传到 Canvas。 - 导入后，请根据学期安排检查模块、截止日期和测验设置。 -![Moodle](../../translated_images/zh/moodle.94eb93d714a50cb2.png) +![Moodle](../../translated_images/zh/moodle.94eb93d714a50cb2.webp) > Moodle 教室中的课程内容 -![Canvas](../../translated_images/zh/canvas.fbd605ff8e5b8aff.png) +![Canvas](../../translated_images/zh/canvas.fbd605ff8e5b8aff.webp) > Canvas 教室中的课程内容 ### 直接使用代码库（不使用 Classroom）