IKT projektmunka I. - Webfejlesztés órák
Ajánlott irodalom:
- Nagy Gusztáv: Web programozás alapismeretek Ad Librum Kiadó Buadpest 2011.
- https://www.w3schools.com
Ajánlott internetes oldalak:
GRID emélet:
- https://gridbyexample.com/examples/example11/
- https://gremmedia.hu/css-grid-bemutatasa-peldakkal-kiserve
- http://weblabor.hu/forumok/temak/155764
GRID-gyakorlat:
- https://codepen.io/rachelandrew/pen/oXKgoQ
- https://www.youtube.com/watch?v=MDQG6LSS8l8
- https://www.youtube.com/watch?v=x7tLPhnA06w&list=PL4cUxeGkcC9itC4TxYMzFCfveyutyPOCY
Otthoni játékos gyakorlás:
Készítsék el a következő weboldalt HTML és CSS stílust használva! A tartalomszolgáltató oldalon megtalálhatók a forrásállományok (képek, szövegek), amelyeket nem kötelező használni, kiegészíthettek/bővíthettek más tartalmakkal.
Minta oldal:
Kiscsoportos munkában 3-4 fő együtt dolgozva készíti el a weboldalt.
Csapatmunka:
- egy fő a grafikai elemekkel dolgozik, Canva programot is használhat
- egy fő Moodle és OneNote oldalt használva tartalmat oszt meg a többiekkel, amit később a weboldalon szövegként másolnak be
- többiek a HTML, CSS oldal kialakításán dolgoznak, amit később a társaiktól kapott tartalmakkal töltenek fel
- Önértékelési táblázattal
- Csoportos értékelés
- Elkészített munkák osztályzása
- Portfólió készítése
Bevezetés, célmeghatározás
Honnan indult a tanuló? Milyen elvárásai voltak? Milyen nehézségek adódtak? Miben fejlődött a legtöbbet?
Feladatai
Milyen eszközöket használt? Milyen eljárásokat alkalmazott? Voltak-e nehézségek?
Melyik feladat volt számára egyszerű, könnyű?
Készítési folyamat leírása
Milyen új ismereteket tanult?
Sikerélmények, kudarcélmények
Kompetenciák fejlődése (személyes, társas, digitális, stb.)
Elért siker, mire vagyok büszke? Elvégzett munka milyen örömöt nyújtott?
- kiscsoportos munkában egymást fejlesztik a tanulók tanári mentorálással
- közös kollaborációs térben fórumozással kérdezz-felelek
Oldalakítás gridekkel
Hozzatok létre egy mappát/projektet, a kész munkátokat töltsétek fel a Moodle oldalra.
OneNote alkalmazással osszátok meg egymás között a tartalmakat, hogy közösen szerkeszteni tudjátok.
Symbaloo alkalmazásban hozzátok létre a témakörhöz kapcsolódó internetes források linkjeinek gyűjteményét, osszátok meg osztálytársaitokkal is! Tervezzétek meg digitális tanulási utatokat! (https://www.youtube.com/watch?v=6yiepsWGAkE)
Prezentáljátok az elkészített weboldalt, szükséges alkalmazásokat, tevékenységeket, nehézségeket, stb!
HTML
- Készítsétek el a meta tageket, állítsátok be a html lang atribútumot!
- Készítsétek el a mintának megfelelő oldalszerkezetet a HTML5 szemantikus elemeivel!
- A navigáció 3 menüpontot tartalmazzon: A legértékesebb sportolók Magyarországon, A három legsikeresebb magyar sportoló, Választott sportág
- A header elembe helyezzétek el az általatok választott/készített logót!
- Az aside elembe helyezzétek el az első bekezdést, amit a https://www.nemzetisport.hu/egyeb_egyeni/ok-a-legertekesebb-sportolok-magyarorszagon-2622041 oldalról szedjétek le!
- Továbbá az aside elembe legyen még egy 3 pontból álló lista. Itt soroljátok fel 3 sortoló nevét!
- A section elem egy div-jei egy-egy híres sportoló képét és rövid leírását tartalmazza.
CSS
- Alakítsátok ki az elrendezést grid-ek használatával!
- Helyezzetek el legalább 1 töréspontot (@media…)
- 600px szélesség alatt. Minden elem egymás alatt helyezkedjen el!
- Állítsatok be háttérképet az oldalnak!
- A tartalom a böngésző széleségének 75%-a legyen, de max 1000px széles!
- A menüpontok ne legyenek aláhúzva, és ne legyen előttük pont sem!
- A bekezdések sorkizárt igazításúak legyenek!
- A betűk közti távolság 2px legyen!
- Állítsatok be a szövegnek talpatlan betűtípust!
- A képet az első oldalon float-tal úsztassátok a szöveg mellé!
- Validáljátok az oldalakat!