Strony WWW bez Kodowania: Publikacja Strony

0:00Myślę, że na tym etapie możemy już spróbować spróbować opublikować naszą stronę, a później

0:03zajmiemy się jeszcze przygotowaniem trochę lepszym tej strony z podziękowaniem.

0:07W momencie gdy kliknąłem

0:09na Sign Up zostałem przekierowany na takie podsumowanie.

0:12W zasadzie chyba zmienia się tylko ta górna część.

0:14No i obrazek, który znajduje się tutaj w

0:15tle jest jeszcze dodatkowo rozmyte, więc prosta sprawa.

0:18Spróbujemy sobie też za embedować wideo, ale zaraz to zrobimy.

0:21Najpierw spróbujmy taką stronę zapisać.

0:23Oczywiście przed zapisaniem możemy

0:24podejrzeć jak ona by wyglądała w wariancie mobilnym.

0:28No i jest całkiem nieźle, bo automatycznie

0:31Carrd radzi sobie z dostosowaniem tego i np.

0:33w wariancie mobilnym zobacz, że wyświetla nam trochę inaczej formularz,

0:36ale właśnie tak, że jest on zoptymalizowany pod telefony.

0:39No to super, spróbujmy to opublikować.

0:42Publikujemy z pomocą,

0:43przejdę do widoku desktopowego tej dyskietki Publish this Site.

0:46No i mamy tutaj kilka ustawień.

0:48Główne ustawienia publikacji to tytuł naszej strony.

0:51Wpisuję tu Slack Hello World.

0:53To jest dosyć istotny,

0:54istotna rzecz z punktu widzenia

0:55pozycjonowania optymalizacji naszej strony pod SEO.

0:58Ponieważ tytuł jest ważny dla robotów

1:00indeksujących wyszukiwarki, warto, żeby znalazły się tam jakieś słowa kluczowe

1:04i dodatkowo powinien być możliwie krótki i zwięzły.

1:06On pojawi się w Google np.

1:08w momencie, gdy wpisujesz jakąś frazę

1:10zapytania, on pojawi się jako link do Twojej strony.

1:12Więc to jest niezwykle ważne, aczkolwiek na samej stronie on nie będzie widoczny.

1:15Będzie widoczny w pasku adresu

1:17przeglądarki i jest to znacznik Title na stronie.

1:19Kolejna rzecz to Description.

1:22Również istotne z punktu widzenia wyszukiwarek nie będzie widoczne tutaj na

1:25stronie, ale będzie pojawiało się jako opis.

1:28Jeżeli w Google wyszukasz, Twoją stronę ona

1:30będzie w wynikach to pojawi się jako opis pod linkiem, więc teoretycznie nie ma on

1:35jakiejś supermocy pozycjonujących, więc nie ma co tam wsadzać

1:37nie wiadomo ilu słów kluczowych, ale warto

1:41taki description zrobić w ten sposób, aby był jakby zachęcał osobę do kliknięcia.

1:45On oczywiście może być dłuższy niż tytuł,

1:47w tytule kilkadziesiąt znaków.

1:49W Description ok. tam 150 chyba znaków

1:52możemy umieścić, aczkolwiek

1:53możesz to sobie oczywiście jeszcze sprawdzić i po wypełnieniu tych pól mamy

1:57jeszcze do dyspozycji ten URL, pod którym mamy to opublikować.

2:02Czyli możemy skorzystać z subdomeny na Carrd.co i to jest taki domyślny wybór.

2:06Nazwę tej subdomeny możemy sobie tutaj wpisać np.

2:09Slack.

2:10Zobaczymy czy jest wolna i okazuje się, że tak.

2:13Więc spoko, a gdybyśmy chcieli możemy też

2:16wybrać custom'ową domenę, czyli naszą własną domenę.

2:19Będę pokazywał to później jak taką domenę tutaj spiąć.

2:22Albo możemy to zapisać jako szkic.

2:24Jeżeli byśmy chcieli tylko zapisać postępy pracy w tym momencie, to możemy zapisać to

2:29jako szkic, inaczej automatycznie się to nie zapisuje.

2:31Więc ważna sprawa.

2:33Jeśli chcemy to od razu opublikować nie ma

2:35problemu, zawsze będziemy mogli zrobić tzw.

2:37republish, czyli po prostu opublikować to ponownie.

2:40No i teraz dostaniemy informację o tym, że mamy jakieś nie skonfigurowane elementy.

2:44Znowu go to element.

2:46Sprawdzamy, który z tych elementów jest nie skonfigurowany.

2:49Wygląda na to, że na tym Thank you page'u

2:51znajduje się jakieś tło, które jest niezdefiniowane.

2:54Wtedy będzie na nas Carrd krzyczał, więc zamiast Image ja po prostu ustawię None,

2:58brak tła.

2:59Wybieram polecenie Done i teraz powinno mi się udać zapisać to i opublikować.

3:05No i rzeczywiście tak jest.

3:06Strona zaraz będzie dostępna dla wszystkich na świecie.

3:08Pod adresem Slack.carrd.co, możemy

3:12wybrać polecenie View Site, żeby otworzyć to w nowej zakładce.

3:16No i jest dokładnie tak, jak zaprojektowaliśmy.

3:19Nic tutaj się nie zmieniło.

3:20Możemy zaraz tutaj dodać jeszcze jakieś fajne efekty.

3:22Jedyna rzecz, którą będziemy musieli

3:24poprawić to Footer i jak widzisz ta strona się wyświetla.

3:27Ona nie powinna się wyświetlać, bo to jest nasze Thank you section.

3:30Ona powinna się wyświetlać dopiero wtedy jak ktoś kliknie i wypełni formularz.

3:34Ale ponieważ zrobiliśmy Footer start, czyli

3:36Footer marker powyżej tego, tu jest informacja, że wszystkie elementy poniżej

3:39będą widoczne jako Footer, więc powinniśmy to po prostu przerzucić na Footer.

3:43Wybieram Thank you section i przerzucam

3:45powyżej Footer'a i tak samo przerzucę sobie zawartość.

3:47Po prostu Footer powinien być ostatnią,

3:49ostatnim elementem w kolejności na

3:51stronie, bo wszystko co jest pod nim właśnie będzie należeć do Footer'a.

3:54I tak samo z Header'em. Header powinien być pierwszy na stronie i

3:56wszystko co jest nad tym znacznikiem będzie należeć do Header'a.

4:01Więc teraz jeśli mamy takie zmiany

4:02zrobione to znaczy, że Carrd pozwoli nam opublikować zmiany.

4:06Będziemy tu mieli publish changes, więc publikujemy zmianę.

4:10Teraz będziemy mogli zobaczyć tą samą stronę i ją po prostu odświeżyć.

4:14Wybieram Command R

4:15i zobacz, że już na dole pojawił się tylko Footer, a w momencie gdy wypełniłem

4:19formularz musielibyśmy wypełnić go poprawnymi danymi.

4:22Przeszli byśmy do tej strony z

4:24podziękowaniem, a ona też zawierałaby Footer, dlatego, że właśnie to jest cecha Footer'a, że on

4:28wyświetlana na wszystkich takich stronach we wszystkich tych sekcjach.

4:32Teraz mamy Home i Thank you section, a gdybyśmy tego nie chcieli, to

4:35przechodzimy do Thank you section i w jej ustawieniach możemy ukryć Header i ukryć Footer.

4:40Jeśli to jest odznaczone w domyśle tak jest to będzie się ten Footer nasz pojawiał.

4:44Na stronie Than you page jest to zaraz sobie zaobserwujemy.

4:47Jeżeli chodzi o ustawienia publikowania, to całą tą pierwszą sekcję mamy omówioną.

4:51W drugiej sekcji znajdują się ważne pliki pod kątem np.

4:54share'owania w mediach społecznościowych.

4:56Mimo, że ta sekcja jest opcjonalna, jest super ważna i polecam to wypełnić,

4:59ja akurat tutaj przygotowałem jakieś głupie przykładowe screeny.

5:02Wybieram upload i np.

5:03screen site, aczkolwiek warto tutaj

5:05wrzucić naprawdę jakiś fajny screen naszej strony.

5:08Wtedy w momencie gdy ktoś będzie się

5:09dzielił nią na fejsie to pojawi się właśnie taka fajna miniaturka i dodatkowo

5:15mamy możliwość wgrania tutaj favicon'ki i wybieram polecenie upload.

5:18Też zrobiłem jakiś prosty screen, żeby pokazać jak to może działać.

5:22Ona musi być kwadratowa, więc możemy właśnie tak to skadrować.

5:25Wybieramy i tyle.

5:26Aczkolwiek fajnie jakby to był

5:28na samo logo, ponieważ to jest ikonka, która jest bardzo mała.

5:31Wyświetla się w, obok na pasku

5:33przeglądarki, na pasku kart obok nazwy, obok tytułu naszej strony, jak również np.

5:38po zrobieniu sobie jakiejś zakładki i też

5:40będzie widoczna po dodaniu na home screen.

5:43Np. na urządzeniach mobilnych też będzie to

5:45widoczne jako ikona, więc warto też o to zadbać.

5:48I dopóki nie opublikujemy tych zmian, ja pokażę Ci jak mogłoby to wyglądać, bo

5:53skopiuję sobie slack.carrd.co ten adres i mamy coś takiego jak developers.facebook.com

5:57pod tym adresem znajduje się taki Debugger.

5:59Jak to będzie wyglądać

6:01opublikowane na Facebooku.

6:02No warto naprawdę to sprawdzić.

6:03Wybieram polecenie Debug.

6:05I teraz właśnie widzisz, jak będzie to wyświetlać się na Facebooku.

6:07Proszę, zignoruj na razie ten warning.

6:09To nie jest akurat konieczne, żeby umieszczać Facebook app_id tutaj.

6:13Natomiast Facebook sam jakoś ze screen'ował naszą stronę i pobrał tutaj screen, który

6:17nie wygląda zbyt fajnie, bo właśnie jest część jakiejś drugiej sekcji.

6:20Jeżeli sami nie damy mu screen'a, to po prostu sam to zrobi,

6:23za nas, natomiast też są wypełnione

6:26podstawowe dane, takie jak tytuł taki, który się tutaj pojawia Slack Hello World.

6:30Slack Hello World

6:31tak będzie to wyglądało na Facebook'u i Get to knwo Slack,

6:33czyli nasze description, czyli to jest jakby super ważne.

6:35Jak ktoś będzie share'ował na fejsie to zobacz, że zarówno wypełnienie poprawnie

6:40tych pól Title Description, jak i jak i tych, które są tutaj, jak i przejście

6:44do zakładki Media i z upload'owanie obrazka, no pomaga nam zdecydowanie lepiej ten kontent

6:50kontrolować, który się wyświetla w social media, gdy ktoś share'uje.

6:53Jeżeli republikujemy sobie taką stronę, ona już teraz została zaktualizowana.

6:58Możemy spróbować wybrać polecenie Scrape Again,

7:00czyli pobrać tą stronę jeszcze raz i zobaczymy czy ten obrazek się zmieni.

7:05No i jeszcze się nie zmienił, ale zwykle

7:07to Facebookowi zajmuje dosłownie kilka minut, żeby zaktualizować tą naszą stronę,

7:10więc kilka razy jeszcze to sobie kliknę i pewnie dostanę właściwe dane.

7:14O właśnie, no i już jest zdecydowanie lepszy obrazek, czy przynajmniej taki, nad

7:18którym mamy kontrolę i te dane tutaj też będą się zmieniać.

7:21Także proszę zadbaj o to, aby to poprawnie się tu wyświetlało.

7:24No i przy okazji taki bardzo miękki sposób.

7:27Uczysz się też wszystkich rzeczy, które są

7:28potrzebne na nowoczesnych stronach internetowych, tzn.

7:31oprócz tego, że stworzymy sobie taki

7:33landing page, trzeba pamiętać o tym, że trzeba wypełnić pole Title.

7:37Trzeba wypełnić Description na potrzeby SEO, na potrzeby tego jak to wyświetla się

7:40w Google'u, ale też na potrzeby tych okietag'ów do social mediów Trzeba wypełnić kolejne

7:45rzeczy, które znajdują się w tej zakładce Media przynajmniej ten Favicon oraz Share Image.

7:49To też jest bardzo ważne.

7:51No i uczysz się też takich ważnych koncepcji, które są na stronach.

7:54Mimo, że przykładowo robimy stronę, która jest one page'em, to nauczyłeś się już, że

7:58możemy w niej jakoś dynamicznie wyświetlać dodatkowe sekcje, przykładowo po wysłaniu

8:03formularza, ale także opanowałeś koncepcję tego, że na stronach mogą być takie tak

8:08zwane template'y, szablony, czyli przykładowo możemy mieć szablon Footer'a, który jest

8:13zawsze taki sam i on będzie wyświetlany na wszystkich tych naszych podsekcjach.

8:17Nie będziemy musieli kopiować, wklejać

8:20tego elementu za każdym razem do danej sekcji.

8:22No bo oczywiście moglibyśmy tak zrobić, ale zobacz, że jest to głupie podejście.

8:25No bo wtedy gdybyśmy chcieli zmienić coś w footerze, a mielibyśmy go 10 razy

8:29na każdej podsekcji naszej strony, no to wtedy musielibyśmy dokonać zmiany w

8:3310 miejscach, a tak to zmienimy to raz i będzie działać.

8:37I to jest znowu bardzo podstawowa koncepcja dla osób, które tworzą już

8:40strony, ale dla osób, które zaczynają niekoniecznie, że można właśnie zrobić sobie

8:44takie szablony i w ramach tych szablonów operować i po prostu dołączać je.

8:49Akurat w przypadku Carrd do głównej sekcji

8:51naszej strony jako menu, jako menu i do dolnej sekcji naszej strony jako Footer.

8:56Jeśli chodzi o publikację, została nam do

8:57omówienia ostatnia sekcja, czyli Publish Settings.

9:00I tutaj mamy do wyboru język witryny, który trzeba wskazać, a także pewne opcje.

9:04Niektóre z nich są dostępne tylko w planach Pro.

9:07Przykładowo, zahasłowanie strony nie

9:09będzie można je otworzyć bez wpisania tego hasła, które tutaj użyjemy.

9:13I mamy też możliwość zmiany Update Frequency jeżeli Twoja strona zmienia się

9:17bardzo rzadko, w zasadzie robisz ją raz i prawie o niej zapominasz, to możesz wybrać

9:21tę opcję Weekly i wtedy strona będzie automatycznie cash'owna.

9:24To sprawi, że strona będzie po prostu

9:27ładować się dla użytkowników dużo szybciej, więc warto to zrobić, jeżeli

9:31rzeczywiście nie potrzebujesz dokonywać zmian co chwilę na tej stronie, a nawet

9:34jeśli potrzebujesz, to możesz też ustawić odpowiednie nagłówki przez zmianę tego np.

9:39co 6 godzin.

9:40Musisz mieć świadomość, że w momencie gdy to ustawisz i opublikujesz zmiany,

9:44to te zmiany mogą nie być dla Ciebie widoczne od razu,

9:48tak szybko będziesz musiał pare razy odświeżyć okno

9:50przeglądarki albo wyczyścić sobie pliki podręczne, żeby je zobaczyć.

9:54No ale oczywiście wpłynie to

9:56na szybkość serwowania Twojej strony dla użytkowników.

9:59W momencie gdy projektujesz jeszcze

10:01stronę, lepiej jest po prostu zostawić update Frequency na auto, a w momencie gdy już ją

10:05zrobisz i przestaniesz nad nią pracować, to wtedy zmieniasz to na właściwą wartość.

10:10Tutaj mamy też możliwość wpisania Google

10:11Analytics ID, co pokaże Ci w jednej z kolejnych lekcji.

10:14Jak połączyć to z analityką.

10:16No i tak zwane meta tagi.

10:17Meta tagi są opcjonalne, ale w niektórych przypadkach są nam potrzebne.

10:21Możemy np.

10:22z pomocą meta tagów dodać keywords'y do naszej strony.

10:26Chociaż Google mówi o tym, że już w ogóle

10:28nie bierze tego pod uwagę przy pozycjonowaniu.

10:30To tak naprawdę możemy tutaj dodać dowolne meta tagi.

10:33Możesz o meta tagach dowiedzieć się więcej.

10:36To są takie dane, które opisują jakoś szerzej naszą witrynę.

10:41Takie tagi OG, które robiliśmy dla Facebooka, to

10:44też mniej więcej można je uznać za meta tagi, gdzie dostarczamy jakiś dodatkowych

10:48danych o naszej witrynie i jakieś, jakaś strona z tego korzysta, np.

10:51Facebook i w ten sposób będziemy mogli

10:54tutaj takie custom'owe meta tagi dodawać, czasem jest to potrzebne.

10:57No i to tyle jeśli chodzi o ustawienia

11:00publikacji, o samo opublikowanie naszej strony.

11:03I na teraz to wszystko. A my w kolejnej lekcji dostosujemy jeszcze

11:06tą stronę Thank you page i umieścimy tam wideo.

11:08Do usłyszenia.