Európai Kódhét az Újlakban

Számítógépes grafika
Mire gondolunk, amikor ezt a szóösszetételt halljuk?
Amire biztosan nem, azt fogjuk ezen a héten csinálni:
kódban, programozással hozunk létre grafikai alakzatokat,
komplett, alkalmazott grafikai kompozíciókat.
Használjuk a tanultakat:
  • svg rajzoló terület meghatározása a html kódban
  • előre definiált alakzatok vagy sokszög alakzatrajzoló parancsok paraméterekkel
  • szöveg elhelyezés stílus meghatározással
  • stílus beállítások
  • színharmónia
Ismerjünk meg új technikákat:
  • nem alapértelmezett fontok belinkelése az internetről, a google font-gyűjteményéből
  • hasonló osztályú elemek stíluseltérései azonosító használatával a CSS-ben
  • előre definiált alakzatok vagy sokszög alakzatrajzoló parancsok paraméterekkel
Feladat:
w3schools* online editorban:
Set M O D E
Készítsünk saját márkás címkét, egy előre elkészített mintakód** felhasználásával:
  • változtassunk a színeken:
    • használjuk a w3schools color names táblázatát
    • ne felejtsük el, hogy az svg-ben a szövegszín parancsa: fill!
  • betűtípusokon,
  • szövegen,
  • háttérgrafikai elemen,
  • helyezzünk el szimbólumot a w3schools html symbols listájából. Legyünk kreatívak!
Vegyük észre:
- a különleges betűk a fonts.googleapis.com oldalról vannak belinkelve a head-részben;
- az elemek tulajdonságai a headben a style részben vannak előre megadva;
- minden elem azonosítóval van ellátva (id="").

A feladat aktualizálása:

Az alábbi kód-link egy október 23-i ünnepi jelvény terv alapja.
  • Nézzük meg a kódban, hogyan hoztunk létre színfutást (linear gradient)!
  • Értelmezzük a nem ismert parancsokat és a hozzájuk tartozó paramétereket!
  • Keressük meg, hol és hogyan van beállítva a szöveg, elhelyezkedés, betűtípus, szín.
Feladat:
Kattintsunk a kódra, nyissuk meg, írjuk át a szöveget az ünneppel kapcsolatos szóra, (pl. október 23.) helyezzük középre, a megfelelő méretet és színt állítsuk be, és keressünk valami ide illő szimbólumot a w3schools html symbol listájából!

Tanulói feladatmegoldások

Elismervényünk a szervezőktől:

* A w3schools konzorcium online szerkesztője bármely böngészőből elérhető, ha van internet kapcsolatunk. (w3schools.com - Try It Yourself)
** A mintakód megtekinthető az informatika tanulás honlapján (dplatform.hu)

Feladatmegoldások

8. évfolyamos tanulók
munkái