You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
144 lines
7.6 KiB
144 lines
7.6 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "b6897c02603d0045dd6d8256e8714baa",
|
|
"translation_date": "2025-10-24T21:15:16+00:00",
|
|
"source_file": "5-browser-extension/1-about-browsers/assignment.md",
|
|
"language_code": "cs"
|
|
}
|
|
-->
|
|
# Zadání: Přestylizujte svůj rozšíření prohlížeče
|
|
|
|
## Přehled
|
|
|
|
Nyní, když jste vytvořili HTML strukturu pro své rozšíření prohlížeče zaměřené na uhlíkovou stopu, je čas udělat ho vizuálně atraktivním a uživatelsky přívětivým. Skvělý design zlepšuje uživatelskou zkušenost a činí vaše rozšíření profesionálním a poutavým.
|
|
|
|
Vaše rozšíření má základní CSS stylování, ale toto zadání vás vyzývá k vytvoření jedinečné vizuální identity, která odráží váš osobní styl a zároveň zachovává vynikající použitelnost.
|
|
|
|
## Pokyny
|
|
|
|
### Část 1: Analyzujte aktuální design
|
|
|
|
Než provedete změny, prozkoumejte existující strukturu CSS:
|
|
|
|
1. **Najděte** CSS soubory ve svém projektu rozšíření
|
|
2. **Projděte si** aktuální přístup ke stylování a barevné schéma
|
|
3. **Identifikujte** oblasti, které je třeba zlepšit v rozvržení, typografii a vizuální hierarchii
|
|
4. **Zvažte**, jak design podporuje cíle uživatele (snadné vyplnění formuláře a jasné zobrazení dat)
|
|
|
|
### Část 2: Navrhněte vlastní stylování
|
|
|
|
Vytvořte soudržný vizuální design, který zahrnuje:
|
|
|
|
**Barevné schéma:**
|
|
- Vyberte primární barevnou paletu, která odráží environmentální témata
|
|
- Zajistěte dostatečný kontrast pro přístupnost (použijte nástroje jako WebAIM's contrast checker)
|
|
- Zvažte, jak budou barvy vypadat v různých tématech prohlížeče
|
|
|
|
**Typografie:**
|
|
- Vyberte čitelné fonty, které dobře fungují na malých rozměrech rozšíření
|
|
- Vytvořte jasnou hierarchii s vhodnými velikostmi a váhami písma
|
|
- Zajistěte, aby text zůstal čitelný jak ve světlých, tak tmavých tématech prohlížeče
|
|
|
|
**Rozvržení a rozestupy:**
|
|
- Zlepšete vizuální organizaci prvků formuláře a zobrazení dat
|
|
- Přidejte vhodné odsazení a okraje pro lepší čitelnost
|
|
- Zvažte principy responzivního designu pro různé velikosti obrazovek
|
|
|
|
### Část 3: Implementujte svůj design
|
|
|
|
Upravte CSS soubory, abyste implementovali svůj design:
|
|
|
|
```css
|
|
/* Example starting points for customization */
|
|
|
|
.form-data {
|
|
/* Style the configuration form */
|
|
background: /* your choice */;
|
|
padding: /* your spacing */;
|
|
border-radius: /* your preference */;
|
|
}
|
|
|
|
.result-container {
|
|
/* Style the data display area */
|
|
background: /* complementary color */;
|
|
border: /* your border style */;
|
|
margin: /* your spacing */;
|
|
}
|
|
|
|
/* Add your custom styles here */
|
|
```
|
|
|
|
**Klíčové oblasti pro stylování:**
|
|
- **Prvky formuláře**: Vstupní pole, popisky a tlačítko pro odeslání
|
|
- **Zobrazení výsledků**: Kontejner pro data, stylování textu a stavy načítání
|
|
- **Interaktivní prvky**: Efekty při najetí myší, stavy tlačítek a přechody
|
|
- **Celkové rozvržení**: Rozestupy kontejnerů, barvy pozadí a vizuální hierarchie
|
|
|
|
### Část 4: Testování a doladění
|
|
|
|
1. **Sestavte** své rozšíření pomocí `npm run build`
|
|
2. **Nahrajte** aktualizované rozšíření do svého prohlížeče
|
|
3. **Otestujte** všechny vizuální stavy (vyplnění formuláře, načítání, zobrazení výsledků, chyby)
|
|
4. **Ověřte** přístupnost pomocí nástrojů pro vývojáře v prohlížeči
|
|
5. **Doladěte** své styly na základě skutečného použití
|
|
|
|
## Kreativní výzvy
|
|
|
|
### Základní úroveň
|
|
- Aktualizujte barvy a fonty, abyste vytvořili soudržné téma
|
|
- Zlepšete rozestupy a zarovnání v celém rozhraní
|
|
- Přidejte jemné efekty při najetí myší na interaktivní prvky
|
|
|
|
### Střední úroveň
|
|
- Navrhněte vlastní ikony nebo grafiku pro své rozšíření
|
|
- Implementujte plynulé přechody mezi různými stavy
|
|
- Vytvořte jedinečnou animaci načítání pro API volání
|
|
|
|
### Pokročilá úroveň
|
|
- Navrhněte více možností témat (světlé/tmavé/vysoký kontrast)
|
|
- Implementujte responzivní design pro různé velikosti oken prohlížeče
|
|
- Přidejte mikrointerakce, které zlepší uživatelskou zkušenost
|
|
|
|
## Pokyny k odevzdání
|
|
|
|
Vaše dokončené zadání by mělo obsahovat:
|
|
|
|
- **Upravené CSS soubory** s vaším vlastním stylováním
|
|
- **Snímky obrazovky**, které ukazují vaše rozšíření v různých stavech (formulář, načítání, výsledky)
|
|
- **Krátký popis** (2-3 věty), který vysvětluje vaše designové volby a jak zlepšují uživatelskou zkušenost
|
|
|
|
## Hodnotící kritéria
|
|
|
|
| Kritéria | Vynikající (4) | Dobré (3) | Rozvíjející se (2) | Začínající (1) |
|
|
|----------|----------------|-----------|--------------------|----------------|
|
|
| **Vizuální design** | Kreativní, soudržný design, který zlepšuje použitelnost a odráží silné designové principy | Dobré designové volby s konzistentním stylováním a jasnou vizuální hierarchií | Základní zlepšení designu s některými problémy s konzistencí | Minimální změny stylování nebo nekonzistentní design |
|
|
| **Funkčnost** | Všechny styly perfektně fungují ve všech stavech a prostředích prohlížeče | Styly fungují dobře s drobnými problémy v okrajových případech | Většina stylů je funkční s některými problémy zobrazení | Významné problémy se stylováním, které ovlivňují použitelnost |
|
|
| **Kvalita kódu** | Čistý, dobře organizovaný CSS s smysluplnými názvy tříd a efektivními selektory | Dobrá struktura CSS s vhodným použitím selektorů a vlastností | Přijatelný CSS s některými problémy v organizaci | Špatná struktura CSS nebo příliš složité stylování |
|
|
| **Přístupnost** | Vynikající kontrast barev, čitelné fonty a zohlednění uživatelů s postižením | Dobré praktiky přístupnosti s drobnými oblastmi pro zlepšení | Základní zohlednění přístupnosti s některými problémy | Omezená pozornost věnovaná požadavkům na přístupnost |
|
|
|
|
## Tipy pro úspěch
|
|
|
|
> 💡 **Tip pro design**: Začněte s jemnými změnami a postupně přecházejte k výraznějším úpravám. Malá zlepšení v typografii a rozestupech často mají velký dopad na vnímanou kvalitu.
|
|
|
|
**Osvědčené postupy:**
|
|
- **Testujte** své rozšíření ve světlých i tmavých tématech prohlížeče
|
|
- **Používejte** relativní jednotky (em, rem) pro lepší škálovatelnost
|
|
- **Udržujte** konzistentní rozestupy pomocí vlastností CSS
|
|
- **Zvažte**, jak bude váš design vypadat pro uživatele s různými vizuálními potřebami
|
|
- **Validujte** svůj CSS, aby splňoval správnou syntaxi
|
|
|
|
> ⚠️ **Častá chyba**: Neobětujte použitelnost kvůli vizuální atraktivitě. Vaše rozšíření by mělo být jak krásné, tak funkční.
|
|
|
|
**Nezapomeňte:**
|
|
- **Udržujte** důležité informace snadno čitelné
|
|
- **Zajistěte**, aby tlačítka a interaktivní prvky byly snadno klikatelné
|
|
- **Udržujte** jasnou vizuální zpětnou vazbu pro akce uživatele
|
|
- **Testujte** svůj design s reálnými daty, nejen s textem zástupce
|
|
|
|
Hodně štěstí při tvorbě rozšíření prohlížeče, které bude jak funkční, tak vizuálně ohromující!
|
|
|
|
---
|
|
|
|
**Prohlášení**:
|
|
Tento dokument byl přeložen pomocí služby AI pro překlad [Co-op Translator](https://github.com/Azure/co-op-translator). I když se snažíme o přesnost, mějte prosím na paměti, že automatizované překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za autoritativní zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné interpretace vyplývající z použití tohoto překladu. |