IKT projektmunka I. - Webfejlesztés órák – lesson / project plan

Submitted by Hegedüs Helén on
PDF
Type of plan
Lesson plan
Sector
Információs és kommunikációs technológiák
Topic, learning area
Webprogramozás
Vocational subjects
Informatikai és távközlési alapok II.
Programozási alapok
Grade
13. évfolyam
Competences, skills to be developed
IKT (információ, kommunikáció, technológia)
Információs műveltség
Kommunikáció és együttműködés
Kreativitás és innováció
Kritikus gondolkodás és problémamegoldás
Médiaműveltség
Professional competences, skills to be developed
Önismereti és kommunikációs készségek fejlesztése, Csapatmunka és együttműködés, Prezentációs készségek fejlesztése, Projektszervezés és -menedzsment, Csapatban végzett projektmunka
Teaching method
projektalapú tanulás
hálózatalapú tanulás
problémaalapú tanulás
General subject(s)
informatika, IKT
Learning and development goals
Az óra végére a tanulók képesek lesznek reszponzív oldal létrehozására.
Concepts
HTML alapok, CSS alapok, CSS Grid
Required tools
projektor, számítógép, internet, okostelefon
Duration
180 perc
Materials released before class or for a project

Ajánlott irodalom:

Ajánlott internetes oldalak:

GRID emélet:

GRID-gyakorlat:

Otthoni játékos gyakorlás:

 

Introductory part and preparation of the lesson / project plan

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:

Kaktusz

Kaktusz oldal

 

Implementation of the lesson / project plan

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

 

Digital tools used
OneNote
Symbaloo
Moodle
Canva
Evaluation plan
  1. Önértékelési táblázattal
  2. Csoportos értékelés
  3. Elkészített munkák osztályzása
  4. 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?

Differentiation
  • 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 
Homework, project task

Oldalakítás gridekkel

GRID feladat

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

  1. Készítsétek el a meta tageket, állítsátok be a html lang atribútumot!
  2. Készítsétek el a mintának megfelelő oldalszerkezetet a HTML5 szemantikus elemeivel!
  3. 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
  4. A header elembe helyezzétek el az általatok választott/készített logót!
  5. 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!
  6. Továbbá az aside elembe legyen még egy 3 pontból álló lista. Itt soroljátok fel 3 sortoló nevét!
  7. A section elem egy div-jei egy-egy híres sportoló képét és rövid leírását tartalmazza.

CSS

  1. Alakítsátok ki az elrendezést grid-ek használatával!
  2. Helyezzetek el legalább 1 töréspontot (@media…)
  3. 600px szélesség alatt. Minden elem egymás alatt helyezkedjen el!
  4. Állítsatok be háttérképet az oldalnak!
  5. A tartalom a böngésző széleségének 75%-a legyen, de max 1000px széles!
  6. A menüpontok ne legyenek aláhúzva, és ne legyen előttük pont sem!
  7. A bekezdések sorkizárt igazításúak legyenek!
  8. A betűk közti távolság 2px legyen!
  9. Állítsatok be a szövegnek talpatlan betűtípust!
  10. A képet az első oldalon float-tal úsztassátok a szöveg mellé!
  11. Validáljátok az oldalakat!
Fájl csatolása
Önértékelési minta
Csoportos értékelő táblázat
Órai munka feladat megoldása