Program szkolenia

1. Wstęp
   • możliwości zastosowania HTMLa
   • wersje i standaryzacja języka HTML
2. Przypomnienie podstawowych zasad składni HTML
   • podstawowe znaczniki blokowe
   • podstawowe znaczniki tekstowe
   • atrybuty
3. Wymagania stawiane stronom internetowym
   • readability
   • usability
   • accessibility
4. Dostępność
   • UX i DX
   • dostępność dla osób niepełnosprawnych
   • czytelność witryny
   • atrybuty WAI-ARIA
5. Semantyka
   • semantyka bloków: ASIDE, MAIN, ARTICLE, SECTION, itd.
   • struktura nagłówków
6. SEO
   • odpowiednie przygotowanie treści
   • słowa / frazy kluczowe
   • dzielenie treści na bloki tekstu i śródtytuły
   • nagłówki
   • atrybuty alt i title dla obrazków
7. Obsługa adresów i linków
   • adresy względne i bezwzględne
   • atrybuty target i rel dla linków
   • linki i SEO
8. Tagi META
   • język dokumentu i jego zmiana
   • specjalne tagi meta dla portali społecznościowych
   • tag BASE
   • favikona
9. Biblioteki i Frameworki CSS
   • normalize.css / reset Meyera*
   • animate.css
   • baseline by Stephane Curzi
   • Bootstrap
   • Foundation
   • Surface
   • Bulma
10. Nadawanie wyglądu elementom HTML
    • budowanie interfejsu aplikacji z wykorzystaniem minimalnej ilości CSSa
    • tworzenie wyglądu aplikacji z wykorzystaniem wybranego frameworka CSS
    • sposoby wczytywania stylów CSS
11. Praca z obrazami
    • src i data base64
    • figure, figcaption, picture
    • srcset
12. SVG
    • szybkie wprowadzenie do grafiki wektorowej
    • tworzenie ścieżek w programach graficznych, a bezpośrednio w kodzie
    • łączenie SVG z HTML
    • wprowadzanie zmian struktury w SVG po umieszczeniu go w HTML
    • biblioteki do WYGODNEJ pracy z SVG
    • biblioteki do rysowania wykresów za pomocą SVG
    • maski przycinania tworzone za pomocą ścieżek
13. Formularze
    • przyciski, pola edycyjne, checkboxy, radiobuttony
    • pole typu number
    • date picker, time select, color picker, camera
    • natywna walidacja formularzy
    • wyłączenie walidacji formularzy
    • progress
    • zastosowanie ukrytych pól formularzy
    • stosowanie elementów formularzy jako elementów sterujących HTMLem
    • DETAILS i SUMMARY
    • atrybut autofocus
    • dopełnianie formularzy i wyłączenie dopełniania
14. Dodatkowe operacje na formularzach
    • adres na który ma zostać wysłany formularz
    • metoda wysyłania formularza
    • znacznik fieldset
    • fieldset + problemy flex CSS
    • stosowanie elementów input / button / select poza formularzem
    • łączenie LABEL i kontrolki formularza (zagnieżdżanie i atrybut for)
    • grupowanie labelek i inputów
    • przewaga BUTTON submit nad INPUT submit
    • dobór odpowiednich kontrolek do typu danych
    • kontrolka select - wielokrotny wybór, grupowanie, wybór domyślny
    • datalist
    • search
    • reset formularza
    • zewnętrzne linki w ramach formularza
    • dzielenie długich formularzy na mniejsze
15. Formularze i media
    • uruchamianie aparatu telefonu z poziomu formularza HTML
    • wybór pliku
    • wybór wielu plików
    • ograniczenie do danego typu plików
16. Kontrola HTMLa za pomocą klawiatury
    • tabindex
    • używanie skrótów klawiaturowych
17. Renderowanie dokumentu HTML
    • drzewo DOM
    • etapy renderowania stron www
    • rendering i malowanie
    • kolejność wczytywania i działania zewnętrznych zasobów do przeglądarki
18. Podstawowe operacje na drzewie DOM z użyciem JS
    • wybieranie elementów
    • modyfikacja drzewa DOM
    • nadawanie, zdejmowanie klas
    • tworzenie elementów HTML w JSie i wstrzykiwanie ich do drzewa DOM
    • praca z elementami formularzy w JSie
19. Multimedia
    • audio
    • video
    • wiele źródeł - source
20. Zagadnienia zaawansowane
    • własne znaczniki
    • trzymanie danych w atrybutach data-*
    • białe znaki
    • znaki specjalne - encje
    • poprawki w drzewie DOM wykonywane przez przeglądarkę
    • tworzenie layoutu a reprezentacja danych
    • shadow DOM
21. Znaczniki do specjalnych zastosowań
    • adres
    • indeksy górne / dolne
    • wyświetlanie kodu źródłowego - PRE, CODE, VAR
    • cytowanie - BLOCKQUOTE, CITE
    • znaczniki czasu - TIME i atrybut datetime
    • skróty, akronimy i ich rozwinięcia - ABBR
    • MATH - wzory i równania matematyczne
    • KBD
    • RUBY
    • MARK
    • mikroformaty
22. Sposoby tworzenia HTMLa
    • przez systemy templatkowe
    • przy pomocy edytorów wizualnych
    • ręczne (bezpośrednio pisząc kod)
    • przy pomocy back-endu
    • przy pomocy JSa
    • po przeparsowaniu innego języka (np. MarkDown)
    • modyfikacja istniejących szablonów
23. Wstęp do generowania HTMLa po stronie serwerowej
    • transformacja i przygotowanie danych do wyświetlenia
    • instrukcje warunkowe
    • pętle
    • wstrzykiwanie zmiennych
    • dzielenie projektu na subtemplatki
24. Sposoby organizacji projektu
    • separacja struktury, wyglądu i działania
    • podział plików na mniejsze struktury
    • korzystanie z zewnętrznych plików, CDNów
25. Warsztat programisty
    • przydatne praktyki formatowania kodu
    • stosowanie konwencji nazewniczych
    • tworzenie samodokumentującego się kodu HTML
    • narzędzia sprawdzające usability
    • rzetelne i aktualne źródła wiedzy
    • częste pułapki i ich rozwiązania
    • HTML i kontrola wersji GIT