14szn Webtechnológiák ismétlés

 

14 SZN 2023 első hetének feladatai

 Kedves Csapat!

Először is Mindenkinek nagyon Boldog Új Évet kívánok!

Remélem a múlt év utolsó hetében minden csapatnak elkészült a záró dolgozat bevezetőjéhez a fejlesztői környezetről, és a felhasznált technológiákról egy részlet, legalább 5 oldal. Projekt munka keretében osztályozni fogom. A kapott érdemjegybe bele számít a formázás is, a megbeszéltek szerint.

2023 év első feladata önállóan elkészítendő feladat Mindenkinek, az eddig tanultak alapján. A munkákat osztályozni fogom, ezért legyetek szívesek figyelmesen elkészíteni.

Készíts egy weboldalt egy gazda számára, ahol a felhasználónak ki tudja listázni az eladó borjúkat az adatbázisból. A külső felhasználó a következő adatokat láthatja a weboldalon:

ahol lehet legyen legördülő választható elem

• neme: üsző, vagy bika, 
• fülszám (Ez kb így néz ki: HU 30 688 2467 8),
• születés ideje, 
• fajta (angusz, limousini, charolais, vegyes) 
• színe (fehér, zsömle, piros, tarka, fekete).
• eladva, vagy eladó, ezt majd lehessen módosítani
• kiegészítheted fotóval is (plusz pont)

Legyen egy belépési felülete a gazdának, ahol a belépés után, felviheti az újszülött borjakat. Az újszülött borjak esetében a következő adatokkal kell kiegészíteni:

•  anyatehén fülszáma
• apabika fülszáma
• értékesítés ideje, ha van
• elhullás ideje, ha van ilyen.

Táblázatosan jelenjen meg, lehessen rendezni születési időre, és lehessen keresni fülszámra, születési időre, nemre, anyatehén fülszámára.

Adatbázis készítése : egy táblában minden adat.

Ha marad időd, azt fordítsd a dizánjra! Apró látványos extrákra.

Van ehhez hasonló kötelezően töltendő, ha rá akarsz pillantani: 

https://portal.nebih.gov.hu/documents/10182/1146987/ENAR+felhaszn%C3%A1l%C3%B3i+k%C3%A9zik%C3%B6nyv.pdf/8150e8cc-10ae-d54a-874c-4bb100629c4e

Ha valakinek megtetszik a téma, mert van gazda ismerőse vagy rokona, tovább gondolhatjuk ezt a vonalat, vannak ún. gazdálkodási napló programok, lehet záródolgozatnak esetleg azt is. Ha jól kidolgozod, meg lehet próbálni értékesíteni. :-)

Ha kérdés merül fel a feladattal kapcsolatban facebookon írj rám.

Pénteken érkezem, és akkor bemutatjátok a munkáitokat, és osztályozzuk.

Jó munkát és szép napot! 

11 évfolyam feladata az első hét 3 tanórájára

Kedves Diákok!

Először is Mindenkinek nagyon Boldog Új Évet kívánok!

2023 első feladataként egy kreatív feladatot szántam Nektek.

Először is egy kérdés: mi az érdeklődési köröd, mi a hobbid? Mi az első dolog, ami eszedbe jutott? A téma eldöntésére 5 perctől többet ne fordíts, mert az alkalmazott technikák lesz a lényeg.

Legyen az az olvasás, filmek nézése, online játék, bármi, azzal kapcsolatosan keress, rá az interneten milyen weboldalakat találsz, és készítsd el a saját weboldaladat a témával kapcsolatosan. Ha szeretsz rajzolni, akkor pl. lehet egy bemutatkozó oldal, galéria az alkotásaid fotóival. Ha szeretsz olvasni, készíthetsz a kedvenc íródról és műveiről weboldalt. stb.

Ha eldöntötted a témát, következő lépés keress rá az interneten, hogy 2022-ben mi volt a webdizájn divat, milyen színeket használtak a weboldalakon leginkább. Másolhatsz is, letölthetsz kész templatet is, hiszen ahhoz is komoly tudás szükséges, hogy egy meglévő kódot átírj, és fel tudd használni. Viszont ebben az esetben kommentben vagy readme fájlban kérem jelölni, honnan került letöltésre az eredeti template. Igyekezz minél több tanult technikát alkalmazni, hover, animation, egy kis Javascript.

A feladatra 3 órád van, a 3-ik óra végén töltsd fel a munkát a github csatornádra és hívj meg (latiza).

Házi feladat: A következő héten az lesz a feladat, hogy amikor érkezem mindenki bemutatja a saját munkáját a táblánál kivetítve. Beszélned kell az általad elkészített weboldalról. Egyrészt be kell mutatnod felhasználói oldalról: pl. Ez a nyitó oldalam, a felül látható menüsor segítségével navigálhat a felhasználó a weboldalamon. Erre a képre kattintva megnyílik a…. stb. Ez után a fejlesztői oldalról kell bemutatnod, hogy milyen technikákat alkalmaztál, pl. flexbox, mi hogyan épül fel a weboldaladon, melyik az a kódrészlet, amire büszke vagy és kiemelnéd.

Letöltött template esetén pedig, hogy mi mindent és hol írtál át a kódban, hiszen ez esetben egy más által megírt kódot kell tudnod értelmezni, ami adott esetben lehet nehezebb feladat, mint saját kód írása.

Nem kötelező előre legépelni, de aki otthon házi feladat keretében nemcsak átgondolja, hogyan fogja bemutatni a weboldalát, hanem legalább 1 oldalt ír róla Word-ben, külön fogom pozitívan értékelni.

(Ez esetben a következő formázással készítsétek el: 12pt betűnagysággal, 1,5 cm sormagassággal, Times New Roman betűtípussal, sorkizárva formázva)

Jó munkát! Szép napot!

2022.12.20-21. 2/14szn A kapott szakdolgozat sablon alapján a záródolgozat írása.

 A feladat mappába feltöltött két szakdolgozat alapján kezdjétek el írni a záró dolgozat első fejezetét, a fejlesztői környezetről és a felhasznált technológiákról. Copy paste 100%-ban nem jó! Saját szavaiddal fogalmazd meg, ha plágium riporton lefuttatásra kerül 10% alatt legyen a plágium. 

2022.12.19 11B1 és 2022.12.20 11B2 és 11C => 1 órás feladat - Autók

 Készítsd el az alábbi weboldalt:

Egy wrapper elementre alkalmazd a flexbox megoldásokat, hogy a wrapperben lévő cars konténer középre kerüljön az oldalon.

A cars konténereden belül is a flexbox technológia segítségével old meg, hogy a címsor 1 a kép, és az alatta lévő 3 gomb egymás alatt helyezkedjen el az oldalon. 

Vigyázz a gombokat tedd egy konténerbe, hogy egymás mellé kerüljenek.

A feladat mappában a 11 évfolyamon belül találsz egy mappát melynek neve: 20221219 és 20 Tesla, itt találod a forrás fotókat.

A fotók magasságát 500px állítsd be.

Az oldal betöltésekor a fehér autó jelenjen meg.

A gombokat tartalmazó doboz 20px belső margót kapott. 

Old meg a képváltást, ha a red-re kattintunk a piros autó jelenjen meg:

ha pedig a blue-ra akkor a kék.

Az elkészült feladatot töltsd fel a github csatornádra, és hívj meg közreműködőnek: latiza.

2022.12.19 hétfő 11B/1 részére 1-2 óra és 11.C 6-7 -ik óra => Utazás kalkulátor feladat

 

Utazás kalkulátor feladat

Elkészítendő oldalak:

·         index.html

·         style.css

·         script.js

1.       Az index. html oldalon add meg az oldal nyelvének a magyart.

2.       Az oldal címe Utazás kalkulátor legyen.

3.       Faviconnak állítsd be a planet.gif képet.

4.       Az oldal háttere a szivárvány színei szerinti színátmenetes legyen. (red, orange, yellow, green, blue, purple)

5.       Az oldal közepén a tartalom szélessége 900px.

6.       A háttérszíne 60%-os fehér alfa érték legyen.

7.       Állíts be rá 20px belső margót.

8.       A szélei 20px-el lekerekítést kapjanak.

9.       Kapjon egy kis szürke árnyékot 2px, 2px, 5px grey értékekkel.

10.   A cím a legnagyobb méretű címsorként kerüljön megadásra, középre helyzeve.

11.   A tartalmon belül középre helyezve jelenjen meg a táblázat.

12.   A beviteli mezők szélessége 70px legyen, ahol a fő jelenik meg az csak 30px széles legyen. Az ár, a reptéri illeték és az összesen input mezők disabled-értékre legyen állítva. Vagyis, a user, csak a főt tudja beállítani, és bekattintani kér e biztosítást.

13.   A beviteli mezőkben a szöveg a végén jelenjen meg.

14.   A táblázatban helyezd el a képeket, felülre a planet.gif, alá roma.jpg, jordania.jpg, torokorszag.jpg és marokko.jpg képeket.

15.   A képek szélessége 100px legyen,

16.   50% lekerekítéssel.

17.   A cellákban a belső margó 5px legyen.

18.   A cellákat árnyékold 1px 1px 2px grey szürke értékekkel.

19.   A cellák kerekítése 10px-el.

20.   A táblázat fejléc típusú celláinak háttérszíne 60%-os fehér alfa értékű.

21.   A táblázat többi cellájának háttere pedig 80%-os fehér alfa értékű.

22.   A táblázatban az árakat ne lehessen a felhasználónak felül írni, de beviteli mezőben jelenjenek meg.

23.   A biztosítás bejelölhető négyzet legyen, ami alapértelmezett értékben be legyen jelölve, mivel ajánlott a biztosítást kötése.

24.   A fő állítható érték legyen.

25.   Írj egy függvényt, amely soronként kiszámolja, ha valaki megadja, hogy hány fő utazna, és figyelembe veszi a számítás azt is, hogy bejelölve hagyja-e a jelölő négyzetet, vagy kiveszi belőle a jelölést.

26.   A táblázat alsó sorában adja össze az összes kiadott értéket, ha esetleg valaki több utat is megjelölne, hogy utazna.

A  fotókat a feladat mappában találod : 20221219 Utazás kalkulátor források mappában.

A második óra végén az elkészült feladatot töltsd fel a github csatornádra és hívj meg közreműködőnek: latiza. 

20221214. 2/14szn Webshop frontend feladat

 Felhasznált technológiák, HTML, CSS, lehet Bootstrap, és javascript.

Kosár elemeinek tárolása localstorage-ben

Megrendelés feldolgozása:

megrendeles.html: