Gyakorlati Péda - Egyszerű Html Weboldal Elkészítése 4 Fős Csapatban
Feladatleírás
Tegyük fel, hogy az alábbi feladatot kapta a csapat: Készítsenek egy olyan weboldalt amelynek 3 menüpontja van. Egy főoldal ahol a csapat tagjait mutatják be, a másik két menüpont pedig: rólunk és kapcsolat.
Előkészületek
Első lépésként mindenképpen meg kell tervezni a weboldal drótvázát (wireframe) amin szerepelnek az egyes menüpontok vázlatos tervei, megbeszélik, hogy használnak e esetlegesen valamilyen css keretrendszert stb. Vagyis mindent tisztáznak. Ezután következik a feladatok kiosztása. Erre a következő táblázatban láthatunk egy lehetséges felosztást. Érdemes egy feladatkezelő alkalmazást használni hozzá, pl: Trello, vagy a GitHub projektkezelője. A feladatokat próbáljuk meg mindig úgy felosztani, hogy a lehető legkevesebbet kelljen egymásra várnia a csapattagoknak.
| Csapat tag 1. (vezető) | Csapat tag 2. | Csapat tag 3. | Csapat tag 4. | |
|---|---|---|---|---|
| Feladata: Fő tartalom (bemutatkozás) elkészítése, valamint ellenőrizni az elkészült részfeladatokat, és miután mindent rendben talált mergelni a main ágba. | Feladata: Elkészíteni a weboldal mappaszerkezetét, fájljait, a weboldalt layoutát, header-t a navbart, footert stb.. | Feladata: Elkészíteni a kapcsolat.html fájl tartalmát | Feladata: Elkészíteni a rolunk.html fájl tartalmát | |
| 1. | Várakozik | Létrehozza az alap könyvtárszerkezetet és fájlokat (img mappa, css mappa, index.html, rolunk.html, kapcsolat.html stb..), amiben közösen megegyezett a csapat többi tagjával. | Várakozik | Várakozik |
| 2. | Összeszedi a szükséges szövegeket, képeket. | Létrehozza a GitHubon a repot és összekapcsolja. | Összeszedi a szükséges szövegeket, képeket. | Összeszedi a szükséges szövegeket, képeket. |
| 3. | Várakozik. | Meghívja a résztvevőket | Várakozik | Várakozik |
| 4. | Elfogadja a meghívást, majd leklónozza a repo-t. | Várakozik | Elfogadja a meghívást, majd leklónozza a repo-t. | Elfogadja a meghívást, majd leklónozza a repo-t. |
| 5. | Megnyitja a feladatához tartozó branch-et pl.: create-fooldal | Megnyitja a feladatához tartozó branch-et pl.: create-layout | Megnyitja a feladatához tartozó branch-et pl.: create-kapcsolat | Megnyitja a feladatához tartozó branch-et pl.: create-rolunk |
| 6. | Megcsinálja, az index.html tartalmát, mivel konkrétan nem áll rendelkezésre a fej és lábléc ezért "odaképzeli". Az elkészült feladat részek után commitol és push-ol a saját branch ágára! | Megcsinálja az oldal fejrészét (header), menüsorát (nav), és láblécét, a fő tartalomnak (main) csak annyit ír, hogy "tartalom". Érdemes egy külön fájlt létrehozni: layout.html néven és abba dolgozni. Minden egyes elkészült kisebb rész után commitot készít és push-ol a saját branch ágára! | Megcsinálja, a kapcsolat.html tartalmát, mivel konrétan nem áll rendelkezésre a fej és lábléc ezért "odaképzeli". Az elkészült feladat részek után commitol és push-ol a saját branch ágára! | Megcsinálja, a rolunk.html tartalmát, mivel konrétan nem áll rendelkezésre a fej és lábléc ezért "odaképzeli". Az elkészült feladat részek után commitol és push-ol a saját branch ágára! |
| 7. | Ha kész van a feladatával megvárja még elkészül a 2. csapattag a layout.html-el, majd marad a saját banch-én (create-fooldal) és kiadja a git fetch origin parancsot, végül mergeli a saját ágába a layoutot: git merge create-layout | Várakozik | Ha kész van a feladatával megvárja még elkészül a 2. csapattag a layout.html-el majd marad a saját banch-én (create-kapcsolat) és kiadja a git fetch origin parancsot, végül mergeli a saját ágába a layoutot: git merge create-layout | Ha kész van a feladatával megvárja még elkészül a 2. csapattag a layout.html-el majd marad a saját banch-én (create-rolunk) és kiadja a git fetch origin parancsot, végül mergeli a saját ágába a layoutot: git merge create-layout |
| 8. | A layout.html fájlból átmásolja az index.html fájlba a szükséges kódrészeket (menü, lábléc stb), majd commit-ol és pushol a saját branch ágán. | Várakozik | A layout.html fájlból átmásolja az index.html fájlba a szükséges kódrészeket (menü, lábléc stb), majd commit-ol és pushol a saját branch ágán. | A layout.html fájlból átmásolja az index.html fájlba a szükséges kódrészeket (menü, lábléc stb), majd commit-ol és pushol a saját branch ágán. |
| 9. | Ha mindenki készen van a saját feladatával akkor mindegyik branch-t a main branchba mergel-i, majd pushol. | Várakozik | Várakozik | Várakozik |
| 10. | Várakozik | Visszavált a main branch-re és leszedi a változást, git pull origin main, és ha minden működik, akkor gyönyörködik a közös munka eredményén. | Visszavált a main branch-re és leszedi a változást, git pull origin main, és ha minden működik, akkor gyönyörködik a közös munka eredményén. | Visszavált a main branch-re és leszedi a változást, git pull origin main, és ha minden működik, akkor gyönyörködik a közös munka eredményén. |
| 11. | KÉSZEN VAN. Törli a saját branch ágát. git branch -d create-fooldal | KÉSZEN VAN. Törli a saját branch ágát. git branch -d create-layout | KÉSZEN VAN. Törli a saját branch ágát. git branch -d create-kapcsolat | KÉSZEN VAN. Törli a saját branch ágát. git branch -d create-rolunk |