Tworzenie stron internetowych (HTML, CSS, JavaScript)

(pracownia komputerowa)

uwagi ogólne

termin: poniedziałki, godzina 16:00

konsultacje: poniedziałki 13:30-14:30, wtorki 16:00-17:00 (wersja stacjonarna) lub dowolny termin (email, czat na Teams) lub termin po umówieniu (wideokonsultacja na Teams)

warunki otrzymania zaliczenia:

1. aktywność na zajęciach - przygotowanie serwisu internetowego z wykorzystaniem HTML, CSS, JS (szczegóły będą podane później)
2. obecność na zajęciach - w semestrze dopuszczalne są 2 nieobecności nieusprawiedliwione. Każda kolejna nieobecność musi być usprawiedliwiona zwolnieniem lekarskim. Osoby mające więcej niż 2 nieobecności nieusprawiedliwione będą musiały je odpracować w sposób uzgodniony z prowadzącym zajęcia. W przypadku dużej liczby nieobecności nieusprawiedliwionych decyzję o możliwości uzyskania zaliczenia podejmie zastępca dyr. do spraw dydaktycznych.

materiały do zajęć

prezentacja na temat tworzenia stron internetowych

• tworzenie stron internetowych cz.1
• tworzenie stron internetowych cz.2
• tworzenie stron internetowych cz.3
• tworzenie stron internetowych cz.4
• tworzenie stron internetowych cz.5
• tworzenie stron internetowych cz.6
• tworzenie stron internetowych cz.7
• tworzenie stron internetowych cz.8
• tworzenie stron internetowych cz.9
• tworzenie stron internetowych cz.10 - tworzenie galerii zdjęć (do samodzielnego zapoznania się)
• tworzenie stron internetowych cz.11

podstawowy szablon HTML5

• html5 (kliknij, żeby pobrać plik)

szablon HTML5 do treningu JS

• html5 (kliknij, żeby pobrać plik)

zadanie treningowe

• pliz zip do pobrania
• plik pdf z uwagami
• plik css z zajęć z 05 czerwca

pliki do tworzenia galerii zdjęć na skryptach JavaScript:

• galeria 1 - „nowe okno”; skrypt JS, arkusz CSS
• galeria 2 - „lightbox”; wszystkie potrzebne pliki i instrukcja dostępne są pod tym adresem lokeshdhakar.com/projects/lightbox2

dodatkowe źródła

• Kilka porad i uwag odnośnie tworzenia makiet
• Materiał wideo pokazujący przygotowanie makiety w programie Adobe XD
• Siatki do ręcznego rysowania makiet
• Lista wybranych programów do tworzenia makiet
• Różnice pomiędzy mobilną i desktopową wersją strony www
• Lista znaczników HTML wraz z ich opisem dostępna na serwisie www.w3schools.com
• Lista cech CSS wraz z ich opisem dostępna na serwisie www.w3schools.com
• walidator HTML
• walidator CSS
• Składnia Emmet, wtyczki przyspieszającej pisanie kodu w HTML oraz krótki opis Emmet (w PL)
• Czcionki Google - duża baza czcionek, które można wstawić do własnej strony www
• Narzędzie do wyboru kolorów
• Tester doboru kolorów zbudowany na regulach zalecanych dla stron WWW (Web Content Accessibility Guidelines 2.0 podawane przez W3C).
• Colors on the Web - serwis na temat wykorzystywania kolorów w projektowaniu stron internetowych.
• Serwis internetowy gemiusRanking PL przedstawiający statystyki użytkowania przeglądarek, systemów operacyjnych i urządzeń.
• Aplikacja sieciowa Browsershot umożliwiająca sprawdzenie wyglądu strony internetowej w rożnych przeglądarkach (chwilowo? nie działa).
• Colorblind Web Page Filter - narzędzie umożliwiające symulacje wyglądu strony internetowej widzianej przez osobę z zaburzeniem rozpoznawania barw.
• Generator kodu do wstawiania filmów z YouTube. Kod jest zgodny z specyfikacja xHTML.

zaliczeniowy serwis internetowy

Wymagania odnośnie pracy zaliczeniowej "strona www jasność graniczna - instrukcja i raport obserwatora":

• strona powinna dostosowywać się do urządzenia, na którym jest wyświetlana (responsywność);
• strona powinna być przyjazna dla użytkownika - łatwość zapoznawania się z zawartością, obsługi, nawigacji;
• strona powinna działać poprawnie niezależnie od przeglądarki internetowej;
• kod nie powinien zawierać błędów - proszę sprawdzić kod html (validator.w3.org) i css (jigsaw.w3.org/css-validator);
• arkusz stylów powinien znajdować się w osobnym pliku;
• przeliczanie N na LM w tabeli w raporcie obserwacyjnym powinno być wykonywane przez skrypt w JS;
• oprócz mapy nieba, strona powinna zawierać zdjęcia nieba ilustrujące zjawisko zanieczyszczenia światłem;
• graficzny wygląd strony musi być inny niż ten zrobiony treningowo na zajęciach.

Prace niespełniające wymogów będą odesłane do poprawy (1 raz).

Dodatkowe uwagi:

• cała treść może być zawarta na jednej stronie www (bez podstron), zachęcam jednak do zrobienia prostego menu nawigacyjnego;
• układ strony może być jednokolumnowy, ale nie musi;
• można uzupełnić stronę o dodatkowe ilustracje lub/i informacje;
• wygląd strony ("ostylowanie") nie musi być szczególnie wyszukane; styl strony może być prosty (strona sama w sobie jest prosta), najważniejsze, żeby wygląd graficzny był przyjazny dla użytkownika;
• można wykorzystać CSS Frameworks

Termin, sposób dostarczenia pracy, ocena:

• wszystkie pliki tworzące stronę internetową, tj: plik html, plik css oraz pliki graficzne należy zamieścić w plikach na Teams (grupa zajęciowa) w katalogu imię.nazwisko;
• termin: 26 czerwca;
• po sprawdzeniu wyślę każdej osobie mejlowo uwagi i ocenę końcową z zajęć.