Opracowywanie Serwisów Sieciowych cz. 1. - LABORATORIUM

Czego dotyczyć będą zajęcia

Niniejsze zajęcia skupiać będą się na podstawach, a potem tajnikach języków HTML5 i CSS3. Ich celem jest praktyczne zapoznanie studentów ze współcześnie wykorzystywanymi technologiami internetowymi i zasadami konstrukcji prostych serwisów WWW.

Cz. 1 dotyczyć będzie głownie tworzenia front-endu, skupiając się właśnie na HTMLu i CSSie.

Zasady zaliczenia przedmiotu

Do zaliczenia zajęć konieczne jest zaliczenie (uzykanie przynajmniej 50% możliwych do zdobycia punktów) z każdego z dwóch kolokwiów. Ostateczna ocena wystawiona zostanie na podstawie sumy wyników tych kolokwiów. W przypadku niezaliczenia któregoś z nich, studentowi przysługuje prawo do przystąpienia do kolokwium poprawkowego, obejmującego wiedzę z zakresu obu kolokwiów. Termin pierwszego kolokwium ustalony będzie ze studentami po 4-5 spotkaniach, ale pewnym jest, że będzie to na pewno temin przed Wakacjami Zimowymi. Drugie kolokwium odbędzie się na ostatnich zajęciach w semestrze zimowym.

Termin kolokwium poprawkowego ustalony zostanie z osobami zainteresowanymi. Kolokwium te odbędzie się na pewno w trakcie sesji zimowej.

Dodatkowe punkty na poprawę oceny uzyskać będzie można na podstawie obowiązkowych i nieobowiązkowych prac domowych, które pomagać będą w przyswojeniu materiału obowiązującego na zajęciach.

Narzędzia programistyczne

Na zajęciach wykorzystywane będą dwa podstawowe narzędzia - edytor tekstowy i przeglądarka internetowa. Większość pracy nad kodem źródłowym przeprowadzana będzie z wykorzystataniem IDE Visual Studio Code, będącym świetnym i relatywnie lekkim narzędziem do pracy nad stronami i aplikacjami internetowymi. VS Code dostępny jest za darmo, na licencji MIT. Narzędzie te stworzone zostało głównie do prac nad aplikacjami webowymi, ale świetnie sprawdza się również w innch zastosowaniach developerskich, dzięki całej gamie wtyczek. VS Code dostępny jest dla systemów MS Windows, macOS i Linux.

Studenci mogą korzystać z dowolengo IDE przeznaczonego do pracy nad stronami i aplikackami webowymi. Możliwe jest również wykorzystywanie dowolnego edytora tekstu (zarówno takiego, który koloruje składnię, jak i bardzo prostych edytorów). Sam bardzo chętnie korzystam z edytora VIM, wyposażonego w kilka dodatkowych wtyczek ułatwiających pracę z kodem.

Informacja dla ortodoksyjncyh wyznawców edytorów VIM i Emacs - w VS Code możliwe jest skonfigurowanie skrótów klawiszowych tożsamych z tymi edytorami.

Kolejnym narzędziem niezbędnym do pracy będzie przeglądarka internetowa. Tegoż jakże powszechnego narzędzia nie trzeba chyba nikomu przedstawiać. Preferowaną przeglądarką będzie Google Chrome, oparta na silniku Blink, będącym odgałęzieniem od silnika WebKit. Wybór ten podysktowany jest nie tylko popularnością przeglądarki, ale przede wszystkim świetnym, wbudowanym zestawem narzędzi developerskich - Chrome DevTools.

Polecane materiały do nauki

Strony i aplikacje internetowe wciąż żyją - z dnia na dzień powstają nowe biblioteki, publikowane są nowe pomysły i technologie. Część z nich przeżywa i wciąż się rozwija, część umiera tak szybko, jak się pojawiła. Nie zmieniają się jedynie technologie archaiczne, przestarzałe i oczywiście pewne założenia i idee. Nie będę tutaj polecał książek, podręczników etc., chyba, że będą one dotyczyły dobrych praktyk programistycznych czy podstaw pewnych technologii.

Do nauki technologii omawianych w takcie zajęć polecam w szczególności dokumentację techniczną - umiejętność jej czytania i szybkiego się w niej odnajdowania to również cenna umiejętność przyszłego inżyniera.

Polecane źródła do nauki to między innymi:

  • Dokumentacja techniczna języka HTML5 dostępna on-line [TUTAJ]
  • MDN web docs - podręcznik web developera HTML5 [TUTAJ]

Nie polecam natomiast stron takich jak w3schools.com, które uczą nie do końca dobrych praktyk, a dostępna tam wiedza wymaga solidnej weryfikacji.

Podstawy języka HTML5

Struktura pliku HTML

Podstawowy plik HTML posiada strukturę zdefiniowaną poniżej:

Znaczniki, które pojawiły się dotychczas:

  •  head, body, p, strong, h1-h6, div, span 

Połączenie pliku HTML5 i arkuszy stylów CSS

Podstawy języka CSS3

Tabele w języku HTML

Znacznikiem służącym do tworzenia tabeli w języku HTML jest znacznik
table
.

Przydatne skrypty