Strony WWW bez Kodowania: Dołączanie wideo i własnego kodu

0:00Witaj w kolejnej lekcji, której chciałbym pokazać Ci

0:02jak można przygotować stronę z podziękowaniem.

0:04W zasadzie ta strona z podziękowaniem.

0:06Ona chyba powinna mieć tylko jakieś inne

0:07rozmyte tło i inny nagłówek oraz osadzimy na tej stronie wideo.

0:11No to zabieramy się do pracy.

0:13Wydaje mi się, że moglibyśmy zrezygnować z

0:15tej Thank you section, którą przygotowaliśmy i po prostu znowu zacząć od tego miejsca, czyli

0:20od naszego głównego kontenera, który możemy powielić.

0:23Teraz ten główny kontener po prostu

0:25przesuniemy do tej sekcji Thank you, czyli musimy sobie zjechać nim na dół.

0:30W zasadzie jedna sekcja po kolei.

0:31To jest bezpieczne rozwiązanie.

0:33Wkrótce tutaj dotrzemy.

0:34OK, teraz przeskoczyłem o dwie i się udało, więc spoko.

0:37Usunę tą sekcję, wybieram ikonkę z koszem.

0:39Nie chcę zachować elementów, które były w środku.

0:42No i mamy to mniej więcej gotowe, tzn.

0:45że musimy jeszcze podmienić treści.

0:48Be less busy zmienimy na to co przed chwilą

0:50skopiowałem i jeszcze dodatkowo tutaj możemy dodać

0:55kawałek tekstu, a w zasadzie zmienić ten tekst, który mamy.

0:58No i teraz ta interlinia będzie dla nas trochę problemem.

1:01Line Spacing jeśli to jest rozbite na

1:03dwie linie, więc możemy to zmienić moglibyśmy też zmienić rozmiar tego tekstu, żeby się może

1:07zmieścił w jednej linii, ale nie jest to bardzo istotne.

1:09To co chciałem jeszcze pokazać, bo jest to

1:10w miarę nowa rzecz, to jak moglibyśmy podmienić to tło na trochę inne?

1:14Czyli wybieramy znowu Container

1:17i tym razem w stylach kontenera przechodzimy do sekcji tła.

1:20Chciałbym zupload'ować, ale w ogóle

1:22zupload'uje ten sam obrazek, czyli to samo zdjęcie.

1:26Zauważ, że jak kliknę sobie crop dwa razy

1:29to wtedy będę miał cały obrazek bez cropowania.

1:32To jest dokładnie to o co mi chodzi.

1:34Teraz chciałbym przejść w jego ustawienia, czyli

1:36wcześniej byliśmy w tej zakładce Adjustments

1:38w której znajduje się kolor, saturacja, jasność i kontrast.

1:43A teraz przejdziemy do zakładki tej

1:44kolejnej, gdzie będziemy mogli nadać efekty, czyli np.

1:47zrobić efekt Black and White, odwrócić kolory albo właśnie nadać Blur,

1:51czyli rozmycie i ładne robimy sobie rozmycie mniej więcej takie jak tam było.

1:55No i można powiedzieć, że mamy to.

1:57Nie będę Ci pokazywał jak już tam te kolejne sekcje sobie dorobić.

2:00Myślę, że nie jest to jakoś kluczowe.

2:02Upewnij się jednak, że marginesy.

2:04Czyli wrócę jeszcze tutaj i że marginesy z auto zostaną zmienione na 0.

2:10No i jeżeli to już mamy to pozbądźmy się formularza.

2:13Klikam na form go wyrzucam.

2:14No nie jest potrzebny formularz na stronie z podziękowaniem za wypełnienie tego

2:18samego formularza, ale za to dorzucimy sobie tutaj wideo.

2:21Wybieram plus.

2:22I teraz możemy zrobić to na kilka sposobów.

2:25Mamy tutaj coś takiego jak Video taki

2:26kontener, który możemy umieścić, a następnie upload'ować sobie wideo.

2:31Ewentualnie możemy kliknąć na tą opcję i zmienić to na Embed, czyli dołączyć

2:37jeżeli nasze wideo znajduje się np.

2:39na Youtubie możemy dołączyć tutaj po

2:41prostu link do YouTube, Vimeo, Twitcha zgodnie z tymi formatami, które

2:45Carrd przyjmuje i automatycznie zostanie taki, takie wideo embedowane.

2:50Jest to też opcja, która pozwala na dołączanie tutaj dużych plików wideo, bo

2:54opcja upload ma tylko limitacje do 32 mega.

2:58W związku z tym jeżeli chcemy za embedować

2:59jakiś dłuższy film, to warto to zrobić właśnie w ten sposób.

3:02Możemy tutaj podać link do Youtube zgodnie z tą konwencją.

3:06No i zobacz, że dodatkowo mamy jeszcze możliwość

3:09dodania tu jakiś opcji, czyli włączania automatycznie tego filmu, zapętlenia go,

3:13dodania kontrolek YouTube'owych i YouTube'owych informacji.

3:16To jest wyłączone.

3:17Połączonych wideo, tych related videos, które są wyświetlane i ewentualnie możemy

3:21opcjonalnie zacząć od jakiegoś konkretnego czasu, czyli np.

3:25od pierwszej minuty i dwudziestej trzeciej sekundy.

3:27Ja zostawiłem te nie wypełnione.

3:29No i spróbujmy zobaczyć jak to będzie się

3:30wyświetlać, czyli zapiszemy sobie to i opublikujemy teraz zmianę.

3:35A następnie, zaraz spróbujemy wypełnić formularz na naszej stronie Slack Hello World.

3:41Najpierw trzeba ją odświeżyć koniecznie.

3:43Teraz wypełniłem formularz przykładowymi

3:44danymi i wybieram polecenie Sign Up for Free.

3:47Dostajemy tutaj jakiś taki preloader z animacją.

3:49No i proszę bardzo, pojawia się nasze wideo.

3:52Tutaj umieściłem wideo, oryginalne wideo, oryginalne objaśnienia MVP Dropbox'a.

3:56Slack'a nie znalazłem, ale działa.

3:58Jeżeli kliknę Play to ono zaczyna się odtwarzać.

4:00Mamy kontrolki YouTube'a.

4:03Jeżeli chciałbym zrobić taki, takie coś jak było na stronie Slack'a, że

4:07mamy miniaturkę i dopiero pod spodem jest jakiś, jakieś wideo odtwarzane

4:11mógłbym to zrobić i mógłbym spróbować przynajmniej zrobić to, ale nie

4:15elementem wideo, który teraz mogę usunąć,

4:18a musiałbym spróbować zrobić to trochę inaczej, np.

4:21mógłbym przykładowo dodać tu po prostu obrazek i jako ten obrazek wybierzemy

4:26obrazek, który tam był, czyli landing video thumbnail, coś takiego.

4:30Nie będę tego przycinał, accept.

4:32Po prostu dołączamy to tutaj, a następnie

4:34umieszczamy jako link URL, link do takiego np.

4:38Wideo w YouTube'ie.

4:40Nie ma tutaj jakiejś opcji, żeby to się

4:41wyświetlało chwilowo w jakimś show box'ie czy w czymś takim.

4:46Jeżeli byśmy skorzystali z kolei z

4:48Gallery, też nie ma możliwości umieszczania tam wideo, więc no moglibyśmy

4:52zrobić tak i to kierowało by nas bezpośrednio np.

4:55na to wideo na Youtube'ie albo na jakiejś innej stronie, którą podlinkujemy.

4:59I chyba to jest całkiem dobry pomysł, żeby właśnie tak to zostawić.

5:02Jeszcze jeden ewentualnie komponent, z którego moglibyśmy skorzystać, który

5:06mógłby nam pozwolić dołączyć to wideo to komponent Embed,

5:10chciałbym o nim wspomnieć, ponieważ komponent Embed pozwala nam dołączyć dowolny kod

5:15do naszej strony, czyli możemy kliknąć sobie na jego właściwościach.

5:19I teraz typ tego komponentu może to być iFRAME albo Code.

5:23Jeżeli przykładowo chciałbyś zamieszczać tutaj np.

5:26mapkę Google Maps, możesz wybrać kod

5:28iFRAME, a następnie trzeba po prostu dołączyć URL do takiego iFRAME'a.

5:34A jeśli wejdziemy na mapsgoogle.com

5:36i znajdziemy adres głównej siedziby Slack'a w San Francisco.

5:39Możemy teraz wybrać opcję Share, udostępnij

5:41i możemy właśnie tutaj albo wkleić link, albo umieścić całą mapę za pomocą kodu,

5:46czyli skopiować sobie HTML i możemy przenieść się z iFRAME'a zamiast właśnie z tego

5:49linku to możemy wybrać Code, ewentualnie nadać tu jakiś label czyli map np.

5:56I wybrać Code, a następnie wkleić sobie tutaj tego całego iFRAME'a.

6:01Wybieram polecenie Done.

6:02Żeby zobaczyć jak to działa bym

6:03musiał znowu opublikować stronę.

6:06Wyrzućmy może to na sam dół naszej strony

6:09w ten sposób po to, żebym nie musiał uzupełniać całego formularza.

6:13Teraz sobie publikuję tą stronę i zobaczymy

6:15czy taki iFRAME z mapką udało się nam za embedować.

6:19Otwórzmy.

6:20No i wygląda na to, że jest, działa jako

6:22zembedowana mapa, aczkolwiek w ten sposób możemy naprawdę na nasze strony

6:27wklejać bardzo różnorodny taki custom'owy kod HTML.

6:31Jeśli sami umielibyśmy go pisać to jak najbardziej możemy to zrobić.

6:34Możemy wklejać tutaj jakieś drobne fragmenty kodu typu jakieś

6:37snippet'y JavaScript'owe.

6:38Jeśli będziemy chcieli podpiąć dodatkowe narzędzia to też będę jeszcze pokazywał.

6:42Natomiast możemy też właśnie zrobić to w

6:47przypadku wklejania wideo, ponieważ jeżeli z YouTube'a coś bierzemy czy z np.

6:51Vimeo to też mamy możliwość zembedowania tego w postaci linku czy np.

6:55iFRAME'a, a więc też moglibyśmy ewentualnie tak to zrobić.

6:58Na razie pozbędę się tego elementu, nie będzie mi on potrzebny.

7:01No i finalnie opublikuję naszą stronę w takim stanie jakim ona teraz jest.

7:06Możemy zakończyć tą sekcję, w której udało

7:09nam się omówić w zasadzie te wszystkie najważniejsze składowe, te elementy

7:14całego budowania naszej strony w Carrd i tego jak Carrd w ogóle działa, też w

7:18kontekście np. sekcji, które możemy robić podglądu, publikowania.

7:22Mamy to wszystko za sobą i możemy przejść

7:24do trochę bardziej zaawansowanych rzeczy wokół naszej strony.

7:28Czyli po podpinać tą analitykę czy w jakiś

7:30lepszy sposób obsłużyć formularz z automatyzacją.

7:33A to będziemy robić w kolejnych częściach. Do usłyszenia.