Jedno zdanie zmienia całą wizytówkę
„Małe pomysły. Dobre projekty.” wygląda w nagłówku całkiem dobrze. Tylko czym właściwie zajmuje się ta pracownia? Wpiszcie w podglądzie „Ilustracje do książek i małych marek”. Od razu wiadomo więcej, a układ strony przecież się nie zmienił. Teraz dodajcie własną nazwę i zobaczcie, czy ten sam szablon pasuje do waszej treści.
Do ćwiczenia przygotowaliśmy fikcyjną Pracownię Forma, która zajmuje się identyfikacją wizualną, ilustracją i stronami. Jej wizytówka mieści się w jednym HTML. Trzy kontrolki pozwalają zmienić nazwę, nagłówek i kolor akcentu. Możecie pobrać nasz przykład albo użyć promptu poniżej, żeby z pomocą AI zbudować podobną stronę.
Najpierw plik, który można otworzyć
Jedna strona w jednym pliku to wygodny początek: zapisujemy ją i od razu oglądamy w przeglądarce. Wklejcie poniższe polecenie do modelu pomagającego pisać kod. Jeśli dostaniecie sam kod, przenieście go do edytora tekstowego i zapiszcie jako index.html w kodowaniu UTF-8. Zerknijcie na rozszerzenie — index.html.txt nadal otworzy się jako tekst.
Przed tworzeniem własnej wersji przygotujcie nazwę, zakres usług i treść. W naszym przykładzie nie dokładaliśmy fikcyjnej firmie klientów, nagród ani kontaktu. Gdy będziecie wpisywać swój adres lub dodawać formularz, ustalcie również, dokąd ma prowadzić kliknięcie. Model potrzebuje tych informacji tak samo jak wskazówek o wyglądzie.
Co ma się znaleźć w polu, zostaje tekstem
Warto najpierw dopracować zdania, a dopiero później zmniejszać czcionkę i przesuwać elementy. Jeśli wasza oferta mieści się w „Ilustracjach do książek i małych marek”, nie trzeba upychać w nagłówku całej listy usług. Chodzi o to, żeby odwiedzający zrozumiał, co może wam zlecić.
Przy sprawdzaniu demo wpisaliśmy w nazwie znaczniki HTML. Pozostały zwykłym tekstem. Powtórzcie próbę z <b>Moja pracownia</b>: powinny być widoczne także nawiasy, a napis nie powinien stać się pogrubiony. Użyliśmy tu textContent, właściwości, która wstawia zawartość pola jako tekst. Pod artykułem znajdziecie jej dokumentację.
A teraz długi nagłówek i mały ekran
Zwęźcie okno do 320 px albo otwórzcie plik na telefonie. Wpiszcie dłuższą nazwę i nagłówek. Strona może zrobić się wyższa, ale tekst nie powinien znikać ani wypychać układu w bok. Potem przejdźcie przez pola klawiszem Tab. Widoczne zaznaczenie ma pokazywać, gdzie właśnie jesteście.
Sprawdźcie też ciemny motyw systemu lub przeglądarki. Nasz przykład dopasowuje tło i tekst przez prefers-color-scheme, czyli ustawienie pozwalające stronie odczytać tę preferencję. Wybrany akcent zostaje; używamy go głównie w ilustracji. Jeśli przeniesiecie ten kolor na małe napisy, sprawdźcie ich czytelność osobno. To, co dobrze wygląda jako duża plama koloru, może być trudne do przeczytania.
Jak zapisać swoje zmiany
„Pobierz HTML” daje wam oryginalny szablon z kontrolkami. Bieżące zmiany z podglądu nie trafiają do tej kopii. Żeby je zachować, otwórzcie pobrany plik w edytorze i zmieńcie name, headline oraz accent w obiekcie defaults na końcu skryptu. Uaktualnijcie również początkowe teksty w samym HTML — dzięki temu wasza treść będzie widoczna także bez JavaScript. Zapiszcie plik pod nową nazwą i otwórzcie go jeszcze raz.
Kiedy treść i wygląd będą gotowe, możecie poprosić model o usunięcie kontrolek i zostawienie samej wizytówki. Dodajcie rzeczywisty kontakt, kliknijcie i sprawdźcie, czy prowadzi we właściwe miejsce. Macie wtedy lokalny projekt. Udostępnienie go w internecie to następny, osobny krok.
Źródła i dalsza lektura
Materiały, na których opiera się ten tekst. Instrukcje i przykładowe scenariusze są propozycjami redakcji.
- MDN: textContent i różnica względem innerHTML (otwiera nową kartę)developer.mozilla.org
- MDN: pole wyboru koloru (otwiera nową kartę)developer.mozilla.org
- MDN: prefers-color-scheme (otwiera nową kartę)developer.mozilla.org