Aplikacje no-code z Bubble: Jak pracować z video?

0:00Mam nadzieję, że sekcja newslettera nie

0:02sprawiła Ci zbyt dużych problemów i nie musiałeś zbyt często

0:05posiłkować się moim edytorem, a jedynie naszym projektem wzorcowym.

0:11Dodatkowo oczywiście tak jak obiecałem,

0:13rozwiązanie zagadki, czyli jak pogrubić część tekstu.

0:16W naszym przypadku powinien być to tekst Start learning.

0:19W środku całego tego tekstu.

0:22Jeżeli udało Ci się odgadnąć, że wystarczy

0:24wykorzystać tutaj Rich Text Editor, to jestem z Ciebie niesamowicie dumny.

0:29Jeżeli nie, to trudno.

0:30Zaraz pokażę Ci jak z tego skorzystać.

0:33Wystarczy, że kliknę tutaj.

0:36I dostaje taki bardzo prosty edytor, którym mogę np.

0:39zaznaczyć sobie część tekstu.

0:43Kliknąć BE jak pogrubienie, czyli bold.

0:47Kliknąć save.

0:48I to wszystko.

0:50Wyskakują nam tutaj takie dziwne oznaczenia B w kwadratowych nawiasach.

0:54Jest to tzw.

0:55BBCode, z którego kiedyś się korzystało, aby właśnie np.

1:00trawić sobie tutaj cały ten tekst, albo

1:02właśnie pogrubić lub dodać ikonki, ponieważ zobacz co się stało.

1:07Jak widzisz korzystamy tutaj z tego tekstu

1:09z zasadzie ze stylu dla tekstu body M14, ale pojawia się tu taki napis Override.

1:14Dlaczego? Zerknijmy na cały ten styl.

1:17Co tam się dzieje w środku?

1:20Mamy przede wszystkim tekst wyrównany do lewej strony.

1:24Kolor Neutral 600. OK.

1:27A co się dzieje w naszym designie?

1:30Koncentrowaliśmy ten tekst i jeszcze zmieniliśmy kolor.

1:33Jakiś czas temu Babel, kiedy tworzyliśmy

1:36style, nie pozwalał w żaden sposób ich nadpisać w bardzo prosty sposób.

1:40Czyli ja bym tutaj właśnie chciał

1:42zastosować rejestrowany tekst jeszcze w kolorze białym, to musiałem najczęściej

1:47właśnie albo korzystać z BBCode u, czyli poprzez Rich Text Editor

1:50zaznaczyć sobie taki tekst wyceny, ować i jeszcze dodatkowo zmienić mu kolor.

1:55Mogę to zrobić właśnie w tym miejscu

1:58i dopiero wtedy właśnie tak odpisywał bym sobie ten styl.

2:01Natomiast teraz wystarczy, że właśnie tutaj zmienimy te wartości pod spodem.

2:05Dalej jest to nasz styl, a my tylko zmieniliśmy to co potrzebowaliśmy.

2:10Ja nadpisuje najczęściej wyrównanie oraz kolor tekstu.

2:15Nie nadpisuje grubości, nigdy nie nadpisuje wielkości fontami rodzaju fontu,

2:20ponieważ to jest zawarte w samym tym stylu.

2:23Natomiast dlaczego nie nadpisuje grubości fontami?

2:26Ponieważ w zależności od tego, z jakiego fontu korzystamy.

2:30Nie wszystkie te wartości są zawsze dostępne.

2:32Mamy je wszystkie od setki do 900.

2:34Natomiast często te wartości są

2:35ograniczone albo w zależności od kąta różnica pomiędzy np.

2:39500 600 jest praktycznie zerowa.

2:42No i wtedy musiałbyś, żeby wyróżnić ten

2:45tekst troszkę inaczej, namierzać wszystkie te style i poprawiać to ręcznie.

2:49Dlatego ja po prostu tworzę sobie jak

2:51widzisz tutaj osobny styl dla grubości 500 osobny style 400.

2:56Jeżeli okaże się, że między np 500 600 nie

2:59ma żadnej różnicy, to wystarczy, że przejdę do edycji stylu i np.

3:02zamiast 600 zastosuję 700 800 i wtedy poprawi mi się to wszędzie.

3:07Z takiego stylu skorzystałem i to dużo

3:09prostsze niż po prostu nadpisanie tej grubości.

3:11Potem próba namierzenia tego wszędzie na naszej stronie i poprawiania ręcznie.

3:16Skoro to mamy już wyjaśnione,

3:19to przejdźmy w takim razie do naszego projektu wzorcowego.

3:22Co my tutaj mamy?

3:23Odświeżamy sobie.

3:26A mamy tutaj sekcję z wideo, a więc nagłówek.

3:30Żadnego tła.

3:32Nagłówek, tekst oraz element video.

3:35Super prosta sekcja.

3:36A więc wracamy do edytora.

3:40Standardowo wrzucamy grupę.

3:43Znów umieścimy ją na samym końcu, czyli may class.

3:48Będzie to oczywiście kolumna, ponieważ wystarczy nam sam container.

3:551200 pikseli standardowo wyśrodkować.

3:5996.

4:00Padding. 32.

4:03Z lewej i z prawej strony.

4:07Mogę po prostu skopiować znów całą tą grupę.

4:11A widzisz, Babel bardzo często kopiujemy i jest to jak najbardziej dobra rzecz.

4:16Jeżeli jesteś programistą, na pewno znasz

4:17zasadę drill others, czyli nie powtarzaj się Babel.

4:20Te elementy się powtarzają, a więc bardzo często po prostu będziemy kopiować

4:23elementy i używać je w różnych tutaj sekcjach.

4:28A więc wklejam, jedynie poprawiam wartości tekstowe.

4:39W tym przypadku to mi wskoczył jakiś BBCode.

4:42Mogę go usunąć?

4:45Czyli Atari Waiting For.

4:52I jeszcze. Ten tekst.

4:59To mamy.

5:00A więc pozostaje nam dodanie elementu wideo.

5:03Wybieramy go tutaj.

5:05Stawiamy.

5:06Chcemy go przede wszystkim wyśrodkować.

5:09Tutaj.

5:11I jak widzisz, tych opcji tu do wyboru nie ma zbyt wiele.

5:14Tak naprawdę

5:15mamy tylko dwa źródła, z którego możemy dawać to video, a jest to YouTube i Vimeo.

5:21Wykorzystamy YouTube'a, natomiast dla Vimeo ta opcja jest dokładnie taka sama.

5:24Musimy przekazać po prostu ID takiego video.

5:27Wróćmy więc do YouTube'a.

5:29Przejdźmy sobie.

5:31Do tego pliku, którego ja z korzystać i z URL a.

5:36Wyciągam tą wartość na samym końcu.

5:38To jest właśnie hit naszego video.

5:42Wracamy.

5:44Edytora to wartość po prostu wpisujemy tutaj.

5:47To wszystko,

5:49to możemy jeszcze ustalić, żeby to video było automatycznie włączane przy

5:52załadowaniu się strony, aby odpalało się od początku kiedy się skończy.

5:56Nas te opcje nie interesują.

5:58To ze stylów tak naprawdę mamy tylko border i opacity.

6:02Ja chcę zaokrąglić narożniki o 8 pikseli.

6:06Opacity zostawiamy na 100%.

6:09Nie dodajemy żadnego tutaj shadow style.

6:11To nas nie interesuje.

6:13Nazwijmy to po prostu.

6:17Maj video.

6:20Może być i tak.

6:22Ta cała sekcja powinna się nazywać po prostu Video Container.

6:31Oczywiście grób.

6:32Nie zapominajmy o.

6:35Ja.

6:39IDEO Top Group.

6:41Tutaj chcę nadać dla całego kontenera odstęp rzędu 64 pikseli.

6:49I teraz wracamy do wideo.

6:52Przechodzimy do sekcji Layout.

6:55To co chcę zrobić, to odznaczyć tutaj te stałe szerokość, stałą wysokość.

7:00Jak pamiętasz dla obrazków najczęściej

7:02stosowaliśmy jeden do jednego, jeżeli zależało nam na właśnie na kwadratach.

7:07A mówiłem Ci, że dla landscape jest to 3 do dwóch, a od 2 do 3 dla trybu portret.

7:14W przypadku wideo jest to jest prostsze, ponieważ zawsze stosujemy tylko i

7:18wyłącznie jedno aspect ratio równe szesnaście na dziewięć.

7:23Dzięki temu zachowasz właśnie odpowiednie wymiary takiego wideo.

7:28Nie potrzebujemy tutaj minimalnej szerokości.

7:31Ona niech nam się rozciąga na całą dostępną szerokość elementu rodzica.

7:36I możemy sobie teraz podejrzeć, jak się tutaj cała ta nasza sekcja prezentuje.

7:44Jak widzisz wszystko działa.

7:46Mamy nagłówek, mamy wideo.

7:47Babel odpowiednio to wczytał, ponieważ przekazaliśmy właściwe ID.

7:52I tak naprawdę tyle mieliśmy tu do zrobienia.

7:54Gdybyś chciał wstawić wideo z innego

7:56serwisu niż te, które masz tutaj dostępne, to niestety przy tym elemencie się nie da.

8:01Musielibyśmy przejść do sekcji plugins

8:04add plugins, wpisać tutaj video i miałbyś wykorzystać ten plugin, który

8:09pozwala Ci jak widzisz wstawić tutaj dowolne video z URL.

8:13Jest tu też jeszcze kilka innych.

8:14Możesz sobie przejrzeć te pluginy pod video.

8:17Ja najczęściej po prostu korzystam właśnie

8:19z YouTube'a albo Vimeo, więc nie potrzebuję innych.

8:23Ale jak mówię, gdyby zaszła taka potrzeba, to wiesz gdzie to zmienić.

8:27A ja dziękuję Ci za uwagę.

8:28I w kolejnej sekcji.

8:30Dalej porozmawiamy sobie o tym, jak

8:32działają element na przykładzie właśnie sekcji bloga.