Nuxt.js: Implementacja różnych wersji językowych

0:00Więc w tej lekcji zajmiemy się tłumaczeniem naszego Jurija.

0:03Jest to troszkę taka monotonna praca, ale

0:06faktycznie efekty są tego warte, w związku z czym przejdźmy od razu do roboty.

0:11Skończyliśmy na tym, że przygotowaliśmy sobie plik z tłumaczeniami po angielsku.

0:16On tutaj jeszcze nie jest do końca gotowy, ponieważ po pierwsze nie jest to poprawny

0:20Jackson, czyli tutaj, jeśli sobie stworzymy.

0:24Kilka kursorów Shift option bądź control oraz klik zaznaczy nam kilka rzeczy.

0:31I tutaj możemy po prostu na koniec

0:32postawić przecinek i dzięki temu jest to poprawny obiekt.

0:38Jackson nie jest to faktycznie player, ale jest to obiekt skryptowy,

0:42w związku z czym następnie będziemy musieli przetłumaczyć wszystkie klucze.

0:46Ja tutaj się postaram trzymać paska Lukasa, to znaczy będę się

0:50pozbywał spacji z każdej jednej wartości klucza i będę robił większą literę

0:58każdego pojedynczego słowa, w związku z czym może to troszkę zająć.

1:01Ale jeśli faktycznie

1:03skupimy się tylko i wyłącznie na tym, nie będzie z tym problemu.

1:06Natomiast tłumaczenie treści jest to też

1:08bardzo szeroki temat i wymaga pracy wielu osób, a tak naprawdę

1:14jako developerzy niekoniecznie powinniście zajmować się tłumaczeniami.

1:17Warto jest właśnie przekazywać takie pliki tłumaczeń odpowiednim osobom, które po

1:22prostu Wam je przygotują dla różnych wersji językowych.

1:25Odpowiedzialnością developera powinno być

1:28programowanie, a niekoniecznie praca w taki sposób przygotowywanie kluczy.

1:33Być może jeszcze chociaż

1:36różne narzędzia typu CMS powinny rozwiązać takie problemy na zasadzie, że

1:42musicie wejść w jakiś plik, bo ktoś nie ma do tego dostępu.

1:46I widzimy, że całkiem szybko nam się udało to zaktualizować i w związku z czym mamy

1:52teraz taki plus, że będziemy w stanie zmienić tutaj treść tych tłumaczeń

1:58w innych plikach dosyć szybko, więc jeszcze raz Shift alt klik.

2:05Zaznaczamy kilka.

2:07Wiersze.

2:09Kopiujemy czy możemy cały plik skopiować?

2:11Nie ma to znaczenia na tym etapie wklejamy tutaj.

2:16Podmieniamy tylko.

2:19Biegnij do hiszpańskiego i całą resztę możemy sobie przetłumaczyć w trakcie.

2:25Czyli tutaj kopiujemy, przejdziemy sobie do Google Translate.

2:30Kopiujemy język hiszpański.

2:34Tutaj sobie to wkleiłem, żeby nie uciekło.

2:37No i w tym momencie to co wypadałoby zrobić to zaznaczyć sobie wszystkie te.

2:422 kropki, bo to jest takie miejsce, po którym możemy zrobić jeden kursor w prawo.

2:47Ja tutaj zrobiłem ponownie control D bądź komendę aby zaznaczyć kilka.

2:52Czyli w tym wypadku wszystkie 2 kropki.

2:56I usuwam wszystko do końca linii i wklejam to, co skopiowali śmy sobie z.

3:03Google Translate.

3:05Jeszcze troszkę cofniemy, pozbędziemy się tego jednego, ale nie udało się.

3:10Jeden za dużo.

3:12Udało mi się zaznaczyć dwukropek.

3:15OK.

3:16Teraz usuwamy i wklejamy wszystkie wartości.

3:20Super!

3:20Dodajemy przecinek na końcu zapisujemy i mamy już drugi plik językowy ukończony.

3:27Pozostał jeszcze francuski, więc ponownie kopiujemy.

3:31Wklejamy tutaj, zmieniamy na.

3:34Wręcz.

3:38Francuskiego niestety nie jestem w stanie czytać, więc nawet nie będę próbował.

3:42Aby nie kaleczyć tego pięknego języka

3:44i przejdźmy do francuskiej wersji językowej.

3:48Tutaj możemy ręcznie zmienić wielką.

3:52Z powrotem na wartość z wielkiej litery.

3:57I teraz ponownie.

3:59Wklejamy tutaj wartości.

4:02Potrzebujemy również klucze.

4:06W związku z czym przejdźmy do języka angielskiego.

4:11Tutaj dodajemy przecinek, bo zabrakło.

4:14Skopiuj wszystkie klucze tym razem.

4:18Shift option

4:20w lewo, aby zaznaczyć wszystko do końca bądź page start czy odwrotność dla NDA.

4:29I w tym momencie wracamy do francuskiego.

4:31Wklejamy tutaj wszystkie klucze.

4:34Ponownie zaznaczamy wszystko.

4:36Tutaj jest trochę nauki takiej pracy z kodem tak naprawdę,

4:40ale wydaje mi się, że jest to całkiem przyjazna i przydatna umiejętność.

4:45Na pewno jest przyjaznym edytorem tekstu.

4:52Kopiujemy wszystkie treści.

4:54Tutaj widzę, że może być problem z niektórymi wartościami, ponieważ

4:59w języku francuskim mamy tutaj apostrofy w tych słowach.

5:02Ale zobaczymy.

5:03I po prostu tutaj wklejamy wartość, a to możemy sobie skopiować.

5:10I w tym momencie nie psuje nam się nasz widok.

5:14Wstręt.

5:15I tak naprawdę to powinno być tyle. Możemy to zapisać.

5:18Wszystkie nasze pliki językowe powinny być już zapisane i to co musimy teraz zrobić,

5:22to zaktualizować nasz layout, bo to właśnie w layoucie znajdują się te pola.

5:26W związku z czym jak to zrobić?

5:28To jest ciekawe zadanie.

5:31Jest to dosyć manualna troszkę praca też,

5:33ale myślę, że jeżeli się sprężyć pójdzie nam to całkiem sprawnie.

5:37W takim razie klucz translacji

5:40tutaj sobie to kopiujemy i będziemy na bieżąco poprawiać.

5:43Patch Wąsy, wąsy.

5:47Aha, funkcja do tłumaczeń

5:51zamykanie, więc warto jest właśnie pracować nad tłumaczeniami na samym

5:55początku, ponieważ później im większa jest Wasza aplikacja, tym ciężej będzie je

5:59wprowadzić ze względu na ilość danych, które trzeba przetłumaczyć.

6:03Oczywiście ma się to troszkę inaczej jeśli

6:05pracujemy z API, więc to jest akurat troszkę prostsze.

6:10Natomiast tak czy siak używanie kluczy translacji to jest coś co musimy robić.

6:15Tak czy siak jako developerzy i wstawiać to w odpowiednie miejsca.

6:18Chyba, że mamy faktycznie na tyle szeroki CMS rozbudowany, czyli system zarządzania

6:23treściami, że nie musimy tego po prostu robić.

6:26Niestety nie zawsze tak jest.

6:28Często zdarza się, że developerzy muszą robić tego typu poprawki.

6:31W związku z czym jeżeli Wasz projekt jest na takim dosyć młodym etapie,

6:36to warto jest zwrócić na to uwagę, aby tłumaczyć treści jak najszybciej.

6:41Po prostu będziecie w stanie.

6:43Zanim dokończę całość, to może zobaczmy, czy to w ogóle nam się za aplikowałam.

6:50Czyli zapisaliśmy.

6:51To przejdźmy do Wikipedii, wejdźmy na język francuski

6:55i faktycznie widzimy, że część treści już nam się tłumaczy.

6:58Więc niesamowita sprawa.

7:00Zawsze uwielbiałem właśnie takie sytuacje, gdzie po ciężkiej pracy

7:05widać efekty tego co robiliśmy i widać, że faktycznie było to tego warte.

7:10Oczywiście w naszym przypadku będzie to o tyle problematyczne, że nie będziemy w

7:13stanie przetłumaczyć naszego działania na wszystkie możliwe

7:17języki, których Wikipedia będzie wspierała.

7:19Albo jeżeli będziemy w stanie, to

7:21oczywiście nie chcielibyśmy tego robić tutaj.

7:23Podczas tego kursu.

7:27No ale gdy zaktualizuje nasze API w taki

7:30sposób, aby ono się też tłumaczyło w momencie gdy zmieniamy wersję

7:35językową danej strony, to efekt będzie niesamowite.

7:40Wydaje mi się, że już niewiele nam brakuje, aby ukończyć tworzenie kluczy.

7:46Moglibyśmy zrobić tutaj jakieś max masy i

7:49bądź różnego rodzaju wyrażenia regularne, aby wyłapać te

7:54klucze i je też przekonwertować na odpowiednią formę.

7:58Ale widzę, że faktycznie już kończymy, więc nie ma to większego sensu.

8:02Czasami prościej jest

8:04poświęcić chwilkę na taką w cudzysłowie małpę pracę, bo stworzenie rozwiązania,

8:10które będzie powiedzmy dynamiczne może nam zająć powiedzmy parę godzin, a my jesteśmy

8:16tak naprawdę w stanie przetłumaczyć ten konkretny przypadek w ciągu kilku minut.

8:22Nie sądzę, aby nasz skrypt napisać zająłby aż tak długo jak parę godzin, ale

8:28są takie przypadki, w związku z czym dokończymy to w ten sposób.

8:31Interesującym aspektem jest też to, że oczywiście jak już będziemy mieli

8:35przetłumaczone treści, to możemy to w HTMLu też odpowiednio oznaczyć.

8:40Jest taki atrybut lang w HTML u,

8:43o którym ja też mówię dużo w moim kursie dotyczącym accessibility.

8:47I jest to o tyle istotne, że Google czy

8:49inne wyszukiwarki internetowe też również na to zwracają uwagę, ponieważ jest to

8:52dosyć istotna rzecz lokalizacja naszych treści.

8:55Więc dzięki pracy z accessibility, dzięki pracy, którą tutaj wykonujemy na potrzeby

9:03tłumaczenia treści, zyskujemy na wielu frontach.

9:06Nie tylko bezpośrednia zyskuje na tym użytkownik, co jest tak naprawdę chyba

9:10najważniejszą, wyniesioną z punktu widzenia moralnego, że tak powiem.

9:15Natomiast, ale zyskujemy też my i nasz

9:17projekt, ponieważ Google priorytety daje kontent, który jest dobry dla użytkownika.

9:21Nie, żadne keyword i Word są popularne, były popularne w tym momencie.

9:26Oczywiście się od tego na szczęście

9:27odchodzi, ponieważ spełniały pewne założenia potrzeb użytkowników.

9:33Więc jeśli pracujemy SEO, warto też

9:36po prostu pamiętać o użytkowniku jak o tym, aby on był w centrum, a wtedy zyski

9:42czy to materialne czy moralne przyjdą same.

9:44I chyba jest to ostatni klucz, który powinniśmy tutaj przetłumaczyć.

9:48Języki będziemy tutaj deklarować dynamicznie.

9:52Oczywiście nie wszystko będzie przetłumaczone.

9:54Jeszcze zostało nam

9:55register, które swoją drogą jest stroną martwą, tzn nie przekierowuje do żadnej

10:01podstrony, więc moglibyśmy się tego pozbyć i po zapisaniu.

10:05Mam nadzieję, że wszystko poszło ok.

10:06Troszkę nam to zajęło kilka minut i

10:09przechodząc na wersję francuską tłumaczy się cała nasza lewa kolumna.

10:14Po wejściu na wersję hiszpańską tłumaczy się cała kolumna na język hiszpański.

10:20W związku z czym to, co będziemy robić na następnej lekcji to po pierwsze

10:24dynamiczne generowanie tychże języków oraz dynamiczne tworzenie

10:29treści w odpowiedniej wersji językowej dla naszych dynamicznych podstron.

10:33Czyli tutaj. Jak na przykład wejdziemy na stronę

10:35Janusza Korczaka, to jeżeli będzie ona dostępna np.

10:38po hiszpańsku, to będziemy mieli zarówno

10:41treść w języku hiszpańskim tutaj, jak i w samej treści artykułu.

10:47W związku z czym do zobaczenia w kolejnej lekcji.

10:50To tyle jeśli chodzi o next?

10:52Internalizacji moczu.