Webflow: Wprowadzenie do Projektu

0:00Witaj w pierwszej części tego kursu, w części, w której chciałbym wytłumaczyć Ci,

0:03czym się zajmiemy w tym kursie, na przestrzeni kolejnych godzin, co będziemy

0:07robić, jak będziemy korzystać z zaawansowanych funkcji Webflow.

0:10Przede wszystkim naszym głównym zadaniem

0:12jest dorobienie dynamicznej strony w Webflow, do tego co przygotowaliśmy

0:16w kursie podstawowym. Mam nadzieję, że przerobiłeś kurs podstawowy, bo

0:20to da Ci naprawdę sporo wiedzy i umiejętności z zakresu panelu styli,

0:24właściwości, pozycjonowania elementów. W tym kursie

0:27już nie będziemy koncentrować się na tych rzeczach, przyjmujemy je za pewnik, więc nie

0:31tracimy czasu na ich zbędne omówienie, aczkolwiek tutaj w tym kursie nie będzie

0:35dużo takich rzeczy, my raczej skupimy się na zupełnie innych funkcjach Webflow,

0:39które płyną z wykorzystania CMS, czyli systemu, który pozwoli nam stworzyć

0:43kolekcje, stworzyć bazę danych, zarządzać wpisami, bo będziemy tworzyli system blogowy,

0:48który dorobimy do tej strony. Tak jak wspomniałem kurs podstawowy na pewno

0:52będzie przydatny, mam nadzieję, że go przerobiłeś,

0:54ale to też nie jest tak, że będziemy

0:56korzystać z jakiejś struktury, która znajduje się na tej stronie, że będziemy

1:00korzystać z elementów, które przygotowywaliśmy wcześniej. Raczej w tym

1:03kursie też wszystko zrobimy od podstaw koncentrując się na zupełnie innych

1:06rzeczach. Nie będziemy omawiali styli, ich dodawania, rozmieszczenia elementów.

1:10Przyjmujemy to za pewnik, ale rzeczy, które

1:13będą nam potrzebne do utworzenia struktury bloga, odtworzymy od podstaw, czyli

1:17zrobimy stronę kategorii, zrobimy stronę wpisu,

1:19przygotujemy także nawet te

1:22kafelki od podstaw, te które znajdują się w sekcji recent articles.

1:26One będą automatycznie zaciągane z bloga, a my przygotujemy sobie

1:29od podstaw w Webflow. To jak wygląda struktura naszego bloga jest przedstawione

1:34w pliku xd, który dołączyłem do plików źródłowych, jest to plik layout.

1:38I tutaj znajduje się strona główna bloga.

1:41Zrobiłem tylko prosty mockup,

1:42ponieważ tutaj nie jest kluczowe to, abyśmy mieli jakieś ?zdetalowane? grafiki, abyśmy

1:47mieli wszystko dokładnie co do piksela ustawione, bo w tym kursie raczej nie

1:51chodzi o odtwarzanie tego, a raczej o to, żeby nauczyć się pracować z CMSem.

1:55Natomiast poglądowo przygotowałem właśnie

1:58tego typu projekt, gdzie mamy pierwszą stronę bloga. Tutaj na samej górze znajduje

2:03się najnowszy artykuł, który jest oznaczony jako artykuł promowany, czyli featured.

2:07Te promowane artykuły mają specjalną,

2:09dodatkową flagę, która pojawia pojawia się również na ich kafelkach.

2:13Mamy tytuł, mamy excerpt, czyli taki krótki podtytuł, czy wycinek treści. Później mamy

2:18możliwość przeczytania artykułu i tutaj będzie się znajdowało zdjęcie artykułu.

2:21Zdjęcia przygotujemy w dwóch rozmiarach: będzie to prostokąt wyświetlany tutaj i

2:25tutaj, jak również zrobimy kwadrat, może na potrzeby mediów społecznościowych.

2:30To jest całkiem niezła opcja. Jeśli chodzi

2:33o dział naszego bloga to są cztery, rozłączne działy, czyli wpisy będą należały

2:37do działu software albo marketing albo mobile albo blockchain.

2:40Jest to zgodne z projektem strony Juice i tym czym ona się zajmuje i następnie mamy

2:46właśnie do tych sekcji, czyli software, marketing, mobile,

2:49z nich będziemy mieli ostatnie, z nich będziemy mieli ostatnio pobrane artykuły,

2:53one trafią do takiej jednej sekcji, a później każdy z działów czyli software, marketing

2:59i blockchain będzie miał osobny taki swój, właśnie takie swoje miejsce na stronie

3:03głównej, gdzie będą listowane trzy najnowsze posty.

3:07No i tutaj też mamy dynamiczne dane do zrobienia czyli tytuł, excerpt,

3:10dodatkowo autora, a także informacja o tym,

3:13w jakiej sekcji ukazał się taki post, no i dodatkowo obrazek oraz tagi.

3:18Chciałbym żeby wyposażyć naszą strukturę, czy strukturę tego bloga, we wszystkie

3:23typowe rzeczy, tak abyś rzeczywiście mógł odtworzyć taką prawdziwą strukturę w CMSie,

3:26gdzie znajdują się posty oznaczone jako featured, znajdują się tagi, mamy

3:31kategorie no i mamy wszystkie detale, szczegóły dotyczące postów.

3:36Myślę, że to będzie w miarę kompletne, więc to będzie strona główna bloga.

3:39Następnie mamy stronę kategorii, czyli jeśli przeniesiemy się np.

3:43do software, będziemy mieli informacje o kategorii software i będą tutaj wszystkie

3:47wpisy, które przypisaliśmy do kategorii software.

3:51Oczywiście z adekwatnym i tagami.

3:53Jeśli jakiś post był oznaczony jako

3:55promowany to będzie miał też tę flagę featured.

3:57No i w końcu widok pojedynczego posta będzie zawierał duże zdjęcie na górze.

4:02Poniżej będzie się znajdowała treść posta, dodatkowo informacja o tym kiedy został

4:06dodany i o autorze, do jakiej kategorii należy.

4:09Mamy tutaj ten excerpt, a następnie samą

4:12właściwą treść posta i po prawej stronie znajdują się moduły. Pierwszy to jest moduł zapisu

4:17do newslettera, drugi moduł będzie pozwalał to udostępnić w mediach społecznościowych

4:21i będę chciał te moduły też zrobić dynamicznie, będziemy mogli wpinać lub

4:25wypinać z poszczególnych wpisów. Na samym dole dorobię jeszcze takie

4:30sekcje, gdzie będą znowu powielane te trzy artykuły, tym razem należące do tej samej

4:37kategorii co wpis, który aktualnie czytamy po to, żeby scrollując na dół można było

4:41sobie wybrać jeszcze jakiś inny artykuł w danej kategorii.

4:44Myślę, że tym sposobem,

4:45uda nam się zrobić taki kompletny system blogowy i jednocześnie szkic i schemat treści

4:50na potrzeby naprawdę wielu rozwiązań, które będziesz realizował z pomocą CMS w Webflow, nie

4:56tylko na bloga, ale też przy rozmaitych stronach firmowych, wizytówkach,

5:00przy stronach ofertowych, usługowych, sprzedażowych, w zasadzie myślę, że będzie to

5:04zestaw uniwersalnych sposobów, gdzie wszystkie tajniki tego Webflow

5:09CMSu poznamy i będziesz mógł później

5:11implementować je w kolejnych projektach. To jak zorganizujemy strukturę będą to

5:16kolejne strony, czyli będziemy pracować na page'ach.

5:19Na razie mamy tylko stronę główną.

5:21Ja stworzyłem także taki style guide, czyli

5:24prostą stronę, gdzie na razie tutaj jest tylko jeden kafelek z

5:29symbolem submenu blog, natomiast my będziemy też w kolejnej części kursu

5:34rozbudowywać sobie ten style guide o rozmaite elementy, które pomogą nam łatwo później

5:39budować każdą kolejną podstronę. Na etapie gdzie mamy jedną stronę główną gotową.

5:45Warto by było już zacząć przygotowywać sobie ten style guide, po to żeby tworząc

5:49kolejne strony można było skorzystać z reużywanych elementów. W jednym z modułów

5:53kursu Adobe xD pokazywałem Ci też jak można w graficznej formie stworzyć style guide, a tutaj

5:58będziemy przekładać go już na HTML, po to żeby każda kolejna strona była tworzona

6:02naprawdę w rekordowym czasie. Więc mamy te dwie proste strony.

6:05Na razie dodamy do tego jeszcze stronę

6:08kategorii bloga, stronę pojedynczego wpisu, później zrobimy jeszcze wyszukiwarkę, ale

6:12to od czego rozpoczniemy naszą pracę to będzie stworzenie właśnie style guide'u.

6:15Czyli dopracujemy sobie style tak, aby mieć już komponenty, z których możemy dalej

6:19korzystać, a dopiero później wykonamy prace związane z dodaniem kolekcji do CMSa,

6:24czyli stworzeniem takiej struktury bazy danych, zaprototypowaniem tego jak

6:29architektura bazy danych powinna wyglądać, czyli jak dane się rozkładają, jakie znajdą się

6:34tutaj kolekcje, jakie będą miały pola, czyli jak opiszemy różne właściwości danych.

6:37To wszystko będziemy robili w kolejnej

6:39części. W tej części natomiast koncentrujemy się jeszcze na przygotowaniu

6:43samego projektu graficznego i layout'cie i zaczynamy od style guide'u.

6:46Do usłyszenia w kolejnej lekcji.