Webflow: Publikowanie Strony

Webflow 2020+

0:00Witaj w kolejnej ostatniej już lekcji tego kursu.

0:02Tak czy inaczej jest to kurs podstawowy i

0:05jak mówiłem w nim dużo więcej rzeczy niż zamierzałem bo zrobiliśmy też animację

0:09nawet te bardziej zaawansowane i masę innych rzeczy które

0:13tak naprawdę podstawowe nie są ale myślę że warto się że nimi w tym kursie

0:18zapoznała się to co chciałbym jeszcze teraz ci pokazać.

0:21To możliwość opublikowania naszej strony przed opublikowaniem warto by było

0:25poczynić jeszcze jakieś kosmetyczne rzeczy typu np.

0:28wejść sobie dostałem menadżera i uporządkować styl, a przede wszystkim

0:32wyrzucić te klasy których nie potrzebujemy Remów no i przejrzeć strukturę klas które

0:37zrobiliśmy ewentualnie zmieniać ich nazwy zmienić nazwy tutaj uporządkować strukturę

0:42HTML, a myślę że w naszym przypadku jest ona całkiem przyzwoita

0:45ale można by było jeszcze zrobić tutaj te nazwy takie żeby były bardziej spójne ze

0:50sobą i można było też zmieniać nazwy klas które znajdują się z prawej strony.

0:55Oczywiście byłoby to dość nudne i służące w kursie więc nie będę tego pokazywał.

0:59Kolejna rzecz którą warto by było zrobić to zaadresować break pointy wyższych

1:04rozdzielczości i to jest bardzo proste odbywa się na tej samej zasadzie co te

1:08niższe te niższe były jednak dla nas dużo ważniejsze.

1:11Nasza strona będzie teraz działać na każdym monitorze i na każdym będzie

1:15wyświetlać się dobrze aczkolwiek możemy sprawić aby wyświetlał się lepiej na np.

1:20monitorach typu white screen czy monitorach 4K 5K które mają wyższe

1:25rozdzielczości choć niekoniecznie rzeczywiście zawsze tak będzie bo

1:28najczęściej mają one włączone skanowanie więc tak czy inaczej warto te break pointy

1:33przejrzeć ale struktura naszej strony i nawet dodać ewentualnie np.

1:37jakiś break point 1920 wybieram polecenie

1:39Create ale struktura naszej strony jest tak przygotowana żebyśmy mogli bardzo

1:44łatwo pod te break pointy dostosować wygląd.

1:47Zobacz że teraz wszystko się zmniejszyło

1:48ale to tylko dlatego że podgląd Webflow preview

1:51u nam się eskalować tak żebyśmy widzieli cały teoretycznie ekran Full HD.

1:55Mi on się nie mieści więc webflow musiało zmienić skalę a ja do tej skali 100 proc.

2:00Nie mogę przejść na tej rozdzielczości po

2:01prostu musiałbym mieć dużo większy monitor.

2:03Ale to jest właśnie dobre ponieważ

2:05pokazuje nam to jak na full HD będzie nasza strona wyglądać.

2:08No i co możemy zrobić. Przykładowo możemy pójść teraz sobie do

2:11sekcji content i tą sekcję content możemy zmienić w ten sposób że

2:15max i with zrobimy przykładowo 1682 to oczywiście dostosuje się tylko i wyłącznie

2:21do tego break pointa, a gdybyśmy w ogóle po działanie na samą sekcję content, a nie

2:25na content Hero to wejdzimy może The Fighters.

2:27I tutaj jest sam content i zmieńmy to na 1582.

2:32Zobacz cała nasza strona rozściągnęła

2:34przynajmniej tam gdzie nie były te elementy wyśrodkowane więc w ten sposób

2:38można zaadresować jeszcze szereg rozdzielczości.

2:40Ja teraz to cofnę bo nie jest to naszym celem.

2:43To są już zabiegi takie bardziej kosmetyczne.

2:46Natomiast z tych wszystkich rzeczy które

2:48tu mamy pokazałem ci te najważniejsze podstawowe nie omawialiśmy oczywiście

2:51zakładek i e-commerce i zakładki CMS bo na to będzie zupełnie osobny kurs

2:56więc możesz sprawić sobie bardziej zaawansowane materiały webflow.

3:00Ale teraz chciałem pokazać jeszcze jak

3:02naszą stronę można publikować więc mamy w zasadzie dwie opcje.

3:06Pierwsza to skorzystać hosting webflow czyli pod zakładkę publiczne.

3:10Na razie jesteśmy na takiej sudomenie webflow.

3:13Ale moglibyśmy kliknąć tutaj żeby stworzyć swoją własną domenę i pod tą własną naszą

3:19domeną ale na serwerach webflow hostować stronę.

3:22Jest to najbardziej proste wyjście najprostsze wyjście które pozwoli nam

3:26dosłownie w kilka minut sobie opublikować tą stronę.

3:29I co do zasady te ceny np.

3:3216 dolarów miesięcznie wcale nie są duże jak na hosting który oferuje nam webflow.

3:37I wydaje mi się że dla osób początkujących będzie to najlepsza opcja.

3:41Możesz spróbować sobie z wariantem 12

3:43dolarów i też myślę, że to co tutaj mamy czyli CDN obserwowanie

3:48contentu z różnych serwerów z 100 statycznych stron 25 tysięcy

3:53miesięcznej wizyt i 500 wysłanych formularzy to jest coś co naprawdę

3:57wystarczy takiej stronie przykładowo jak nasza więc nie jest to przesadnie drogie.

4:01Dodatkowo to co nam daje takie opublikowanie to, że my możemy cały czas

4:05pozostać w ekosystemie webflow że formularze będzie obsługiwał webflow

4:09będziemy mogli skorzystać z edytora czyli będziemy mogli na żywo na tej stronie

4:13dokonywać zmian bezpośrednio w przeglądarce bez konieczności korzystania

4:17z designera to też będę ci pokazywał bardziej zaawansowanym kursie.

4:20No i w zasadzie niczym się nie przejmujemy

4:23więc to jest jedna opcja stąd możemy właśnie ją uruchomić na tej customej

4:28domenie jeśli tylko wykupimy wcześniej plan i publikowanie naszej strony bo

4:33odbywa się także zaznacza aby check-boxem i wybieramy public domain.

4:36Nie będę teraz wykupywać tego planu tylko

4:38po to żeby pokazać Ci kliknięcie w ten sam przycisk.

4:41Więc myślę że rozumiesz doskonale już teraz jak to działa.

4:45Druga opcja to zrezygnowanie z webflow i hostowanie takiej stronie samodzielnie i

4:50też możesz jak najbardziej to zrobić wystarczy, że wybierzesz tą małą ikonkę.

4:53I tutaj znajduje się sekcja eksportu kodu.

4:56Taki kod czyli kod HTML CSS cały kod JavaScript i wszystkie assety.

5:00Możemy eksportować w jednej paczce zip i

5:03wybieramy tylko polecenie zip zostanie dla nas pobrany.

5:07W tym momencie musielibyśmy po prostu taką

5:10paczkę rozpakować sobie na dowolnym serwerze który kupimy

5:15i przez FTP czy wrzuci sobie Githuba , github pages, netlify.

5:20Jakkolwiek będziemy chcieli to hostować mamy te wszystkie pliki dostępne.

5:24Dodatkowo kod który generuje webflow jest czysty i jest bardzo łatwy w edycji.

5:28Czy łatwo się tutaj połapać więc jeżeli

5:30chcemy dokonać jakichkolwiek zmian już w samym czystym kodzie możemy to zrobić.

5:35Jak widzisz zip został wygenerowany ja mogę go po prostu pobrać i mieć całą

5:38strukturę mojej strony dostępną poza webflow.

5:41To oczywiście niesie ze sobą szereg

5:43niedogodności m.in. takie że jeśli modyfikuje kod strony poza webflow

5:49nie będziemy mogli w żaden sposób jej z powrotem do webflow ściągnąć.

5:53W webflow nie ma możliwości importu

5:55gotowych stron albo stron po zmianach w związku z tym stracimy możliwość edytować

5:59jej w designerze jeżeli wykonamy jakiekolwiek tutaj zmiany

6:03no i dodatkowo będziemy musieli martwić się o np.

6:06obsługę certyfikatu SSL który webflow daje

6:08nam Out Of The Box w ich hosting jak również inne rzeczy takie jak np.

6:12obsługa formularza który stworzyliśmy w tym momencie ta integracja przestała

6:16działać no i musielibyśmy obsłużyć formularz przez PHP lub też inną

6:19technologię serwerową albo trochę inaczej pospinać go zapier.

6:23Oczywiście jest to też możliwe aczkolwiek

6:25wykracza poza zakres tego kursu więc to są wady i zalety.

6:29I nie nie jest w zasadzie tak że jedno rozwiązanie jest lepsze czy gorsze.

6:33Szczerze mówiąc często też korzystam z

6:35eksportu kodu i po prostu używam swojego serwera mam jeden serwer za który płacę

6:40kilkadziesiąt złotych i mogę na nim hodować tysiące takich stron.

6:43W związku z tym jeżeli nie potrzebuję dalej mieć zasadzie możliwości webflow.

6:47Czyli jeśli to jest strona w miarę

6:49jednorazowa której nie będę dużo edytować jakoś intensywnie jej zmieniał i nie

6:53zawiera ona wielu elementów dynamicznych nie korzystam z jakiegoś CMS czy systemu

6:57e-commerce webflow to najczęściej pobieramy ją w postaci kodu w tym kodzie

7:01mogę jeszcze zrobić jakieś własne poprawki i wrzucam ją na swój hosting.

7:06W innym przypadku jeśli potrzebuję więcej tych natywnych funkcji

7:09albo jeżeli potrzebuję po prostu na krótki czas bardzo szybko opublikować stronę.

7:14Załóżmy że jest to strona wydarzenia czy

7:15jakiś landing page no to też naprawdę nie ma sensu się z tym

7:20bawić w ten sposób że ściągać gdzieś tam obsługiwać te formularze po prostu na

7:25miesiąc za 12 dolców można sobie wykupić taki hosting i później go anulować.

7:30Jeżeli nasza strona już jest niepotrzebna

7:32więc to zależy od specyfiki twojego projektu.

7:35Na pewno najprostsze jest publikowanie w

7:37ramach webflow i daje nam najwięcej możliwości.

7:40Nie musi się martwić o skalowalność przy

7:42takim serwerze webflow ponieważ on jest w stanie udźwignąć w zasadzie nieograniczony

7:45ruch nawet jak 10 tysięcy ludzi wejdzie na twoją stronę.

7:48To webflow prawdopodobnie sobie z tym poradzi, a twój dowolny serwer tani np.

7:53który wykupił jakiegoś dostawcy raczej już nie.

7:56W związku z tym też warto wziąć to pod uwagę jeśli chodzi o publikowanie.

8:00To są te dwa sposoby czyli eksport kodu w

8:03tym kodzie oczywiście nie możemy nic zmieniać w tym miejscu dopiero eksportować

8:07możemy sobie na już gotowych plikach rozpakowaniu możemy je zmieniać.

8:12Natomiast no tak jak wiesz możemy w

8:14sekcji ustawień Project settings dodawać customowy kod w tym miejscu gdzie mamy.

8:22W sekcji Custom code

8:25dodawaliśmy trochę tego kodu.

8:26Minus jest taki że tego kodu nie widać w

8:30designerze czyli jeśli ja tu zrobię jakieś zmiany w stylach to tych zmian nie będzie

8:34widać w designerze dopiero po opublikowaniu w strony.

8:36No ale jest taka możliwość żeby coś tutaj

8:39dodać zarówno do sekcji HEAD jak i do footera.

8:41Czyli na samym dole strony czasem będziesz

8:43wolał dodawać po prostu tutaj rzeczy po to żeby nie ładowały się.

8:48Na początku nie

8:49opóźnia ładowania naszej strony tylko po prostu dorzuca się na samym dole.

8:53Jeśli chodzi o inne funkcje które są tutaj

8:55dostępne w ustawieniach to o większości mówiliśmy.

8:58Ja zwrócę jeszcze Twoją uwagę na forms.

9:00Jeżeli korzystasz z webflow albo z ich subdomeny to możesz ustawić sobie

9:04dodatkowo nodyfikacje z formularza który mamy czyli przykładowo żeby wszystkie

9:10te submissions zgłoszenia zostały wysyłane do ciebie na maila i opowiadało , że ktoś

9:14się zapisał do ciebie na stronie i dodatkowo można włączyć walidację przez

9:19re - captcha można włączyć jakieś powiadomienie do osób które wysyłają

9:23formularz i mamy też informacje o tym jakie te formularze zostały wysłane.

9:27Jak widzisz są tutaj wszystkie moje zgłoszenia

9:30i informacje o tym ile mi zostało jeszcze na tym darmowym plan czy na tym planie

9:33takim podstawowym który mam teraz mogę też pobrać sobie wszystkie zgłoszenia z

9:36formularza więc też to tutaj wszystko jest.

9:39Pozostałe zakładki w zakresie podstawowym

9:41czyli w zakresie tego kursu również omówiliśmy.

9:44Ja zachęcam Cię do skorzystania z materiałów bardziej zaawansowanych z

9:48webflow będziemy wchodzić trochę bardziej w szczegóły dotyczące również SEO,

9:52bilingów, edytora jak również CMS czy sklepów czyli e-commerce w webflow.

9:58Natomiast myślę że teraz masz naprawdę

10:00całą wiedzę potrzebną do tego aby tworzyć projekty webflow w połączeniu z wiedzą z

10:04HTML CSS a powinieneś móc już robić w zasadzie każdy dowolny szablon.

10:08No, a na pracę z infrastrukturą dzieleniem

10:11się plikami edycją przez klienta CMS-ami itd.

10:14Przyjdzie na to jeszcze czas więc zachęcam Cię do tego żebyś sprawdził zaawansowane

10:19kursy z tego tematu no bo webflow naprawdę pozwala zrobić dużo dużo więcej.

10:24To jest genialne narzędzie w którym na co

10:27dzień będziesz odkrywał jeszcze jakieś nowe ciekawe rzeczy.

10:29Zachęcam cię do tego abyś też tymi rzeczami dzielił się z naszą społecznością

10:33ze społecznościami eduweb.pl i posyłał nam informacje o tym jakie projekty tworzysz.

10:37Bardzo dziękuję za uwagę i do usłyszenia w kolejnych materiałach.