diff --git a/module-a/module-a-uz.md b/module-a/module-a-uz.md new file mode 100644 index 0000000..9c0257f --- /dev/null +++ b/module-a/module-a-uz.md @@ -0,0 +1,293 @@ +# ⚡ Sinov loyihasi: Modul A — Tezlik testi (Speed Test) + +## 1. Loyiha haqida qisqacha ma'lumot + +Ushbu baholash veb-texnologiyalar bo'yicha amaliy ko'nikmalarni tez va aniq baholash uchun mo'ljallangan **Tezlik testi** (Speed Test) hisoblanadi. Ishtirokchilar to'rtta toifa — **A (Dizayn)**, **B (Layout)**, **C (Frontend)** va **D (Backend)** bo'yicha jami 20 ta mustaqil topshiriqni belgilangan vaqt ichida bajarishlari kerak. Har bir topshiriq mustaqil bo'lib, ularni istalgan tartibda bajarish mumkin. + +--- + +## 2. Texnologiyalar to'plami (Tech Stack) va cheklovlar + +| Toifa | Ruxsat berilgan texnologiyalar | Cheklovlar | +| :--- | :--- | :--- | +| **A. Dizayn** | GIMP | Boshqa grafik tahrirlovchilardan (masalan, Photoshop) foydalanish taqiqlanadi | +| **B. Layout** | HTML, CSS | JavaScript-dan foydalanish taqiqlanadi | +| **C. Frontend** | JavaScript (Vanilla) | Tashqi kutubxonalar yoki freymvorklardan foydalanish taqiqlanadi | +| **D. Backend** | PHP, MySQL | Ma'lumotlar bazasiga ulanish uchun faqat PDO ishlatilishi kerak | + +* Barcha natijalar Chrome brauzerining desktop versiyasida tekshiriladi. +* Har bir topshiriq natijasini `/module_a/` papkasi ostidagi topshiriq ID-si bilan nomlangan quyi papkaga saqlang (masalan, `/module_a/a1/`, `/module_a/b1/`). +* Dizayn topshiriqlari uchun GIMP manba fayli (`.xcf`) topshiriladigan papkada bo'lishi shart. + +--- + +## 3. Topshiriqlar + +### 🎨 A. Dizayn — GIMP mahorati + +> **Taqdim etilgan fayllar**: A1 (`source.png`), A2 (`base.jpg`) va A3 (`photo.jpg`, `mask.png`) uchun fayllar har bir topshiriqning ishchi katalogiga joylashtirilgan. A4 va A5 uchun fayllar taqdim etilmagan; ishtirokchilar barcha elementlarni noldan yaratishlari kerak. + +#### **A1. Qatlamlarni birlashtirish va matn joylashtirish** `Oson` + +GIMP-da qatlamli tuzilmadan foydalangan holda rasm yarating. + +* Kanvas o'lchami: **800×400px**, Ruxsat: **72dpi** +* **1-qatlam**: Fonni `#2C3E50` rangli foni bilan to'ldiring. +* **2-qatlam**: Taqdim etilgan rasmni (`source.png`) oching, uni kanvasning **markaziga** joylashtiring va shaffofligini (opacity) **70%** ga o'rnating. +* **3-qatlam**: **"Hello, GIMP"** matnini oq rangda (`#FFFFFF`), 36pt o'lchamda qo'shing va uni kanvasning yuqori chap burchagiga **(x: 20px, y: 20px)** joylashtiring. +* Loyihani avval `.xcf` formatida saqlang. Keyin barcha qatlamlarni birlashtiring (Flatten Image) va natijani `result.png` sifatida eksport qiling. + +#### **A2. Tanlash va qatlamlarni birlashtirish** `Oson` + +GIMP-ning tanlash vositalari va qatlamlaridan foydalanib, rasmga shakl effektlarini qo'llang. + +* Taqdim etilgan rasmni (`base.jpg`) fon qatlami sifatida oching. +* **1-effekt**: Yangi qatlam qo'shing. "Rectangle Select" (To'rtburchak tanlash) vositasi yordamida yuqori chap burchakdagi **(0, 0) dan (200, 200)** gacha bo'lgan maydonni tanlang, uni `#E74C3C` rang bilan to'ldiring va ushbu qatlamning shaffofligini **60%** ga o'rnating. +* **2-effekt**: Yana bitta yangi qatlam qo'shing. Rasmning **markazida** diametri **150px** bo'lgan elliptik tanlov yarating. `Selection → Border` menyusiga kiring, chegara kengligini **3px** qilib belgilang va hosil bo'lgan tanlovni `#FFFFFF` rangi bilan to'ldiring. +* Loyihani avval `.xcf` formatida saqlang. Keyin barcha qatlamlarni birlashtiring (Flatten Image) va natijani `result.jpg` sifatida eksport qiling. + +#### **A3. Rangni to'g'rilash va qatlam maskasi (Layer Mask)** `O'rtacha` + +Taqdim etilgan rasmga (`photo.jpg`) rangni to'g'rilash va qatlam maskasini qo'llang. + +* **Rangni to'g'rilash**: "Hue-Saturation" vositasidan foydalanib, to'yinganlikni (Saturation) **+40** ga oshiring. +* **Egri chiziqlar (Curves)**: "Curves" vositasidan foydalanib, kontrastni oshirish uchun yorug'lik qiymatini (highlights) **+20 yoki undan ko'proqqa** oshiring va soya qiymatini (shadows) **-20 yoki undan kamroqqa** tushiring. +* **Qatlam maskasi**: Rasm qatlamiga qatlam maskasini qo'shing. Taqdim etilgan maska tasvirini (`mask.png`) qatlam maskasiga joylashtiring, shunda asosiy obyektdan tashqaridagi fon olib tashlanadi. +* Loyihani avval `.xcf` formatida saqlang. Keyin natijani `result.png` sifatida eksport qiling va shaffof fon saqlanib qolganiga ishonch hosil qiling. + +#### **A4. Matn effekti va porlash (Glow)** `O'rtacha` + +GIMP-da matnga porlash effektini qo'llang. + +* Kanvas o'lchami: **600×200px**, Fon rangi: `#1A1A2E` +* **"SPEED TEST"** matnini oq rangda (`#FFFFFF`), qalin (Bold), 60pt o'lchamda kanvas markaziga qo'shing. +* Matn qatlamini nusxalang va nusxasini asl matn qatlamining **ostiga** joylashtiring. +* Nusxalangan qatlamni rasterlang (Layer → Rasterize). Qatlamlar panelida ushbu qatlamning rejimini (Mode) **`Color`** ga o'rnating. Keyin asosiy rangni (foreground) `#4A90D9` ga o'rnating va `Edit → Fill with Foreground Color` orqali ko'k rangni qo'llang. +* Tashqi porlash effektini yakunlash uchun nusxalangan qatlamga **8px** radiusli **Gaussian Blur** filtrini qo'llang. +* Loyihani avval `.xcf` formatida saqlang, so'ngra natijani `result.png` sifatida eksport qiling. + +#### **A5. Matnni buzish (Warp) va filtr effektlari** `Qiyin` + +Matnni rasterlang va vizual buzilish effektlarini yaratish uchun GIMP-ning "Distorts" filtrlarini qo'llang. + +* Kanvas o'lchami: **800×300px**, Fon rangi: `#0D0D0D` +* **"DISTORTION"** matnini oq rangda (`#FFFFFF`), qalin (Bold), 72pt o'lchamda kanvas markaziga qo'shing. +* Matn qatlamini rasterlang (Layer → Rasterize). +* Rasterlangan matn qatlamiga quyidagi ikkita "Distorts" filtrini tartib bilan qo'llang: + * **Ripple**: Amplituda **8**, To'lqin uzunligi (Wavelength) **40**, Yo'nalish: Horizontal + * **Whirl and Pinch**: Whirl burchagi **20** daraja, Pinch **0**, Radius **1.0** +* Buzilgan matn qatlamini nusxalang. Nusxaga **3px** radiusli **Gaussian Blur** filtrini qo'llang va "ghosting" (arvohsimon) effektini yaratish uchun uni asl qatlamning **ostiga** joylashtiring. +* Loyihani avval `.xcf` formatida saqlang, so'ngra natijani `result.png` sifatida eksport qiling. + +--- + +### 📐 B. Layout — Faqat HTML / CSS + +#### **B1. Flexbox Card Layout** `Oson` + +Faqat HTML va CSS yordamida kartalar ro'yxatini yarating. + +* Kartalarni har bir qatorda **4 tadan** joylashtirish uchun **Flexbox** dan foydalaning. (`flex-wrap: wrap` ishlating) +* Har bir karta quyidagilarni o'z ichiga olishi kerak: rasm maydoni (`
`, balandligi **160px**, fon rangi bilan), sarlavha (`

`), asosiy matn (`

`) va tugma (`