IKT projektmunka I. - Webfejlesztés órák – piani di lezione e project task completati

Tipologia di piano
Piano di lezione
Settore
Információs és kommunikációs technológiák
Argomento / Materia
Webprogramozás
Competenze e abilità da sviluppare
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
Competenze e abilità professionali da sviluppare
Ö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
Metodo didattico
projektalapú tanulás
hálózatalapú tanulás
problémaalapú tanulás
Materie di interesse generale
Obiettivi di apprendimento
Az óra végére a tanulók képesek lesznek reszponzív oldal létrehozására.
Concetti
HTML alapok, CSS alapok, CSS Grid
Strumenti necessari
projektor, számítógép, internet, okostelefon
Durata
180 perc
Materials to be shared before the lesson/project task
Introduzione e preparazione della lezione / project task

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

 

Realizzazione della lezione / project task

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

 

Applicazioni utilizzate
OneNote
Symbaloo
Moodle
Canva
Programma di valutazione
  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?

Differenziazione
  • 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 
Compiti a casa, 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!