Newsletter na Autopilocie: Szablon HTML grafiki

0:00W tej lekcji pokażę Ci, w jaki sposób przygotowałem swój szablon HTML.

0:04Jeżeli nie znasz HTML i CSS'a, to przygotowanie takiego szablonu możesz

0:09zlecić praktycznie dowolnej osobie, która zajmuje się kodowaniem frontendu.

0:14Ja akurat posiadam te umiejętności.

0:16W związku z tym napisałem kod na podstawie

0:18wcześniej przygotowanego szablonu w Figmie.

0:21W kontekście tego szablonu chciałbym zwrócić tutaj uwagę na pewną rzecz.

0:25Mianowicie chodzi tutaj o wykorzystanie tzw.

0:28auto layoutu.

0:29Jest to funkcja, która umożliwia określenie tego, w jaki sposób będą

0:33zachowywały się treści w zależności od ich obecności bądź rozmiaru.

0:38Przykładowo, jeżeli teraz usunę tutaj ten

0:40tytuł, to zwróć uwagę, że pozostała treść została przesunięta.

0:45Wynika to z obecności tej funkcji Auto

0:47Layout, którą możemy dostosować z poziomu panelu Figmy.

0:51Przykładowo teraz zmieniam po prostu

0:53zachowanie treści znajdującej się wewnątrz naszego kontenera.

0:56Teraz w kontekście Auto Layout musisz

0:58wiedzieć to, że nie jest to funkcja wymyślona przez Figmę.

1:02Jest to funkcja, która swoje podłoże ma

1:04właśnie w HTMLu i CSS, gdzie funkcjonuje tzw.

1:07flex box, który posiada dokładnie takie same funkcje.

1:11Zatem przykładowo jeżeli teraz usunę

1:13nagłówek z tej treści, to jak widać reszta elementów również

1:17wzięła to pod uwagę zmieniając swoją pozycję.

1:20Takie samo zachowanie będziemy obserwować

1:22w momencie, gdy tekstu będzie więcej bądź mniej.

1:25Oczywiście to nie jest tak, że to wszystko dzieje się automatycznie.

1:29Wszystkie takie zachowania muszą być dość

1:30precyzyjnie określone za pomocą stylów CSS.

1:34Ważne jest tylko to, aby po prostu potestować sobie ten szablon, umieszczając

1:38w nim dłuższe bądź krótsze fragmenty tekstu.

1:41Przykładowo w tym momencie mogę podjąć decyzję, czy taki układ mi odpowiada.

1:45Jeżeli nie, to mogę zmienić zachowanie

1:47kontenera ustawiając jego długość na minimum 70%.

1:51Dodatkowo mogę sprawić, aby tekst został wyrównany do lewej.

1:55No i sam layout już w tym momencie zaczyna wyglądać inaczej.

1:59Pytanie więc teraz, która z tych wersji

2:01bardziej nas satysfakcjonuje i na którą ostatecznie się zdecydujemy?

2:05Niezależnie od naszej decyzji, to z góry musimy określić w jaki sposób nasz szablon

2:09będzie się zachowywał w momencie, gdy będą pojawiać się w nim inne treści.

2:14Co więcej, jak widać tutaj zmieniłem tylko

2:16jedną nazwę klasy, aby całkowicie zmienić rozmiar mojej grafiki.

2:21Jest to szczególnie ważny sposób

2:22optymalizacji takich szablonów ze względu na to, że zamiast kodować wszystkie wersje

2:27tego szablonu, po prostu wykorzystuję tutaj możliwość nadpisywania stylów

2:32do tego, aby określić wygląd mojej grafiki

2:35w zależności od rozmiaru, który w danej chwili będę generował.

2:38Efekt końcowy jest tutaj taki, że tak przygotowany szablon HTML oraz style CSS

2:44mogę przekazać albo do narzędzia HTML, CSS to Image, albo do mojego EasyBanner, a

2:50następnie podmienić poszczególne fragmenty tekstu danymi, które będą pochodziły z

2:55Airtabel. Dzięki temu mogę wygenerować wszystkie

2:58formaty podmieniając tylko tę jedną wartość.

3:01Następnie wygenerowane grafiki mogę

3:03zapisać w Airtabel, a następnie wykorzystywać na potrzeby mediów społecznościowych.

3:08Na koniec dnia, tak jak już wspomniałem, istnieją znacznie prostsze sposoby

3:12generowania grafik, które nie wymagają przygotowywania kodu HTML.

3:16Jednak moim zdaniem możliwości, które oferuje generowanie grafik na podstawie

3:21szablonu HTML i CSS są tak duże, że w przypadku gdybym nie

3:25potrafił kodować po prostu zlecił bym przygotowanie takiego szablonu.

3:29Myślę, że szczególnie istotne jest tutaj

3:31to, że taki szablon wykonujemy praktycznie tylko raz i jeżeli będzie przygotowany w

3:36odpowiedni sposób, będziemy mogli wykorzystywać go przez długi czas.

3:40Przez odpowiedni sposób mam na myśli jego elastyczność, rozumianej jako możliwość

3:45przyjmowania różnego rodzaju tekstu oraz zmianę swojego wyglądu w zależności od tak

3:50naprawdę jednej zmiennej, którą będziemy podmieniać z pomocą automatyzacji.

3:55W rezultacie to wszystko powinno działać

3:57tak, że niezależnie od długości tytułu, liczby punktów, które będziemy tutaj

4:01umieszczać, czy na przykład jeżeli zdecydujemy się na podmianę grafiki w tle,

4:06to również będzie działało poprawnie, niezależnie od tego, jaką grafikę wgramy.

4:10Oczywiście nie mam tutaj na myśli

4:12stuprocentowej dowolności tego, jakie treści mogą pojawić się w takim szablonie,

4:16ponieważ w pewnym sensie muszą być one ograniczone lub lepiej to ujmując

4:21zdefiniowane na etapie projektowania szablonu.

4:23W tej lekcji ja już dziękuję Ci za uwagę, aczkolwiek chciałbym jeszcze dodać, że kod

4:28źródłowy mojego szablonu znajdziesz w opisie tej lekcji.

4:31W związku z tym śmiało możesz go

4:32wykorzystać do zbudowania na jego podstawie swojego szablonu, bądź też np.

4:37przekazania go osobie, która przygotuje dla Ciebie kod.

4:40Tymczasem nie pozostaje mi nic innego, jak zaprosić Cię do kolejnej lekcji.