Wprowadzenie do narzędzi no-code i low-code
W dzisiejszym odcinku kontynuujemy serię, w której przybliżamy Wam bardziej narzędzia no-code czy low-code, aby pokazać Wam bardziej od środka, jak one funkcjonują, jak one wyglądają, na co pozwalają, jak się w nich poruszać. Nie są to szkolenia z tych narzędzi, są to jedynie takie walkthrough video, z którymi opowiadamy trochę o nich więcej, żebyście się z nimi dokładniej zapoznali. W dzisiejszym odcinku będziemy opowiadać o narzędziu Webflow, narzędziu bardzo popularnym, głównie przeznaczonym do tworzenia mega interaktywnych, szybkich stron internetowych.
Webflow jako narzędzie do tworzenia stron
Oczywiście, jeżeli ktoś ma skille JSowe, potrafi programować, no to można tutaj zaprogramować również aplikacje. Wymaga to po prostu użycia trochę więcej kodu, chociaż w niedawnym czasie Webflow również dodał logic. Jeszcze mało skomplikowane, nie na zbyt wiele rzeczy pozwalają, ale idą w stronę tego, żebyśmy mogli również tworzyć aplikacje. Więc dzisiaj zaznajomimy się właśnie z tym narzędziem. Pokażę Wam na co ono pozwala, jak ono wygląda, jak ono funkcjonuje.
Pierwsze kroki w Webflow
Dobrze, jak widzicie, jesteśmy już w środku naszego narzędzia Webflow. Jesteśmy już w naszym dashboard, gdzie chcemy stworzyć naszą pierwszą stronę. Nie będę pokazywał jak ekranów przed, bo mają one trochę mniejsze znaczenie, i tam też mamy projekty naszych klientów, więc nie będę przez to przechodził, bo i tak większość byłaby zblurowana. Natomiast, kiedy klikniemy "stwórz nową stronę", no to właśnie, jak widzicie, tutaj mamy możliwość tworzenia nowych stron, czy to będzie pusta strona, czy będzie ona stworzona z jakiegoś template. Jak widzicie, tych template może być naprawdę mnóstwo, czyli e-commercowych, czy agencowych, czy restauracyjnych, landing page, i tak dalej, i tak dalej. Możemy sobie tutaj te różne templatki wyszukiwać, edytować i tworzyć na ich podstawie.
My dzisiaj sobie stworzymy pustą stronę, wybieramy sobie "Select", "Kamil Super Cool Site" - dokładnie, to jest moja super strona, i jak widzicie, zaczynamy od wejścia po prostu do samego edytora. Musimy poczekać, aż tutaj wszystko się załaduje. I jesteśmy już w naszym edytorze. Podobnie jak w Bubble, zaczynamy od białej pustej kartki papieru, na której będziemy sobie dodawali kolejne elementy, modyfikowali je, nanosili, i tak dalej, i tak dalej.
Zaawansowane funkcje Webflow
Cały edytor wygląda troszkę inaczej, czy jest bardziej przejrzysty, czy komuś trafia bardziej w gusty, oczywiście zależy już bezpośrednio od naszych gustów, czy preferencji tego, jak lubimy pracować, natomiast łatwo się na pewno w nim odnaleźć. Na samej górze widzicie mamy ikonkę Webflow, gdzie możemy przejść do naszego dashboardu, do ustawień strony edytora, czy znajdować jakieś informacje, eksportować sobie kod. Webflow jest tym edytorem, który pozwala nam na eksport kodu do na zewnątrz platformy. Mamy też cały CSS preview. Oczywiście tutaj musimy sobie zaznaczyć jakiś element, żeby tego CSSa tutaj sobie zobaczyć.
Zarządzanie stronami i SEO w Webflow
Następnie mamy page'e. Jeżeli sobie na to klikniemy, to otwiera nam się lista wszystkich stworzonych stron, gdzie oczywiście możemy tworzyć strony statyczne, tak zwane static pages, utility pages, na których mamy na przykład logowanie użytkownika, tak. Tak mamy protected page, to jest password page, mamy stronę 404, możemy je sobie edytować. No i mamy oczywiście user pages, jeżeli mamy możliwość zarządzania użytkownikami i mamy tą opcję włączoną. E-commerce pages, jeżeli mamy Webflow włączony jako e-commerce, czy CMS pages, czyli strony CMSowe, czyli na przykład strony wpisu blogowego, czy czegoś innego, co jest po prostu powtarzalną treścią tworzoną na jakimś szablonie. Tutaj, jeżeli sobie najedziemy na daną stronę, również możemy wejść w jej ustawienia, tutaj możemy dodawać nowe strony, czy dodawać pod foldery, żeby nasz URL miał odpowiednią strukturę. Na przykład "have no code .io /en /jakaś strona", znaczy, że jesteśmy w folderze angielskim, albo "/pl", będziemy w folderze polskim.
Jeżeli sobie klikniemy tutaj na te settingsy, to widzicie, tutaj możemy zmienić nazwę naszej strony, możemy tą stronę skopiować, zduplikować, możemy zablokować do niej akces, powiedzieć, że mogą tylko Specific Users Only, Anyone with the Password, albo używ, wszyscy na zewnątrz. Mamy ustawienia dotyczące SEO, ustawienia dotyczące Open Graphu, które mogą przybierać te same właściwości, czy te same ustawienia co ustawienia SEO, Sage Search Settings, czy Custom Code. Oczywiście tutaj dostęp do Custom Code'u w podstawowej wersji nie mamy, bo musimy sobie wykupić jakiś hosting plan, żeby ten custom code do danej strony dodawać, natomiast dodawanie custom code pozwala nam dodawać właśnie custom code, customowe funkcje, interakcje, czy wszelkie rzeczy, które nam się zamarzą do naszej strony poszczególnej strony. Oczywiście możemy też dodawać do całości projektu, ale o tym porozmawiamy sobie zaraz.
Współpraca i publikowanie w Webflow
Jak widzicie, dalej idąc po górze, ja chcę discard changes. Mamy różne komentarze dotyczące naszej strony, które możemy sobie dodawać w danym miejscu. Pozwala nam to po prostu współpracować z innymi nad naszą stroną. Mamy podgląd naszej strony, jak będzie ona wyglądała. No i mamy to, jak wygląda nasza strona w różnych breakpointach, czyli jak w różnych rozdzielczościach będzie się ona prezentowała, jak będą zachowywały się elementy dotyczące tego danego breakpointu. Tutaj możemy naszą naszymi akcjami zarządzać, jeżeli coś zrobimy.
Tutaj właśnie mamy informację o tym, czy nasz projekt został zapisany, nasze zmiany. Mamy również podgląd kodu, który możemy sobie tutaj podejrzeć, jak on dokładnie wygląda w przypadku HTML, CSSA czy JSSA, będziemy mieli te wszystkie informacje, będziemy mogli, jeżeli zugprejdujemy sobie plan, to widzicie, będziemy mogli sobie to wszystko po kolei wyeksportować. Nasz projekt oczywiście możemy share'ować z innymi, możemy content editorów zaprosić. Content editorzy to są ludzie, którzy odpowiadają tylko i wyłącznie za edycję contentu, to znaczy, że oni mogą dodawać elementy do CMSa, mogą nimi zarządzać, edytować je, jak również mogą zmieniać elementy kontentowe na naszej stronie. No i last but not least, z górnego panelu możemy oczywiście publikować nasze strony. Jeżeli będziemy mieli wykupiony jakiś hosting plan, to będziemy mogli dodać customową domenę. Tutaj oczywiście w podstawowym planie będziemy mogli opublikować ją na domenie Webflow.
Zaawansowane techniki optymalizacji w Webflow
Dla bardziej zaawansowanych użytkowników są również dostępne różne opcje jak miniFi HTML, miniFi CSS i tak dalej. Opcje te pozwalają po prostu ładować się naszym stroną szybciej, ale za to kod jest mniej czytelny. To są już bardziej zaawansowane opcje, pytanie czy będziemy ich potrzebowali.
Narzędzia pomocnicze w edycji
Dobrze, więc tak wygląda górny panel, ale dla nas główną częścią, bym powiedział może rozrywki czy częścią, która nas najbardziej interesuje, jest możliwość zmniejszenia rozdzielczości, abyście widzieli dokładnie jak to wygląda. Tutaj przy okazji też, jak widzicie, możemy sobie włączyć X-Ray mode, pokazywać edge elementów, możemy też sobie włączyć interesujące nas guide, dzięki którym będzie nam łatwiej tworzyć po prostu niekiedy trening. Z tych wiem, że często bardzo korzystają graficy. Ja osobiście z tego nie korzystam, bo idę już po prostu na projektach.
Tworzenie i edytowanie stron w Webflow
Dobrze, natomiast to co tygryski lubią najbardziej: tworzenie, edytowanie stron, nanoszenie elementów. Zobaczcie proszę, że tutaj mamy różne struktury, różne basicowe elementy, różne elementy typograficzne, elementy CMSowe, elementy mediowe, elementy dotyczące formularzy, czy elementy zaawansowane. No i te wszystkie elementy, jeżeli ktoś z was ma umiejętności HTML, CSS, stworzył do tej pory strony, to te elementy będą dla niego bardzo czytelne. Będzie wiedział, który element jest czym, do czego służy, czym jest sekcja, czym jest kontener, czym te obiekty się od siebie różnią.
Stylizacja i zarządzanie klasami w Webflow
Tak jak mówiłem, dzisiejsze wideo nie jest szkoleniem, więc nie będę tłumaczył co jest do czego i co jest czym. Chcę Wam pokazać po prostu jak to wygląda. Podobnie jak w Bablu, widzicie, te elementy po prostu robimy drag and drop na tą pustą kartkę papieru, żeby zobaczyć jak nasza strona będzie się zachowywała. Tutaj oczywiście mamy podejście CSS-owe, więc możemy tworzyć sobie klasy, zarządzać style selektorami, które oczywiście poruszają się w odpowiedniej hierarchii.
Jak widzicie, dodajemy sobie pierwszy element headingowy. Nasze strony polegają na tym, że tworząc całą strukturę naszej strony, tworzymy jakąś strukturę HTML, CSS, JS, tak żeby nasza strona wyglądała w pożądany przez nas sposób. Mamy tutaj body styles, gdzie tworzymy styl danego elementu. Możemy sobie zarządzać wszystkimi tymi elementami CSS-owymi, czy to ma być po prostu zwykły blok element, czy to ma być jakiś flex element czy grid element. W zależności od tego, co sobie wybierzemy, będziemy mogli w tym sobie też dodawać odpowiednie opcje na temat tego, jak nasze elementy mają być wystylowane, jak będą się zachowywały.
Reużywalne komponenty i zarządzanie klasami
Mamy oczywiście komponenty, czyli takie elementy reużywalne, znane Wam z Bubble, gdzie możemy sobie stworzyć jakiś element raz i później reużywać go w różnych stronach czy w różnych sekcjach naszych stron, po to, żeby po prostu nie robić tego samego jeszcze raz. Zarządzanie tymi klasami pozwala na łatwe dodawanie stylizacji, jak na przykład klasy "black" dla elementów z czarnym tłem, co pokazuje elastyczność Webflow w tworzeniu zaawansowanych i stylizowanych stron internetowych.
Hierarchia i struktura elementów w Webflow
Tutaj, jak widzicie, mamy właśnie to drzewko, całą hierarchię naszych elementów, jest ona oczywiście na podstawie tworzona HTML. Więc jeżeli teraz byśmy sobie właśnie ten kod podejrzeli, jak ten nasz HTML wygląda, no to wygląda on właśnie w ten sposób: mamy body, w którym mamy heading, mamy ten button, mamy później tego diva, w którym mamy jakiś paragraf, później mamy diva. Jak widzicie, te klasy są wtedy podłączane do tych elementów, nie są one opisane inline, więc jest to jakby dla ludzi, którzy korzystają na co dzień, tworzyli strony, czy to w WordPressie, czy w tradycyjny sposób, to będzie to bardzo czytelne.
Zarządzanie treścią: CMS w Webflow
O stronach już sobie rozmawialiśmy, dalej mamy właśnie CMS, czyli nasz Content Management System, czyli system do zarządzania contentem, gdzie możemy właśnie tworzyć sobie różne bazy danych, czy to właśnie dotyczące wpisów blogowych, czy jakichś innych listingów, gdzie możemy właśnie nazwać tę kolekcję, ten zbiór naszych elementów. Tutaj widzicie mamy różne templatki, z których możemy sobie skorzystać, oczywiście nie musimy, ale skorzystajmy sobie z blog postu. Wtedy widzicie mamy różne pola, które będziemy musieli uzupełniać, czyli mamy tytuł, mamy jakiegoś slaga, slag to jest to co widzimy w URL-u, mamy post body, post summary, main image, thumbnail image, featured color, możemy sobie dodawać kolejne pola.
Logika i automatyka w Webflow
Następna rzecz, czyli logiki. Bardzo ciekawy feature, który został dodany niedawno, który jeszcze nie oferuje nam bardzo wielu rzeczy, ale Webflow dodało tą funkcję ze względu na to, że dzięki niej mamy do wyboru różne triggery, na ten moment jest to form submission, AB, jakiś incoming webhook. Możemy wystawiać sobie endpointy do webhooków, w których będziemy coś odbierali na naszej stronie. Dzięki czemu, na przykład kiedy nasz formularz zostanie uzupełniony, to oczywiście jeszcze mamy jakiś formularz, proszę bardzo, no to możemy coś zrobić. Możemy na przykład wysłać send email notification, możemy utworzyć jakiś element w CMS, możemy go usunąć, możemy go wyszukać, możemy zrobić jakiś HTTP request.
E-commerce i zarządzanie zasobami w Webflow
Mamy zakładkę e-commerce, gdzie wtedy dodamy sobie dwie nowe kolekcje do strony, czyli produkty i kategorie produktów, dzięki czemu będziemy mogli stworzyć prostego e-commerce w Webflow. Webflow nie jest jeszcze, znaczy bez użycia kodu w Webflow nie będziemy mogli stworzyć mega skomplikowanego, mega zaawansowanego e-commerce, ale dla wielu use case'ów będzie on całkowicie wystarczający. Potem, za pomocą pewnego kodu, pewnego użycia kodu czy wtyczek, będziemy mogli te możliwości po prostu tego e-commerce w jakiś sposób rozszerzyć. Dalej mamy asety, możemy tutaj sobie tworzyć, przesyłać asety, które będą po prostu używane na naszej stronie.
Ustawienia, backupy i audyty strony
Mamy również ustawienia strony, settings, search, general, czyli czy chcemy od layout buttons onboarding checklist and prompt zrobić, no i backupy, możemy sobie tworzyć backupy naszej strony. A propos elementów, nie wspomniałem jeszcze o trzech kolejnych zakładkach, czyli settings elementu, gdzie możemy dodawać np. id, tworzyć z danego elementu komponent, możemy ustawiać jego visibility na podstawie jakichś warunków, tak czy jakiś custom atrybuty.
Mamy również Style Managera, czyli widzimy właśnie całą hierarchię naszych styli, jak również mamy Interactions, czyli możemy pewne interakcje z tymi elementami wchodzić na podstawie pewnych triggerów. np. kiedy strona się załaduje, to zanimuj ten element; kiedy element wchodzi na Scrollview, czyli to co widzi użytkownik, to wtedy go dopiero zanimuj. Jeżeli ktoś coś kliknie, to wtedy wykonaj taką animację albo taką interakcję z tym elementem. Mamy tutaj kilka różnych triggerów, czyli na mouse click, mouse hover, mouse move over element, scroll into view, while scrolling into view i kilka innych. Jak również mamy page triggery, czyli mouse move in viewport, while page is scrolling, page load albo page scrolled, wtedy będziemy mogli wykonywać pewne akcje interakcji.
Tutaj oczywiście mamy mały support help, gdzie możemy sobie właśnie podejrzeć tego CSSa jakiegoś danego elementu, widzicie wtedy dokładnie jak on wygląda. Będziemy mogli sobie przejść do helpu i feedbacku na forum Webflow. Mamy audyty, dzięki czemu Webflow automatycznie nam podpowiada takie rzeczy jak np. nasz obrazek nie ma dodanych alt tekstów czy tego typu rzeczy, rzeczy które np. mają wpływ na SEO czy na performance naszej strony, to tutaj zobaczycie o tym informację, że "hej, może warto byłoby to poprawić, żeby poprawić rzecz x na Twojej stronie".
Wyszukiwanie elementów i wideo tutoriale
Mamy wyszukiwarkę, żeby wyszukać jakiś element na naszej stronie, jak również mamy dostępne wideo tutoriale na temat właśnie tych wszystkich elementów, z których możemy się wiele dowiedzieć, czy wiele nauczyć jak dokładnie Webflow funkcjonuje. Więc tak prezentuje się edytor od tej strony wizualnej, tej, której możemy sobie tworzyć całą naszą stronę, koncept naszej strony czy tego typu rzeczy.
Site Settings i zaawansowane ustawienia
Druga strona to również site settings, gdzie również o te rzeczy musimy zadbać, ponieważ jak zaraz zobaczycie mamy tutaj tych ustawień całkiem sporo. Są to ustawienia takie jak oczywiście nazwa naszej strony, która jest widoczna tylko dla nas, fawikony, webklipy, na pewno chcielibyśmy, żeby one wyglądały w sposób taki jaki nas interesuje, a nie żeby były zastąpione ikonką Webflow. Lokalizacje, language code, te wszystkie rzeczy mają wpływ na SEO. Czy chcemy, żeby na razie nasza strona była website passwordprotected? Czy chcemy ją umieścić w showcase? Czy chcemy zrobić z niej na przykład template, z którego będą mogli korzystać inni czy chcemy mieć branding Webflow – większość z nas pewnie nie.
Zarządzanie członkami i publikacja strony
Mamy membersów, więc będziemy mogli zarządzać membersami naszej strony, dodawać kolaboratorów i tego typu rzeczy. Mamy staging naszej strony to, jak będziemy chcieli ją publikować, tą naszą stronę, 301 redirecty, czyli jeżeli jakaś strona znika powinniśmy zrobić redirect na nową stronę, która ją zastępuje albo gdzieś indziej. Możemy wykupić sobie plany. Tutaj oczywiście będziemy tym zarządzali dla website'u czy dla e-commerce'u.
SEO Webflow, formularze i integracje
Wszelkie ustawienia dotyczące SEO, czyli jak ma działać indexing, jak będzie skonfigurowany robot TXT, sajp mapy, integracje z Google site verification, kanonikale. Ustawienia dotyczące formsów, czy chcemy zrobić reCAPTCHA czy validation, integracje z jakimiś innymi formularzami. Widzieliśmy również wszystkie zgłoszenia przez nasze formularze, mamy spam filtering i tego typu rzeczy.
Library, fonty, backupy i custom code
Library, czyli możemy dodawać jakieś library do naszego Webflow, dzięki czemu będziemy mogli z nich korzystać. Fonty, jeżeli w Webflow nie ma jakiegoś fontu, to możemy go dodać z zewnątrz. Backupy, coś o czym już rozmawialiśmy. Integracje, Google Analytics, Google Optimize, Google Maps, Facebook Pixel. API, Access, Webhooki czy Authorized Apps pozwalają na mega rozszerzenie możliwości stron budowanych w Webflow. Last but not least, dodawanie custom code dla całego sajtu, a nie tylko dla pojedynczej strony.
Podsumowanie - Webflow
Jak widzicie, Webflow to bardzo zaawansowane narzędzie, które pozwala na tworzenie naprawdę interaktywnych, mega szybkich, super działających stron, które naprawdę niczym nie będą się różniły od tych stron stworzonych w custom kodzie. Na marginesie mówiąc, na przykład nasza strona havenodecode.io jest stworzona właśnie w tym narzędziu, więc sami możecie ocenić jakiego typu rzeczy możemy w niej budować, czy one są fajne, dobrze działające i tak dalej. Mam nadzieję, że ten film był dla was pomocny. Do zobaczenia w kolejnych. Żegnajcie!
