Ved å bruke CO2 Signal API fra tmrow for å overvåke strømforbruk, kan du bygge en nettleserutvidelse som gir deg varsler om hvor tungt strømforbruket er i ditt område. Å bruke denne utvidelsen kan hjelpe deg med å ta informerte valg om aktivitetene dine basert på denne informasjonen.
## Kom i Gang
@ -31,7 +31,7 @@ npm run build
For å installere i Edge, bruk menyen med 'tre prikker' øverst til høyre i nettleseren for å finne panelet Utvidelser. Derfra velger du 'Load Unpacked' for å laste inn en ny utvidelse. Åpne 'dist'-mappen når du blir bedt om det, og utvidelsen vil bli lastet inn. For å bruke den, trenger du en API-nøkkel for CO2 Signal API ([få en her via e-post](https://www.co2signal.com/) - skriv inn e-posten din i boksen på denne siden) og [koden for ditt område](http://api.electricitymap.org/v3/zones) som samsvarer med [Electricity Map](https://www.electricitymap.org/map) (i Boston, for eksempel, bruker jeg 'US-NEISO').
Når API-nøkkelen og området er lagt inn i utvidelsens grensesnitt, vil en farget prikk i nettleserens utvidelseslinje endre seg for å reflektere energiforbruket i ditt område og gi deg anbefalinger om passende aktiviteter basert på dette. Konseptet bak dette 'prikk'-systemet ble inspirert av [Energy Lollipop nettleserutvidelsen](https://energylollipop.com/) for utslipp i California.
Ved å bruke tmrow's CO2 Signal API for å spore strømforbruk, kan du lage en nettleserutvidelse som gir deg en påminnelse direkte i nettleseren om hvor tungt strømforbruket er i din region. Å bruke denne utvidelsen ad hoc vil hjelpe deg med å ta vurderinger om aktivitetene dine basert på denne informasjonen.
For å installere på Edge, bruk menyen med 'tre prikker' øverst til høyre i nettleseren for å finne utvidelsespanelet. Derfra velger du 'Last inn pakket utvidelse' for å laste inn en ny utvidelse. Åpne 'dist'-mappen når du blir bedt om det, og utvidelsen vil lastes inn. For å bruke den, trenger du en API-nøkkel for CO2 Signal's API ([få en her via e-post](https://www.co2signal.com/) - skriv inn e-posten din i boksen på denne siden) og koden for din region ([finn den her](http://api.electricitymap.org/v3/zones)) som tilsvarer [Electricity Map](https://www.electricitymap.org/map) (for eksempel bruker jeg 'US-NEISO' i Boston).
Når API-nøkkelen og regionen er lagt inn i utvidelsesgrensesnittet, bør den fargede prikken i nettleserens utvidelseslinje endres for å gjenspeile energiforbruket i din region og gi deg en pekepinn på hvilke energikrevende aktiviteter som kan være passende å utføre. Konseptet bak dette 'prikk'-systemet ble gitt til meg av [Energy Lollipop-utvidelsen](https://energylollipop.com/) for utslipp i California.
> Bilde fra [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
For å tegne på canvas-elementet følger du den samme tre-trinns prosessen som danner grunnlaget for all lerretgrafikk. Når du gjør dette noen ganger, blir det helt naturlig:
@ -323,11 +323,11 @@ Du skal lage en nettside med et Canvas-element. Den skal vise en svart skjerm `1
- **Poengsystem**: Hvert ødelagte fiendeskip belønner med 100 poeng (runde tall er lettere for spillerne å regne på mentalt). Poengsummen vises nederst til venstre.
- **Livsteller**: Helten din starter med tre liv – en standard etablert av tidlige arkadespill for å balansere utfordring med spillbarhet. Hver kollisjon med en fiende koster ett liv. Vi viser gjenværende liv nederst til høyre med skipsikoner .
- **Livsteller**: Helten din starter med tre liv – en standard etablert av tidlige arkadespill for å balansere utfordring med spillbarhet. Hver kollisjon med en fiende koster ett liv. Vi viser gjenværende liv nederst til høyre med skipsikoner .
Bruken av `history.pushState` lager nye poster i nettleserens navigasjonshistorikk. Du kan sjekke det ved å holde inne *tilbake-knappen* i nettleseren, det skal vises noe slikt som dette:
Hvis du prøver å klikke tilbake-knappen flere ganger, vil du se at gjeldende URL endres og historikken er oppdatert, men samme mal vises fortsatt.
@ -292,7 +292,7 @@ Først, la oss observere hva som skjer med et grunnleggende skjema:
2. Observer endringene i nettleserens adressefelt
3. Legg merke til hvordan siden lastes på nytt og data vises i URLen
### Sammenligning av HTTP-metoder
@ -346,7 +346,7 @@ La oss konfigurere registreringsskjemaet ditt til å kommunisere korrekt med bac
2. **Klikk** på "Opprett konto"-knappen
3. **Observer** serverens respons i nettleseren
**Dette bør du se:**
- **Nettleseren omdirigeres** til API-endepunktets URL
@ -609,7 +609,7 @@ async function register() {
3. **Klikk** "Opprett konto"
4. **Observer** konsollmeldinger og brukerfeedback
**Det du bør se:**
- **Lastetilstand** vises på sendeknappen
@ -783,7 +783,7 @@ La oss forbedre registreringsskjemaet ditt med robust validering som gir utmerke
3. **Prøv** spesialtegn i brukernavnfeltet
4. **Skriv inn** et negativt saldo-beløp
**Dette vil du observere:**
- **Nettleser viser** native valideringsmeldinger
@ -943,7 +943,7 @@ Vis en feilmelding i HTML hvis brukeren allerede eksisterer.
Her er et eksempel på hvordan den endelige innloggingssiden kan se ut etter litt styling:
@ -187,7 +187,7 @@ Som Titanics skillevegger som virket robuste til flere kamre fyltes samtidig, vi
I stedet for å løpe i sirkel, skal vi lage et **sentralisert tilstandshåndteringssystem**. Tenk på det som å ha én virkelig organisert person som har ansvar for alt det viktige:
```mermaid
flowchart TD
@ -798,7 +798,7 @@ Denne utfordringen vil hjelpe deg å tenke som en profesjonell utvikler som bala
Her er et eksempelresultat etter å ha fullført oppgaven:
@ -112,7 +112,7 @@ Se [server-API-dokumentasjonen](../api/README.md) for:
**Forventet resultat:**
Etter å ha fullført denne oppgaven, skal bankappen din ha en fullt funksjonell "Legg til transaksjon"-funksjon som ser profesjonell ut og fungerer som den skal:
I dette prosjektet lærer du hvordan du bygger en fiktiv bank. Disse leksjonene inkluderer instruksjoner om hvordan du setter opp en webapp med ruter, bygger skjemaer, håndterer tilstand, og henter data fra en API som gir tilgang til bankens data.
@ -78,7 +78,7 @@ Siden VSCode.dev krever minst én fil for å åpne et repository, oppretter vi h
4. **Skriv** en commit-melding: "Legg til innledende HTML-struktur"
5. **Klikk** "Commit new file" for å lagre endringene dine
**Dette oppnår den innledende oppsettet:**
- **Etablerer** riktig HTML5-dokumentstruktur med semantiske elementer
@ -104,7 +104,7 @@ Nå som grunnlaget for repositoryen din er etablert, la oss gå over til VSCode.
✅ **Indikator for suksess**: Du bør se prosjektfilene dine i Explorer-sidepanelet og `index.html` tilgjengelig for redigering i hovedredigeringsområdet.
**Hva du vil se i grensesnittet:**
- **Explorer-sidepanel**: **Viser** prosjektfilene og mappestrukturen din
@ -448,7 +448,7 @@ Utvidelser forbedrer utviklingsopplevelsen din ved å gi muligheter for live for
**Umiddelbare resultater etter installasjon:**
Når CodeSwing er installert, vil du se en live forhåndsvisning av CV-nettsiden din vises i redigeringsverktøyet. Dette lar deg se nøyaktig hvordan siden din ser ut mens du gjør endringer.
**Forstå det forbedrede grensesnittet:**
- **Delt visning**: **Viser** koden din på den ene siden og live forhåndsvisning på den andre
## 🗺️ Din Læringsreise Gjennom AI Applikasjonsutvikling
@ -189,7 +189,7 @@ mindmap
```
**Kjerneprinsipp**: AI-applikasjonsutvikling kombinerer tradisjonelle webutviklingsferdigheter med AI-tjenesteintegrasjon, og skaper intelligente applikasjoner som føles naturlige og responsive for brukerne.
**Dette gjør playground så nyttig:**
- **Prøv ut** forskjellige AI-modeller som GPT-4o-mini, Claude, og flere (alle gratis!)
@ -199,7 +199,7 @@ mindmap
Når du har lekt deg litt, klikk bare på "Code"-fanen og velg programmeringsspråk for å få implementasjonskoden du trenger.
## Sette Opp Python Backend-integrasjon
@ -2353,14 +2353,14 @@ Vil du prøve dette prosjektet i et skybasert utviklingsmiljø? GitHub Codespace
- **Naviger** til [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Klikk** på "Use this template" øverst til høyre (sørg for at du er logget inn på GitHub)
**Steg 2: Start Codespaces**
- **Åpne** ditt nylig opprettede repository
- **Klikk** på den grønne "Code"-knappen og velg "Codespaces"
- **Velg** "Create codespace on main" for å starte utviklingsmiljøet ditt
Hver leksjon inkluderer en oppgave å fullføre, en kunnskapssjekk og en utfordring for å veilede deg i læringstemaer som:
@ -115,7 +115,7 @@ Følg disse trinnene:
I din kopi av dette depotet som du opprettet, klikk på **Kode**-knappen og velg **Åpne med Codespaces**. Dette vil opprette en ny Codespace for deg å jobbe i.
<imgsrc="../../../../translated_images/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.pa.png" alt="Sales increased 25% from Q1 to Q2 2024">
<imgsrc="../../../../translated_images/pa/chart.31c7eb0eb5c4450deba10b6f236732dfee8e8a11f6c0d8f31d2c2efb9d4c00ef.png" alt="Sales increased 25% from Q1 to Q2 2024">
@ -17,7 +17,7 @@ Słuchaj, całkowicie rozumiem, jeśli programowanie wydaje się teraz przeraża
Dziś poznamy niesamowite narzędzia, które sprawiają, że nowoczesne tworzenie stron internetowych jest nie tylko możliwe, ale też niesamowicie wciągające. Mówię o tych samych edytorach, przeglądarkach i przepływach pracy, z których korzystają programiści Netflixa, Spotify oraz Twojego ulubionego studia indie tworzącego aplikacje każdego dnia. I oto część, która sprawi, że zatańczysz z radości: większość tych profesjonalnych, standardowych narzędzi jest całkowicie darmowa!
@ -17,7 +17,7 @@ Wiem, że na początku może to wydać się dużo – pamiętam, jak patrzyłem
Przejdziemy przez tę podróż razem, krok po kroku. Bez pośpiechu, bez presji – tylko Ty, ja i naprawdę fajne narzędzia, które wkrótce staną się Twoimi nowymi najlepszymi przyjaciółmi!
> Sketchnote autorstwa [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -606,7 +606,7 @@ Najpierw znajdź repozytorium (**repo**) na GitHub, które cię interesuje i do
✅ Dobrym sposobem na znalezienie repozytoriów „przyjaznych początkującym” jest [wyszukiwanie po tagu 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
Istnieje kilka sposobów na skopiowanie kodu. Jednym z nich jest „klonowanie” zawartości repozytorium za pomocą HTTPS, SSH lub wykorzystując GitHub CLI (interfejs wiersza poleceń).
> Sketchnote autorstwa [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, czyli HyperText Markup Language, to fundament każdej odwiedzanej witryny. Pomyśl o HTML jak o szkielecie nadającym strukturę stronom internetowym – definiuje, gdzie trafia zawartość, jak jest zorganizowana i co reprezentuje każdy element. Podczas gdy CSS później "ubrać" Twój HTML kolorami i układami, a JavaScript tchnie w niego życie dzięki interaktywności, HTML zapewnia niezbędną strukturę, która umożliwia wszystko inne.
@ -86,7 +86,7 @@ Stworzysz dedykowany folder dla projektu terrarium i dodasz pierwszy plik HTML.
4. W panelu Eksploratora kliknij ikonę „Nowy plik”
5. Nazwij swój plik `index.html`
**Opcja 2: Korzystanie z poleceń terminala**
```bash
@ -236,48 +236,48 @@ Dodaj teraz obrazy roślin zorganizowane w dwóch kolumnach między tagami `<bod
> Notatka graficzna autorstwa [Tomomi Imura](https://twitter.com/girlie_mac)
Pamiętasz, jak twoje terrarium HTML wyglądało dość prosto? CSS to miejsce, gdzie przekształcamy tę prostą strukturę w coś wizualnie atrakcyjnego.
@ -202,7 +202,7 @@ body {
Otwórz narzędzia deweloperskie przeglądarki (F12), przejdź do zakładki Elements i zbadaj swój element `<h1>`. Zobaczysz, że dziedziczy rodzinę czcionki po body:
✅ **Czas na eksperyment**: Spróbuj ustawić inne właściwości dziedziczone na `<body>`, jak `color`, `line-height` lub `text-align`. Co się stanie z nagłówkiem i innymi elementami?
@ -332,7 +332,7 @@ W naszym terrarium każda roślina potrzebuje podobnych stylów, ale także indy
**Oto struktura HTML każdej rośliny:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f.pl.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/pl/plant1.d18b18ffe73da18f.png" />
</div>
```
@ -594,7 +594,7 @@ Gotowy, by wzbogacić terrarium o realistyczne refleksy szklane? Ta technika dod
Stworzysz subtelne refleksy, które symulują odbicie światła od powierzchni szkła. Podejście to jest podobne do metody, jaką stosowali renesansowi malarze tacy jak Jan van Eyck, używając światła i odbić, aby nadać szkłu trójwymiarowy wygląd. Oto, do czego dążysz:
> Sketchnotka autorstwa [Tomomi Imura](https://twitter.com/girlie_mac)
Witamy w jednym z najbardziej angażujących aspektów tworzenia stron internetowych – tworzeniu interaktywności! Model Obiektowy Dokumentu (DOM) jest jak most łączący twój HTML z JavaScript, a dziś użyjemy go, aby ożywić twoje terrarium. Gdy Tim Berners-Lee stworzył pierwszą przeglądarkę internetową, wyobrażał sobie sieć, gdzie dokumenty mogą być dynamiczne i interaktywne – to właśnie DOM sprawia, że ta wizja jest możliwa.
@ -102,7 +102,7 @@ flowchart TD
style P fill:#ffebee
style Q fill:#ffebee
```
> Reprezentacja DOM i powiązanego znacznika HTML. Źródło: [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -146,7 +146,7 @@ flowchart LR
```
> 💡 **Zrozumienie zamknięć**: Zamknięcia to istotny temat w JavaScript i wielu programistów używa ich przez lata, zanim w pełni zrozumie teoretyczne aspekty. Dzisiaj skupimy się na praktycznym zastosowaniu – zobaczysz, jak zamknięcia naturalnie pojawiają się podczas budowania interaktywnych funkcji. Zrozumienie rozwinie się, gdy zobaczysz, jak rozwiązują rzeczywiste problemy.
> Reprezentacja DOM i powiązanego znacznika HTML. Źródło: [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -591,7 +591,7 @@ Teraz przetestuj swoje interaktywne terrarium! Otwórz plik `index.html` w przeg
- **Wsparcie wieloplatformowe**: Działa na desktopie i urządzeniach mobilnych
- **Uważność na wydajność**: Brak wycieków pamięci lub zbędnych obliczeń
> Sketchnote autorstwa [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
## Quiz przed wykładem
@ -77,7 +77,7 @@ Proces ten odzwierciedla sposób, w jaki pierwsza przeglądarka internetowa, Wor
✅ **Trochę historii**: Pierwsza przeglądarka nazywała się „WorldWideWeb” i została stworzona przez Sir Timothy’ego Berners-Lee w 1990 roku.
> Niektóre wczesne przeglądarki, za [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Jak przeglądarki przetwarzają zawartość sieci
@ -194,7 +194,7 @@ quadrantChart
Zrozumienie procesu instalacji rozszerzenia pomaga przewidzieć, jak doświadczenie użytkownika będzie wyglądać podczas instalacji Twojego rozszerzenia. Proces instalacji jest ustandaryzowany we wszystkich nowoczesnych przeglądarkach, z drobnymi różnicami w designie interfejsu.
> **Ważne**: Upewnij się, że włączyłeś tryb dewelopera i zezwoliłeś na rozszerzenia z innych sklepów podczas testowania swoich własnych rozszerzeń.
@ -308,10 +308,10 @@ Zasada ta odpowiada regule stopniowego ujawniania informacji, stosowanej w proje
### Przegląd widoków rozszerzenia
**Widok konfiguracji** – konfiguracja dla pierwszych użytkowników:
**Widok wyników** – wyświetlanie danych o śladzie węglowym:
ClearStorage --> FirstTime: Powrót do konfiguracji
```
> ⚠️ **Kwestie bezpieczeństwa**: W aplikacjach produkcyjnych przechowywanie kluczy API w LocalStorage niesie ryzyko bezpieczeństwa, ponieważ JavaScript ma do nich dostęp. Dla celów edukacyjnych jest to w porządku, ale prawdziwe aplikacje powinny korzystać z bezpiecznego przechowywania po stronie serwera dla poufnych danych.
@ -123,7 +123,7 @@ Aby otworzyć Narzędzia deweloperskie w Edge, kliknij trzy kropki w prawym gór
Wypróbujmy to. Otwórz jakąś stronę (Microsoft.com świetnie się sprawdzi) i kliknij 'Nagraj'. Teraz odśwież stronę i obserwuj, jak profiler rejestruje wszystko, co się dzieje. Po zatrzymaniu nagrywania zobaczysz szczegółowy rozkład tego, jak przeglądarka 'skryptuje', 'renderuje' i 'maluje' witrynę. Przypomina mi to, jak centrum kontroli misji monitoruje każdy system podczas startu rakiety – masz dane w czasie rzeczywistym o tym, co i kiedy się dzieje.
✅ [Dokumentacja Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) zawiera dużo więcej szczegółów, jeśli chcesz zgłębić temat
@ -133,11 +133,11 @@ Wybierz elementy linii czasu profilu, aby przybliżyć zdarzenia zachodzące pod
Zyskaj migawkę wydajności strony, wybierając fragment linii czasu profilu i patrząc na panel podsumowania:
✅ Poznaj swój profiler! Otwórz narzędzia deweloperskie na tej stronie i sprawdź, czy są jakieś wąskie gardła. Jaki zasób ładuje się najwolniej? Najszybciej?
> Obraz z [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Aby rysować na elemencie canvas, wykonasz ten sam trzyetapowy proces, który jest podstawą całej grafiki na canvasie. Po kilku próbach stanie się to drugą naturą:
@ -323,11 +323,11 @@ Zbudujesz stronę internetową z elementem Canvas. Powinna wyświetlać czarny e
- **System punktacji**: Każdy zniszczony statek wroga nagradza 100 punktów (okrągłe liczby są łatwiejsze do mentalnego liczenia dla graczy). Wynik wyświetlany jest w lewym dolnym rogu.
- **Licznik żyć**: Twój bohater rozpoczyna z trzema życiami - standard ustalony przez wczesne gry arcade, by zbalansować wyzwanie z grywalnością. Każda kolizja z wrogiem kosztuje jedno życie. Pokażemy pozostałe życia w prawym dolnym rogu za pomocą ikon statków .
- **Licznik żyć**: Twój bohater rozpoczyna z trzema życiami - standard ustalony przez wczesne gry arcade, by zbalansować wyzwanie z grywalnością. Każda kolizja z wrogiem kosztuje jedno życie. Pokażemy pozostałe życia w prawym dolnym rogu za pomocą ikon statków .
Użycie `history.pushState` tworzy nowe wpisy w historii nawigacji przeglądarki. Możesz to sprawdzić, przytrzymując *przycisk wstecz* w przeglądarce — powinno się pokazać coś takiego:
Jeśli spróbujesz kilka razy kliknąć przycisk wstecz, zauważysz, że aktualny URL się zmienia, a historia jest aktualizowana, ale nadal wyświetlany jest ten sam szablon.
@ -187,7 +187,7 @@ Podobnie jak projekt Titanica z podziałem na przedziały, który wydawał się
Zamiast biegać w kółko, stworzymy system **scentralizowanego zarządzania stanem**. Wyobraź to sobie jak jedną naprawdę zorganizowaną osobę odpowiedzialną za wszystko, co ważne:
```mermaid
flowchart TD
@ -798,7 +798,7 @@ To wyzwanie pomoże Ci myśleć jak profesjonalny programista, który bierze pod
@ -112,7 +112,7 @@ Odniesienie do [dokumentacji API serwera](../api/README.md) zawierającej:
**Oczekiwany rezultat:**
Po ukończeniu tego zadania Twoja aplikacja bankowa powinna mieć w pełni funkcjonalną funkcję "Dodaj transakcję", która wygląda i działa profesjonalnie:
- **Pasek aktywności** (ta pionowa listwa po lewej): Twoja główna nawigacja z eksploratorem 📁, wyszukiwaniem 🔍, kontrolą źródła 🌿, rozszerzeniami 🧩 i ustawieniami ⚙️
@ -229,7 +229,7 @@ Idealna, gdy zaczynasz w VSCode.dev i chcesz otworzyć konkretne repozytorium. P
1. Wejdź na [vscode.dev](https://vscode.dev) jeśli jeszcze tam nie jesteś
2. Znajdź przycisk „Open Remote Repository” na ekranie powitalnym i kliknij go
@ -78,7 +78,7 @@ Ponieważ VSCode.dev wymaga co najmniej jednego pliku do otwarcia repozytorium,
4. **Napisz** komunikat commita: "Add initial HTML structure"
5. **Kliknij** "Commit new file", aby zapisać zmiany
**Co osiąga ta początkowa konfiguracja:**
- **Ustala** poprawną strukturę dokumentu HTML5 z semantycznymi elementami
@ -104,7 +104,7 @@ Gdy podstawy repozytorium są już gotowe, przejdźmy do VSCode.dev aby wykonać
✅ **Wskaźnik sukcesu**: Powinieneś zobaczyć pliki projektu w panelu Explorer oraz `index.html` dostępny do edycji na głównym ekranie.
**Co zobaczysz w interfejsie:**
- **Panel Explorer**: **Wyświetla** pliki i strukturę folderów repozytorium
@ -448,7 +448,7 @@ Rozszerzenia wzbogacają Twoje środowisko pracy, oferując m.in. podgląd na ż
**Natychmiastowe efekty po instalacji:**
Po zainstalowaniu CodeSwing zobaczysz podgląd swojego CV na żywo w edytorze. Pozwala to dokładnie widzieć, jak wygląda strona podczas wprowadzania zmian.
**Zrozumienie ulepszonego interfejsu:**
- **Widok podzielony**: **Pokazuje** kod po jednej stronie i podgląd na żywo po drugiej
## 🗺️ Twoja podróż edukacyjna przez rozwój aplikacji AI
@ -189,7 +189,7 @@ mindmap
```
**Główna zasada**: rozwój aplikacji AI łączy tradycyjne umiejętności tworzenia stron internetowych z integracją usług AI, tworząc inteligentne aplikacje, które są naturalne i responsywne dla użytkowników.
**Co sprawia, że playground jest tak przydatny:**
- **Wypróbuj** różne modele AI, takie jak GPT-4o-mini, Claude i inne (wszystkie darmowe!)
@ -199,7 +199,7 @@ mindmap
Po zabawie po prostu kliknij zakładkę „Code” i wybierz język programowania, aby otrzymać potrzebny kod implementacyjny.
## Konfiguracja integracji backendowej w Pythonie
@ -2352,14 +2352,14 @@ Chcesz wypróbować ten projekt w chmurowym środowisku deweloperskim? GitHub Co
- **Przejdź** do repozytorium [Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Kliknij** "Use this template" w prawym górnym rogu (upewnij się, że jesteś zalogowany do GitHub)
**Krok 2: Uruchom Codespaces**
- **Otwórz** utworzone repozytorium
- **Kliknij** zielony przycisk "Code" i wybierz "Codespaces"
- **Wybierz** "Create codespace on main", aby rozpocząć środowisko deweloperskie
@ -17,7 +17,7 @@ Olha, eu entendo perfeitamente se a programação te parecer intimidante neste m
Hoje, vamos explorar as ferramentas incríveis que tornam o desenvolvimento web moderno não só possível, mas mesmo viciante. Estou a falar dos mesmos editores, browsers e fluxos de trabalho que os programadores da Netflix, Spotify e do teu estúdio indie favorito usam todos os dias. E aqui está a parte que te vai fazer dançar de alegria: a maioria destas ferramentas profissionais e padrão na indústria é completamente gratuita!
@ -17,7 +17,7 @@ Sei que isto pode parecer muito no início – até eu me lembro de olhar para a
Vamos fazer esta viagem juntos, passo a passo. Sem pressas, sem pressão – só tu, eu, e algumas ferramentas realmente fixes que vão passar a ser os teus novos melhores amigos!
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -605,7 +605,7 @@ Primeiro, vamos encontrar um repositório (ou **repo**) no GitHub que seja do se
✅ Uma boa forma de encontrar repositórios 'amigáveis para iniciantes' é [pesquisar pela tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
Existem várias formas de copiar código. Uma forma é "clonar" o conteúdo do repositório, usando HTTPS, SSH, ou usando o GitHub CLI (Interface de Linha de Comandos do GitHub).
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, ou HyperText Markup Language, é a base de todos os websites que alguma vez visitou. Pense no HTML como o esqueleto que dá estrutura às páginas web – define onde o conteúdo vai, como está organizado e o que cada parte representa. Enquanto o CSS mais tarde vai "vestir" o seu HTML com cores e layouts, e o JavaScript dará vida com interatividade, o HTML fornece a estrutura essencial que torna tudo o resto possível.
@ -86,7 +86,7 @@ Vai criar uma pasta dedicada para o seu projeto terrário e adicionar o seu prim
4. No painel Explorer, clique no ícone "New File"
5. Dê ao seu ficheiro o nome `index.html`
**Opção 2: Usar Comandos de Terminal**
```bash
@ -236,48 +236,48 @@ Agora adicione as imagens das plantas organizadas em duas colunas entre as suas
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
Lembras-te como o teu terrário HTML parecia bastante básico? O CSS é onde transformamos essa estrutura simples numa coisa visualmente apelativa.
@ -202,7 +202,7 @@ body {
Abre as ferramentas de desenvolvedor do teu navegador (F12), vai ao separador Elements (Elementos) e inspeciona o teu elemento `<h1>`. Vais ver que herda a família de fontes do body:
✅ **Hora do Experimento**: Experimenta definir outras propriedades herdáveis no `<body>` como `color`, `line-height` ou `text-align`. O que acontece ao teu título e a outros elementos?
@ -332,7 +332,7 @@ No nosso terrário, cada planta precisa de um estilo semelhante mas também de p
**Aqui está a estrutura HTML para cada planta:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f.pt.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/pt/plant1.d18b18ffe73da18f.png" />
</div>
```
@ -594,7 +594,7 @@ Preparado para melhorar o teu terrário com reflexos realistas de vidro? Esta t
Vais criar destaques subtis que simulam como a luz se reflete em superfícies de vidro. Esta abordagem é semelhante à utilizada por pintores renascentistas como Jan van Eyck, que usavam luz e reflexão para tornar o vidro pintado tridimensional. Eis o que queres alcançar:
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
Bem-vindo a um dos aspetos mais envolventes do desenvolvimento web - tornar as coisas interativas! O Modelo de Objeto de Documento (DOM) é como uma ponte entre o seu HTML e JavaScript, e hoje iremos usá-lo para dar vida ao seu terrário. Quando Tim Berners-Lee criou o primeiro navegador web, ele imaginou uma web onde os documentos poderiam ser dinâmicos e interativos - o DOM torna essa visão possível.
@ -102,7 +102,7 @@ flowchart TD
style P fill:#ffebee
style Q fill:#ffebee
```
> Uma representação do DOM e da marcação HTML que o referencia. De [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -146,7 +146,7 @@ flowchart LR
```
> 💡 **Compreender Closures**: Closures são um tema importante em JavaScript, e muitos programadores usam-nas durante anos antes de entenderem completamente todos os aspetos teóricos. Hoje, estamos focados na aplicação prática - verá as closures surgir naturalmente enquanto construímos as funcionalidades interativas. A compreensão desenvolver-se-á à medida que perceber como resolvem problemas reais.
> Uma representação do DOM e da marcação HTML que o referencia. De [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -591,7 +591,7 @@ Agora teste o seu terrário interativo! Abra o ficheiro `index.html` num browser
- **Suporte multi-dispositivo**: Funciona em desktop e móvel
- **Consciência de desempenho**: Sem fugas de memória ou cálculos redundantes
> Alguns navegadores iniciais, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Como os Navegadores Processam o Conteúdo Web
@ -194,7 +194,7 @@ quadrantChart
Compreender o processo de instalação de extensões ajuda a antecipar a experiência do utilizador ao instalar a sua extensão. O processo de instalação está padronizado nos navegadores modernos, com pequenas variações no design da interface.
> **Importante**: Certifique-se de ativar o modo de desenvolvedor e permitir extensões de outras lojas ao testar as suas próprias extensões.
@ -308,10 +308,10 @@ Isto segue o princípio da divulgação progressiva utilizado no design de inter
### Visão Geral das Vistas da Extensão
**Vista de Configuração** – Configuração do utilizador pela primeira vez:
**Vista de Resultados** – Exibição dos dados da pegada de carbono:
> ⚠️ **Consideração de Segurança**: Em aplicações de produção, armazenar chaves API no LocalStorage implica riscos de segurança, pois o JavaScript pode aceder a estes dados. Para fins de aprendizagem, esta abordagem funciona bem, mas aplicações reais devem usar armazenamento seguro do lado do servidor para credenciais sensíveis.
@ -123,7 +123,7 @@ Para abrir as Ferramentas de Desenvolvimento no Edge, clique nos três pontos no
Vamos experimentar. Abra um website (o Microsoft.com funciona bem para isto) e clique no botão 'Gravar'. Agora recarregue a página e observe o perfilador capturar tudo o que acontece. Quando parar a gravação, verá uma descrição detalhada de como o navegador 'script', 'renderiza' e 'pinta' o site. Lembra-me de como o centro de controlo da missão monitoriza todos os sistemas durante o lançamento de um foguetão – obtém dados em tempo real exatamente sobre o que está a acontecer e quando.
✅ A [Documentação da Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) tem muitos mais detalhes se quiser aprofundar
@ -133,11 +133,11 @@ Selecione elementos da linha do tempo do perfil para ampliar eventos que acontec
Obtenha um instantâneo do desempenho da sua página selecionando uma parte da linha do tempo do perfil e olhando para o painel de resumo:
✅ Conheça o seu perfilador! Abra as ferramentas de desenvolvimento neste site e veja se há algum estrangulamento. Qual o recurso que demora mais a carregar? E o mais rápido?
> Imagem de [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Para desenhar no elemento canvas, vai seguir o mesmo processo em três passos que forma a base de todos os gráficos em canvas. Depois de o fazer algumas vezes, torna-se natural:
@ -323,11 +323,11 @@ Vai construir uma página web com um elemento Canvas. Deve renderizar um ecrã p
- **Sistema de pontuação**: Cada nave inimiga destruída atribui 100 pontos (números arredondados são mais fáceis para os jogadores calcularem mentalmente). A pontuação é mostrada no canto inferior esquerdo.
- **Contador de vidas**: O teu herói começa com três vidas - um padrão estabelecido pelos primeiros jogos arcade para equilibrar desafio e jogabilidade. Cada colisão com um inimigo custa uma vida. Vamos mostrar as vidas restantes no canto inferior direito usando ícones de navio .
- **Contador de vidas**: O teu herói começa com três vidas - um padrão estabelecido pelos primeiros jogos arcade para equilibrar desafio e jogabilidade. Cada colisão com um inimigo custa uma vida. Vamos mostrar as vidas restantes no canto inferior direito usando ícones de navio .
Usar `history.pushState` cria novas entradas no histórico de navegação do browser. Pode verificar isso segurando o *botão de retrocesso* do seu browser, deverá aparecer algo assim:
Se tentar clicar várias vezes no botão de retrocesso, verá que a URL atual muda e o histórico é atualizado, mas o mesmo template continua a ser mostrado.
@ -292,7 +292,7 @@ Primeiro, observe o que acontece com a submissão básica do formulário:
2. Observe as mudanças na barra de endereço do navegador
3. Repare como a página recarrega e os dados aparecem na URL
### Comparação dos Métodos HTTP
@ -346,7 +346,7 @@ Vamos configurar o seu formulário de registo para comunicar corretamente com a
2. **Clique** no botão "Criar Conta"
3. **Observe** a resposta do servidor no seu navegador
**O que deverá ver:**
- **O navegador redireciona** para a URL do endpoint da API
@ -609,7 +609,7 @@ async function register() {
3. **Clique** em "Criar Conta"
4. **Observe** as mensagens na consola e o feedback ao utilizador
**O que deve observar:**
- **Estado de carregamento** aparece no botão de envio
@ -783,7 +783,7 @@ Vamos reforçar o seu formulário de registo com validação robusta que fornece
3. **Tente** caracteres especiais no campo do nome de utilizador
4. **Introduza** um valor negativo no saldo
**O que irá observar:**
- **O navegador exibe** mensagens de validação nativas
@ -943,7 +943,7 @@ Mostre uma mensagem de erro no HTML se o utilizador já existir.
Aqui está um exemplo de como pode ficar a página de login final após alguma estilização:
@ -187,7 +187,7 @@ Como o design compartimentado do Titanic, que parecia robusto até múltiplos co
Em vez de correr atrás do rabo, vamos criar um sistema **centralizado de gestão de estado**. Imagine uma pessoa muito organizada responsável por toda a informação importante:
```mermaid
flowchart TD
@ -800,7 +800,7 @@ Este desafio ajudará a pensar como um desenvolvedor profissional que considera
Aqui está um exemplo do resultado após completar o trabalho:
@ -112,7 +112,7 @@ Consulte a [documentação da API do servidor](../api/README.md) para:
**Resultado Esperado:**
Depois de concluir este exercício, a sua aplicação bancária deve ter uma funcionalidade "Adicionar Transação" totalmente funcional, com aparência e comportamento profissionais:
@ -182,7 +182,7 @@ Tal como o telefone de Alexander Graham Bell ligou locais distantes, ligar a tua
Quando tudo carregar, vais ver um espaço de trabalho lindamente limpo, desenhado para que te concentres no que realmente interessa – o teu código!
**Aqui está a tua visita guiada ao bairro:**
- **Barra de Atividades** (aquela faixa à esquerda): A tua navegação principal com Explorador 📁, Pesquisa 🔍, Controlo de Código-Fonte 🌿, Extensões 🧩, e Definições ⚙️
@ -229,7 +229,7 @@ Este método é perfeito quando estiveres a começar no VSCode.dev e quiseres ab
1. Vai a [vscode.dev](https://vscode.dev), se ainda não estiveres lá
2. Procura o botão "Open Remote Repository" na tela de boas-vindas e clica nele
@ -78,7 +78,7 @@ Como o VSCode.dev requer pelo menos um ficheiro para abrir um repositório, vamo
4. **Escreva** uma mensagem de commit: "Add initial HTML structure"
5. **Clique** em "Commit new file" para guardar as alterações
**Isto estabelece:**
- **Uma estrutura** correta de documento HTML5 com elementos semânticos
@ -104,7 +104,7 @@ Agora que a base do seu repositório está estabelecida, vamos transitar para o
✅ **Indicador de sucesso**: Deve ver os ficheiros do projeto na barra lateral do Explorer e `index.html` disponível para edição na área principal do editor.
**O que verá na interface:**
- **Barra lateral Explorer**: **Exibe** os ficheiros e pastas do seu repositório
@ -448,7 +448,7 @@ As extensões melhoram a sua experiência de desenvolvimento oferecendo capacida
**Resultados imediatos após a instalação:**
Assim que o CodeSwing estiver instalado, verá uma pré-visualização ao vivo do seu website de currículo surgir no editor. Isto permite que veja exatamente como o seu site aparece enquanto faz alterações.
**Compreender a interface melhorada:**
- **Vista dividida**: **Mostra** o seu código de um lado e a pré-visualização do outro
## 🗺️ A Tua Jornada de Aprendizagem no Desenvolvimento de Aplicações com IA
@ -189,7 +189,7 @@ mindmap
```
**Princípio Fundamental**: O desenvolvimento de aplicações com IA combina competências tradicionais de desenvolvimento web com integração de serviços de IA, criando aplicações inteligentes que parecem naturais e responsivas para os utilizadores.
**Isto é o que torna o playground tão útil:**
- **Experimenta** diferentes modelos de IA como GPT-4o-mini, Claude e outros (todos grátis!)
@ -199,7 +199,7 @@ mindmap
Depois de brincares um pouco, basta clicares no separador "Code" e escolheres a tua linguagem de programação para obter o código de implementação que precisarás.
## Configurar a Integração Backend em Python
@ -2351,14 +2351,14 @@ Quer experimentar este projeto num ambiente de desenvolvimento na nuvem? O GitHu
- **Navegue** até ao [repositório Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Clique** em "Use this template" no canto superior direito (certifique-se que está autenticado no GitHub)
**Passo 2: Lançar Codespaces**
- **Abra** o repositório recém-criado
- **Clique** no botão verde "Code" e selecione "Codespaces"
- **Escolha** "Create codespace on main" para iniciar o seu ambiente de desenvolvimento
Cada lição inclui uma tarefa para completares, um teste de conhecimento e um desafio para te guiar na aprendizagem de tópicos como:
- Prompting e engenharia de prompts
@ -114,7 +114,7 @@ Segue estes passos:
Na tua cópia deste repositório que criaste, clica no botão **Code** e seleciona **Open with Codespaces**. Isto criará um novo Codespace onde poderás trabalhar.
localizeflow[bot]
1 week ago