Programowanie Interfejsów Webowych

Lab 1 - HTML + CSS

🏷️ HTML

HTML to język znaczników. Nie jest językiem programowania! (nie można zrobić 1+1=2)

📚 Semantyczny HTML

Starajcie się używać semantycznego HTMLa, tj. takiego, który mówi z czym mamy do czynienia. Semantyczny HTML pomaga przeglądarkom, czytnikom ekranów i SEO zrozumieć strukturę strony.
Zamiast <div class="header"> — użyj po prostu <header>. Podobnie:

  • <nav> - do tworzenia menu
  • <header> - (nie mylić z <head>) do nagłowka
  • <main> - główna zawartość strony (tylko raz na stronę!)
  • <aside> - treść poboczna (np. reklamy, notki, boxy info)
  • <footer> - stopka strony lub sekcji
  • <section> - logiczna sekcja strony (np. rozdział, grupa treści)
  • <article> - niezależny artykuł/post (np. blog, komentarz, wpis w danej sekcji)

🧭 Accessiblity

Semantyczny HTML jest tylko pierwszym krokiem do pisania dostępnych stron.

WCAG i klasy dostępności A, AA, AAA

3 poziomy dostępności.
A jest minimalnym, który powinny osiagać Wasze strony.
AAA powinien być spełniony przez strony rządowe. Moim zdaniem przegięcie i nie polecam skupiać się na nim.

Atrybuty ARIA

Są to atrybuty w tagach, które precyzyjnie opisują co robi dany tag.

Ostrzegam tylko, że 35% usilnych prób użycia tych atrybutów jest błędne i utrudnia korzystanie z czytników ekranów (stan na 2024).

🎨 CSS

💡 Good hints

Wyczyszczenie domyślnych ustawień

W głównym pliku .css na stronie, warto dodać:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* (tam jest gwiazdka na początku) */

Który usunie pewne zaszłości i uprości konfigurację.

Lab 2 - Podstawy JavaScript'u

JavaScript (JS) to najpopularniejszy język programowania w przeglądarce - działa po stronie klienta, ale także na serwerze (np. Node.js). Dynamiczny, lekki, wszechobecny.

📜 Krótka historia JavaScriptu

  • 1995 - Brendan Eich tworzy JavaScript w 10 dni pracując w Netscape (już nie istnieje, ale przeglądarka dominowała w latach90-tych)
  • 1997 - ECMAScript 1.0 - pierwszy standard języka
  • 2009 - Powstaje Node.js - JS trafia na serwer (ale o tym następnym razem)
  • 2015 - ECMAScript 6 (ES6): let/const, arrow functions, klasy, moduły: nowa era

Zmienne

🧠 Tworzenie zmiennych

let x = 5; // zmienna
const y = "test"; // stała (nie można nadpisać)
var z = true; // stara składnia (unikać)

🔤 Podstawowe 7 typów:

JavaScript to język dynamicznie typowany, czyli typ zmiennej może się zmieniać w trakcie działania programu.

  • string - tekst ("Hello", "")
  • number - liczby (42, 3.14, -13)
  • boolean - prawda/fałsz (true, false)
  • null - pustka - tzw. obiekt pusty
  • undefined - brak wartości, z reguły nieprzewidziana akcja. Jako programiści nigdy nie zwracamy undefined
  • object - obiekt (słownik: { name: "Jan" }, lista: [1,2,3], class, function)
  • symbol- rzadki typ, wykorzystywany w biliotekach

Funkcje

✨ Deklarowanie funckji

Standardowo

function sum(a, b) {
  return a + b;
}

Przypisanie funkcji anonimowej

const sum = function (a, b) {
  return a + b;
};

Funkcja strzałkowa

Najbardziej rekomendowana przeze mnie metoda

const sum = (a,b) -> {
    return a + b;
}
// lub
const sum = (a,b) => a + b;

UWAGA: Funkcje strzałkowe nie definiują swojego this

Lab 3 - React JS

⚛️ React JS

Virtual DOM Hooki Side Effect Context Refs Komponenty

Zaawansowane useRef do przechowywania informacji Suspense hoook use

Pytania

  • Czym jest kompoenent w Reakcie?
  • Co to jest VirtualDOM?
  • Do czego jest hook useState?
  • Czym jest context w Rekacie?
  • Co to jest SPA?
  • Link vs NavLink - różnice.
  • Konwencja nazewnicza:
    • use*
    • X i setX
    • handle*
    • *Context