diff --git a/translations/tr/2-js-basics/2-functions-methods/README.md b/translations/tr/2-js-basics/2-functions-methods/README.md index fc356e5d3..b52aa91df 100644 --- a/translations/tr/2-js-basics/2-functions-methods/README.md +++ b/translations/tr/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript Temelleri: Metotlar ve Fonksiyonlar -![JavaScript Temelleri - Fonksiyonlar](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.tr.png) +![JavaScript Temelleri - Fonksiyonlar](../../../../translated_images/tr/webdev101-js-functions.be049c4726e94f8b.png) > Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/tr/2-js-basics/3-making-decisions/README.md b/translations/tr/2-js-basics/3-making-decisions/README.md index 8d3cf534b..b4e05d085 100644 --- a/translations/tr/2-js-basics/3-making-decisions/README.md +++ b/translations/tr/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript Temelleri: Karar Verme -![JavaScript Temelleri - Karar Verme](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.tr.png) +![JavaScript Temelleri - Karar Verme](../../../../translated_images/tr/webdev101-js-decisions.69e1b20f272dd1f0.png) > Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/tr/2-js-basics/4-arrays-loops/README.md b/translations/tr/2-js-basics/4-arrays-loops/README.md index c1961444d..a89fc9624 100644 --- a/translations/tr/2-js-basics/4-arrays-loops/README.md +++ b/translations/tr/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # JavaScript Temelleri: Diziler ve Döngüler -![JavaScript Temelleri - Diziler](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.tr.png) +![JavaScript Temelleri - Diziler](../../../../translated_images/tr/webdev101-js-arrays.439d7528b8a29455.png) > Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/tr/3-terrarium/1-intro-to-html/README.md b/translations/tr/3-terrarium/1-intro-to-html/README.md index 10c418d31..9cb09b599 100644 --- a/translations/tr/3-terrarium/1-intro-to-html/README.md +++ b/translations/tr/3-terrarium/1-intro-to-html/README.md @@ -26,7 +26,7 @@ journey Build terrarium: 5: Student ``` -![HTML'e Giriş](../../../../translated_images/webdev101-html.4389c2067af68e98.tr.png) +![HTML'e Giriş](../../../../translated_images/tr/webdev101-html.4389c2067af68e98.png) > Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac) HTML, yani HyperText Markup Language, ziyaret ettiğiniz her web sitesinin temelini oluşturur. HTML'i web sayfalarına yapı kazandıran bir iskelet olarak düşünebilirsiniz – içeriklerin nereye gideceğini, nasıl organize edileceğini ve her bir parçanın neyi temsil ettiğini tanımlar. CSS daha sonra HTML'inizi renkler ve düzenlerle "süsler" ve JavaScript interaktivite ile "canlandırır", ancak HTML her şeyin mümkün olmasını sağlayan temel yapıyı sunar. @@ -88,7 +88,7 @@ Teraryum projeniz için özel bir klasör oluşturacak ve ilk HTML dosyanızı e 4. Explorer panelinde "New File" simgesine tıklayın 5. Dosyanıza `index.html` adını verin -![VS Code Explorer'da yeni dosya oluşturma](../../../../translated_images/vs-code-index.e2986cf919471eb9.tr.png) +![VS Code Explorer'da yeni dosya oluşturma](../../../../translated_images/tr/vs-code-index.e2986cf919471eb9.png) **Seçenek 2: Terminal Komutlarını Kullanarak** ```bash @@ -238,48 +238,48 @@ Resimleri HTML'ye eklemeden önce, proje dosyalarınızı düzgün bir şekilde
- 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/tr/3-terrarium/2-intro-to-css/README.md b/translations/tr/3-terrarium/2-intro-to-css/README.md index d1366a178..7fc572d5c 100644 --- a/translations/tr/3-terrarium/2-intro-to-css/README.md +++ b/translations/tr/3-terrarium/2-intro-to-css/README.md @@ -30,7 +30,7 @@ journey Glass reflections: 5: Student ``` -![CSS'e Giriş](../../../../translated_images/webdev101-css.3f7af5991bf53a20.tr.png) +![CSS'e Giriş](../../../../translated_images/tr/webdev101-css.3f7af5991bf53a20.png) > Sketchnote: [Tomomi Imura](https://twitter.com/girlie_mac) HTML teraryumunuzun oldukça basit göründüğünü hatırlıyor musunuz? CSS, bu sade yapıyı görsel olarak çekici bir şeye dönüştürdüğümüz yerdir. @@ -205,7 +205,7 @@ body { Tarayıcınızın geliştirici araçlarını (F12) açın, Elementler sekmesine gidin ve `

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

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

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

@@ -985,7 +985,7 @@ pie title "Common ARIA Usage Patterns" - Website traffic increased 40% after accessibility improvements + Website traffic increased 40% after accessibility improvements ``` diff --git a/translations/uk/2-js-basics/1-data-types/README.md b/translations/uk/2-js-basics/1-data-types/README.md index 93f02728d..6158d13b5 100644 --- a/translations/uk/2-js-basics/1-data-types/README.md +++ b/translations/uk/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Основи JavaScript: Типи даних -![Основи JavaScript - Типи даних](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.uk.png) +![Основи JavaScript - Типи даних](../../../../translated_images/uk/webdev101-js-datatypes.4cc470179730702c.png) > Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/uk/2-js-basics/2-functions-methods/README.md b/translations/uk/2-js-basics/2-functions-methods/README.md index 46709e024..6cb871839 100644 --- a/translations/uk/2-js-basics/2-functions-methods/README.md +++ b/translations/uk/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Основи JavaScript: Методи та функції -![Основи JavaScript - Функції](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.uk.png) +![Основи JavaScript - Функції](../../../../translated_images/uk/webdev101-js-functions.be049c4726e94f8b.png) > Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/uk/2-js-basics/3-making-decisions/README.md b/translations/uk/2-js-basics/3-making-decisions/README.md index 5bfbcc082..5b5fdb54a 100644 --- a/translations/uk/2-js-basics/3-making-decisions/README.md +++ b/translations/uk/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Основи JavaScript: Прийняття рішень -![Основи JavaScript - Прийняття рішень](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.uk.png) +![Основи JavaScript - Прийняття рішень](../../../../translated_images/uk/webdev101-js-decisions.69e1b20f272dd1f0.png) > Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/uk/2-js-basics/4-arrays-loops/README.md b/translations/uk/2-js-basics/4-arrays-loops/README.md index 7f1e2efa5..c22885511 100644 --- a/translations/uk/2-js-basics/4-arrays-loops/README.md +++ b/translations/uk/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # Основи JavaScript: Масиви та Цикли -![Основи JavaScript - Масиви](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.uk.png) +![Основи JavaScript - Масиви](../../../../translated_images/uk/webdev101-js-arrays.439d7528b8a29455.png) > Скетчнот від [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/uk/3-terrarium/1-intro-to-html/README.md b/translations/uk/3-terrarium/1-intro-to-html/README.md index 0a075ac8a..59c798445 100644 --- a/translations/uk/3-terrarium/1-intro-to-html/README.md +++ b/translations/uk/3-terrarium/1-intro-to-html/README.md @@ -26,7 +26,7 @@ journey Build terrarium: 5: Student ``` -![Вступ до HTML](../../../../translated_images/webdev101-html.4389c2067af68e98.uk.png) +![Вступ до HTML](../../../../translated_images/uk/webdev101-html.4389c2067af68e98.png) > Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac) HTML, або HyperText Markup Language, є основою кожного вебсайту, який ви коли-небудь відвідували. Уявіть HTML як скелет, який надає структуру вебсторінкам – він визначає, де розміщується контент, як він організований і що кожен елемент представляє. Хоча CSS пізніше "одягне" ваш HTML кольорами та макетами, а JavaScript оживить його інтерактивністю, HTML забезпечує основну структуру, яка робить усе інше можливим. @@ -88,7 +88,7 @@ mindmap 4. У панелі Explorer натисніть на іконку "New File" 5. Назвіть ваш файл `index.html` -![Explorer VS Code, що показує створення нового файлу](../../../../translated_images/vs-code-index.e2986cf919471eb9.uk.png) +![Explorer VS Code, що показує створення нового файлу](../../../../translated_images/uk/vs-code-index.e2986cf919471eb9.png) **Варіант 2: Використання команд терміналу** ```bash @@ -239,48 +239,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/uk/3-terrarium/2-intro-to-css/README.md b/translations/uk/3-terrarium/2-intro-to-css/README.md index d985d91ad..b822ee355 100644 --- a/translations/uk/3-terrarium/2-intro-to-css/README.md +++ b/translations/uk/3-terrarium/2-intro-to-css/README.md @@ -30,7 +30,7 @@ journey Glass reflections: 5: Student ``` -![Вступ до CSS](../../../../translated_images/webdev101-css.3f7af5991bf53a20.uk.png) +![Вступ до CSS](../../../../translated_images/uk/webdev101-css.3f7af5991bf53a20.png) > Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac) Пам'ятаєте, як ваш HTML-тераріум виглядав досить просто? Завдяки CSS ми перетворимо цю просту структуру на щось візуально привабливе. @@ -205,7 +205,7 @@ body { Відкрийте інструменти розробника вашого браузера (F12), перейдіть на вкладку Elements і перевірте ваш елемент `

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

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

@@ -1071,7 +1071,7 @@ pie title "Common ARIA Usage Patterns" - Website traffic increased 40% after accessibility improvements + Website traffic increased 40% after accessibility improvements ``` diff --git a/translations/ur/2-js-basics/1-data-types/README.md b/translations/ur/2-js-basics/1-data-types/README.md index 92225dda1..89d58dde1 100644 --- a/translations/ur/2-js-basics/1-data-types/README.md +++ b/translations/ur/2-js-basics/1-data-types/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # جاوا اسکرپٹ کی بنیادی باتیں: ڈیٹا کی اقسام -![جاوا اسکرپٹ کی بنیادی باتیں - ڈیٹا کی اقسام](../../../../translated_images/webdev101-js-datatypes.4cc470179730702c.ur.png) +![جاوا اسکرپٹ کی بنیادی باتیں - ڈیٹا کی اقسام](../../../../translated_images/ur/webdev101-js-datatypes.4cc470179730702c.png) > اسکیچ نوٹ [Tomomi Imura](https://twitter.com/girlie_mac) کی طرف سے ```mermaid diff --git a/translations/ur/2-js-basics/2-functions-methods/README.md b/translations/ur/2-js-basics/2-functions-methods/README.md index c6ee7f920..6e8211279 100644 --- a/translations/ur/2-js-basics/2-functions-methods/README.md +++ b/translations/ur/2-js-basics/2-functions-methods/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # جاوا اسکرپٹ کی بنیادی باتیں: طریقے اور فنکشنز -![جاوا اسکرپٹ کی بنیادی باتیں - فنکشنز](../../../../translated_images/webdev101-js-functions.be049c4726e94f8b.ur.png) +![جاوا اسکرپٹ کی بنیادی باتیں - فنکشنز](../../../../translated_images/ur/webdev101-js-functions.be049c4726e94f8b.png) > اسکیچ نوٹ از [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid diff --git a/translations/ur/2-js-basics/3-making-decisions/README.md b/translations/ur/2-js-basics/3-making-decisions/README.md index d60576bae..de422c18d 100644 --- a/translations/ur/2-js-basics/3-making-decisions/README.md +++ b/translations/ur/2-js-basics/3-making-decisions/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # جاوا اسکرپٹ کی بنیادی باتیں: فیصلے کرنا -![جاوا اسکرپٹ کی بنیادی باتیں - فیصلے کرنا](../../../../translated_images/webdev101-js-decisions.69e1b20f272dd1f0.ur.png) +![جاوا اسکرپٹ کی بنیادی باتیں - فیصلے کرنا](../../../../translated_images/ur/webdev101-js-decisions.69e1b20f272dd1f0.png) > اسکیچ نوٹ از [Tomomi Imura](https://twitter.com/girlie_mac) diff --git a/translations/ur/2-js-basics/4-arrays-loops/README.md b/translations/ur/2-js-basics/4-arrays-loops/README.md index 1efe38e1d..d528074c9 100644 --- a/translations/ur/2-js-basics/4-arrays-loops/README.md +++ b/translations/ur/2-js-basics/4-arrays-loops/README.md @@ -9,7 +9,7 @@ CO_OP_TRANSLATOR_METADATA: --> # جاوا اسکرپٹ کی بنیادی باتیں: Arrays اور Loops -![جاوا اسکرپٹ کی بنیادی باتیں - Arrays](../../../../translated_images/webdev101-js-arrays.439d7528b8a29455.ur.png) +![جاوا اسکرپٹ کی بنیادی باتیں - Arrays](../../../../translated_images/ur/webdev101-js-arrays.439d7528b8a29455.png) > اسکیچ نوٹ [Tomomi Imura](https://twitter.com/girlie_mac) کی طرف سے ```mermaid