diff --git a/translations/en/3-terrarium/1-intro-to-html/README.md b/translations/en/3-terrarium/1-intro-to-html/README.md index 0c6739b9f..7cbb9c667 100644 --- a/translations/en/3-terrarium/1-intro-to-html/README.md +++ b/translations/en/3-terrarium/1-intro-to-html/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Terrarium Project Part 1: Introduction to HTML -![Introduction to HTML](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.en.png) +![Introduction to HTML](../../../../translated_images/en/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz @@ -32,7 +32,7 @@ In this lesson, we'll use HTML to structure the 'framework' of our virtual terra On your computer, create a folder named 'terrarium' and inside it, a file called 'index.html'. You can do this in Visual Studio Code by opening a new VS Code window, clicking 'open folder', and navigating to your new folder. Then, click the small 'file' button in the Explorer pane to create the new file: -![explorer in VS Code](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.en.png) +![explorer in VS Code](../../../../translated_images/en/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.png) Alternatively, you can use these commands in Git Bash: * `mkdir terrarium` diff --git a/translations/en/3-terrarium/2-intro-to-css/README.md b/translations/en/3-terrarium/2-intro-to-css/README.md index a4de3fba9..328518e8d 100644 --- a/translations/en/3-terrarium/2-intro-to-css/README.md +++ b/translations/en/3-terrarium/2-intro-to-css/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Terrarium Project Part 2: Introduction to CSS -![Introduction to CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.en.png) +![Introduction to CSS](../../../../translated_images/en/webdev101-css.3f7af5991bf53a200d79e7257e5e450408d8ea97f5b531d31b2e3976317338ee.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz @@ -83,7 +83,7 @@ body { Open your browser's console and inspect the 'Elements' tab. Observe the font of the `

` tag. You’ll see that it inherits the font from the body, as indicated by the browser: -![inherited font](../../../../translated_images/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.en.png) +![inherited font](../../../../translated_images/en/1.cc07a5cbe114ad1d4728c35134584ac1b87db688eff83cf75985cf31fe0ed95c.png) ✅ Can you make a nested style inherit a different property? @@ -259,7 +259,7 @@ We’re also using `rem` for the border-radius, a font-relative unit. Learn more Add a "bubble" shine to the bottom-left area of the jar to make it look more like glass. Style the `.jar-glossy-long` and `.jar-glossy-short` to create a reflective shine. Here’s the final result: -![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.en.png) +![finished terrarium](../../../../translated_images/en/terrarium-final.2f07047ffc597d0a06b06cab28a77801a10dd12fdb6c7fc630e9c40665491c53.png) To complete the post-lecture quiz, explore this Learn module: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon) diff --git a/translations/en/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/en/3-terrarium/3-intro-to-DOM-and-closures/README.md index d2650926b..5823242f4 100644 --- a/translations/en/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/en/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Terrarium Project Part 3: DOM Manipulation and a Closure -![DOM and a closure](../../../../translated_images/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.en.png) +![DOM and a closure](../../../../translated_images/en/webdev101-js.10280393044d7eaaec7e847574946add7ddae6be2b2194567d848b61d849334a.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz @@ -28,7 +28,7 @@ We’ll use a closure to manipulate the DOM. Think of the DOM as a tree that represents all the ways a web page document can be manipulated. Various APIs (Application Program Interfaces) have been created to allow developers to access, edit, rearrange, and manage the DOM using their preferred programming language. -![DOM tree representation](../../../../translated_images/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.en.png) +![DOM tree representation](../../../../translated_images/en/dom-tree.7daf0e763cbbba9273f9a66fe04c98276d7d23932309b195cb273a9cf1819b42.png) > A representation of the DOM and the HTML markup that references it. From [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -205,7 +205,7 @@ This small function resets the `onpointerup` and `onpointermove` events, allowin Now your project is complete! -🥇Congratulations! You’ve finished your beautiful terrarium! ![finished terrarium](../../../../translated_images/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.en.png) +🥇Congratulations! You’ve finished your beautiful terrarium! ![finished terrarium](../../../../translated_images/en/terrarium-final.0920f16e87c13a84cd2b553a5af9a3ad1cffbd41fbf8ce715d9e9c43809a5e2c.png) --- diff --git a/translations/en/3-terrarium/README.md b/translations/en/3-terrarium/README.md index 6c61aaa44..e51f936a7 100644 --- a/translations/en/3-terrarium/README.md +++ b/translations/en/3-terrarium/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: A small drag-and-drop coding exercise. With a bit of HTML, JS, and CSS, you’ll be able to create a web interface, style it, and even add various interactions of your choice. -![my terrarium](../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.en.png) +![my terrarium](../../../translated_images/en/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.png) # Lessons diff --git a/translations/en/3-terrarium/solution/README.md b/translations/en/3-terrarium/solution/README.md index afa39069a..0c28bb0e1 100644 --- a/translations/en/3-terrarium/solution/README.md +++ b/translations/en/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: A small drag-and-drop coding exercise. With a bit of HTML, JS, and CSS, you can create a web interface, style it, and add interactivity. -![my terrarium](../../../../translated_images/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.en.png) +![my terrarium](../../../../translated_images/en/screenshot_gray.0c796099a1f9f25e40aa55ead81f268434c00af30d7092490759945eda63067d.png) ## Credits diff --git a/translations/en/5-browser-extension/1-about-browsers/README.md b/translations/en/5-browser-extension/1-about-browsers/README.md index dc668c0a0..71ab9b76f 100644 --- a/translations/en/5-browser-extension/1-about-browsers/README.md +++ b/translations/en/5-browser-extension/1-about-browsers/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Browser Extension Project Part 1: All about Browsers -![Browser sketchnote](../../../../translated_images/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.en.jpg) +![Browser sketchnote](../../../../translated_images/en/browser.60317c9be8b7f84adce43e30bff8d47a1ae15793beab762317b2bc6b74337c1a.jpg) > 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) ## Pre-Lecture Quiz @@ -28,7 +28,7 @@ So, what exactly is a browser? It's a software application that enables users to ✅ A bit of history: The first browser, called 'WorldWideWeb,' was created by Sir Timothy Berners-Lee in 1990. -![early browsers](../../../../translated_images/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.en.jpg) +![early browsers](../../../../translated_images/en/earlybrowsers.d984b711cdf3a42ddac919d46c4b5ca7232f68ccfbd81395e04e5a64c0015277.jpg) > Some early browsers, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) When a user connects to the internet using a URL (Uniform Resource Locator), typically through Hypertext Transfer Protocol (`http` or `https`), the browser communicates with a web server to retrieve a web page. @@ -55,7 +55,7 @@ Developing browser extensions is also enjoyable. They focus on specific tasks an Before building your own extension, familiarize yourself with the process of creating and deploying one. While each browser has slight variations, the process is similar across Chrome, Firefox, and Edge. Here's an example for Edge: -![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.en.png) +![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/en/install-on-edge.d68781acaf0b3d3dada8b7507cde7a64bf74b7040d9818baaa9070668e819f90.png) > Note: Make sure to toggle on developer mode and allow extensions from other stores. @@ -97,11 +97,11 @@ src This extension has two views: one for collecting the API key and region code: -![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.en.png) +![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/en/1.b6da8c1394b07491afeb6b2a8e5aca73ebd3cf478e27bcc9aeabb187e722648e.png) And another for displaying the region's carbon usage: -![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.en.png) +![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/en/2.1dae52ff0804224692cd648afbf2342955d7afe3b0101b617268130dfb427f55.png) Start by creating the HTML for the form and styling it with CSS. diff --git a/translations/en/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/en/5-browser-extension/2-forms-browsers-local-storage/README.md index 1cf839c34..e4b5202ca 100644 --- a/translations/en/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/en/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -110,7 +110,7 @@ Before proceeding, it's helpful to learn about an important browser concept: [Lo You can set your APIKey to have a string value, for example, and view it in Edge by "inspecting" a web page (right-click to inspect) and navigating to the Applications tab to see the storage. -![Local storage pane](../../../../translated_images/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.en.png) +![Local storage pane](../../../../translated_images/en/localstorage.472f8147b6a3f8d141d9551c95a2da610ac9a3c6a73d4a1c224081c98bae09d9.png) ✅ Consider situations where you would NOT want to store certain data in LocalStorage. Generally, storing API Keys in LocalStorage is a bad idea! Can you understand why? In our case, since this app is purely for learning and won't be published in an app store, we'll use this method. diff --git a/translations/en/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/en/5-browser-extension/3-background-tasks-and-performance/README.md index 85979fe9b..30943c028 100644 --- a/translations/en/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/en/5-browser-extension/3-background-tasks-and-performance/README.md @@ -29,7 +29,7 @@ The first step to ensuring your site runs efficiently is to gather data about it The Performance tab includes a Profiling tool. Open a website (for example, [https://www.microsoft.com](https://www.microsoft.com/?WT.mc_id=academic-77807-sagibbon)) and click the 'Record' button, then refresh the site. Stop the recording at any time, and you'll see routines generated for 'script', 'render', and 'paint' processes: -![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.en.png) +![Edge profiler](../../../../translated_images/en/profiler.5a4a62479c5df01cfec9aab74173dba13f91d2c968e1a1ae434c26165792df15.png) ✅ Visit the [Microsoft Documentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) on the Performance panel in Edge. @@ -39,11 +39,11 @@ Select elements of the profile timeline to zoom in on events that occur while yo Get a snapshot of your page's performance by selecting a part of the profile timeline and reviewing the summary pane: -![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.en.png) +![Edge profiler snapshot](../../../../translated_images/en/snapshot.97750180ebcad73794a3594b36925eb5c8dbaac9e03fec7f9b974188c9ac63c7.png) Check the Event Log pane to see if any event took longer than 15 ms: -![Edge event log](../../../../translated_images/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.en.png) +![Edge event log](../../../../translated_images/en/log.804026979f3707e00eebcfa028b2b5a88cec6292f858767bb6703afba65a7d9c.png) ✅ Familiarize yourself with the profiler! Open the developer tools on this site and check for bottlenecks. What is the slowest-loading asset? The fastest? diff --git a/translations/en/5-browser-extension/README.md b/translations/en/5-browser-extension/README.md index ba9314c10..aa01000d7 100644 --- a/translations/en/5-browser-extension/README.md +++ b/translations/en/5-browser-extension/README.md @@ -23,7 +23,7 @@ Users can manually activate this extension by entering an API key and region cod ### Credits -![a green browser extension](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.en.png) +![a green browser extension](../../../translated_images/en/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.png) ## Credits diff --git a/translations/en/5-browser-extension/solution/README.md b/translations/en/5-browser-extension/solution/README.md index 0fe0dc241..188ce0728 100644 --- a/translations/en/5-browser-extension/solution/README.md +++ b/translations/en/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Using tmrow's CO2 Signal API to monitor electricity consumption, create a browser extension that provides a reminder directly in your browser about the intensity of electricity usage in your region. Using this extension on the fly can help you make informed decisions about your activities based on this data. -![extension screenshot](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.en.png) +![extension screenshot](../../../../translated_images/en/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.png) ## Getting Started @@ -31,7 +31,7 @@ npm run build To install on Edge, open the 'three dot' menu in the top right corner of the browser to access the Extensions panel. From there, select 'Load Unpacked' to add a new extension. When prompted, open the 'dist' folder, and the extension will load. To use it, you will need an API key for CO2 Signal's API ([get one here via email](https://www.co2signal.com/) - enter your email in the box on this page) and the [code for your region](http://api.electricitymap.org/v3/zones) corresponding to the [Electricity Map](https://www.electricitymap.org/map) (for example, in Boston, I use 'US-NEISO'). -![installing](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.en.png) +![installing](../../../../translated_images/en/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.png) Once you input the API key and region into the extension interface, the colored dot in the browser extension bar will update to reflect your region's energy usage. It will also provide guidance on which energy-intensive activities might be suitable for you to undertake. The idea for this 'dot' system was inspired by the [Energy Lollipop extension](https://energylollipop.com/) for California emissions. diff --git a/translations/en/5-browser-extension/solution/translation/README.es.md b/translations/en/5-browser-extension/solution/translation/README.es.md index 45cdc6cb7..cbd3d98a6 100644 --- a/translations/en/5-browser-extension/solution/translation/README.es.md +++ b/translations/en/5-browser-extension/solution/translation/README.es.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Using tmrow's CO2 signal API to track electricity usage, create a browser extension so you can have a direct reminder in your browser about your region's electricity consumption. Using this ad hoc extension will help you make decisions about your activities based on this information. -![extension screenshot](../../../../../translated_images/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.en.png) +![extension screenshot](../../../../../translated_images/en/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.png) ## Getting Started @@ -31,7 +31,7 @@ npm run build To install on Edge, use the 'three dots' menu in the top-right corner of the browser to find the Extensions panel. From there, select 'Load unpacked' to load a new extension. Open the 'dist' folder when prompted, and the extension will be loaded. To use it, you will need an API key for the CO2 Signal API ([get one here via email](https://www.co2signal.com/) - enter your email in the box on this page) and the [code for your region](http://api.electricitymap.org/v3/zones) corresponding to the [Electricity Map](https://www.electricitymap.org/map) (in Boston, for example, I use 'US-NEISO'). -![installing](../../../../../translated_images/install-on-edge.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.en.png) +![installing](../../../../../translated_images/en/install-on-edge.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.png) Once the API key and region are entered in the extension interface, the colored dot in the browser's extension bar should change to reflect your region's energy usage and give you an indicator about high-energy consumption activities that would be appropriate for you. The concept behind this "dot" system was inspired by the [Energy Lollipop extension](https://energylollipop.com/) for California emissions. diff --git a/translations/en/5-browser-extension/solution/translation/README.fr.md b/translations/en/5-browser-extension/solution/translation/README.fr.md index 2a7251276..c6f3aaea1 100644 --- a/translations/en/5-browser-extension/solution/translation/README.fr.md +++ b/translations/en/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Using the CO2 Signal API from tmrow to monitor electricity consumption, create a browser extension so you can get a direct reminder in your browser about the electricity usage in your region. Using this ad hoc extension will help you make informed decisions about your activities based on this information. -![extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.en.png) +![extension screenshot](../../../../../translated_images/en/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.png) ## Getting Started @@ -31,7 +31,7 @@ npm run build To install on Edge, use the 'three dots' menu in the top-right corner of the browser to find the Extensions panel. From there, select 'Load unpacked extension' to load a new extension. Open the 'dist' folder when prompted, and the extension will load. To use it, you will need an API key for the CO2 Signal API ([get one here via email](https://www.co2signal.com/) - enter your email in the box on this page) and the [code for your region](http://api.electricitymap.org/v3/zones) corresponding to the [Electricity Map](https://www.electricitymap.org/map) (for Boston, for example, I use 'US-NEISO'). -![installation](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.en.png) +![installation](../../../../../translated_images/en/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.png) Once the API key and region are entered in the extension interface, the colored dot in the browser's extension bar should change to reflect your region's energy consumption and give you an indicator of energy-intensive activities that might be appropriate to perform. The concept behind this 'dot' system was inspired by the [Energy Lollipop extension](https://energylollipop.com/) for California emissions. diff --git a/translations/en/5-browser-extension/solution/translation/README.hi.md b/translations/en/5-browser-extension/solution/translation/README.hi.md index d14940ec5..d3d669f08 100644 --- a/translations/en/5-browser-extension/solution/translation/README.hi.md +++ b/translations/en/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Using tmrow's CO2 Signal API to track electricity usage, this browser extension provides a reminder about how carbon-intensive the electricity in your area is while you're browsing. By using this extension, you can make informed decisions about your activities based on this information. -![Extension Screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.en.png) +![Extension Screenshot](../../../../../translated_images/en/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.png) ## Getting Started @@ -31,7 +31,7 @@ npm run build To install on Edge, use the 'three dots' menu in the top-right corner of the browser to find the Extensions panel. From there, select 'Load unpacked' to load a new extension. When prompted, open the 'dist' folder, and the extension will load. To use it, you will need an API key for CO2 Signal ([get it here via email](https://www.co2signal.com/) by entering your email in the box on that page) and [the code for your region](http://api.electricitymap.org/v3/zones) from [Electricity Map](https://www.electricitymap.org/map) (for example, in Boston, I use 'US-NEISO'). -![Installing](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.en.png) +![Installing](../../../../../translated_images/en/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.png) Once the API key and region are entered into the extension interface, the colored dot in the browser extension bar should change to reflect the energy usage in your area and provide an indicator of whether energy-intensive activities are appropriate for your performance. The concept behind this 'dot' system was inspired by the [Energy Lollipop Extension](https://energylollipop.com/) for California emissions. diff --git a/translations/en/5-browser-extension/solution/translation/README.it.md b/translations/en/5-browser-extension/solution/translation/README.it.md index 11174d7f2..c2123fb9a 100644 --- a/translations/en/5-browser-extension/solution/translation/README.it.md +++ b/translations/en/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: We will use tmrow's CO2 Signal API to monitor electricity usage and create a browser extension that provides a direct reminder in your browser about the electricity intensity in your region. Using this custom extension will help you evaluate your activities based on this information. -![screenshot of the extension](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.en.png) +![screenshot of the extension](../../../../../translated_images/en/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.png) ## Getting Started @@ -31,7 +31,7 @@ npm run build To install on Edge, use the "three dots" menu in the top-right corner of the browser to find the Extensions panel. If not already enabled, turn on Developer Mode (bottom left). Select "Load unpacked" to load a new extension. Open the "dist" folder when prompted, and the extension will be loaded. To use it, you will need an API key for the CO2 Signal API (you can [get one here via email](https://www.co2signal.com/) - enter your email in the box on this page) and the [code for your region](http://api.electricitymap.org/v3/zones) corresponding to the [electricity map](https://www.electricitymap.org/map) (for example, in Boston, "US-NEISO"). -![installation](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.en.png) +![installation](../../../../../translated_images/en/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.png) Once the API key and region are entered in the extension interface, the colored dot in the browser's extension bar should change to reflect your region's energy usage and provide a pointer on which high-energy activities would be appropriate to perform. The concept behind this "dot" system was inspired by the [Energy Lollipop extension](https://energylollipop.com/) for California emissions. diff --git a/translations/en/5-browser-extension/solution/translation/README.ja.md b/translations/en/5-browser-extension/solution/translation/README.ja.md index 8b0226d73..d1544e973 100644 --- a/translations/en/5-browser-extension/solution/translation/README.ja.md +++ b/translations/en/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Using tmrow's CO2 Signal API, this browser extension tracks electricity usage in your area and displays it as a reminder directly in your browser. By using this extension on an ad hoc basis, you can make decisions about your activities based on this information. -![extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.en.png) +![extension screenshot](../../../../../translated_images/en/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.png) ## Getting Started @@ -31,7 +31,7 @@ npm run build To install it on Edge, find the "Extensions" panel from the "three dots" menu in the top-right corner of the browser. From there, select "Load Unpacked" to load the new extension. When prompted, open the "dist" folder, and the extension will be loaded. To use it, you'll need an API key for the CO2 Signal API ([get one here via email](https://www.co2signal.com/) - enter your email in the box on this page) and the [code for your region](http://api.electricitymap.org/v3/zones) corresponding to the [Electricity Map](https://www.electricitymap.org/map) (for example, in Boston, you would use 'US-NEISO'). -![installing](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.en.png) +![installing](../../../../../translated_images/en/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.png) Once you input the API key and region into the extension interface, the colored dot displayed in your browser's extension bar will change to reflect your area's energy usage. This helps indicate whether it's a good time to engage in activities that require energy. The concept for this "dot" system was inspired by the [Energy Lollipop extension](https://energylollipop.com/) for California emissions. diff --git a/translations/en/5-browser-extension/solution/translation/README.ms.md b/translations/en/5-browser-extension/solution/translation/README.ms.md index a7c00d903..4cab9010b 100644 --- a/translations/en/5-browser-extension/solution/translation/README.ms.md +++ b/translations/en/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Using the CO2 Signal API from tmrow to monitor electricity usage, build a browser extension that alerts you in your browser about the intensity of electricity consumption in your region. This extension can help you make informed decisions about your activities based on this information. -![browser extension screenshot](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.en.png) +![browser extension screenshot](../../../../../translated_images/en/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.png) ## Getting Started @@ -31,7 +31,7 @@ npm run build To install it on Edge, use the 'three dots' menu in the top-right corner of the browser to find the Extensions panel. From there, select 'Load Unpacked' to load a new extension. Open the 'dist' folder when prompted, and the extension will be loaded. To use it, you’ll need an API key for the CO2 Signal API ([get one here via email](https://www.co2signal.com/) - enter your email in the box on this page) and [the code for your region](http://api.electricitymap.org/v3/zones) corresponding to the [Electricity Map](https://www.electricitymap.org/map) (in Boston, for example, I use 'US-NEISO'). -![downloading](../../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.en.png) +![downloading](../../../../../translated_images/en/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.png) Once the API key and region are entered into the extension interface, the colored dot in the browser extension bar will change to reflect your region's energy usage and provide guidance on heavy activities that are appropriate for you to undertake. The concept behind this 'dot' system was inspired by [the Energy Lollipop browser extension](https://energylollipop.com/) for California emissions. diff --git a/translations/en/5-browser-extension/start/README.md b/translations/en/5-browser-extension/start/README.md index 345d7c30a..63eeb8a42 100644 --- a/translations/en/5-browser-extension/start/README.md +++ b/translations/en/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Using tmrow's CO2 Signal API to monitor electricity usage, create a browser extension that provides a reminder directly in your browser about the intensity of electricity usage in your region. Using this extension on the fly can help you make informed decisions about your activities based on this data. -![extension screenshot](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.en.png) +![extension screenshot](../../../../translated_images/en/extension-screenshot.0e7f5bfa110e92e3875e1bc9405edd45a3d2e02963e48900adb91926a62a5807.png) ## Getting Started @@ -31,7 +31,7 @@ npm run build To install on Edge, open the 'three dot' menu in the top right corner of the browser to access the Extensions panel. From there, select 'Load Unpacked' to add a new extension. When prompted, open the 'dist' folder, and the extension will load. To use it, you’ll need an API key for CO2 Signal's API ([request one here via email](https://www.co2signal.com/) - enter your email in the box on this page) and the [region code](http://api.electricitymap.org/v3/zones) corresponding to the [Electricity Map](https://www.electricitymap.org/map) (for example, in Boston, I use 'US-NEISO'). -![installing](../../../../translated_images/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.en.png) +![installing](../../../../translated_images/en/install-on-edge.78634f02842c48283726c531998679a6f03a45556b2ee99d8ff231fe41446324.png) Once you input the API key and region into the extension interface, the colored dot in the browser extension bar will update to reflect your region's energy usage. It will also provide guidance on which energy-intensive activities might be suitable for you to undertake. The idea for this 'dot' system was inspired by the [Energy Lollipop extension](https://energylollipop.com/) for California emissions. diff --git a/translations/en/6-space-game/2-drawing-to-canvas/README.md b/translations/en/6-space-game/2-drawing-to-canvas/README.md index e91b594a1..d8b0d81d8 100644 --- a/translations/en/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/en/6-space-game/2-drawing-to-canvas/README.md @@ -35,7 +35,7 @@ In the code above, we are setting the `id`, `width`, and `height`. The canvas uses a Cartesian coordinate system to draw shapes. This means it uses an x-axis and y-axis to determine where things are placed. The position `0,0` is the top-left corner, and the bottom-right corner corresponds to the `width` and `height` of the canvas. -![the canvas's grid](../../../../translated_images/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.en.png) +![the canvas's grid](../../../../translated_images/en/canvas_grid.5f209da785ded492a01ece440e3032afe51efa500cc2308e5ea4252487ceaf0b.png) > Image from [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) To draw on the canvas, follow these steps: @@ -132,11 +132,11 @@ You will create a webpage with a canvas element. The canvas should display a bla - Hero ship: - ![Hero ship](../../../../translated_images/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.en.png) + ![Hero ship](../../../../translated_images/en/player.dd24c1afa8c71e9b82b2958946d4bad13308681392d4b5ddcc61a0e818ef8088.png) - 5x5 monster grid: - ![Monster ship](../../../../translated_images/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.en.png) + ![Monster ship](../../../../translated_images/en/enemyShip.5df2a822c16650c2fb3c06652e8ec8120cdb9122a6de46b9a1a56d54db22657f.png) ### Recommended steps to start development @@ -200,7 +200,7 @@ Add the necessary code to `your-work/app.js` to complete the following tasks: The final result should look like this: -![Black screen with a hero and 5x5 monsters](../../../../translated_images/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.en.png) +![Black screen with a hero and 5x5 monsters](../../../../translated_images/en/partI-solution.36c53b48c9ffae2a5e15496b23b604ba5393433e4bf91608a7a0a020eb7a2691.png) ## Solution diff --git a/translations/en/6-space-game/5-keeping-score/README.md b/translations/en/6-space-game/5-keeping-score/README.md index 193eaae6f..f86e864a1 100644 --- a/translations/en/6-space-game/5-keeping-score/README.md +++ b/translations/en/6-space-game/5-keeping-score/README.md @@ -37,7 +37,7 @@ In games, the concept of "life" is simply a number. In a space game, it's common Let's add the following features to your game: - **Game score**: Award points for every enemy ship destroyed. We suggest 100 points per ship. The score should be displayed in the bottom left corner. -- **Life**: Your ship starts with three lives. You lose a life whenever an enemy ship collides with you. Lives should be displayed in the bottom right corner using the following graphic: ![life image](../../../../translated_images/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.en.png). +- **Life**: Your ship starts with three lives. You lose a life whenever an enemy ship collides with you. Lives should be displayed in the bottom right corner using the following graphic: ![life image](../../../../translated_images/en/life.6fb9f50d53ee0413cd91aa411f7c296e10a1a6de5c4a4197c718b49bf7d63ebf.png). ## Recommended steps diff --git a/translations/en/7-bank-project/1-template-route/README.md b/translations/en/7-bank-project/1-template-route/README.md index 4192c0b0d..55f1292bf 100644 --- a/translations/en/7-bank-project/1-template-route/README.md +++ b/translations/en/7-bank-project/1-template-route/README.md @@ -273,7 +273,7 @@ Try clicking these links—you should now be able to navigate between the differ Using `history.pushState` creates new entries in the browser’s navigation history. You can check this by holding the *back button* in your browser—it should display something like this: -![Screenshot of navigation history](../../../../translated_images/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.en.png) +![Screenshot of navigation history](../../../../translated_images/en/history.7fdabbafa521e06455b738d3dafa3ff41d3071deae60ead8c7e0844b9ed987d8.png) If you try clicking the back button a few times, you’ll notice that the current URL changes and the history is updated, but the same template keeps being displayed. diff --git a/translations/en/7-bank-project/2-forms/README.md b/translations/en/7-bank-project/2-forms/README.md index 7efc3cc34..41f06ff14 100644 --- a/translations/en/7-bank-project/2-forms/README.md +++ b/translations/en/7-bank-project/2-forms/README.md @@ -114,7 +114,7 @@ Now that we have a functional UI, the next step is to send the data to the serve Did you notice the change in your browser's URL? -![Screenshot of the browser's URL change after clicking the Register button](../../../../translated_images/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.en.png) +![Screenshot of the browser's URL change after clicking the Register button](../../../../translated_images/en/click-register.e89a30bf0d4bc9ca867dc537c4cea679a7c26368bd790969082f524fed2355bc.png) By default, a `
` submits data to the current server URL using the [GET method](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3), appending the form data to the URL. However, this method has limitations: @@ -136,7 +136,7 @@ Add `action` and `method` attributes to the registration form: Now try registering a new account with your name. After clicking the *Register* button, you should see something like this: -![A browser window at the address localhost:5000/api/accounts, showing a JSON string with user data](../../../../translated_images/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.en.png) +![A browser window at the address localhost:5000/api/accounts, showing a JSON string with user data](../../../../translated_images/en/form-post.61de4ca1b964d91a9e338416e19f218504dd0af5f762fbebabfe7ae80edf885f.png) If everything works correctly, the server will respond with a [JSON](https://www.json.org/json-en.html) object containing the created account data. @@ -236,7 +236,7 @@ async function register() { That was a lot, but we made it! Open your [browser developer tools](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools) and try registering a new account. You won't see any changes on the page, but a message will appear in the console confirming that everything works. -![Screenshot showing log message in the browser console](../../../../translated_images/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.en.png) +![Screenshot showing log message in the browser console](../../../../translated_images/en/browser-console.efaf0b51aaaf67782a29e1a0bb32cc063f189b18e894eb5926e02f1abe864ec2.png) ✅ Do you think the data is sent securely? What if someone intercepts the request? Learn more about [HTTPS](https://en.wikipedia.org/wiki/HTTPS) for secure data communication. @@ -278,7 +278,7 @@ Add a `maxlength` attribute to the text fields: Now, if you press the *Register* button and a field does not comply with a validation rule we defined, you should see something like this: -![Screenshot showing the validation error when trying to submit the form](../../../../translated_images/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.en.png) +![Screenshot showing the validation error when trying to submit the form](../../../../translated_images/en/validation-error.8bd23e98d416c22f80076d04829a4bb718e0e550fd622862ef59008ccf0d5dce.png) Validation like this, performed *before* sending any data to the server, is called **client-side** validation. However, note that it's not always possible to perform all checks without sending the data. For example, we cannot verify here if an account already exists with the same username without sending a request to the server. Additional validation performed on the server is called **server-side** validation. @@ -292,7 +292,7 @@ Display an error message in the HTML if the user already exists. Here's an example of what the final login page might look like after applying some styling: -![Screenshot of the login page after adding CSS styles](../../../../translated_images/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.en.png) +![Screenshot of the login page after adding CSS styles](../../../../translated_images/en/result.96ef01f607bf856aa9789078633e94a4f7664d912f235efce2657299becca483.png) ## Post-Lecture Quiz diff --git a/translations/en/7-bank-project/3-data/README.md b/translations/en/7-bank-project/3-data/README.md index 811dec688..5acf2c200 100644 --- a/translations/en/7-bank-project/3-data/README.md +++ b/translations/en/7-bank-project/3-data/README.md @@ -36,11 +36,11 @@ curl http://localhost:5000/api Traditional websites update their content when users click a link or submit a form by reloading the entire HTML page. Each time new data is needed, the web server sends back a fresh HTML page, which the browser processes. This interrupts the user's current action and limits interactions during the reload. This approach is known as a *Multi-Page Application* or *MPA*. -![Update workflow in a multi-page application](../../../../translated_images/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.en.png) +![Update workflow in a multi-page application](../../../../translated_images/en/mpa.7f7375a1a2d4aa779d3f928a2aaaf9ad76bcdeb05cfce2dc27ab126024050f51.png) As web applications became more interactive and complex, a technique called [AJAX (Asynchronous JavaScript and XML)](https://en.wikipedia.org/wiki/Ajax_(programming)) was introduced. AJAX allows web apps to send and retrieve data from a server asynchronously using JavaScript, without reloading the HTML page. This results in faster updates and smoother user experiences. Once new data is received, JavaScript can update the current HTML page using the [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) API. Over time, this approach evolved into what is now known as a [*Single-Page Application* or *SPA*](https://en.wikipedia.org/wiki/Single-page_application). -![Update workflow in a single-page application](../../../../translated_images/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.en.png) +![Update workflow in a single-page application](../../../../translated_images/en/spa.268ec73b41f992c2a21ef9294235c6ae597b3c37e2c03f0494c2d8857325cc57.png) Initially, the only API available for asynchronous data fetching was [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). However, modern browsers now support the more convenient and powerful [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API), which uses promises and is better suited for handling JSON data. @@ -166,7 +166,7 @@ if (data.error) { Now, if you try to log in with an invalid account, you'll see something like this: -![Screenshot showing the error message displayed during login](../../../../translated_images/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.en.png) +![Screenshot showing the error message displayed during login](../../../../translated_images/en/login-error.416fe019b36a63276764c2349df5d99e04ebda54fefe60c715ee87a28d5d4ad0.png) While the error text is visually displayed, screen readers won't announce it. To ensure dynamically added text is accessible to screen readers, we need to use a [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). We'll use a specific type of live region called an alert: @@ -331,7 +331,7 @@ Work together to make the dashboard page resemble a real banking app. If you've Here's an example of a styled dashboard page: -![Screenshot of an example result of the dashboard after styling](../../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.en.png) +![Screenshot of an example result of the dashboard after styling](../../../../translated_images/en/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.png) ## Post-Lecture Quiz diff --git a/translations/en/7-bank-project/4-state-management/README.md b/translations/en/7-bank-project/4-state-management/README.md index 6a8348acf..3e91021dd 100644 --- a/translations/en/7-bank-project/4-state-management/README.md +++ b/translations/en/7-bank-project/4-state-management/README.md @@ -53,7 +53,7 @@ We could address these issues individually, but doing so would lead to code dupl Once these challenges are addressed, other issues may either resolve themselves or become easier to fix. There are many approaches to solving these problems, but we'll use a common solution: **centralizing the data and the methods to modify it**. The data flows will look like this: -![Schema showing the data flows between the HTML, user actions and state](../../../../translated_images/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.en.png) +![Schema showing the data flows between the HTML, user actions and state](../../../../translated_images/en/data-flow.fa2354e0908fecc89b488010dedf4871418a992edffa17e73441d257add18da4.png) > We won't cover the part where data automatically triggers view updates, as it involves more advanced concepts of [Reactive Programming](https://en.wikipedia.org/wiki/Reactive_programming). It's a great topic for further exploration. @@ -286,7 +286,7 @@ Work together to modify what is saved and loaded from `localStorage` to include Here's an example result after completing the assignment: -![Screenshot showing an example "Add transaction" dialog](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.en.png) +![Screenshot showing an example "Add transaction" dialog](../../../../translated_images/en/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.png) --- diff --git a/translations/en/7-bank-project/4-state-management/assignment.md b/translations/en/7-bank-project/4-state-management/assignment.md index ffbd1d1ea..b235569c1 100644 --- a/translations/en/7-bank-project/4-state-management/assignment.md +++ b/translations/en/7-bank-project/4-state-management/assignment.md @@ -25,7 +25,7 @@ Refer to the [server API specifications](../api/README.md) to identify the API y Here's an example of the result after completing the task: -![Screenshot showing an example "Add transaction" dialog](../../../../translated_images/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.en.png) +![Screenshot showing an example "Add transaction" dialog](../../../../translated_images/en/dialog.93bba104afeb79f12f65ebf8f521c5d64e179c40b791c49c242cf15f7e7fab15.png) ## Rubric diff --git a/translations/en/7-bank-project/README.md b/translations/en/7-bank-project/README.md index 64116a23e..7d24f82ee 100644 --- a/translations/en/7-bank-project/README.md +++ b/translations/en/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: In this project, you'll learn how to create a fictional bank. These lessons include instructions on designing a web app layout, setting up routes, building forms, managing state, and retrieving data from an API to access the bank's information. -| ![Screen1](../../../translated_images/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.en.png) | ![Screen2](../../../translated_images/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.en.png) | +| ![Screen1](../../../translated_images/en/screen1.baccbba0f1f93364672eb250d2fbd21574bb1caf79a2155022dc098a741cbdfe.png) | ![Screen2](../../../translated_images/en/screen2.123c82a831a1d14ab2061994be2fa5de9cec1ce651047217d326d4773a6348e4.png) | |--------------------------------|--------------------------------| ## Lessons diff --git a/translations/en/8-code-editor/1-using-a-code-editor/README.md b/translations/en/8-code-editor/1-using-a-code-editor/README.md index 058faf658..bc04e37a8 100644 --- a/translations/en/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/en/8-code-editor/1-using-a-code-editor/README.md @@ -50,7 +50,7 @@ Visit **[VSCode.dev](https://vscode.dev)**—no installation or downloads requir After loading, your workspace will look like this: -![Default VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.en.png) +![Default VSCode.dev](../../../../translated_images/en/default-vscode-dev.5d06881d65c1b3234ce50cd9ed3b0028e6031ad5f5b441bcbed96bfa6311f6d0.png) It has three main sections from left to right: - **Activity bar:** Icons like 🔎 (Search), ⚙️ (Settings), files, source control, etc. @@ -67,11 +67,11 @@ Click through the icons to explore features, but return to the _Explorer_ to sta 1. Go to [VSCode.dev](https://vscode.dev). Click **"Open Remote Repository."** - ![Open remote repository](../../../../translated_images/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.en.png) + ![Open remote repository](../../../../translated_images/en/open-remote-repository.bd9c2598b8949e7fc283cdfc8f4050c6205a7c7c6d3f78c4b135115d037d6fa2.png) 2. Use the _Command Palette_ (Ctrl-Shift-P, or Cmd-Shift-P on Mac). - ![Palette Menu](../../../../translated_images/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.en.png) + ![Palette Menu](../../../../translated_images/en/palette-menu.4946174e07f426226afcdad707d19b8d5150e41591c751c45b5dee213affef91.png) - Select "Open remote repository." - Paste your GitHub repo URL (e.g., `https://github.com/microsoft/Web-Dev-For-Beginners`) and press Enter. @@ -101,14 +101,14 @@ Once your repository is open, you can: - Click the _‘New file ...’_ icon. - Name your file, press **Enter**, and it will appear instantly. -![Create a new file](../../../../translated_images/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.en.png) +![Create a new file](../../../../translated_images/en/create-new-file.2814e609c2af9aeb6c6fd53156c503ac91c3d538f9cac63073b2dd4a7631f183.png) ### 2. **Edit and Save Files** - Click on a file in the *Explorer* to open it in the code area. - Make your changes as needed. - VSCode.dev automatically saves your changes, but you can press Ctrl+S to save manually. -![Edit a file](../../../../translated_images/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.en.png) +![Edit a file](../../../../translated_images/en/edit-a-file.52c0ee665ef19f08119d62d63f395dfefddc0a4deb9268d73bfe791f52c5807a.png) ### 3. **Track & Commit Changes with Version Control** @@ -116,7 +116,7 @@ VSCode.dev includes integrated **Git** version control! - Click the _'Source Control'_ icon to view all changes made. - Files in the `Changes` folder show additions (green) and deletions (red). - ![View changes](../../../../translated_images/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.en.png) + ![View changes](../../../../translated_images/en/working-tree.c58eec08e6335c79cc708c0c220c0b7fea61514bd3c7fb7471905a864aceac7c.png) - Stage changes by clicking the `+` next to files to prepare for commit. - **Discard** unwanted changes by clicking the undo icon. @@ -124,7 +124,7 @@ VSCode.dev includes integrated **Git** version control! To return to your repository on GitHub, select the hamburger menu at the top left. -![Stage & commit changes](../../../../translated_images/edit-vscode-dev.2a58bb663e7d19e04e7ccdc9fc645155a15de1e6e9797056df7cca697a3cf7b6.en.png) +![Stage & commit changes](../../../../translated_images/en/edit-vscode-dev.2a58bb663e7d19e04e7ccdc9fc645155a15de1e6e9797056df7cca697a3cf7b6.png) *** @@ -137,13 +137,13 @@ Extensions allow you to add languages, themes, debuggers, and productivity tools - Click the **Extensions icon** on the activity bar. - Search for an extension in the _'Search Extensions in Marketplace'_ box. - ![Extension details](../../../../translated_images/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.en.png) + ![Extension details](../../../../translated_images/en/extension-details.9f8f1fd4e9eb2de5069ae413119eb8ee43172776383ebe2f7cf640e11df2e106.png) - **Installed**: All extensions you’ve added - **Popular**: Industry favorites - **Recommended**: Tailored to your workflow - ![View extensions](../../../../translated_images/view-extensions.2eed53221678066045e3684b9dabaafff07f590c7dfaec736457d0ac0017e867.en.png) + ![View extensions](../../../../translated_images/en/view-extensions.2eed53221678066045e3684b9dabaafff07f590c7dfaec736457d0ac0017e867.png) *** @@ -152,14 +152,14 @@ Extensions allow you to add languages, themes, debuggers, and productivity tools - Enter the extension’s name in the search bar, click it, and review details in the editor. - Hit the **blue Install button** in the sidebar _or_ in the main code area. - ![Install extensions](../../../../translated_images/install-extension.84dd866e187d79492aa2c41b18f3878eeadaa70fece7a11ef63e2627dcc8792c.en.png) + ![Install extensions](../../../../translated_images/en/install-extension.84dd866e187d79492aa2c41b18f3878eeadaa70fece7a11ef63e2627dcc8792c.png) ### 2. **Customize Extensions** - Find your installed extension. - Click the **Gear icon** → select _Extension Settings_ to adjust behaviors to your preferences. - ![Modify extension settings](../../../../translated_images/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.en.png) + ![Modify extension settings](../../../../translated_images/en/extension-settings.21c752ae4f4cdb78a867f140ccd0680e04619d0c44bb4afb26373e54b829d934.png) ### 3. **Manage Extensions** You can: diff --git a/translations/en/8-code-editor/1-using-a-code-editor/assignment.md b/translations/en/8-code-editor/1-using-a-code-editor/assignment.md index d2dabfd77..b9103ce07 100644 --- a/translations/en/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/en/8-code-editor/1-using-a-code-editor/assignment.md @@ -29,7 +29,7 @@ After completing this assignment, you will learn how to: Click the `creating a new file` link, type the name `index.html`, and select the `Commit new file` button. -![Create a new file on github.com](../../../../translated_images/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.en.png) +![Create a new file on github.com](../../../../translated_images/en/new-file-github.com.c886796d800e8056561829a181be1382c5303da9d902d8b2dd82b68a4806e21f.png) **Step 3:** Open [VSCode.dev](https://vscode.dev) and select the `Open Remote Repository` button. @@ -43,7 +43,7 @@ https://github.com/your-username/my-resume ✅ If successful, you’ll see your project and the `index.html` file open in the text editor in your browser. -![Create a new file](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.en.png) +![Create a new file](../../../../translated_images/en/project-on-vscode.dev.e79815a9a95ee7feac72ebe5c941c91279716be37c575dbdbf2f43bea2c7d8b6.png) **Step 4:** Open the `index.html` file, paste the code below into your code area, and save. @@ -225,7 +225,7 @@ Click the _`Extensions`_ icon on the activity bar and type in Codeswing. Either This is what you will see on your screen after installing the extension. -![Codeswing extension in action](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.en.png) +![Codeswing extension in action](../../../../translated_images/en/after-codeswing-extension-pb.0ebddddcf73b550994947a9084e35e2836c713ae13839d49628e3c764c1cfe83.png) If you’re satisfied with the changes you made, hover over the `Changes` folder and click the `+` button to stage the changes. diff --git a/translations/en/9-chat-project/README.md b/translations/en/9-chat-project/README.md index c82923677..ac727c9fc 100644 --- a/translations/en/9-chat-project/README.md +++ b/translations/en/9-chat-project/README.md @@ -13,7 +13,7 @@ This chat project demonstrates how to build a Chat Assistant using GitHub Models Here's what the completed project looks like: -![Chat app](../../../translated_images/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.en.png) +![Chat app](../../../translated_images/en/screenshot.0a1ee0d123df681b4501eb53ffb267519fcc20aa653eabecef1e7561ddfb1cab.png) To provide some context, building Chat Assistants with generative AI is an excellent way to start learning about AI. In this lesson, you'll learn how to integrate generative AI into a web app. Let's get started. @@ -21,11 +21,11 @@ To provide some context, building Chat Assistants with generative AI is an excel For the backend, we're using GitHub Models. It's a fantastic service that allows you to use AI for free. Visit its playground and grab the code corresponding to your preferred backend language. Here's what it looks like at [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground). -![GitHub Models AI Playground](../../../translated_images/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.en.png) +![GitHub Models AI Playground](../../../translated_images/en/playground.d2b927122224ff8ff4028fc842176e353c339147d8925455f36c92fb1655c477.png) As mentioned, select the "Code" tab and your preferred runtime. -![Playground choice](../../../translated_images/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.en.png) +![Playground choice](../../../translated_images/en/playground-choice.1d23ba7d407f47584c9f446c77f0bcf70cae794cc9c8d7849a3cca4a3693e6c4.png) ### Using Python @@ -386,11 +386,11 @@ Congratulations! You've learned how to create a personal assistant using AI from - Navigate to: [Web Dev For Beginners repo](https://github.com/microsoft/Web-Dev-For-Beginners). - Create a new repository from the template (make sure you're logged into GitHub) by clicking the button in the top-right corner: - ![Create from template](../../../translated_images/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.en.png) + ![Create from template](../../../translated_images/en/template.67ad477109d29a2b04599a83c964c87fcde041256d4f04d3589cbb00c696f76c.png) - Once you're in your repository, create a Codespace: - ![Create codespace](../../../translated_images/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.en.png) + ![Create codespace](../../../translated_images/en/codespace.bcecbdf5d2747d3d17da67a78ad911c8853d68102e34748ec372cde1e9236e1d.png) This will launch an environment where you can start working. diff --git a/translations/en/README.md b/translations/en/README.md index c59b4b4da..b8b85f146 100644 --- a/translations/en/README.md +++ b/translations/en/README.md @@ -58,13 +58,13 @@ Explore our new Generative AI curriculum! Visit [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) to get started! -![Background](../../translated_images/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.en.png) +![Background](../../translated_images/en/background.148a8d43afde57303419a663f50daf586681bc2fabf833f66ef6954073983c66.png) - Lessons covering everything from the basics to Retrieval-Augmented Generation (RAG). - Interact with historical characters using GenAI and our companion app. - A fun and engaging narrative—you'll be traveling through time! -![character](../../translated_images/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.en.png) +![character](../../translated_images/en/character.5c0dd8e067ffd693c16e2c5b7412ab075a2215ce31f998305639fa3a05e14fbe.png) Each lesson includes assignments, knowledge checks, and challenges to help you learn topics like: - Prompting and prompt engineering @@ -98,7 +98,7 @@ Follow these steps: In your copy of this repository, click the **Code** button and select **Open with Codespaces**. This will create a new Codespace for you to work in. -![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.en.png) +![Codespace](../../translated_images/en/createcodespace.0238bbf4d7a8d955fa8fa7f7b6602a3cb6499a24708fbee589f83211c5a613b7.png) #### Running the Curriculum Locally on Your Computer diff --git a/translations/en/for-teachers.md b/translations/en/for-teachers.md index 8943be8f7..65d11fabb 100644 --- a/translations/en/for-teachers.md +++ b/translations/en/for-teachers.md @@ -42,10 +42,10 @@ This curriculum includes importable packages for common LMS workflows. - Moodle Cloud has limited support for Common Cartridge files. Prefer the Moodle file above, which can also be uploaded into Canvas. - After importing, review modules, due dates, and quiz settings to align with your term schedule. -![Moodle](../../translated_images/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.en.png) +![Moodle](../../translated_images/en/moodle.94eb93d714a50cb2c97435b408017dee224348b61bc86203ffd43a4f4e57b95f.png) > The curriculum displayed in a Moodle classroom -![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.en.png) +![Canvas](../../translated_images/en/canvas.fbd605ff8e5b8aff567d398528ce113db304446b90b9cad55c654de3fdfcda34.png) > The curriculum displayed in Canvas ### Using the Repository Directly (Without GitHub Classroom) diff --git a/translations/es/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/es/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 32b2f22c9..d8015662d 100644 --- a/translations/es/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/es/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ Mira, entiendo totalmente si la programación te parece intimidante ahora mismo. Hoy vamos a explorar las increíbles herramientas que hacen que el desarrollo web moderno no solo sea posible, sino realmente adictivo. Estoy hablando de los mismos editores, navegadores y flujos de trabajo que los desarrolladores de Netflix, Spotify y tu estudio indie favorito usan cada día. Y aquí viene la parte que te hará bailar de alegría: ¡la mayoría de estas herramientas profesionales y estándar de la industria son completamente gratuitas! -![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.es.png) +![Intro Programming](../../../../translated_images/es/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote de [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/es/1-getting-started-lessons/2-github-basics/README.md b/translations/es/1-getting-started-lessons/2-github-basics/README.md index f40ba140b..b3a335aeb 100644 --- a/translations/es/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/es/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ Sé que esto puede parecer mucho al principio – caray, recuerdo mirar mi prime Vamos a hacer este viaje juntos, paso a paso. Sin prisa, sin presión – solo tú, yo y algunas herramientas realmente geniales que van a convertirse en tus nuevos mejores amigos. -![Intro to GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.es.png) +![Intro to GitHub](../../../../translated_images/es/webdev101-github.8846d7971abef6f9.webp) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -604,7 +604,7 @@ Primero, encuentra un repositorio (o **repo**) en GitHub que te interese y al qu ✅ Una buena manera de encontrar repositorios 'amigables para principiantes' es [buscar por la etiqueta 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Copia un repo localmente](../../../../translated_images/clone_repo.5085c48d666ead57.es.png) +![Copia un repo localmente](../../../../translated_images/es/clone_repo.5085c48d666ead57.webp) Hay varias maneras de copiar código. Una es "clonar" el contenido del repositorio, usando HTTPS, SSH o la CLI de GitHub (Interfaz de Línea de Comandos). diff --git a/translations/es/1-getting-started-lessons/3-accessibility/README.md b/translations/es/1-getting-started-lessons/3-accessibility/README.md index 4e5bc29fd..0c64dc55f 100644 --- a/translations/es/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/es/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Creación de Páginas Web Accesibles -![Todo sobre accesibilidad](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.es.png) +![Todo sobre accesibilidad](../../../../translated_images/es/webdev101-a11y.8ef3025c858d897a.webp) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -1049,12 +1049,12 @@ Cada imagen en tu sitio web cumple un propósito. Entender ese propósito te ayu **Imágenes informativas** - transmiten información importante: ```html -Sales increased 25% from Q1 to Q2 2024 +Sales increased 25% from Q1 to Q2 2024 ``` **Imágenes decorativas** - puramente visuales sin valor informativo: ```html - + ``` **Imágenes funcionales** - sirven como botones o controles: @@ -1066,7 +1066,7 @@ Cada imagen en tu sitio web cumple un propósito. Entender ese propósito te ayu **Imágenes complejas** - gráficas, diagramas, infografías: ```html -Quarterly sales data +Quarterly sales data

Detailed description: Sales data shows a steady increase across all quarters...

@@ -1106,7 +1106,7 @@ Cada imagen en tu sitio web cumple un propósito. Entender ese propósito te ayu - Website traffic increased 40% after accessibility improvements + Website traffic increased 40% after accessibility improvements ``` diff --git a/translations/es/2-js-basics/1-data-types/README.md b/translations/es/2-js-basics/1-data-types/README.md index 3fe7855e2..87b5a3311 100644 --- a/translations/es/2-js-basics/1-data-types/README.md +++ b/translations/es/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Fundamentos de JavaScript: Tipos de Datos -![JavaScript Basics - Data types](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.es.png) +![JavaScript Basics - Data types](../../../../translated_images/es/webdev101-js-datatypes.4cc470179730702c.webp) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/es/2-js-basics/2-functions-methods/README.md b/translations/es/2-js-basics/2-functions-methods/README.md index 47af7d6bf..7c884b552 100644 --- a/translations/es/2-js-basics/2-functions-methods/README.md +++ b/translations/es/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Fundamentos de JavaScript: Métodos y Funciones -![JavaScript Basics - Functions](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.es.png) +![JavaScript Basics - Functions](../../../../translated_images/es/webdev101-js-functions.be049c4726e94f8b.webp) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/es/2-js-basics/3-making-decisions/README.md b/translations/es/2-js-basics/3-making-decisions/README.md index a6853d9c3..d3a48251e 100644 --- a/translations/es/2-js-basics/3-making-decisions/README.md +++ b/translations/es/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Conceptos Básicos de JavaScript: Tomando Decisiones -![JavaScript Basics - Making decisions](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.es.png) +![JavaScript Basics - Making decisions](../../../../translated_images/es/webdev101-js-decisions.69e1b20f272dd1f0.webp) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/es/2-js-basics/4-arrays-loops/README.md b/translations/es/2-js-basics/4-arrays-loops/README.md index d6af6e4aa..23efa0348 100644 --- a/translations/es/2-js-basics/4-arrays-loops/README.md +++ b/translations/es/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Conceptos Básicos de JavaScript: Arrays y Bucles -![Conceptos Básicos de JavaScript - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.es.png) +![Conceptos Básicos de JavaScript - Arrays](../../../../translated_images/es/webdev101-js-arrays.439d7528b8a29455.webp) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/es/3-terrarium/1-intro-to-html/README.md b/translations/es/3-terrarium/1-intro-to-html/README.md index e528bfdf4..9743ed80b 100644 --- a/translations/es/3-terrarium/1-intro-to-html/README.md +++ b/translations/es/3-terrarium/1-intro-to-html/README.md @@ -25,7 +25,7 @@ journey Mejorar accesibilidad: 5: Student Construir terrario: 5: Student ``` -![Introducción a HTML](../../../../translated_images/webdev101-html.4389c2067af68e98.es.png) +![Introducción a HTML](../../../../translated_images/es/webdev101-html.4389c2067af68e98.webp) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) HTML, o Lenguaje de Marcado de Hipertexto, es la base de cada sitio web que hayas visitado. Piensa en HTML como el esqueleto que da estructura a las páginas web: define dónde va el contenido, cómo se organiza y qué representa cada pieza. Mientras que CSS más adelante "vestirá" tu HTML con colores y diseños, y JavaScript le dará vida con interactividad, HTML proporciona la estructura esencial que hace posible todo lo demás. @@ -86,7 +86,7 @@ Crearás una carpeta dedicada para tu proyecto terrario y agregarás tu primer a 4. En el panel Explorador, haz clic en el ícono "Nuevo archivo" 5. Nombra tu archivo `index.html` -![Explorador de VS Code mostrando creación de nuevo archivo](../../../../translated_images/vs-code-index.e2986cf919471eb9.es.png) +![Explorador de VS Code mostrando creación de nuevo archivo](../../../../translated_images/es/vs-code-index.e2986cf919471eb9.webp) **Opción 2: Usando comandos en la Terminal** ```bash @@ -236,48 +236,48 @@ Ahora añade las imágenes de las plantas organizadas en dos columnas entre tus
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
diff --git a/translations/es/3-terrarium/2-intro-to-css/README.md b/translations/es/3-terrarium/2-intro-to-css/README.md index d069c4cbd..48ed9c5e8 100644 --- a/translations/es/3-terrarium/2-intro-to-css/README.md +++ b/translations/es/3-terrarium/2-intro-to-css/README.md @@ -29,7 +29,7 @@ journey Diseño responsivo: 5: Student Reflexiones de vidrio: 5: Student ``` -![Introducción a CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a20.es.png) +![Introducción a CSS](../../../../translated_images/es/webdev101-css.3f7af5991bf53a20.webp) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) ¿Recuerdas cómo se veía tu terrario HTML bastante básico? CSS es donde transformamos esa estructura simple en algo visualmente atractivo. @@ -202,7 +202,7 @@ body { Abre las herramientas de desarrollo de tu navegador (F12), navega a la pestaña de Elementos, e inspecciona tu `

`. Verás que hereda la familia tipográfica del body: -![fuente heredada](../../../../translated_images/1.cc07a5cbe114ad1d.es.png) +![fuente heredada](../../../../translated_images/es/1.cc07a5cbe114ad1d.webp) ✅ **Tiempo de Experimento**: Prueba establecer otras propiedades heredables en el `` como `color`, `line-height` o `text-align`. ¿Qué pasa con tu encabezado y otros elementos? @@ -332,7 +332,7 @@ En nuestro terrario, cada planta necesita un estilo similar pero también necesi **Esta es la estructura HTML para cada planta:** ```html
- Decorative plant for terrarium + Decorative plant for terrarium
``` @@ -594,7 +594,7 @@ Aprende más sobre [modo agent](https://code.visualstudio.com/blogs/2025/02/24/i Crearás reflejos sutiles que simulan cómo la luz se refleja en las superficies de vidrio. Este enfoque es similar a cómo los pintores renacentistas como Jan van Eyck usaban la luz y reflexión para dar volumen tridimensional a los vidrios pintados. Esto es lo que buscas lograr: -![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a.es.png) +![finished terrarium](../../../../translated_images/es/terrarium-final.2f07047ffc597d0a.webp) **Tu desafío:** - **Crear** formas ovaladas sutiles blancas o de colores claros para los reflejos del vidrio diff --git a/translations/es/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/es/3-terrarium/3-intro-to-DOM-and-closures/README.md index 4dcd0c1e1..fa79f343e 100644 --- a/translations/es/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/es/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -25,7 +25,7 @@ journey Test functionality: 5: Student Complete terrarium: 5: Student ``` -![DOM y un closure](../../../../translated_images/webdev101-js.10280393044d7eaa.es.png) +![DOM y un closure](../../../../translated_images/es/webdev101-js.10280393044d7eaa.webp) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) Bienvenido a uno de los aspectos más atractivos del desarrollo web: ¡hacer que las cosas sean interactivas! El Modelo de Objetos del Documento (DOM) es como un puente entre tu HTML y JavaScript, y hoy lo usaremos para dar vida a tu terrario. Cuando Tim Berners-Lee creó el primer navegador web, imaginó una web donde los documentos pudieran ser dinámicos e interactivos; el DOM hace posible esa visión. @@ -102,7 +102,7 @@ flowchart TD style P fill:#ffebee style Q fill:#ffebee ``` -![Representación del árbol DOM](../../../../translated_images/dom-tree.7daf0e763cbbba92.es.png) +![Representación del árbol DOM](../../../../translated_images/es/dom-tree.7daf0e763cbbba92.webp) > Una representación del DOM y el marcado HTML que lo 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 ``` > 💡 **Entendiendo los Closures**: Los closures son un tema importante en JavaScript, y muchos desarrolladores los usan durante años antes de comprender completamente todos sus aspectos teóricos. Hoy nos concentramos en la aplicación práctica: verás closures emerger naturalmente mientras construimos nuestras características interactivas. La comprensión se desarrollará a medida que veas cómo solucionan problemas reales. -![Representación del árbol DOM](../../../../translated_images/dom-tree.7daf0e763cbbba92.es.png) +![Representación del árbol DOM](../../../../translated_images/es/dom-tree.7daf0e763cbbba92.webp) > Una representación del DOM y el marcado HTML que lo referencia. De [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -591,7 +591,7 @@ Nuestro sistema de arrastre manipula dos propiedades clave de CSS: - **Soporte multi-dispositivo**: Funciona en escritorio y móvil - **Conciencia de rendimiento**: Sin fugas de memoria ni cálculos redundantes -![terrario terminado](../../../../translated_images/terrarium-final.0920f16e87c13a84.es.png) +![terrario terminado](../../../../translated_images/es/terrarium-final.0920f16e87c13a84.webp) --- diff --git a/translations/es/5-browser-extension/1-about-browsers/README.md b/translations/es/5-browser-extension/1-about-browsers/README.md index e6fc76f11..cbc78b88c 100644 --- a/translations/es/5-browser-extension/1-about-browsers/README.md +++ b/translations/es/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/browser.60317c9be8b7f84a.es.jpg) +![Browser sketchnote](../../../../translated_images/es/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) ## Pre-Lecture Quiz @@ -77,7 +77,7 @@ Este proceso refleja cómo se diseñó el primer navegador web, WorldWideWeb, po ✅ **Un poco de historia**: El primer navegador se llamó 'WorldWideWeb' y fue creado por Sir Timothy Berners-Lee en 1990. -![early browsers](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.es.jpg) +![early browsers](../../../../translated_images/es/earlybrowsers.d984b711cdf3a42d.webp) > Algunos navegadores tempranos, vía [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### Cómo los Navegadores Procesan Contenido Web @@ -194,7 +194,7 @@ quadrantChart Entender el proceso de instalación de extensiones te ayuda a anticipar la experiencia del usuario cuando las personas instalen tu extensión. El proceso de instalación está estandarizado en navegadores modernos, con ligeras variaciones en el diseño de interfaz. -![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.es.png) +![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../../../../translated_images/es/install-on-edge.d68781acaf0b3d3d.webp) > **Importante**: Asegúrate de activar el modo desarrollador y permitir extensiones de otras tiendas al probar tus propias extensiones. @@ -308,10 +308,10 @@ Esto sigue el principio de divulgación progresiva usado en diseño de interface ### Visión General de Vistas de la Extensión **Vista de Configuración** - Configuración inicial para usuarios primerizos: -![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/1.b6da8c1394b07491.es.png) +![screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key.](../../../../translated_images/es/1.b6da8c1394b07491.webp) **Vista de Resultados** - Visualización de datos de huella de carbono: -![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/2.1dae52ff08042246.es.png) +![screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region.](../../../../translated_images/es/2.1dae52ff08042246.webp) ### Construyendo el Formulario de Configuración diff --git a/translations/es/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/es/5-browser-extension/2-forms-browsers-local-storage/README.md index a2cbb9a7e..5947fbf74 100644 --- a/translations/es/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/es/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -263,7 +263,7 @@ stateDiagram-v2 Reset --> ClearStorage: Eliminar datos guardados ClearStorage --> FirstTime: Volver a configuración ``` -![Panel de almacenamiento local](../../../../translated_images/localstorage.472f8147b6a3f8d1.es.png) +![Panel de almacenamiento local](../../../../translated_images/es/localstorage.472f8147b6a3f8d1.webp) > ⚠️ **Consideración de Seguridad**: En aplicaciones de producción, almacenar claves API en LocalStorage implica riesgos de seguridad ya que JavaScript puede acceder a estos datos. Para propósitos de aprendizaje, este enfoque funciona bien, pero las aplicaciones reales deberían usar almacenamiento seguro del lado del servidor para credenciales sensibles. diff --git a/translations/es/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/es/5-browser-extension/3-background-tasks-and-performance/README.md index e10bfcbee..58ed28032 100644 --- a/translations/es/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/es/5-browser-extension/3-background-tasks-and-performance/README.md @@ -123,7 +123,7 @@ Para abrir las Herramientas de Desarrollador en Edge, haz clic en esos tres punt Probémoslo. Abre un sitio web (Microsoft.com funciona bien para esto) y haz clic en el botón 'Grabar'. Ahora recarga la página y observa cómo el perfilador captura todo lo que sucede. Cuando detienes la grabación, verás un desglose detallado de cómo el navegador 'ejecuta scripts', 'renderiza' y 'pinta' el sitio. Me recuerda a cómo el control de misión monitorea cada sistema durante un lanzamiento de cohete: obtienes datos en tiempo real sobre exactamente qué está pasando y cuándo. -![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01c.es.png) +![Edge profiler](../../../../translated_images/es/profiler.5a4a62479c5df01c.webp) ✅ La [Documentación de Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) tiene muchos más detalles si quieres profundizar @@ -133,11 +133,11 @@ Selecciona elementos de la línea de tiempo del perfil para acercarte a eventos Obtén una instantánea del rendimiento de tu página seleccionando una parte de la línea de tiempo del perfil y mirando el panel de resumen: -![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad737.es.png) +![Edge profiler snapshot](../../../../translated_images/es/snapshot.97750180ebcad737.webp) Chequea el panel de Registro de Eventos para ver si algún evento tardó más de 15 ms: -![Edge event log](../../../../translated_images/log.804026979f3707e0.es.png) +![Edge event log](../../../../translated_images/es/log.804026979f3707e0.webp) ✅ ¡Conoce tu perfilador! Abre las herramientas de desarrollador en este sitio y ve si hay cuellos de botella. ¿Cuál es el recurso que carga más lento? ¿El más rápido? diff --git a/translations/es/6-space-game/2-drawing-to-canvas/README.md b/translations/es/6-space-game/2-drawing-to-canvas/README.md index fa6322c59..52402388e 100644 --- a/translations/es/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/es/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] ``` -![grilla del canvas](../../../../translated_images/canvas_grid.5f209da785ded492.es.png) +![grilla del canvas](../../../../translated_images/es/canvas_grid.5f209da785ded492.webp) > Imagen de [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) Para dibujar en el elemento canvas, seguirás el mismo proceso de tres pasos que forma la base de todos los gráficos en canvas. Una vez que lo hagas unas cuantas veces, se vuelve algo natural: @@ -323,11 +323,11 @@ Construirás una página web con un elemento Canvas. Debe mostrar una pantalla n - Nave héroe - ![Nave héroe](../../../../translated_images/player.dd24c1afa8c71e9b.es.png) + ![Nave héroe](../../../../translated_images/es/player.dd24c1afa8c71e9b.webp) - Monstruo 5x5 - ![Nave monstruo](../../../../translated_images/enemyShip.5df2a822c16650c2.es.png) + ![Nave monstruo](../../../../translated_images/es/enemyShip.5df2a822c16650c2.webp) ### Pasos recomendados para comenzar desarrollo @@ -463,7 +463,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { El resultado final debería verse así: -![Black screen with a hero and 5*5 monsters](../../../../translated_images/partI-solution.36c53b48c9ffae2a.es.png) +![Black screen with a hero and 5*5 monsters](../../../../translated_images/es/partI-solution.36c53b48c9ffae2a.webp) ## Solución diff --git a/translations/es/6-space-game/5-keeping-score/README.md b/translations/es/6-space-game/5-keeping-score/README.md index 7d47e9fa0..47fc1c340 100644 --- a/translations/es/6-space-game/5-keeping-score/README.md +++ b/translations/es/6-space-game/5-keeping-score/README.md @@ -155,7 +155,7 @@ sequenceDiagram end ``` - **Sistema de puntuación**: Cada nave enemiga destruida otorga 100 puntos (los números redondos son más fáciles de calcular mentalmente para los jugadores). La puntuación se muestra en la esquina inferior izquierda. -- **Contador de vidas**: Tu héroe comienza con tres vidas: un estándar establecido por juegos arcade tempranos para equilibrar el desafío con la jugabilidad. Cada colisión con un enemigo cuesta una vida. Mostraremos las vidas restantes en la esquina inferior derecha usando íconos de nave ![life image](../../../../translated_images/life.6fb9f50d53ee0413.es.png). +- **Contador de vidas**: Tu héroe comienza con tres vidas: un estándar establecido por juegos arcade tempranos para equilibrar el desafío con la jugabilidad. Cada colisión con un enemigo cuesta una vida. Mostraremos las vidas restantes en la esquina inferior derecha usando íconos de nave ![life image](../../../../translated_images/es/life.6fb9f50d53ee0413.webp). ## ¡Vamos a construir! diff --git a/translations/es/7-bank-project/1-template-route/README.md b/translations/es/7-bank-project/1-template-route/README.md index 2e62c3188..ca94669ac 100644 --- a/translations/es/7-bank-project/1-template-route/README.md +++ b/translations/es/7-bank-project/1-template-route/README.md @@ -644,7 +644,7 @@ sequenceDiagram Usar `history.pushState` crea nuevas entradas en el historial de navegación del navegador. Puedes comprobarlo manteniendo presionado el *botón de atrás* de tu navegador, debería mostrar algo así: -![Captura de pantalla del historial de navegación](../../../../translated_images/history.7fdabbafa521e064.es.png) +![Captura de pantalla del historial de navegación](../../../../translated_images/es/history.7fdabbafa521e064.webp) Si intentas hacer clic varias veces en el botón de atrás, verás que la URL cambia y el historial se actualiza, pero la misma plantilla sigue mostrándose. diff --git a/translations/es/7-bank-project/2-forms/README.md b/translations/es/7-bank-project/2-forms/README.md index 6c1f01431..e787ed5ea 100644 --- a/translations/es/7-bank-project/2-forms/README.md +++ b/translations/es/7-bank-project/2-forms/README.md @@ -292,7 +292,7 @@ Primero, observemos qué sucede con un envío básico: 2. Observa los cambios en la barra de direcciones del navegador 3. Nota cómo la página se recarga y los datos aparecen en la URL -![Captura de pantalla del cambio en la URL del navegador después de hacer clic en el botón de Registrar](../../../../translated_images/click-register.e89a30bf0d4bc9ca.es.png) +![Captura de pantalla del cambio en la URL del navegador después de hacer clic en el botón de Registrar](../../../../translated_images/es/click-register.e89a30bf0d4bc9ca.webp) ### Comparación de Métodos HTTP @@ -346,7 +346,7 @@ Configuremos tu formulario de registro para que se comunique correctamente con l 2. **Haz clic** en el botón "Crear Cuenta" 3. **Observa** la respuesta del servidor en tu navegador -![Una ventana de navegador en la dirección localhost:5000/api/accounts, mostrando un string JSON con datos del usuario](../../../../translated_images/form-post.61de4ca1b964d91a.es.png) +![Una ventana de navegador en la dirección localhost:5000/api/accounts, mostrando un string JSON con datos del usuario](../../../../translated_images/es/form-post.61de4ca1b964d91a.webp) **Lo que deberías ver:** - **El navegador redirige** a la URL del endpoint API @@ -609,7 +609,7 @@ async function register() { 3. **Haz clic** en "Crear Cuenta" 4. **Observa** los mensajes en consola y la retroalimentación al usuario -![Captura mostrando mensaje de log en la consola del navegador](../../../../translated_images/browser-console.efaf0b51aaaf6778.es.png) +![Captura mostrando mensaje de log en la consola del navegador](../../../../translated_images/es/browser-console.efaf0b51aaaf6778.webp) **Lo que deberías ver:** - **Aparece estado de carga** en el botón de enviar @@ -783,7 +783,7 @@ Mejoremos tu formulario de registro con validación robusta que brinda excelente 3. **Prueba** caracteres especiales en el campo de nombre de usuario 4. **Introduce** un saldo negativo -![Captura mostrando error de validación al intentar enviar el formulario](../../../../translated_images/validation-error.8bd23e98d416c22f.es.png) +![Captura mostrando error de validación al intentar enviar el formulario](../../../../translated_images/es/validation-error.8bd23e98d416c22f.webp) **Lo que observarás:** - **El navegador muestra** mensajes de validación nativos @@ -943,7 +943,7 @@ Muestra un mensaje de error en el HTML si el usuario ya existe. Aquí tienes un ejemplo de cómo puede verse la página de inicio de sesión final después de un poco de estilo: -![Captura de pantalla de la página de inicio de sesión después de agregar estilos CSS](../../../../translated_images/result.96ef01f607bf856a.es.png) +![Captura de pantalla de la página de inicio de sesión después de agregar estilos CSS](../../../../translated_images/es/result.96ef01f607bf856a.webp) ## Cuestionario posterior a la clase diff --git a/translations/es/7-bank-project/3-data/README.md b/translations/es/7-bank-project/3-data/README.md index 31b431089..3d7b154c1 100644 --- a/translations/es/7-bank-project/3-data/README.md +++ b/translations/es/7-bank-project/3-data/README.md @@ -156,7 +156,7 @@ sequenceDiagram Server->>Browser: Devuelve página HTML completa Browser->>User: Muestra nueva página (destello/recarga) ``` -![Flujo de actualización en una aplicación de múltiples páginas](../../../../translated_images/mpa.7f7375a1a2d4aa77.es.png) +![Flujo de actualización en una aplicación de múltiples páginas](../../../../translated_images/es/mpa.7f7375a1a2d4aa77.webp) **Por qué este enfoque se sentía torpe:** - Cada clic significaba reconstruir toda la página desde cero @@ -182,7 +182,7 @@ sequenceDiagram JavaScript->>Browser: Actualiza elementos específicos de la página Browser->>User: Muestra contenido actualizado (sin recargar) ``` -![Flujo de actualización en una aplicación de página única](../../../../translated_images/spa.268ec73b41f992c2.es.png) +![Flujo de actualización en una aplicación de página única](../../../../translated_images/es/spa.268ec73b41f992c2.webp) **Por qué las SPA se sienten mucho mejor:** - Solo las partes que cambiaron realmente se actualizan (inteligente, ¿no?) @@ -516,7 +516,7 @@ if (data.error) { ¡Ahora, cuando pruebes con una cuenta inválida, verás un mensaje de error útil directamente en la página! -![Captura de pantalla que muestra el mensaje de error durante el inicio de sesión](../../../../translated_images/login-error.416fe019b36a6327.es.png) +![Captura de pantalla que muestra el mensaje de error durante el inicio de sesión](../../../../translated_images/es/login-error.416fe019b36a6327.webp) #### Paso 4: Ser Inclusivos con la Accesibilidad @@ -950,7 +950,7 @@ Aprende más sobre [modo agente](https://code.visualstudio.com/blogs/2025/02/24/ Así podría verse un panel pulido: -![Captura de pantalla de un resultado ejemplo del panel después del estilo](../../../../translated_images/screen2.123c82a831a1d14a.es.png) +![Captura de pantalla de un resultado ejemplo del panel después del estilo](../../../../translated_images/es/screen2.123c82a831a1d14a.webp) No sientas que tienes que igualar esto exactamente, úsalo como inspiración y hazlo tuyo. diff --git a/translations/es/7-bank-project/4-state-management/README.md b/translations/es/7-bank-project/4-state-management/README.md index 4b91ecc1f..069452555 100644 --- a/translations/es/7-bank-project/4-state-management/README.md +++ b/translations/es/7-bank-project/4-state-management/README.md @@ -187,7 +187,7 @@ La [gestión de estado](https://en.wikipedia.org/wiki/State_management) trata re En lugar de perseguir nuestra cola, vamos a crear un sistema de **gestión de estado centralizada**. Piénsalo como tener una persona realmente organizada encargada de todas las cosas importantes: -![Esquema que muestra el flujo de datos entre el HTML, acciones del usuario y estado](../../../../translated_images/data-flow.fa2354e0908fecc8.es.png) +![Esquema que muestra el flujo de datos entre el HTML, acciones del usuario y estado](../../../../translated_images/es/data-flow.fa2354e0908fecc8.webp) ```mermaid flowchart TD @@ -798,7 +798,7 @@ Este desafío te ayudará a pensar como un desarrollador profesional que conside Aquí un ejemplo de resultado tras completar la tarea: -![Captura de pantalla mostrando un ejemplo de diálogo "Agregar transacción"](../../../../translated_images/dialog.93bba104afeb79f1.es.png) +![Captura de pantalla mostrando un ejemplo de diálogo "Agregar transacción"](../../../../translated_images/es/dialog.93bba104afeb79f1.webp) --- diff --git a/translations/es/7-bank-project/4-state-management/assignment.md b/translations/es/7-bank-project/4-state-management/assignment.md index 98544967f..c7c306aa7 100644 --- a/translations/es/7-bank-project/4-state-management/assignment.md +++ b/translations/es/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ Consulta la [documentación de la API del servidor](../api/README.md) para: **Resultado esperado:** Al completar esta tarea, tu aplicación bancaria debería tener una función "Agregar Transacción" totalmente funcional que luzca y se comporte profesionalmente: -![Captura de pantalla mostrando un ejemplo del diálogo "Agregar transacción"](../../../../translated_images/dialog.93bba104afeb79f1.es.png) +![Captura de pantalla mostrando un ejemplo del diálogo "Agregar transacción"](../../../../translated_images/es/dialog.93bba104afeb79f1.webp) ## Pruebas de tu implementación diff --git a/translations/es/8-code-editor/1-using-a-code-editor/README.md b/translations/es/8-code-editor/1-using-a-code-editor/README.md index 5a6d04230..1f58ca5fb 100644 --- a/translations/es/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/es/8-code-editor/1-using-a-code-editor/README.md @@ -182,7 +182,7 @@ Como el teléfono de Alexander Graham Bell conectó lugares remotos, vincular tu Una vez que todo cargue, verás un espacio de trabajo limpio y hermoso diseñado para mantenerte enfocado en lo que importa: ¡tu código! -![Interfaz por defecto de VSCode.dev](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.es.png) +![Interfaz por defecto de VSCode.dev](../../../../translated_images/es/default-vscode-dev.5d06881d65c1b323.webp) **Aquí tienes tu recorrido por el vecindario:** - **Barra de Actividades** (esa franja a la izquierda): Tu navegación principal con Explorador 📁, Búsqueda 🔍, Control de Código Fuente 🌿, Extensiones 🧩 y Configuración ⚙️ @@ -229,7 +229,7 @@ Perfecto cuando comienzas fresco en VSCode.dev y quieres abrir un repositorio es 1. Ve a [vscode.dev](https://vscode.dev) si aún no estás allí 2. Busca el botón "Open Remote Repository" en la pantalla de bienvenida y haz clic - ![Abrir repositorio remoto](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.es.png) + ![Abrir repositorio remoto](../../../../translated_images/es/open-remote-repository.bd9c2598b8949e7f.webp) 3. Pega cualquier URL de repositorio de GitHub (prueba este: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. Presiona Enter y observa la magia suceder @@ -238,7 +238,7 @@ Perfecto cuando comienzas fresco en VSCode.dev y quieres abrir un repositorio es ¿Quieres sentirte como un mago del código? Prueba este atajo de teclado: Ctrl+Shift+P (o Cmd+Shift+P en Mac) para abrir el Command Palette: -![Command Palette](../../../../translated_images/palette-menu.4946174e07f42622.es.png) +![Command Palette](../../../../translated_images/es/palette-menu.4946174e07f42622.webp) **El Command Palette es como tener un motor de búsqueda para todo lo que puedes hacer:** - Escribe "open remote" y encontrarás el abridor de repositorios @@ -300,7 +300,7 @@ Como organizar planos en la oficina de un arquitecto, la creación de archivos e 3. Escribe el nombre del archivo incluyendo la extensión apropiada (`style.css`, `script.js`, `index.html`) 4. Presiona Enter para crear el archivo -![Creando un archivo nuevo](../../../../translated_images/create-new-file.2814e609c2af9aeb.es.png) +![Creando un archivo nuevo](../../../../translated_images/es/create-new-file.2814e609c2af9aeb.webp) **Convenciones de nombres:** - Usa nombres descriptivos que indiquen el propósito del archivo @@ -318,7 +318,7 @@ Como organizar planos en la oficina de un arquitecto, la creación de archivos e 2. Comienza a teclear y observa cómo VSCode.dev te ayuda con colores, sugerencias y detección de errores 3. Guarda tu trabajo con Ctrl+S (Windows/Linux) o Cmd+S (Mac), ¡aunque también guarda automáticamente! -![Editando archivos en VSCode.dev](../../../../translated_images/edit-a-file.52c0ee665ef19f08.es.png) +![Editando archivos en VSCode.dev](../../../../translated_images/es/edit-a-file.52c0ee665ef19f08.webp) **Lo genial que sucede mientras codificas:** - Tu código se colorea bellamente para facilitar la lectura @@ -339,7 +339,7 @@ Así como los arqueólogos crean registros detallados de capas de excavación, G 2. Los archivos modificados aparecen en la sección "Changes" 3. La codificación por colores indica tipos de cambios: verde para adiciones, rojo para eliminaciones -![Viendo cambios en Control de Código Fuente](../../../../translated_images/working-tree.c58eec08e6335c79.es.png) +![Viendo cambios en Control de Código Fuente](../../../../translated_images/es/working-tree.c58eec08e6335c79.webp) **Guardar tu trabajo (flujo de commits):** @@ -431,7 +431,7 @@ El mercado de extensiones está muy bien organizado, así que no te perderás in 2. Navega o busca algo específico 3. Haz clic en cualquier cosa que parezca interesante para aprender más sobre ella -![Interfaz del mercado de extensiones](../../../../translated_images/extensions.eca0e0c7f59a10b5.es.png) +![Interfaz del mercado de extensiones](../../../../translated_images/es/extensions.eca0e0c7f59a10b5.webp) **Qué verás allí:** @@ -484,7 +484,7 @@ La mayoría de las extensiones vienen con configuraciones que puedes ajustar par 3. Escoge "Configuración de la extensión" en el menú desplegable 4. Ajusta las cosas hasta que se sientan perfectas para tu flujo de trabajo -![Personalizando la configuración de extensiones](../../../../translated_images/extension-settings.21c752ae4f4cdb78.es.png) +![Personalizando la configuración de extensiones](../../../../translated_images/es/extension-settings.21c752ae4f4cdb78.webp) **Cosas comunes que quizás quieras ajustar:** - Cómo se formatea tu código (tabs vs espacios, longitud de línea, etc.) diff --git a/translations/es/8-code-editor/1-using-a-code-editor/assignment.md b/translations/es/8-code-editor/1-using-a-code-editor/assignment.md index c4a9b095f..266dd9428 100644 --- a/translations/es/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/es/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ Como VSCode.dev requiere al menos un archivo para abrir un repositorio, crearemo 4. **Escribe** un mensaje para el commit: "Add initial HTML structure" 5. **Haz clic** en "Commit new file" para guardar tus cambios -![Creando el archivo inicial en GitHub](../../../../translated_images/new-file-github.com.c886796d800e8056.es.png) +![Creando el archivo inicial en GitHub](../../../../translated_images/es/new-file-github.com.c886796d800e8056.webp) **Esto es lo que logra esta configuración inicial:** - **Establece** la estructura correcta del documento HTML5 con elementos semánticos @@ -104,7 +104,7 @@ Ahora que la base de tu repositorio está establecida, vamos a pasar a VSCode.de ✅ **Indicador de éxito**: Deberías ver los archivos de tu proyecto en la barra lateral del Explorador y `index.html` disponible para editar en el área principal del editor. -![Proyecto cargado en VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.es.png) +![Proyecto cargado en VSCode.dev](../../../../translated_images/es/project-on-vscode.dev.e79815a9a95ee7fe.webp) **Qué verás en la interfaz:** - **Barra lateral del Explorador**: **Muestra** los archivos y la estructura de carpetas de tu repositorio @@ -448,7 +448,7 @@ Las extensiones mejoran tu experiencia de desarrollo proporcionando capacidades **Resultados inmediatos tras la instalación:** Una vez instalado CodeSwing, verás una vista previa en vivo de tu sitio de currículum aparecer en el editor. Esto te permite ver exactamente cómo luce tu sitio conforme haces cambios. -![Extensión CodeSwing mostrando vista previa en vivo](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.es.png) +![Extensión CodeSwing mostrando vista previa en vivo](../../../../translated_images/es/after-codeswing-extension-pb.0ebddddcf73b5509.webp) **Entendiendo la interfaz mejorada:** - **Vista dividida**: **Muestra** tu código a un lado y la vista previa en vivo al otro diff --git a/translations/es/9-chat-project/README.md b/translations/es/9-chat-project/README.md index 15179749a..190be96e9 100644 --- a/translations/es/9-chat-project/README.md +++ b/translations/es/9-chat-project/README.md @@ -60,7 +60,7 @@ print(response.choices[0].message.content) Así es como se verá tu proyecto terminado: -![Interfaz de app de chat mostrando conversación entre usuario y asistente de IA](../../../translated_images/screenshot.0a1ee0d123df681b.es.png) +![Interfaz de app de chat mostrando conversación entre usuario y asistente de IA](../../../translated_images/es/screenshot.0a1ee0d123df681b.webp) ## 🗺️ Tu Viaje de Aprendizaje en el Desarrollo de Aplicaciones de IA @@ -189,7 +189,7 @@ mindmap ``` **Principio Fundamental**: El desarrollo de aplicaciones de IA combina habilidades tradicionales de desarrollo web con integración de servicios de IA, creando aplicaciones inteligentes que se sienten naturales y receptivas para los usuarios. -![Interfaz GitHub Models AI Playground con selección de modelo y área de prueba](../../../translated_images/playground.d2b927122224ff8f.es.png) +![Interfaz GitHub Models AI Playground con selección de modelo y área de prueba](../../../translated_images/es/playground.d2b927122224ff8f.webp) **Esto es lo que hace el playground tan útil:** - **Prueba** diferentes modelos de IA como GPT-4o-mini, Claude y otros (¡todos gratis!) @@ -199,7 +199,7 @@ mindmap Una vez que hayas jugado un poco, solo haz clic en la pestaña "Code" y elige tu lenguaje de programación para obtener el código de implementación que necesitas. -![Elección en playground mostrando opciones de generación de código para diferentes lenguajes de programación](../../../translated_images/playground-choice.1d23ba7d407f4758.es.png) +![Elección en playground mostrando opciones de generación de código para diferentes lenguajes de programación](../../../translated_images/es/playground-choice.1d23ba7d407f4758.webp) ## Configurando la Integración Backend en Python @@ -2349,14 +2349,14 @@ Las habilidades que has desarrollado en esta lección son directamente aplicable - **Navega** al [repositorio Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners) - **Haz clic** en "Use this template" en la esquina superior derecha (asegúrate de estar conectado a GitHub) -![Interfaz para crear desde plantilla mostrando el botón verde "Use this template"](../../../translated_images/template.67ad477109d29a2b.es.png) +![Interfaz para crear desde plantilla mostrando el botón verde "Use this template"](../../../translated_images/es/template.67ad477109d29a2b.webp) **Paso 2: Lanzar Codespaces** - **Abre** tu repositorio recién creado - **Haz clic** en el botón verde "Code" y selecciona "Codespaces" - **Elige** "Create codespace on main" para iniciar tu entorno de desarrollo -![Interfaz para crear un codespace con opciones para lanzar el entorno de desarrollo en la nube](../../../translated_images/codespace.bcecbdf5d2747d3d.es.png) +![Interfaz para crear un codespace con opciones para lanzar el entorno de desarrollo en la nube](../../../translated_images/es/codespace.bcecbdf5d2747d3d.webp) **Paso 3: Configuración del entorno** Una vez que tu Codespace cargue, tendrás acceso a: diff --git a/translations/es/README.md b/translations/es/README.md index 081213e5f..9e0e89986 100644 --- a/translations/es/README.md +++ b/translations/es/README.md @@ -72,13 +72,13 @@ Nuevo proyecto de Asistente de IA agregado, revisa el [proyecto](./9-chat-projec Visita [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) para comenzar! -![Fondo](../../translated_images/background.148a8d43afde5730.es.png) +![Fondo](../../translated_images/es/background.148a8d43afde5730.webp) - Lecciones que cubren todo desde lo básico hasta RAG. - Interactúa con personajes históricos usando GenAI y nuestra app compañera. - Narrativa divertida y atractiva, ¡viajarás en el tiempo! -![personaje](../../translated_images/character.5c0dd8e067ffd693.es.png) +![personaje](../../translated_images/es/character.5c0dd8e067ffd693.webp) Cada lección incluye una tarea para completar, una revisión de conocimientos y un desafío para guiarte en tópicos como: @@ -115,7 +115,7 @@ Sigue estos pasos: En tu copia de este repositorio que creaste, haz clic en el botón **Code** y selecciona **Abrir con Codespaces**. Esto creará un nuevo Codespace para que trabajes dentro. -![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.es.png) +![Codespace](../../translated_images/es/createcodespace.0238bbf4d7a8d955.webp) #### Ejecutando el currículo localmente en tu computadora diff --git a/translations/es/for-teachers.md b/translations/es/for-teachers.md index 5e1c0b147..e315e9294 100644 --- a/translations/es/for-teachers.md +++ b/translations/es/for-teachers.md @@ -42,10 +42,10 @@ Este plan de estudios incluye paquetes importables para flujos de trabajo comune - Moodle Cloud tiene soporte limitado para Common Cartridge. Es preferible usar el archivo de Moodle mencionado anteriormente, que también puede cargarse en Canvas. - Después de importar, revisa los módulos, fechas de entrega y configuraciones de cuestionarios para ajustarlos al calendario de tu periodo. -![Moodle](../../translated_images/moodle.94eb93d714a50cb2.es.png) +![Moodle](../../translated_images/es/moodle.94eb93d714a50cb2.webp) > El plan de estudios en un aula de Moodle -![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.es.png) +![Canvas](../../translated_images/es/canvas.fbd605ff8e5b8aff.webp) > El plan de estudios en Canvas ### Uso del repositorio directamente (sin Classroom) diff --git a/translations/et/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/et/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 0ddf48f09..882b67b79 100644 --- a/translations/et/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/et/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -17,7 +17,7 @@ Kuule, ma saan täiesti aru, kui programmeerimine tundub praegu hirmutav. Kui ma Täna uurime uskumatuid tööriistu, mis teevad kaasaegse veebi arendamise mitte ainult võimalikuks, vaid väga sõltuvust tekitavaks. Räägin täpselt nendest samadest editoridest, brauseritest ja töövoogudest, mida kasutavad Netflixi, Spotify ja sinu lemmik sõltumatu rakenduse stuudio arendajad iga päev. Ja siin on osa, mis paneb sind rõõmust tantsima: enamik neist professionaalsest klassist ja tööstusharu standarditest tööriistadest on täiesti tasuta! -![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.et.png) +![Intro Programming](../../../../translated_images/et/webdev101-programming.d6e3f98e61ac4bff.png) > Sketchnote autor [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/et/1-getting-started-lessons/2-github-basics/README.md b/translations/et/1-getting-started-lessons/2-github-basics/README.md index 3eb2e7c32..e09ede080 100644 --- a/translations/et/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/et/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ Ma tean, et alguses võib see kõik tunduda palju – ausalt öeldes mäletan, k Me võtame selle teekonna koos – sammhaaval. Ilma kiirustamise ja pingeta – ainult sina, mina ja mõned väga lahedad tööriistad, mis saavad sinu uueks parimaks sõbraks! -![Intro to GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.et.png) +![Intro to GitHub](../../../../translated_images/et/webdev101-github.8846d7971abef6f9.png) > Sketchnote autor [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -606,7 +606,7 @@ Esmalt leidke GitHubist endale huvipakkuv hoidlasse (või **repo**), kuhu soovik ✅ Hea viis "algajasõbralike" hoidlate leidmiseks on [otsida silti 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Kopeerige hoidla kohalikult](../../../../translated_images/clone_repo.5085c48d666ead57.et.png) +![Kopeerige hoidla kohalikult](../../../../translated_images/et/clone_repo.5085c48d666ead57.png) Koodi kopeerimiseks on mitu võimalust. Üks neist on 'kloneerida' hoidla sisu HTTPS-i, SSH-ga või GitHub CLI (käsklusrida) abil. diff --git a/translations/et/1-getting-started-lessons/3-accessibility/README.md b/translations/et/1-getting-started-lessons/3-accessibility/README.md index f5dd79a5b..8b75c3198 100644 --- a/translations/et/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/et/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Ligipääsetavate Veebilehtede Loomine -![Kõigest Ligipääsetavusest](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.et.png) +![Kõigest Ligipääsetavusest](../../../../translated_images/et/webdev101-a11y.8ef3025c858d897a.png) > Sketchnote autor [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid @@ -1049,12 +1049,12 @@ Iga pilt sinu veebilehel täidab eesmärki. Selle eesmärgi mõistmine aitab par **Informatiivsed pildid** – edastavad olulist infot: ```html -Sales increased 25% from Q1 to Q2 2024 +Sales increased 25% from Q1 to Q2 2024 ``` **Dekoratiivsed pildid** – puhtalt visuaalsed, informatsioonivabad: ```html - + ``` **Funktsionaalsed pildid** – toimivad nuppude või kontrolleritena: @@ -1066,7 +1066,7 @@ Iga pilt sinu veebilehel täidab eesmärki. Selle eesmärgi mõistmine aitab par **Keerukad pildid** – graafikud, diagrammid, infograafikud: ```html -Quarterly sales data +Quarterly sales data

Detailed description: Sales data shows a steady increase across all quarters...

@@ -1106,7 +1106,7 @@ Iga pilt sinu veebilehel täidab eesmärki. Selle eesmärgi mõistmine aitab par - Website traffic increased 40% after accessibility improvements + Website traffic increased 40% after accessibility improvements ``` diff --git a/translations/et/2-js-basics/1-data-types/README.md b/translations/et/2-js-basics/1-data-types/README.md index 441816571..1674d0aff 100644 --- a/translations/et/2-js-basics/1-data-types/README.md +++ b/translations/et/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScripti põhialused: andmetüübid -![JavaScripti põhialused - Andmetüübid](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.et.png) +![JavaScripti põhialused - Andmetüübid](../../../../translated_images/et/webdev101-js-datatypes.4cc470179730702c.png) > Sketchnote autorilt [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/et/2-js-basics/2-functions-methods/README.md b/translations/et/2-js-basics/2-functions-methods/README.md index 0e8f95a81..84c697b2c 100644 --- a/translations/et/2-js-basics/2-functions-methods/README.md +++ b/translations/et/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScripti alused: meetodid ja funktsioonid -![JavaScript Basics - Functions](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.et.png) +![JavaScript Basics - Functions](../../../../translated_images/et/webdev101-js-functions.be049c4726e94f8b.png) > Sketchnote autorilt [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/et/2-js-basics/3-making-decisions/README.md b/translations/et/2-js-basics/3-making-decisions/README.md index f3722cb03..56653c50e 100644 --- a/translations/et/2-js-basics/3-making-decisions/README.md +++ b/translations/et/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScripti alused: otsuste tegemine -![JavaScripti alused - otsuste tegemine](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.et.png) +![JavaScripti alused - otsuste tegemine](../../../../translated_images/et/webdev101-js-decisions.69e1b20f272dd1f0.png) > Sketchnote autorilt [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/et/2-js-basics/4-arrays-loops/README.md b/translations/et/2-js-basics/4-arrays-loops/README.md index 42a0a3e62..421b3588c 100644 --- a/translations/et/2-js-basics/4-arrays-loops/README.md +++ b/translations/et/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript Põhitõed: Massiivid ja Tsüklid -![JavaScript Basics - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.et.png) +![JavaScript Basics - Arrays](../../../../translated_images/et/webdev101-js-arrays.439d7528b8a29455.png) > Sketchnote autor [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/et/3-terrarium/1-intro-to-html/README.md b/translations/et/3-terrarium/1-intro-to-html/README.md index b0c6b236a..0b22dba4b 100644 --- a/translations/et/3-terrarium/1-intro-to-html/README.md +++ b/translations/et/3-terrarium/1-intro-to-html/README.md @@ -25,7 +25,7 @@ journey Parandage ligipääsetavust: 5: Student Ehitage terrarium: 5: Student ``` -![Sissejuhatus HTML-i](../../../../translated_images/webdev101-html.4389c2067af68e98.et.png) +![Sissejuhatus HTML-i](../../../../translated_images/et/webdev101-html.4389c2067af68e98.png) > Sketchnote autorilt [Tomomi Imura](https://twitter.com/girlie_mac) HTML ehk hüperteksti märgistuskeel on iga veebilehe aluseks, mida sa kunagi külastanud oled. Mõtle HTML-ile kui skeletile, mis annab veebilehtedele struktuuri – see määrab, kuhu sisu läheb, kuidas see on organiseeritud ja mida iga osa esindab. Kuigi CSS "riietab" su HTML-i hiljem värvide ja paigutustega ning JavaScript toob selle ellu interaktiivsusega, annab HTML vajaliku põhistruktuuri, mis muudab muu võimalikuks. @@ -86,7 +86,7 @@ Sa lood spetsiaalse kausta terrariumiprojekti jaoks ja lisad esimese HTML-faili. 4. Avastusaknas klõpsa "Uus fail" ikoonile 5. Nyimesta oma fail nimega `index.html` -![VS Code Exploreri ekraanipilt, kus luuakse uus fail](../../../../translated_images/vs-code-index.e2986cf919471eb9.et.png) +![VS Code Exploreri ekraanipilt, kus luuakse uus fail](../../../../translated_images/et/vs-code-index.e2986cf919471eb9.png) **Võimalus 2: Terminalikäskluste kasutamine** ```bash @@ -236,48 +236,48 @@ Nüüd lisa taimepildid, organiseerituna kahe veeruna, oma `` silti
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
diff --git a/translations/et/3-terrarium/2-intro-to-css/README.md b/translations/et/3-terrarium/2-intro-to-css/README.md index 0542e4516..aa8f7b2a8 100644 --- a/translations/et/3-terrarium/2-intro-to-css/README.md +++ b/translations/et/3-terrarium/2-intro-to-css/README.md @@ -29,7 +29,7 @@ journey Reageeriv disain: 5: Student Klaasi peegeldused: 5: Student ``` -![Sissejuhatus CSS-i](../../../../translated_images/webdev101-css.3f7af5991bf53a20.et.png) +![Sissejuhatus CSS-i](../../../../translated_images/et/webdev101-css.3f7af5991bf53a20.png) > Sketchnote autorilt [Tomomi Imura](https://twitter.com/girlie_mac) Kas mäletad, kuidas su HTML-terraarium nägi üsna lihtne välja? CSS on koht, kus me muudame selle tavalise struktuuri millekski visuaalselt atraktiivseks. @@ -202,7 +202,7 @@ body { Ava brauseri arendajatööriistad (F12), mine Elements vaatesse ja vaata oma `

` elementi. Näed, et see pärib fondiperekonna body-lt: -![pärandatud font](../../../../translated_images/1.cc07a5cbe114ad1d.et.png) +![pärandatud font](../../../../translated_images/et/1.cc07a5cbe114ad1d.png) ✅ **Katsetamise aeg**: Proovi teisi pärandatavaid omadusi `` peal nagu `color`, `line-height` või `text-align`. Mis juhtub su pealkirja ja teiste elementidega? @@ -332,7 +332,7 @@ Meie terraariumis vajab iga taim sarnast stiili, kuid igaüks peab olema ka indi **Näide iga taime HTML struktuurist:** ```html
- Decorative plant for terrarium + Decorative plant for terrarium
``` @@ -594,7 +594,7 @@ Valmis oma terrariumi täiustama realistlike klaasipeegeldustega? See tehnika li Sa lood peened helkivad läikekujud, mis simuleerivad valguse peegeldumist klaasipindadelt. See lähenemine on sarnane Renessansi maalikunstnikele nagu Jan van Eyck, kes kasutasid valgust ja peegeldust klaasi kolme-mõõtmelise mulje loomiseks. Siin on, mida sa saavutada tahad: -![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a.et.png) +![finished terrarium](../../../../translated_images/et/terrarium-final.2f07047ffc597d0a.png) **Sinu ülesanne:** - **Loo** pehmed valged või heledat värvi ovaalsed kujundid klaasipeegeldusteks diff --git a/translations/et/3-terrarium/3-intro-to-DOM-and-closures/README.md b/translations/et/3-terrarium/3-intro-to-DOM-and-closures/README.md index 6d632141d..5d63ff908 100644 --- a/translations/et/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/translations/et/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -25,7 +25,7 @@ journey Testi funktsionaalsust: 5: Õpilane Lõpeta terrarium: 5: Õpilane ``` -![DOM ja sulud](../../../../translated_images/webdev101-js.10280393044d7eaa.et.png) +![DOM ja sulud](../../../../translated_images/et/webdev101-js.10280393044d7eaa.png) > Sketš [Tomomi Imura](https://twitter.com/girlie_mac) poolt Tere tulemast ühe kõige kaasahaaravama veebiarenduse aspekti juurde – asjade interaktiivseks muutmine! Document Object Model (DOM) on nagu sild sinu HTMLi ja JavaScripti vahel ning täna kasutame seda, et tuua sinu terrarium ellu. Kui Tim Berners-Lee lõi esimese veebibrauseri, nägi ta ette veebi, kus dokumendid võiksid olla dünaamilised ja interaktiivsed – DOM teeb selle visiooni teoks. @@ -102,7 +102,7 @@ flowchart TD style P fill:#ffebee style Q fill:#ffebee ``` -![DOM puu kujutis](../../../../translated_images/dom-tree.7daf0e763cbbba92.et.png) +![DOM puu kujutis](../../../../translated_images/et/dom-tree.7daf0e763cbbba92.png) > DOM-i ja HTML-i märgenduse kujutis, mis viitab sellele. Autor [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -146,7 +146,7 @@ flowchart LR ``` > 💡 **Sulude mõistmine**: Sulud on JavaScriptis oluline teema ja paljud arendajad kasutavad neid aastaid, enne kui kõik teoreetilised aspektid täielikult selgeks saavad. Täna keskendume praktilisele rakendusele – näed sulud loomulikult tekkimas, kui ehitame oma interaktiivseid funktsioone. Mõistmine areneb koos sellega, kuidas nad lahendavad reaalseid probleeme. -![DOM puu kujutis](../../../../translated_images/dom-tree.7daf0e763cbbba92.et.png) +![DOM puu kujutis](../../../../translated_images/et/dom-tree.7daf0e763cbbba92.png) > DOM-i ja HTML-i märgenduse kujutis, mis viitab sellele. Autor [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -591,7 +591,7 @@ Nüüd testi oma interaktiivset terrariumit! Ava oma `index.html` fail veebilehi - **Seadmeülene tugi**: Töötab nii lauaarvutis kui mobiilis - **Jõudluse teadlikkus**: Puuduvad mälulekked või tarbetud arvutused -![valmis terrarium](../../../../translated_images/terrarium-final.0920f16e87c13a84.et.png) +![valmis terrarium](../../../../translated_images/et/terrarium-final.0920f16e87c13a84.png) --- diff --git a/translations/et/3-terrarium/solution/README.md b/translations/et/3-terrarium/solution/README.md index ed0b1c4ee..c48a8bedc 100644 --- a/translations/et/3-terrarium/solution/README.md +++ b/translations/et/3-terrarium/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Väike lohistamise ja kodeerimise harjutus. Natukese HTML-i, JS-i ja CSS-i abil saad luua veebiliidese, kujundada selle ja lisada interaktsiooni. -![minu terrarium](../../../../translated_images/screenshot_gray.0c796099a1f9f25e.et.png) +![minu terrarium](../../../../translated_images/et/screenshot_gray.0c796099a1f9f25e.png) ## Autorid diff --git a/translations/et/5-browser-extension/1-about-browsers/README.md b/translations/et/5-browser-extension/1-about-browsers/README.md index a5a8b103f..9b99e1b7b 100644 --- a/translations/et/5-browser-extension/1-about-browsers/README.md +++ b/translations/et/5-browser-extension/1-about-browsers/README.md @@ -25,7 +25,7 @@ journey Veatõrje: 4: Student Viimistlege kogemust: 5: Student ``` -![Brauseri sketchnote](../../../../translated_images/browser.60317c9be8b7f84a.et.jpg) +![Brauseri sketchnote](../../../../translated_images/et/browser.60317c9be8b7f84a.jpg) > Sketchnote autorilt [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## Esimene viktoriin enne loengut @@ -77,7 +77,7 @@ See protsess peegeldab, kuidas esimene veebibrauser, WorldWideWeb, kavandas Tim ✅ **Veidi ajalugu**: Esimene brauser kandis nime 'WorldWideWeb' ja selle lõi Sir Timothy Berners-Lee 1990. aastal. -![varased brauserid](../../../../translated_images/earlybrowsers.d984b711cdf3a42d.et.jpg) +![varased brauserid](../../../../translated_images/et/earlybrowsers.d984b711cdf3a42d.jpg) > Mõned varased brauserid, allikas [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) ### Kuidas brauserid veebisisu töötlevad @@ -194,7 +194,7 @@ quadrantChart Laienduste paigaldamise protsessi mõistmine aitab sul ette näha kasutajakogemust, kui inimesed paigaldavad sinu laienduse. Paigaldamine on standardiseeritud kaasaegsetes brauserid, väikeste erinevustega liidese kujunduses. -![kuvatõmmis Edge brauserist, kus on avatud leht edge://extensions ja seadete menüü](../../../../translated_images/install-on-edge.d68781acaf0b3d3d.et.png) +![kuvatõmmis Edge brauserist, kus on avatud leht edge://extensions ja seadete menüü](../../../../translated_images/et/install-on-edge.d68781acaf0b3d3d.png) > **Oluline**: Veendu, et lülitad sisse arendajarežiimi ja lubad laiendusi teistest poodidest, kui testid oma laiendusi. @@ -308,10 +308,10 @@ See järgib progressiivse avaldamise põhimõtet, mida kasutatakse liidese disai ### Laiendi ülevaated **Seadistamise vaade** – kasutaja esimese sõidu konfigureerimine: -![kuvatõmmis valminud laiendusest brauseris, mis kuvab vormi regiooni nime ja API võtme sisenditega.](../../../../translated_images/1.b6da8c1394b07491.et.png) +![kuvatõmmis valminud laiendusest brauseris, mis kuvab vormi regiooni nime ja API võtme sisenditega.](../../../../translated_images/et/1.b6da8c1394b07491.png) **Tulemuste vaade** – süsiniku jalajälje andmete kuvamine: -![kuvatõmmis valminud laiendusest, mis näitab süsiniku kasutust ja fossiilkütuste protsenti regiooni US-NEISO kohta.](../../../../translated_images/2.1dae52ff08042246.et.png) +![kuvatõmmis valminud laiendusest, mis näitab süsiniku kasutust ja fossiilkütuste protsenti regiooni US-NEISO kohta.](../../../../translated_images/et/2.1dae52ff08042246.png) ### Seadistusvormi ehitamine diff --git a/translations/et/5-browser-extension/2-forms-browsers-local-storage/README.md b/translations/et/5-browser-extension/2-forms-browsers-local-storage/README.md index c65c4539e..83bbc13d5 100644 --- a/translations/et/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/translations/et/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -263,7 +263,7 @@ stateDiagram-v2 Reset --> ClearStorage: Eemaldab salvestatud andmed ClearStorage --> FirstTime: Tagasi seadistusse ``` -![Lokaalse salvestuse paneel](../../../../translated_images/localstorage.472f8147b6a3f8d1.et.png) +![Lokaalse salvestuse paneel](../../../../translated_images/et/localstorage.472f8147b6a3f8d1.png) > ⚠️ **Turvalisuse kaalutlus**: Produktionsrakendustes tähendab API võtmete salvestamine LocalStorage’is turvariske, sest JavaScript saab neid andmeid lugeda. Õppimise eesmärgil see lähenemine sobib, aga päris rakendustes tuleb tundlikud võtmed hoida turvaliselt serveripoolses salvestuses. diff --git a/translations/et/5-browser-extension/3-background-tasks-and-performance/README.md b/translations/et/5-browser-extension/3-background-tasks-and-performance/README.md index 1fab4c08c..20d8542e9 100644 --- a/translations/et/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/translations/et/5-browser-extension/3-background-tasks-and-performance/README.md @@ -123,7 +123,7 @@ Edge arendajatööriistade avamiseks klõpsa paremas ülanurgas kolmele punktile Proovime seda. Ava veebileht (näiteks Microsoft.com sobib hästi) ja vajuta 'Salvestus' nuppu. Nüüd värskenda lehte ja jälgi, kuidas profiler kõike jäädvustab. Kui salvestuse lõpetad, näed detailset ülevaadet sellest, kuidas brauser saidi 'skriptib', 'renderdab' ja 'maalib'. See meenutab missioonikontrolli, mis jälgib iga süsteemi raketi stardi ajal – saad reaalajas andmeid täpselt, mis toimub ja millal. -![Edge profiler](../../../../translated_images/profiler.5a4a62479c5df01c.et.png) +![Edge profiler](../../../../translated_images/et/profiler.5a4a62479c5df01c.png) ✅ [Microsofti dokumentatsioonis](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) on veel palju detaile, kui tahad süvitsi minna @@ -133,11 +133,11 @@ Vali profiili ajajoone osad, et suumida sündmusi, mis lehe laadimise ajal toimu Saavuta oma lehe jõudlusest kiire ülevaade, valides ajajoone osa ja vaadates kokkuvõttepaneeli: -![Edge profiler snapshot](../../../../translated_images/snapshot.97750180ebcad737.et.png) +![Edge profiler snapshot](../../../../translated_images/et/snapshot.97750180ebcad737.png) Vaata Sündmuste logi paneeli, et näha, kas mõni sündmus kestis kauem kui 15 ms: -![Edge event log](../../../../translated_images/log.804026979f3707e0.et.png) +![Edge event log](../../../../translated_images/et/log.804026979f3707e0.png) ✅ Tutvu oma profileriga! Ava sellel saidil arendajatööriistad ja vaata, kas on kitsaskohti. Milline ressurss laeb kõige aeglasemalt? Mis kiiremini? diff --git a/translations/et/5-browser-extension/README.md b/translations/et/5-browser-extension/README.md index 9f9f64ec2..2ed850f48 100644 --- a/translations/et/5-browser-extension/README.md +++ b/translations/et/5-browser-extension/README.md @@ -23,7 +23,7 @@ Seda laiendit saab kasutaja vajadusel käivitada, kui vormi sisestatakse API-võ ### Tunnustused -![roheline brauserilaiend](../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.et.png) +![roheline brauserilaiend](../../../translated_images/et/extension-screenshot.0e7f5bfa110e92e3.png) ## Tunnustused diff --git a/translations/et/5-browser-extension/solution/README.md b/translations/et/5-browser-extension/solution/README.md index 3c6b5a25d..b2c66770d 100644 --- a/translations/et/5-browser-extension/solution/README.md +++ b/translations/et/5-browser-extension/solution/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Kasutades tmrow CO2 Signal API-d elektritarbimise jälgimiseks, looge brauserilaiendus, mis tuletab teile meelde, kui suur on teie piirkonna elektritarbimine. Selle laienduse juhuslik kasutamine aitab teil teha teadlikke otsuseid oma tegevuste kohta, lähtudes sellest teabest. -![laienduse ekraanipilt](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.et.png) +![laienduse ekraanipilt](../../../../translated_images/et/extension-screenshot.0e7f5bfa110e92e3.png) ## Alustamine @@ -31,7 +31,7 @@ npm run build Edge'i brauseris paigaldamiseks kasutage brauseri paremas ülanurgas asuvat 'kolme punkti' menüüd, et leida laienduste paneel. Sealt valige 'Laadi lahti pakkimata', et laadida uus laiendus. Avage 'dist' kaust, kui seda küsitakse, ja laiendus laaditakse. Selle kasutamiseks vajate CO2 Signal API jaoks API-võtit ([hankige see siit e-posti teel](https://www.co2signal.com/) - sisestage oma e-posti aadress sellel lehel olevasse kasti) ja [oma piirkonna koodi](http://api.electricitymap.org/v3/zones), mis vastab [Electricity Map](https://www.electricitymap.org/map) kaardile (näiteks Bostonis kasutan 'US-NEISO'). -![paigaldamine](../../../../translated_images/install-on-edge.78634f02842c4828.et.png) +![paigaldamine](../../../../translated_images/et/install-on-edge.78634f02842c4828.png) Kui API-võti ja piirkonna kood on laienduse liidesesse sisestatud, peaks brauserilaienduse ribal olev värviline täpp muutuma, et kajastada teie piirkonna energiatarbimist, ning andma teile vihjeid, millised energiamahukad tegevused oleksid sobivad. Selle 'täpi' süsteemi idee sain [Energy Lollipop laiendusest](https://energylollipop.com/) California heitkoguste jaoks. diff --git a/translations/et/5-browser-extension/solution/translation/README.es.md b/translations/et/5-browser-extension/solution/translation/README.es.md index 02e299ee3..846a1c150 100644 --- a/translations/et/5-browser-extension/solution/translation/README.es.md +++ b/translations/et/5-browser-extension/solution/translation/README.es.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Kasutades tmrow CO2 signaali API-d elektritarbimise jälgimiseks, looge brauserilaiend, mis annab teile otse brauseris meeldetuletuse teie piirkonna elektritarbimise kohta. Selle ad hoc laiendi kasutamine aitab teil teha otsuseid oma tegevuste kohta, tuginedes sellele teabele. -![laiendi ekraanipilt](../../../../../translated_images/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.et.png) +![laiendi ekraanipilt](../../../../../translated_images/et/extension-screenshot.352c4c3ba54e4041ad2f6af749d562cc5705f527b5826efd53d11c3528f5ae45.png) ## Alustamine @@ -31,7 +31,7 @@ npm run build Edge'i brauseris installimiseks kasutage brauseri paremas ülanurgas asuvat 'kolme punkti' menüüd, et leida laienduste paneel. Sealt valige 'Laadi lahti pakitud', et laadida uus laiend. Kui küsitakse, avage kaust 'dist' ja laiend laaditakse. Kasutamiseks vajate CO2 signaali API võtit ([hankige see siit e-posti teel](https://www.co2signal.com/) - sisestage oma e-posti aadress selle lehe kasti) ja [oma piirkonna koodi](http://api.electricitymap.org/v3/zones), mis vastab [Electricity Mapile](https://www.electricitymap.org/map) (näiteks Bostonis kasutan 'US-NEISO'). -![installimine](../../../../../translated_images/install-on-edge.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.et.png) +![installimine](../../../../../translated_images/et/install-on-edge.8bd0ee3ca7dcda1c5334b5195603a43c864e3b38d088b03d57376d25e77b9459.png) Kui API võti ja piirkond on laiendi liideses sisestatud, peaks värvipunkt brauseri laiendusribal muutuma, et kajastada teie piirkonna energiatarbimist ja anda teile näitaja kõrge energiatarbimisega tegevuste kohta, mis oleksid teile sobivad. Selle "punktisüsteemi" kontseptsiooni sain [Energy Lollipop laiendist](https://energylollipop.com/) California heitkoguste jaoks. diff --git a/translations/et/5-browser-extension/solution/translation/README.fr.md b/translations/et/5-browser-extension/solution/translation/README.fr.md index a187f63b7..1d0345de0 100644 --- a/translations/et/5-browser-extension/solution/translation/README.fr.md +++ b/translations/et/5-browser-extension/solution/translation/README.fr.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Kasutades tmrow CO2 Signal API-d elektritarbimise jälgimiseks, looge brauserilaiend, mis annab teile otse brauseris meeldetuletuse teie piirkonna elektritarbimise kohta. Selle ad hoc laiendi kasutamine aitab teil teha teadlikke otsuseid oma tegevuste kohta, tuginedes nendele andmetele. -![laiendi ekraanipilt](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.et.png) +![laiendi ekraanipilt](../../../../../translated_images/et/extension-screenshot.0e7f5bfa110e92e3.png) ## Alustamine @@ -31,7 +31,7 @@ npm run build Edge'i brauseris installimiseks kasutage brauseri paremas ülanurgas asuvat 'kolme punkti' menüüd, et leida laienduste paneel. Sealt valige 'Laadi lahti pakitud laiend' uue laiendi laadimiseks. Avage 'dist' kaust, kui seda küsitakse, ja laiend laetakse. Kasutamiseks vajate API-võtit CO2 Signal API jaoks ([hankige see e-posti teel siit](https://www.co2signal.com/) - sisestage oma e-posti aadress sellel lehel olevasse kasti) ja [koodi oma piirkonna jaoks](http://api.electricitymap.org/v3/zones), mis vastab [Electricity Map'ile](https://www.electricitymap.org/map) (näiteks Bostonis kasutan 'US-NEISO'). -![installimine](../../../../../translated_images/install-on-edge.78634f02842c4828.et.png) +![installimine](../../../../../translated_images/et/install-on-edge.78634f02842c4828.png) Kui API-võti ja piirkond on sisestatud laiendi liidesesse, peaks värviline punkt brauseri laienduste ribal muutuma, et kajastada teie piirkonna energiatarbimist ja anda teile märku, milliseid energiamahukaid tegevusi oleks sobiv teha. Selle 'punktide' süsteemi idee sain [Energy Lollipop laiendist](https://energylollipop.com/) California heitkoguste jaoks. diff --git a/translations/et/5-browser-extension/solution/translation/README.hi.md b/translations/et/5-browser-extension/solution/translation/README.hi.md index 1153a9bfb..3a31c3c33 100644 --- a/translations/et/5-browser-extension/solution/translation/README.hi.md +++ b/translations/et/5-browser-extension/solution/translation/README.hi.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Elektritarbimise jälgimiseks kasutades tmrow CO2 Signal API-d, on loodud brauserilaiend, mis tuletab teile meelde, kui intensiivne on teie piirkonna elektritarbimine. Selle laiendi kasutamine aitab teil teha otsuseid oma tegevuste kohta, tuginedes sellele teabele. -![Laiendi ekraanipilt ](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.et.png) +![Laiendi ekraanipilt ](../../../../../translated_images/et/extension-screenshot.0e7f5bfa110e92e3.png) ## Alustamine @@ -31,7 +31,7 @@ npm run build Edge'i brauseris installimiseks kasutage brauseri paremas ülanurgas asuvat "kolme punkti" menüüd, et leida laiendite paneel. Sealt valige "Laadi lahti pakitud" ja avage 'dist' kaust, kui seda küsitakse. Laiend laaditakse. Selle kasutamiseks vajate CO2 Signal API-d ([saate API võtme e-posti teel siit](https://www.co2snal.com/) – sisestage oma e-post selle lehe kastikesse) ja [oma piirkonna koodi](http://api.electricitymap.org/v3/zones) [Electricity Map](https://www.electricitymap.org/map) lehelt (näiteks Bostonis kasutan 'US-NEISO'). -![installimine](../../../../../translated_images/install-on-edge.78634f02842c4828.et.png) +![installimine](../../../../../translated_images/et/install-on-edge.78634f02842c4828.png) Kui API võti ja piirkond on laiendi liidesesse sisestatud, peaks brauserilaiendi ribal olev värviline täpp muutuma, et kajastada teie piirkonna energiatarbimist, ning andma teile indikatsiooni, millised energiamahukad tegevused sobivad teie kasutuseks. Selle "täpi" süsteemi idee sain California heitkoguste jaoks loodud [Energy Lollipop laiendist](https://energylollipop.com/). diff --git a/translations/et/5-browser-extension/solution/translation/README.it.md b/translations/et/5-browser-extension/solution/translation/README.it.md index a390052db..f655f132c 100644 --- a/translations/et/5-browser-extension/solution/translation/README.it.md +++ b/translations/et/5-browser-extension/solution/translation/README.it.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Kasutame tmrow Signal CO2 API-d, et jälgida elektritarbimist ja luua brauserilaiend, mis annab otse brauseris meeldetuletuse selle kohta, kui suur on elektritarbimise koormus teie piirkonnas. Selle spetsiaalse laiendi kasutamine aitab hinnata oma tegevusi nende andmete põhjal. -![laiendi ekraanipilt](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.et.png) +![laiendi ekraanipilt](../../../../../translated_images/et/extension-screenshot.0e7f5bfa110e92e3.png) ## Alustamine @@ -31,7 +31,7 @@ npm run build Edge'i brauserisse installimiseks kasutage brauseri paremas ülanurgas asuvat "kolme punkti" menüüd, et leida laiendite paneel. Kui see pole veel aktiveeritud, lülitage sisse arendajarežiim (vasakus alanurgas). Valige "Laadi lahti pakitud", et laadida uus laiend. Avage viipas kaust "dist" ja laiend laaditakse. Kasutamiseks vajate CO2 Signal API võtmet (saate selle [siit e-posti teel](https://www.co2signal.com/) - sisestage oma e-posti aadress sellel lehel olevasse kasti) ja [oma piirkonna koodi](http://api.electricitymap.org/v3/zones), mis vastab [elektrikaardile](https://www.electricitymap.org/map) (näiteks Bostonis on see "US-NEISO"). -![installimine](../../../../../translated_images/install-on-edge.78634f02842c4828.et.png) +![installimine](../../../../../translated_images/et/install-on-edge.78634f02842c4828.png) Kui API võti ja piirkond on laiendi liideses sisestatud, peaks brauserilaiendi tööriistaribal olev värviline punkt muutuma, et kajastada piirkonna energiatarbimist, ning andma vihjeid selle kohta, millised suure energiatarbimisega tegevused oleksid sobivad. Selle "punktisüsteemi" kontseptsioon on inspireeritud [Energy Lollipop laiendist](https://energylollipop.com/), mis jälgib California heitkoguseid. diff --git a/translations/et/5-browser-extension/solution/translation/README.ja.md b/translations/et/5-browser-extension/solution/translation/README.ja.md index ba89ca002..6ef9a7870 100644 --- a/translations/et/5-browser-extension/solution/translation/README.ja.md +++ b/translations/et/5-browser-extension/solution/translation/README.ja.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Ehita brauserilaiendus, mis kasutab tmrow CO2 Signal API-d, et jälgida elektritarbimist ja kuvada meeldetuletusena, kui palju energiat sinu piirkonnas kasutatakse. Selle laienduse ad hoc kasutamine võimaldab sul oma tegevusi vastavalt sellele teabele planeerida. -![laienduse ekraanipilt](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.et.png) +![laienduse ekraanipilt](../../../../../translated_images/et/extension-screenshot.0e7f5bfa110e92e3.png) ## Alustamine @@ -31,7 +31,7 @@ npm run build Edge'i installimiseks leia brauseri paremas ülanurgas olevast "kolme punkti" menüüst "Laiendused" paneel. Sealt vali "Load Unpacked" ja laadi uus laiendus. Kui avaneb prompt, ava "dist" kaust, et laiendus laadida. Kasutamiseks vajad CO2 Signal API API-võtit ([hankige see siit e-posti teel](https://www.co2signal.com/) - sisesta oma e-post selle lehe kastikesse) ja [Electricity Map](https://www.electricitymap.org/map) vastavat [koodi oma piirkonna jaoks](http://api.electricitymap.org/v3/zones) (näiteks Bostonis kasutatakse 'US-NEISO'). -![installimine](../../../../../translated_images/install-on-edge.78634f02842c4828.et.png) +![installimine](../../../../../translated_images/et/install-on-edge.78634f02842c4828.png) Kui sisestad API-võtme ja piirkonna laienduse liidesesse, muutub brauseri laiendusribal kuvatav värviline täpp, mis peegeldab sinu piirkonna energiatarbimist ja annab märku, milliseid energiat nõudvaid tegevusi on sobiv teha. Selle "täpi" süsteemi idee sain California osariigi emissioonide jaoks loodud [Energy Lollipop laiendusest](https://energylollipop.com/). diff --git a/translations/et/5-browser-extension/solution/translation/README.ms.md b/translations/et/5-browser-extension/solution/translation/README.ms.md index a1622c091..f37773d17 100644 --- a/translations/et/5-browser-extension/solution/translation/README.ms.md +++ b/translations/et/5-browser-extension/solution/translation/README.ms.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Kasutades tmrow CO2 Signaali API-d elektritarbimise jälgimiseks, loo brauserilaiendus, mis annab sulle brauseris märguandeid selle kohta, kui suur on sinu piirkonna elektritarbimise koormus. Selle laienduse kasutamine aitab sul teha teadlikumaid otsuseid oma tegevuste osas, tuginedes sellele teabele. -![brauserilaienduse ekraanipilt](../../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.et.png) +![brauserilaienduse ekraanipilt](../../../../../translated_images/et/extension-screenshot.0e7f5bfa110e92e3.png) ## Alustamine @@ -31,7 +31,7 @@ npm run build Edge'i paigaldamiseks kasuta brauseri paremas ülanurgas asuvat kolme punktiga menüüd, et leida Laienduste paneel. Sealt vali 'Load Unpacked', et laadida uus laiendus. Ava 'dist' kaust, kui seda küsitakse, ja laiendus laaditakse. Kasutamiseks vajad CO2 Signaali API võtit ([hankige see siit e-posti teel](https://www.co2signal.com/) - sisesta oma e-posti aadress sellel lehel olevasse kasti) ja [oma piirkonna koodi](http://api.electricitymap.org/v3/zones), mis vastab [Electricity Mapile](https://www.electricitymap.org/map) (näiteks Bostonis kasutan 'US-NEISO'). -![allalaadimine](../../../../../translated_images/install-on-edge.78634f02842c4828.et.png) +![allalaadimine](../../../../../translated_images/et/install-on-edge.78634f02842c4828.png) Kui API võti ja piirkond on laienduse liidesesse sisestatud, muutub brauserilaienduse tööriistaribal olev värviline punkt, et kajastada sinu piirkonna energiatarbimist, ning annab sulle soovitusi, milliseid tegevusi on sobiv teha. Selle 'punktisüsteemi' kontseptsiooni sain inspiratsiooniks [Energy Lollipop brauserilaiendusest](https://energylollipop.com/) California heitkoguste jaoks. diff --git a/translations/et/5-browser-extension/start/README.md b/translations/et/5-browser-extension/start/README.md index d135e25bb..abaa298d7 100644 --- a/translations/et/5-browser-extension/start/README.md +++ b/translations/et/5-browser-extension/start/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Kasutades tmrow'i CO2 Signal API-d elektritarbimise jälgimiseks, loo brauserilaiendus, mis annab sulle otse brauseris meeldetuletuse selle kohta, kui suur on sinu piirkonna elektritarbimise koormus. Selle laienduse juhuslik kasutamine aitab sul teha teadlikke otsuseid oma tegevuste osas, lähtudes sellest infost. -![laienduse ekraanipilt](../../../../translated_images/extension-screenshot.0e7f5bfa110e92e3.et.png) +![laienduse ekraanipilt](../../../../translated_images/et/extension-screenshot.0e7f5bfa110e92e3.png) ## Alustamine @@ -31,7 +31,7 @@ npm run build Edge'i brauseris paigaldamiseks kasuta brauseri paremas ülanurgas asuvat 'kolme punkti' menüüd, et leida Laienduste paneel. Sealt vali 'Laadi lahti pakkimata', et laadida uus laiendus. Avanevas dialoogis vali 'dist' kaust ja laiendus laetakse. Kasutamiseks vajad CO2 Signal API jaoks API-võtit ([hankige see e-posti teel siit](https://www.co2signal.com/) - sisesta oma e-post sellel lehel olevasse kasti) ja [oma piirkonna koodi](http://api.electricitymap.org/v3/zones), mis vastab [Electricity Map](https://www.electricitymap.org/map) andmetele (näiteks Bostonis kasutan 'US-NEISO'). -![paigaldamine](../../../../translated_images/install-on-edge.78634f02842c4828.et.png) +![paigaldamine](../../../../translated_images/et/install-on-edge.78634f02842c4828.png) Kui API-võti ja piirkonna kood on sisestatud laienduse liidesesse, peaks brauserilaienduse ribal olev värviline täpp muutuma, et kajastada sinu piirkonna energiatarbimist. See annab sulle vihje, millised energiamahukad tegevused oleksid sobivad. Selle 'täpi' süsteemi idee sain [Energy Lollipop laiendusest](https://energylollipop.com/) California heitmete jaoks. diff --git a/translations/et/6-space-game/2-drawing-to-canvas/README.md b/translations/et/6-space-game/2-drawing-to-canvas/README.md index ca6c6dbe2..60d53e28c 100644 --- a/translations/et/6-space-game/2-drawing-to-canvas/README.md +++ b/translations/et/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'i võrk](../../../../translated_images/canvas_grid.5f209da785ded492.et.png) +![canvas'i võrk](../../../../translated_images/et/canvas_grid.5f209da785ded492.png) > Pilt pärit [MDN-ist](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) Canvas elemendi joonistamiseks järgid kolme sammuga protsessi, mis moodustab kõigi canvas graafika aluse. Kui seda mõned korrad teha, saab see loomuomaseks: @@ -323,11 +323,11 @@ Ehitad veebilehe Canvas elemendiga. See kuvab musta taustaga ekraani mõõtmeteg - Kangelase laev - ![Hero ship](../../../../translated_images/player.dd24c1afa8c71e9b.et.png) + ![Hero ship](../../../../translated_images/et/player.dd24c1afa8c71e9b.png) - 5×5 koletise laev - ![Monster ship](../../../../translated_images/enemyShip.5df2a822c16650c2.et.png) + ![Monster ship](../../../../translated_images/et/enemyShip.5df2a822c16650c2.png) ### Soovitatud arengusammud @@ -463,7 +463,7 @@ for (let x = START_X; x < STOP_X; x += ENEMY_SPACING) { Lõpetatud tulemus peaks välja nägema selline: -![Musta taustaga ekraan kangelase ja 5*5 monsterdega](../../../../translated_images/partI-solution.36c53b48c9ffae2a.et.png) +![Musta taustaga ekraan kangelase ja 5*5 monsterdega](../../../../translated_images/et/partI-solution.36c53b48c9ffae2a.png) ## Lahendus diff --git a/translations/et/6-space-game/5-keeping-score/README.md b/translations/et/6-space-game/5-keeping-score/README.md index 2f2d265f3..2ee7bc458 100644 --- a/translations/et/6-space-game/5-keeping-score/README.md +++ b/translations/et/6-space-game/5-keeping-score/README.md @@ -155,7 +155,7 @@ sequenceDiagram end ``` - **Skoorisüsteem**: Iga hävitatud vaenlase laev annab 100 punkti (ümarad numbrid on mängijatele kergemini vaimselt arvutatavad). Skoor kuvatakse vasakus alanurgas. -- **Elude lugur**: Sinu kangelane alustab kolme eluga - see on varaste arcade-mängude poolt kehtestatud standard mängimise väljakutse ja tasakaalu jaoks. Iga kokkupõrge vaenlasega maksab ühe elu. Jääke näitame paremas alanurgas laevaikoonidega ![elu pilt](../../../../translated_images/life.6fb9f50d53ee0413.et.png). +- **Elude lugur**: Sinu kangelane alustab kolme eluga - see on varaste arcade-mängude poolt kehtestatud standard mängimise väljakutse ja tasakaalu jaoks. Iga kokkupõrge vaenlasega maksab ühe elu. Jääke näitame paremas alanurgas laevaikoonidega ![elu pilt](../../../../translated_images/et/life.6fb9f50d53ee0413.png). ## Hakame ehitama! diff --git a/translations/et/7-bank-project/1-template-route/README.md b/translations/et/7-bank-project/1-template-route/README.md index 52ea9c79c..1b4c6a1a0 100644 --- a/translations/et/7-bank-project/1-template-route/README.md +++ b/translations/et/7-bank-project/1-template-route/README.md @@ -644,7 +644,7 @@ sequenceDiagram Funktsioon `history.pushState` loob uusi kirjeid brauseri ajaloos. Seda näeb, kui hoiate all oma brauseri *tagasi-nuppu*, mis peaks kuvama midagi sellist: -![Navigatsiooniajaloo ekraanipilt](../../../../translated_images/history.7fdabbafa521e064.et.png) +![Navigatsiooniajaloo ekraanipilt](../../../../translated_images/et/history.7fdabbafa521e064.png) Kui proovite tunnustada tagasi-nuppu mitu korda, näete, et praegune URL muutub ja ajalugu uuendatakse, kuid sama mall jääb kuvatuks. diff --git a/translations/et/7-bank-project/2-forms/README.md b/translations/et/7-bank-project/2-forms/README.md index 73904101f..b1f440f02 100644 --- a/translations/et/7-bank-project/2-forms/README.md +++ b/translations/et/7-bank-project/2-forms/README.md @@ -292,7 +292,7 @@ Esiteks vaatleme, mis juhtub lihtsa vormi esitamisega: 2. Jälgige muudatusi oma brauseri aadressireal 3. Märkake, kuidas leht laaditakse uuesti ja andmed ilmuvad aadressireale -![Ekraanipilt brauseri URL-i muutusest peale „Registreeri“ nupu vajutamist](../../../../translated_images/click-register.e89a30bf0d4bc9ca.et.png) +![Ekraanipilt brauseri URL-i muutusest peale „Registreeri“ nupu vajutamist](../../../../translated_images/et/click-register.e89a30bf0d4bc9ca.png) ### HTTP meetodite võrdlus @@ -346,7 +346,7 @@ Seadistame oma registreerimisvormi, et see korrektselt suhtleks tagapõhja API-g 2. **Vajutage** nuppu "Loo konto" 3. **Vaadake** brauserist serveri vastust -![Brauseriaknas aadressil localhost:5000/api/accounts kuvatakse JSON-string kasutaja andmetega](../../../../translated_images/form-post.61de4ca1b964d91a.et.png) +![Brauseriaknas aadressil localhost:5000/api/accounts kuvatakse JSON-string kasutaja andmetega](../../../../translated_images/et/form-post.61de4ca1b964d91a.png) **Mida peaks nägema:** - **Brauser suunab** API lõpp-punkti URL-ile @@ -609,7 +609,7 @@ async function register() { 3. **Klõpsake** "Loo konto" 4. **Jälgige** konsooli sõnumeid ja kasutajale tagasisidet -![Ekraanipilt, mis näitab logisõnumit brauserikonsoolis](../../../../translated_images/browser-console.efaf0b51aaaf6778.et.png) +![Ekraanipilt, mis näitab logisõnumit brauserikonsoolis](../../../../translated_images/et/browser-console.efaf0b51aaaf6778.png) **Mida peaksite nägema:** - **Laadimisolek** ilmub esitamisklipile @@ -783,7 +783,7 @@ Täiustame teie registreerimisvormi tugeva valideerimisega, mis pakub suurepära 3. **Sisestage** kasutajanime välja erimärgid 4. **Sisestage** negatiivne saldosumma -![Ekraanipilt, mis näitab valideerimisviga vormi esitamisel](../../../../translated_images/validation-error.8bd23e98d416c22f.et.png) +![Ekraanipilt, mis näitab valideerimisviga vormi esitamisel](../../../../translated_images/et/validation-error.8bd23e98d416c22f.png) **Mida täheldate:** - **Brauser kuvab** oma staatilisi valideerimissõnumeid @@ -943,7 +943,7 @@ Kuva HTML-is veateade, kui kasutaja juba eksisteerib. Näide sellest, kuidas lõplik sisselogimisleht võib välja näha pärast veidi kujundamist: -![Screenshot of the login page after adding CSS styles](../../../../translated_images/result.96ef01f607bf856a.et.png) +![Screenshot of the login page after adding CSS styles](../../../../translated_images/et/result.96ef01f607bf856a.png) ## Loengujärgne viktoriin diff --git a/translations/et/7-bank-project/3-data/README.md b/translations/et/7-bank-project/3-data/README.md index c884bfd21..ba6148e1b 100644 --- a/translations/et/7-bank-project/3-data/README.md +++ b/translations/et/7-bank-project/3-data/README.md @@ -156,7 +156,7 @@ sequenceDiagram Server->>Browser: Tagastab täieliku HTML lehe Browser->>User: Kuvab uue lehe (vilgub/laeb uuesti) ``` -![Mitmelehelise rakenduse uuendustöövoog](../../../../translated_images/mpa.7f7375a1a2d4aa77.et.png) +![Mitmelehelise rakenduse uuendustöövoog](../../../../translated_images/et/mpa.7f7375a1a2d4aa77.png) **Miks see tundus kohmakas:** - Iga klikiga tuli terve leht nullist ehitada @@ -182,7 +182,7 @@ sequenceDiagram JavaScript->>Browser: Uuendab kindlaid lehe elemente Browser->>User: Kuvab uuendatud sisu (ilma taaskäivitamiseta) ``` -![Ühelehelise rakenduse uuendustöövoog](../../../../translated_images/spa.268ec73b41f992c2.et.png) +![Ühelehelise rakenduse uuendustöövoog](../../../../translated_images/et/spa.268ec73b41f992c2.png) **Miks SPA-d tunduvad nii palju sujuvamad:** - Uuendatakse ainult neid osi, mis tegelikult muutusid (nutikas, eks?) @@ -516,7 +516,7 @@ if (data.error) { Nüüd, kui testid valede andmetega, näed abistavat veateadet otse lehel! -![Screenshot showing the error message displayed during login](../../../../translated_images/login-error.416fe019b36a6327.et.png) +![Screenshot showing the error message displayed during login](../../../../translated_images/et/login-error.416fe019b36a6327.png) #### Samm 4: Kaasa arvutustel puudega kasutajad @@ -950,7 +950,7 @@ Valmis viima oma pangarakenduse järgmisele tasemele? Muudame selle väljanägem Siin on, kuidas võib välja näha lihvitud juhtpaneel: -![Screenshot of an example result of the dashboard after styling](../../../../translated_images/screen2.123c82a831a1d14a.et.png) +![Screenshot of an example result of the dashboard after styling](../../../../translated_images/et/screen2.123c82a831a1d14a.png) Sa ei pea seda täpselt kopeerima – kasuta seda inspiratsioonina ja loo oma stiil! diff --git a/translations/et/7-bank-project/4-state-management/README.md b/translations/et/7-bank-project/4-state-management/README.md index 387e6b37b..a38097fb3 100644 --- a/translations/et/7-bank-project/4-state-management/README.md +++ b/translations/et/7-bank-project/4-state-management/README.md @@ -187,7 +187,7 @@ Nagu Titanic'i kambrite jaotus, mis tundus tugev kuni mitme kambri samaaegne upp Selle asemel, et oma saba taga ajada, loome **tsentraliseeritud oleku juhtimise** süsteemi. Mõtle sellele kui ühele väga organiseeritud inimesele, kes haldab kõike olulist: -![Skeem, mis näitab andmevooge HTML-i, kasutaja tegevuste ja oleku vahel](../../../../translated_images/data-flow.fa2354e0908fecc8.et.png) +![Skeem, mis näitab andmevooge HTML-i, kasutaja tegevuste ja oleku vahel](../../../../translated_images/et/data-flow.fa2354e0908fecc8.png) ```mermaid flowchart TD @@ -798,7 +798,7 @@ See väljakutse aitab sul mõelda professionaalse arendajana, kes võtab arvesse Siin on näidis tulemus peale ülesande täitmist: -![Ekraanipilt näidates "Lisa tehingu" dialoogi](../../../../translated_images/dialog.93bba104afeb79f1.et.png) +![Ekraanipilt näidates "Lisa tehingu" dialoogi](../../../../translated_images/et/dialog.93bba104afeb79f1.png) --- diff --git a/translations/et/7-bank-project/4-state-management/assignment.md b/translations/et/7-bank-project/4-state-management/assignment.md index f586b34a3..701d4773f 100644 --- a/translations/et/7-bank-project/4-state-management/assignment.md +++ b/translations/et/7-bank-project/4-state-management/assignment.md @@ -112,7 +112,7 @@ Vaata [serveri API dokumentatsiooni](../api/README.md) kohta: **Oodatav tulemus:** Pärast selle ülesande lõpetamist peaks su pangarakendus omama täielikult toimivat "Lisa tehing" funktsionaalsust, mis näeb välja ja toimib professionaalselt: -![Ekraanipilt näidates eeskuju "Lisa tehing" dialoogist](../../../../translated_images/dialog.93bba104afeb79f1.et.png) +![Ekraanipilt näidates eeskuju "Lisa tehing" dialoogist](../../../../translated_images/et/dialog.93bba104afeb79f1.png) ## Oma rakenduse testimine diff --git a/translations/et/7-bank-project/README.md b/translations/et/7-bank-project/README.md index d487e8181..1cb734d38 100644 --- a/translations/et/7-bank-project/README.md +++ b/translations/et/7-bank-project/README.md @@ -11,7 +11,7 @@ CO_OP_TRANSLATOR_METADATA: Selles projektis õpid, kuidas luua fiktiivset panka. Need õppetunnid sisaldavad juhiseid veebirakenduse kujundamiseks ja marsruutide loomiseks, vormide ehitamiseks, oleku haldamiseks ning API-st andmete hankimiseks, mille abil saad panga andmeid kätte. -| ![Ekraan1](../../../translated_images/screen1.baccbba0f1f93364.et.png) | ![Ekraan2](../../../translated_images/screen2.123c82a831a1d14a.et.png) | +| ![Ekraan1](../../../translated_images/et/screen1.baccbba0f1f93364.png) | ![Ekraan2](../../../translated_images/et/screen2.123c82a831a1d14a.png) | |--------------------------------|--------------------------------| ## Õppetunnid diff --git a/translations/et/8-code-editor/1-using-a-code-editor/README.md b/translations/et/8-code-editor/1-using-a-code-editor/README.md index 55b34e6d8..36e9a50ca 100644 --- a/translations/et/8-code-editor/1-using-a-code-editor/README.md +++ b/translations/et/8-code-editor/1-using-a-code-editor/README.md @@ -182,7 +182,7 @@ Nii nagu Alexander Graham Bell ühendaski kaugustes kohad telefoni abil, seob Gi Kui kõik laeb, näed ilusat ja puhtat töölaua keskkonda, mis on loodud sind keskenduma olulisele – koodile! -![Vaikimisi VSCode.devi liides](../../../../translated_images/default-vscode-dev.5d06881d65c1b323.et.png) +![Vaikimisi VSCode.devi liides](../../../../translated_images/et/default-vscode-dev.5d06881d65c1b323.png) **Siin on ülevaade su ümbrusest:** - **Activity Bar** (vasakul olev riba): Sinu peamine navigeerimisriba, kus on Explorer 📁, Search 🔍, Source Control 🌿, Extensions 🧩 ja Settings ⚙️ @@ -229,7 +229,7 @@ Sobib ideaalselt, kui alustad VSCode.devis nullist ja soovid konkreetset hoidlat 1. Mine aadressile [vscode.dev](https://vscode.dev), kui sa pole seal veel 2. Otsi tervituslehel nuppu "Open Remote Repository" ja klõpsa - ![Ava kaughoidla](../../../../translated_images/open-remote-repository.bd9c2598b8949e7f.et.png) + ![Ava kaughoidla](../../../../translated_images/et/open-remote-repository.bd9c2598b8949e7f.png) 3. Kleebi siia mistahes GitHubi hoidla URL (proovi seda: `https://github.com/microsoft/Web-Dev-For-Beginners`) 4. Vajuta Enter ja vaata imet! @@ -238,7 +238,7 @@ Sobib ideaalselt, kui alustad VSCode.devis nullist ja soovid konkreetset hoidlat Tahad tunda end nagu koodimise võlur? Proovi klaviatuuri otseteed Ctrl+Shift+P (või Cmd+Shift+P Macil), et avada Command Palette: -![Command Palette](../../../../translated_images/palette-menu.4946174e07f42622.et.png) +![Command Palette](../../../../translated_images/et/palette-menu.4946174e07f42622.png) **Command Palette on nagu otsingumootor kõigile sinu tehtavatele asjadele:** - Kirjuta "open remote" ja see leiab hoidla avaja sinu eest @@ -300,7 +300,7 @@ Nii nagu arhitekti kontoris sinised trükid organiseeritud on, järgib faililoom 3. Sisesta failinimi koos sobiva laiendiga (`style.css`, `script.js`, `index.html`) 4. Vajuta Enter, et fail luua -![Uue faili loomine](../../../../translated_images/create-new-file.2814e609c2af9aeb.et.png) +![Uue faili loomine](../../../../translated_images/et/create-new-file.2814e609c2af9aeb.png) **Nimeandmise soovitused:** - Kasuta kirjeldavaid nimesid, mis viitavad faili eesmärgile @@ -318,7 +318,7 @@ Siin algab tõeline lõbu! VSCode.devi redaktor on täis abistavaid omadusi, mis 2. Hakka kirjutama ja jälgi, kuidas VSCode.dev aitab värvide, soovituste ja vigade leidmisega 3. Salvesta töö Ctrl+S (Windows/Linux) või Cmd+S (Mac) – kuigi see salvestab ka automaatselt! -![Faili redigeerimine VSCode.devis](../../../../translated_images/edit-a-file.52c0ee665ef19f08.et.png) +![Faili redigeerimine VSCode.devis](../../../../translated_images/et/edit-a-file.52c0ee665ef19f08.png) **Mis toimub, kui koodid:** - Sinu kood saab kaunilt värvitud ja on lihtsam lugeda @@ -339,7 +339,7 @@ Nii nagu arheoloogid teevad täpseid kirjeid kaevamiskihistest, jälgib Git sinu 2. Muudetud failid ilmuvad jaotises "Changes" 3. Värvikood näitab muudatuste liike: roheline lisandumised, punane kustutamised -![Muudatuste vaatamine Source Control paneelis](../../../../translated_images/working-tree.c58eec08e6335c79.et.png) +![Muudatuste vaatamine Source Control paneelis](../../../../translated_images/et/working-tree.c58eec08e6335c79.png) **Töö salvestamine (commit töövoog):** @@ -431,7 +431,7 @@ Laienduste turg on tõesti hästi organiseeritud, seega sa ei eksle, kui otsid, 2. Sirvi või otsi midagi kindlat 3. Klõpsa kõigile huvitavatele laiendustele, et rohkem teada saada -![Laienduste turu liides](../../../../translated_images/extensions.eca0e0c7f59a10b5.et.png) +![Laienduste turu liides](../../../../translated_images/et/extensions.eca0e0c7f59a10b5.png) **Mida seal näed:** @@ -484,7 +484,7 @@ Enamikul laiendustest on seaded, mida saad muuta, et need töötaksid just nii n 3. Vali rippmenüüst "Extension Settings" 4. Muuda seadeid, kuni need sobivad su töövooga ideaalselt -![Laienduste seadete kohandamine](../../../../translated_images/extension-settings.21c752ae4f4cdb78.et.png) +![Laienduste seadete kohandamine](../../../../translated_images/et/extension-settings.21c752ae4f4cdb78.png) **Tavalised asjad, mida võid tahtagi sättida:** - Kuidas su kood vormindatakse (tabid vs tühikud, rea pikkus jms) diff --git a/translations/et/8-code-editor/1-using-a-code-editor/assignment.md b/translations/et/8-code-editor/1-using-a-code-editor/assignment.md index 0046e9ab9..871785b85 100644 --- a/translations/et/8-code-editor/1-using-a-code-editor/assignment.md +++ b/translations/et/8-code-editor/1-using-a-code-editor/assignment.md @@ -78,7 +78,7 @@ Kuna VSCode.dev vajab hoidla avamiseks vähemalt ühe faili olemasolu, loome oma 4. **Kirjuta** commit sõnum: "Add initial HTML structure" 5. **Klõpsa** "Commit new file", et muudatused salvestada -![Create initial file on GitHub](../../../../translated_images/new-file-github.com.c886796d800e8056.et.png) +![Create initial file on GitHub](../../../../translated_images/et/new-file-github.com.c886796d800e8056.png) **Selle algse seadistusega saavutad:** - **Korrektse HTML5 dokumendi struktuuri, kasutades semantilisi elemente** @@ -104,7 +104,7 @@ Nüüd, kui hoidla vundament on paigas, liigume edasi VSCode.dev keskkonda põhi ✅ **Õnnestumise märguanne**: Peaksid nägema oma projekti faile Explorer küljeribal ning `index.html` faili, mida saad põhiredaktoris muuta. -![Project loaded in VSCode.dev](../../../../translated_images/project-on-vscode.dev.e79815a9a95ee7fe.et.png) +![Project loaded in VSCode.dev](../../../../translated_images/et/project-on-vscode.dev.e79815a9a95ee7fe.png) **Liidese põhielemendid:** - **Explorer küljeriba**: **Kuvab** sinu hoidla failid ja kaustastruktuuri @@ -448,7 +448,7 @@ Laiendused parandavad sinu arenduskogemust, pakkudes live eelvaate võimalusi ni **Kiired tulemused pärast paigaldamist:** Kui CodeSwing on paigaldatud, näed redaktoris oma CV veebilehe live eelvaadet. See võimaldab täpselt näha, kuidas su sait muudatustega muutub. -![CodeSwing extension showing live preview](../../../../translated_images/after-codeswing-extension-pb.0ebddddcf73b5509.et.png) +![CodeSwing extension showing live preview](../../../../translated_images/et/after-codeswing-extension-pb.0ebddddcf73b5509.png) **Täiustatud liidese mõistmine:** - **Poolitatud vaade**: **Näitab** vasakul koodi ja paremal live eelvaadet diff --git a/translations/et/9-chat-project/README.md b/translations/et/9-chat-project/README.md index 7d5383c37..7c70b9f4e 100644 --- a/translations/et/9-chat-project/README.md +++ b/translations/et/9-chat-project/README.md @@ -60,7 +60,7 @@ print(response.choices[0].message.content) Sinu lõpetatud projekt näeb välja selline: -![Chat app interface showing conversation between user and AI assistant](../../../translated_images/screenshot.0a1ee0d123df681b.et.png) +![Chat app interface showing conversation between user and AI assistant](../../../translated_images/et/screenshot.0a1ee0d123df681b.png) ## 🗺️ Sinu õpiteek läbi AI-rakenduste arenduse @@ -189,7 +189,7 @@ mindmap ``` **Põhialus**: AI rakenduste arendus ühendab traditsioonilised veebiarenduse oskused AI teenuste integratsiooniga, luues nutikaid rakendusi, mis mõistavad loomulikult kasutajate vajadusi. -![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/playground.d2b927122224ff8f.et.png) +![GitHub Models AI Playground interface with model selection and testing area](../../../translated_images/et/playground.d2b927122224ff8f.png) **Mida teeb mänguväljaku nii kasulikuks:** - **Proovi** erinevaid AI mudeleid nagu GPT-4o-mini, Claude jpt (kõik tasuta!) @@ -199,7 +199,7 @@ mindmap Kui oled natuke mänginud, klõpsa "Code" vahekaardile ja vali programmeerimiskeel, et saada vajaminev kood. -![Playground choice showing code generation options for different programming languages](../../../translated_images/playground-choice.1d23ba7d407f4758.et.png) +![Playground choice showing code generation options for different programming languages](../../../translated_images/et/playground-choice.1d23ba7d407f4758.png) ## Python tagapõhja integratsiooni seadistamine @@ -2351,14 +2351,14 @@ Tahad proovida seda projekti pilvearenduskeskkonnas? GitHub Codespaces pakub tä - **Mine** aadressile [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners) - **Vajuta** paremas ülanurgas nuppu "Use this template" (vesi, et oled GitHubi sisse logitud) -![Loo mallist liides, kus roheline "Use this template" nupp on nähtav](../../../translated_images/template.67ad477109d29a2b.et.png) +![Loo mallist liides, kus roheline "Use this template" nupp on nähtav](../../../translated_images/et/template.67ad477109d29a2b.png) **2. samm: Käivita Codespaces** - **Ava** äsja loodud repositoorium - **Vajuta** rohelist "Code" nuppu ja vali "Codespaces" - **Vali** "Create codespace on main", et alustada oma arenduskeskkonda -![Codespace loomise liides valikutega pilvearenduse keskkonna käivitamiseks](../../../translated_images/codespace.bcecbdf5d2747d3d.et.png) +![Codespace loomise liides valikutega pilvearenduse keskkonna käivitamiseks](../../../translated_images/et/codespace.bcecbdf5d2747d3d.png) **3. samm: Keskkonna seadistamine** Kui su Codespace käivitub, on sulle kättesaadav: diff --git a/translations/et/README.md b/translations/et/README.md index dfa8a9654..a95b5d893 100644 --- a/translations/et/README.md +++ b/translations/et/README.md @@ -60,13 +60,13 @@ Uus AI assistendi projekt just lisatud, vaata [projekti](./9-chat-project/README Alusta siit: [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) -![Taust](../../translated_images/background.148a8d43afde5730.et.png) +![Taust](../../translated_images/et/background.148a8d43afde5730.png) - Tunnid katavad kõike alates põhialustest kuni RAGini. - Suhtle ajalooliste tegelastega kasutades GenAI-d ja meie kaasrakendust. - Lõbus ja kaasahaarav jutustus, rändad ajas! -![tegelane](../../translated_images/character.5c0dd8e067ffd693.et.png) +![tegelane](../../translated_images/et/character.5c0dd8e067ffd693.png) Iga tund sisaldab ülesannet, teadmiste kontrolli ja väljakutset, mis juhatavad teid järgmiste teemade õppimisel: - Promptide ja prompt-engineeringi kasutamine @@ -101,7 +101,7 @@ Järgige neid samme: Teie loodud koopia repositsioonist klõpsake nuppu **Code** ja valige **Open with Codespaces**. See loob teile uue Codespace'i, kus töötada. -![Codespace](../../translated_images/createcodespace.0238bbf4d7a8d955.et.png) +![Codespace](../../translated_images/et/createcodespace.0238bbf4d7a8d955.png) #### Õppekava kohapealne käivitamine oma arvutis diff --git a/translations/et/for-teachers.md b/translations/et/for-teachers.md index 4ec0394bf..64ab1648e 100644 --- a/translations/et/for-teachers.md +++ b/translations/et/for-teachers.md @@ -42,10 +42,10 @@ See õppekava sisaldab importitavaid pakette, mis sobivad tavaliste LMS töövoo - Moodle Cloudil on piiratud Common Cartridge'i tugi. Eelistage ülaltoodud Moodle'i faili, mida saab samuti Canvas'isse üles laadida. - Pärast importimist vaadake üle moodulid, tähtaegade ja viktoriinide seaded, et need vastaksid teie semestri ajakavale. -![Moodle](../../translated_images/moodle.94eb93d714a50cb2.et.png) +![Moodle](../../translated_images/et/moodle.94eb93d714a50cb2.png) > Õppekava Moodle'i klassiruumis -![Canvas](../../translated_images/canvas.fbd605ff8e5b8aff.et.png) +![Canvas](../../translated_images/et/canvas.fbd605ff8e5b8aff.png) > Õppekava Canvas'is ### Repositooriumi otsene kasutamine (ilma Classroomita) diff --git a/translations/fa/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/fa/1-getting-started-lessons/1-intro-to-programming-languages/README.md index ac8680c56..f30500669 100644 --- a/translations/fa/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/fa/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/webdev101-programming.d6e3f98e61ac4bff.fa.png) +![Intro Programming](../../../../translated_images/fa/webdev101-programming.d6e3f98e61ac4bff.webp) > یادداشت تصویری توسط [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/fa/1-getting-started-lessons/2-github-basics/README.md b/translations/fa/1-getting-started-lessons/2-github-basics/README.md index b134a9658..7b0071dcf 100644 --- a/translations/fa/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/fa/1-getting-started-lessons/2-github-basics/README.md @@ -17,7 +17,7 @@ CO_OP_TRANSLATOR_METADATA: این سفر را با هم قدم به قدم طی می‌کنیم. بدون عجله، بدون فشار – فقط تو، من و ابزارهای واقعاً باحالی که قرار است بهترین دوستان جدیدت شوند! -![Intro to GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.fa.png) +![Intro to GitHub](../../../../translated_images/fa/webdev101-github.8846d7971abef6f9.webp) > یادداشت تصویری توسط [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/clone_repo.5085c48d666ead57.fa.png) +![کپی کردن مخزن به صورت محلی](../../../../translated_images/fa/clone_repo.5085c48d666ead57.webp) روش‌های مختلفی برای کپی کردن کد وجود دارد. یک روش این است که محتویات مخزن را "clone" کنید، از طریق HTTPS، SSH، یا با استفاده از رابط خط فرمان GitHub (CLI). diff --git a/translations/fa/1-getting-started-lessons/3-accessibility/README.md b/translations/fa/1-getting-started-lessons/3-accessibility/README.md index 2f0faf88e..6633cae45 100644 --- a/translations/fa/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/fa/1-getting-started-lessons/3-accessibility/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # ساخت صفحات وب قابل دسترس -![همه چیز درباره‌ی دسترسی‌پذیری](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.fa.png) +![همه چیز درباره‌ی دسترسی‌پذیری](../../../../translated_images/fa/webdev101-a11y.8ef3025c858d897a.webp) > اسکچ‌نوت توسط [تومومی ایمورا](https://twitter.com/girlie_mac) ```mermaid @@ -1049,12 +1049,12 @@ pie title "الگوهای رایج استفاده ARIA" **تصاویر اطلاع‌رسان** - اطلاعات مهم منتقل می‌کنند: ```html -Sales increased 25% from Q1 to Q2 2024 +Sales increased 25% from Q1 to Q2 2024 ``` **تصاویر تزئینی** - صرفاً تصویری بدون ارزش اطلاعاتی: ```html - + ``` **تصاویر کاربردی** - به عنوان دکمه یا کنترل عمل می‌کنند: @@ -1066,7 +1066,7 @@ pie title "الگوهای رایج استفاده ARIA" **تصاویر پیچیده** - نمودارها، دیاگرام‌ها، اینفوگرافیک‌ها: ```html -Quarterly sales data +Quarterly sales data

Detailed description: Sales data shows a steady increase across all quarters...

@@ -1106,7 +1106,7 @@ pie title "الگوهای رایج استفاده ARIA" - Website traffic increased 40% after accessibility improvements + Website traffic increased 40% after accessibility improvements ``` diff --git a/translations/fa/2-js-basics/1-data-types/README.md b/translations/fa/2-js-basics/1-data-types/README.md index 8d958a0f9..27933536a 100644 --- a/translations/fa/2-js-basics/1-data-types/README.md +++ b/translations/fa/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # مبانی جاوااسکریپت: نوع داده‌ها -![مبانی جاوااسکریپت - نوع داده‌ها](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.fa.png) +![مبانی جاوااسکریپت - نوع داده‌ها](../../../../translated_images/fa/webdev101-js-datatypes.4cc470179730702c.webp) > اسکچ‌نوت توسط [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/fa/2-js-basics/2-functions-methods/README.md b/translations/fa/2-js-basics/2-functions-methods/README.md index 7a48fc9df..80decf7e0 100644 --- a/translations/fa/2-js-basics/2-functions-methods/README.md +++ b/translations/fa/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # اصول جاوااسکریپت: متدها و توابع -![اصول جاوااسکریپت - توابع](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.fa.png) +![اصول جاوااسکریپت - توابع](../../../../translated_images/fa/webdev101-js-functions.be049c4726e94f8b.webp) > یادداشت تصویری توسط [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/fa/2-js-basics/3-making-decisions/README.md b/translations/fa/2-js-basics/3-making-decisions/README.md index afefdc2c4..aaedbed5b 100644 --- a/translations/fa/2-js-basics/3-making-decisions/README.md +++ b/translations/fa/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # اصول جاوااسکریپت: گرفتن تصمیم -![اصول جاوااسکریپت - گرفتن تصمیم](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.fa.png) +![اصول جاوااسکریپت - گرفتن تصمیم](../../../../translated_images/fa/webdev101-js-decisions.69e1b20f272dd1f0.webp) > اسکچ‌نوت از [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/fa/2-js-basics/4-arrays-loops/README.md b/translations/fa/2-js-basics/4-arrays-loops/README.md index c69a39cde..b2e3304cd 100644 --- a/translations/fa/2-js-basics/4-arrays-loops/README.md +++ b/translations/fa/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # مبانی جاوااسکریپت: آرایه‌ها و حلقه‌ها -![مبانی جاوااسکریپت - آرایه‌ها](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.fa.png) +![مبانی جاوااسکریپت - آرایه‌ها](../../../../translated_images/fa/webdev101-js-arrays.439d7528b8a29455.webp) > نقاشی دست‌ساز از [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/fa/3-terrarium/1-intro-to-html/README.md b/translations/fa/3-terrarium/1-intro-to-html/README.md index 48ed920f7..611e79b80 100644 --- a/translations/fa/3-terrarium/1-intro-to-html/README.md +++ b/translations/fa/3-terrarium/1-intro-to-html/README.md @@ -25,7 +25,7 @@ journey بهبود دسترسی‌پذیری: 5: Student ساخت تراریوم: 5: Student ``` -![مقدمه‌ای بر HTML](../../../../translated_images/webdev101-html.4389c2067af68e98.fa.png) +![مقدمه‌ای بر HTML](../../../../translated_images/fa/webdev101-html.4389c2067af68e98.webp) > اسکچ‌نوت توسط [Tomomi Imura](https://twitter.com/girlie_mac) HTML یا زبان نشانه‌گذاری ابرمتن، پایه و اساس هر وب‌سایتی است که تا به حال بازدید کرده‌اید. HTML را مانند اسکلت در نظر بگیرید که ساختار صفحات وب را می‌سازد – مشخص می‌کند محتوای چیست، چگونه سازماندهی شده و هر بخش چه نمایندگی دارد. در حالی که CSS بعداً «لباس» به HTML شما با رنگ‌ها و چیدمان می‌پوشاند و جاوااسکریپت با تعامل آن را زنده می‌کند، HTML ساختار اساسی را فراهم می‌کند که همه چیز را ممکن می‌سازد. @@ -86,7 +86,7 @@ mindmap 4. در پنل اکسپلورر روی آیکون "New File" کلیک کنید 5. فایل خود را به نام `index.html` نامگذاری کنید -![نمایش ایجاد فایل جدید در VS Code](../../../../translated_images/vs-code-index.e2986cf919471eb9.fa.png) +![نمایش ایجاد فایل جدید در VS Code](../../../../translated_images/fa/vs-code-index.e2986cf919471eb9.webp) **گزینه ۲: استفاده از دستورات ترمینال** ```bash @@ -236,48 +236,48 @@ HTML از تگ‌های جفتی برای تعریف عناصر استفاده
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
- plant + plant
diff --git a/translations/fa/3-terrarium/2-intro-to-css/README.md b/translations/fa/3-terrarium/2-intro-to-css/README.md index 872f29714..2b2471d06 100644 --- a/translations/fa/3-terrarium/2-intro-to-css/README.md +++ b/translations/fa/3-terrarium/2-intro-to-css/README.md @@ -29,7 +29,7 @@ journey طراحی واکنش‌گرا: 5: Student بازتاب‌های شیشه‌ای: 5: Student ``` -![معرفی CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a20.fa.png) +![معرفی CSS](../../../../translated_images/fa/webdev101-css.3f7af5991bf53a20.webp) > اسکچ‌نوت توسط [تومومی ایمورا](https://twitter.com/girlie_mac) یادتان هست که تراریوم HTML شما چقدر ساده به نظر می‌رسید؟ CSS همان جایی است که آن ساختار ساده را به چیزی جذاب و دیدنی تبدیل می‌کنیم. @@ -202,7 +202,7 @@ body { ابزار توسعه‌دهنده مرورگر خود را باز کنید (F12)، به تب Elements بروید و عنصر `

` خود را بررسی کنید. خواهید دید که خانواده فونت را از body به ارث می‌برد: -![inherited font](../../../../translated_images/1.cc07a5cbe114ad1d.fa.png) +![inherited font](../../../../translated_images/fa/1.cc07a5cbe114ad1d.webp) ✅ **زمان آزمایش**: سعی کنید ویژگی‌های ارث‌برنده دیگری مانند `color`، `line-height` یا `text-align` را روی `` تنظیم کنید. چه اتفاقی برای عنوان و سایر عناصر می‌افتد؟ @@ -332,7 +332,7 @@ h1 { **اینجا ساختار HTML برای هر گیاه است:** ```html
- Decorative plant for terrarium + Decorative plant for terrarium
``` @@ -594,7 +594,7 @@ flowchart LR شما نقاط برجسته ملایمی ایجاد خواهید کرد که بازتاب نور از سطوح شیشه را شبیه‌سازی می‌کند. این روش مشابه نحوه استفاده نقاشان رنسانس مانند جان فان آیک از نور و بازتاب برای واقعی به نظر رسیدن شیشه نقاشی شده است. هدف شما این است: -![finished terrarium](../../../../translated_images/terrarium-final.2f07047ffc597d0a.fa.png) +![finished terrarium](../../../../translated_images/fa/terrarium-final.2f07047ffc597d0a.webp) **چالش شما:** - **ایجاد** اشکال بیضی سفید یا رنگ روشن برای بازتاب شیشه