Úvod, vytvorenie projektu prvého zadania a oboznámenie sa s vývojovým prostredím

Postup

1. Oboznámte sa s organizáciou cvičení predmetu Webové technológie a podmienkami udelenia zápočtu.
2. Úloha: V katedrovom GitLab-e vytvorte projekt pre prvé zadanie.

   Postupujte nasledovne:

   1. Prihláste sa do katedrového GitLab-u.
   2. Kliknite na tento odkaz: https://kurzy.kpi.fei.tuke.sk/gitlab-classroom/wt.
   3. Vytváranie projektov je zabezpečené pomocou doplnku GitLab Classroom. Ak ste ho ešte nepoužívali, povoľte ho:

      

   4. Vyberte si študijnú skupinu do ktorej patríte podľa rozvrhu:

      

      POZOR: Skupinu vyberte správne, podľa rozvrhu! Inak sa váš cvičiaci/a nemusí k vášmu zadaniu dostať.
   5. Dajte vytvoriť projekt:

      

   6. Projekt sa vytvorí a zobrazí sa naň odkaz:

      

      Kliknite na odkaz.
3. Úloha: V katedrovom GitLab-e si vyskúšajte upraviť súbory projektu a web stránku zobraziť.

   Postupujte nasledovne:

   1. Po kliknutí na odkaz na projekt sa vám zobrazí hlavná stránka projektu v GitLab-e. Všetky súbory vášho statického blogu sa nachádzajú v priečinku (directory) public. Kliknite naň:

      

   2. Kliknite na súbor article1.html:

      

   3. Zobrazí sa zdrojový kód article1.html. Teraz spustite vývojové prostredie kliknutím na tlačidlo "Web IDE":

      

   4. Využite poznatky z prvej prednášky [1] a urobte v súbore article1.html zmeny. Všimnite si, že Web IDE poskytuje nástroje pomáhajúce pri písaní zdrojového kódu:

      

      .
   5. Modifikujte aj iné súbory projektu. Všimnite si, že pri menách tých, ktoré ste zmenili sa objaví značka - oranžový štvorec. Nezabudnite, že pracujete s Git repozitárom. Preto ak chcete zmeny v súboroch projektu uložiť, musíte vykonať Commit:

      

      .
   6. Pri prvom commit-e vám systém ponúkne vytvorenie novej vetvy (new branch) projektu. My však budeme používať najmä hlavnú vetvu, preto zmeňte nastavenie na "Commit to master branch":

      

      . Môžete tiež zmeniť popis zmien (Commit Message).
   7. Stlačte tlačidlo "Commit":

      

      .
   8. Prácu s Web IDE ukončíte kliknutím na názov pre projektu:

      

      .
   9. Váš projekt je nastavený tak, aby sa všetko, čo je umiestnené v priečinku public automaticky publikovalo na http serveri, poskytovanom systémom GitLab. Aby ste publikovanú web stránku zobrazili, kliknite na "Settings" a následne na "Pages":

      

      .
   10. Kliknite na zobrazený odkaz:

       

       . Vaša stránka, konkrétne súbor index.html, sa zobrazí na novej karte prehliadača.

   Poznámka: Ak vám Web IDE, poskytované GitLab-om, ako vývojové prostredie nevyhovuje, môžete si repozitár vášho projektu naklonovať na váš počítač a pracovať s lokálnou kópiou. Vhodné vývojové prostredia sú Visual Studio Code [5] alebo WebStorm [6]. Ako študenti máte nárok na plnú licenciu WebStorm, ktorú získate pomocou formulára [7]. Na "hranie sa" s vývojom webových aplikácií online sa hodi napríklad CodeSandbox [8], ktorý je podobný prostrediu Visual Studio Code.

4. Vyberte si tému pre váš statický blog (prvé zadanie). K tejto téme budete tvoriť články, ktore budú na stránkach vášho blogu. Tému nahláste cvičiacemu/cej a tiež zapíšte do súbora README.md projektu. Názov projektu ale nemeňte.

   Môžete tiež začať pracovať na web stránkach vášho zadania, využijúc poznatky z prvej prednášky [1]. Čo majú web stránky obsahovať zistíte v cvičení 2.