Zawartość
- 01. Latarnia morska
- 02. Polimer
- 03. Eksplorator API
- 04. Flutter
- 05. Google GitHub
- 06. Lalkarz
- 07. Workbox
- 08. Codelabs
- 09. Narzędzie kolorów
- 10. Sprinty projektowe
- 11. Poradnik Ludzie + AI
- 12. Asystent Google
- 13. PageSpeed Insights
- 14. AMP w Google
- 15. Google DevTools
- 16. Material Design
Praca w sieci zwykle oznacza, że będziesz pracować z Google w jakimś kształcie lub formie. A ponieważ Google Chrome wyprzedza konkurencję, projektanci i programiści muszą przemyśleć, jak ich projekt będzie współpracował z przeglądarką. Jak to będzie wyglądać? Jakie technologie obsługuje, jak jest bezpieczny i jak będzie działał?
Na szczęście Chrome zapewnia narzędzia, dzięki którym każda witryna lub aplikacja będzie działać jak najlepiej. DevTools umożliwiają projektantom i programistom uzyskanie wglądu w stronę internetową: możesz manipulować DOM, sprawdzać CSS, eksperymentować z projektami z edycją na żywo, debugować JavaScript i sprawdzać wydajność. (Dowiedz się więcej o tym, jak korzystać z tych narzędzi internetowych Google, a jeśli zaczynasz od zera, zapoznaj się także z naszą listą najlepszych kreatorów stron internetowych).
Ale Google oferuje więcej niż tylko przeglądarkę. Zawiera narzędzia i zasoby, które pomagają w prawie każdym aspekcie projektowania i rozwoju. Chcesz wiedzieć, jak poprawić wydajność? Lighthouse służy pomocą. Chcesz tworzyć skuteczniejsze witryny mobilne? Następnie przywitaj się z AMP. Chcesz zbudować piękne PWA? Następnie Flutter, Material Design i Workbox są gotowe do działania.
Piękno korzystania z narzędzi, zasobów, bibliotek i frameworków Google polega na tym, że wiesz, że będą one dobrze współpracować z przeglądarką Chrome - najpopularniejszą przeglądarką na świecie. Aby uzyskać więcej narzędzi, zobacz nasze zestawienie narzędzi do projektowania witryn internetowych.
01. Latarnia morska
Wydajność jest kluczowym czynnikiem sukcesu witryny, a Lighthouse to narzędzie Google do poprawy jakości stron internetowych (pomoże też odpowiedni hosting). Jak więc używasz Lighthouse i co może zrobić? W najprostszej formie możesz uruchomić Lighthouse z zakładki Audyty i wybrać jedną z wielu opcji, w tym komputer stacjonarny lub telefon komórkowy, oprócz pól wyboru dotyczących wydajności, dostępności i SEO, aby wygenerować raport końcowy z sugerowanymi ulepszeniami.
02. Polimer
Polymer jest dobrze znany ze swojej pracy z komponentami sieciowymi, ale projekt rozszerzył teraz swój repertuar, obejmując zbiór bibliotek, narzędzi i standardów. Co jest zawarte? LitElement to edytor, który ułatwia definiowanie komponentów internetowych, podczas gdy lit-html to biblioteka szablonów HTML, która umożliwia użytkownikom pisanie szablonów HTML nowej generacji w JS. Dodatkowo znajdziesz również zestaw startowy PWA, oryginalną bibliotekę Polymer i zestawy komponentów internetowych.
03. Eksplorator API
Google ma ogromną bibliotekę interfejsów API dostępnych dla programistów, ale znalezienie tego, czego potrzebujesz, nie jest łatwym zadaniem. W tym miejscu pojawia się Google APIs Explorer, aby zaoferować pomocną dłoń. Istnieje długa lista, którą można przewijać, ale dla szybszego dostępu dostępne jest pole wyszukiwania do filtrowania listy API. Każdy wpis prowadzi do strony referencyjnej zawierającej więcej szczegółów na temat korzystania z interfejsu API.
04. Flutter
Jeśli chcesz tworzyć dobrze wyglądające aplikacje mobilne, internetowe i stacjonarne z jednej bazy kodu, Flutter może być dla Ciebie. Witryna jest pełnym odniesieniem do pracy i budowania z Flutter. Nie masz pojęcia, co robić? Dokumentacja prowadzi użytkownika od instalacji do tworzenia, przy wsparciu wielu przykładów i samouczków.
05. Google GitHub
Jak większość osób wie, GitHub to platforma hostingowa / repozytorium do przechowywania i udostępniania kodu i plików. Na szczęście Google ma własne miejsce na platformie z ponad 260 repozytoriami do przeszukiwania. Użyj filtra, aby skrócić czas wyszukiwania i zbliżyć się do repozytorium, w którym chcesz grać lub do którego chcesz się przyczynić.
06. Lalkarz
Zbudowany w Node, Puppeteer oferuje wysokopoziomowy interfejs API, który umożliwia dostęp do bezgłowej przeglądarki Chrome - w rzeczywistości Chrome bez interfejsu użytkownika, którą programiści mogą następnie kontrolować za pomocą wiersza poleceń. Więc co możesz zrobić z Puppeteer? Dostępnych jest kilka opcji generowania zrzutów ekranu i plików PDF stron, automatyzacji przesyłania formularzy i tworzenia zautomatyzowanego środowiska testowego.
07. Workbox
Jeśli chcesz zbudować PWA, to jest to świetny punkt wyjścia. Workbox udostępnia zbiór bibliotek JavaScript do dodawania obsługi offline do aplikacji internetowych. Wybór szczegółowych przewodników pokazuje, jak utworzyć i zarejestrować plik pracownika serwisu, kierować żądania, używać wtyczek i używać pakietów z Workbox. Istnieje również zestaw przykładowych strategii buforowania do sprawdzenia.
08. Codelabs
Potrzebujesz praktycznych wskazówek dotyczących produktu Google? Codelabs zapewnia „przewodnik, samouczek, praktyczne doświadczenie w kodowaniu”. Witryna jest starannie podzielona na kategorie i wydarzenia, dzięki czemu można szybko i łatwo znaleźć to, czego szukasz. Obejmuje Analytics, Androida, Asystenta, rzeczywistość rozszerzoną, Flutter, G Suite, wyszukiwarkę, TensorFlow i rzeczywistość wirtualną. Wybierz opcję i uzyskaj kod oraz wskazówki potrzebne do tworzenia małych aplikacji.
09. Narzędzie kolorów
Narzędzie Kolor to proste narzędzie, które oprócz sprawdzania dostępności umożliwia tworzenie, udostępnianie i stosowanie palety. Użytkownicy mogą wybrać predefiniowaną paletę z palety Materiał. Po prostu wybierz kolor, a następnie zastosuj go do podstawowego schematu kolorów, przełącz na opcję drugorzędną i wybierz ponownie. Na koniec wybierz kolory tekstu dla obu schematów. Możesz też przełączyć się na Niestandardowe, aby wybrać kolory. Następnie przełącz się na Dostępność, aby sprawdzić, czy wszystko jest w porządku, zanim w końcu wyeksportujesz paletę.
10. Sprinty projektowe
Zestaw Design Sprint Kit jest przeznaczony dla tych, którzy uczą się uczestniczyć lub przeprowadzać sprinty projektowe. Wygląda na to, że obejmuje wszystkie bazy wiedzy, od początkujących po doświadczonych moderatorów sprintu. Dowiedz się o metodologii lub przejdź od razu do etapu planowania, w tym pisania briefów, zbierania danych i badań, a także tego, co robić po sprincie. Zawiera również wiele zasobów, takich jak narzędzia, szablony, przepisy kulinarne i możliwość przesłania własnej metody. Ponadto prawdopodobnie będziesz potrzebować miejsca do przechowywania i udostępniania zasobów, więc upewnij się, że masz dobry wybór miejsca do przechowywania w chmurze.
11. Poradnik Ludzie + AI
Ten przewodnik powstał w ramach inicjatywy People + AI Research w Google i ma na celu pomóc tym, którzy chcą tworzyć produkty oparte na sztucznej inteligencji zorientowane na człowieka. Obszerny przewodnik jest podzielony na sześć rozdziałów obejmujących potrzeby użytkowników, gromadzenie i ocenę danych, modele mentalne, zaufanie, informacje zwrotne i pełne gracji niepowodzenia. Każdemu rozdziałowi towarzyszą ćwiczenia, arkusze robocze oraz narzędzia i zasoby potrzebne do jego realizacji.
12. Asystent Google
To jest platforma programistyczna Asystenta Google, oferująca przewodnik dotyczący integracji treści i usług z Asystentem Google. Pokazuje, jak rozszerzyć swoją aplikację mobilną, prezentować treści na wiele sposobów w wyszukiwarce i Asystencie, sterować oświetleniem, ekspresami do kawy i innymi urządzeniami w całym domu oraz tworzyć wrażenia głosowe i wizualne dla inteligentnych głośników, wyświetlaczy i telefonów.
13. PageSpeed Insights
PageSpeed Insights analizuje treści internetowe, a następnie podaje sugestie, jak przyspieszyć ładowanie. Po prostu dodaj adres URL, naciśnij przycisk Analizuj i poczekaj, aż magia się wydarzy. Zajrzyj do Dokumentów, aby uzyskać lepszy wgląd w działanie interfejsu PageSpeed API i jak zacząć z niego korzystać.
14. AMP w Google
AMP to narzędzie Google do tworzenia szybko ładujących się stron mobilnych, które (miejmy nadzieję) znajdą się na szczycie rankingów wyszukiwania. Dowiedz się, jak tworzyć szybkie witryny przeznaczone dla użytkowników, integrować AMP w produktach Google, używać Google AMP Cache, aby przyspieszyć strony AMP i zarabiać na stronach AMP za pomocą innych produktów Google.
15. Google DevTools
Każdy projektant i programista wie (lub przynajmniej powinien wiedzieć), że Chrome zawiera zestaw narzędzi wbudowanych bezpośrednio w przeglądarkę. Narzędzia Chrome DevTools są idealne do sprawdzania elementów tworzących stronę, sprawdzania CSS, edytowania stron w locie i nie tylko.
Zakładka Elements to wprowadzenie do DevTools. Wyświetla kod HTML, który tworzy wybraną stronę. Uzyskaj wgląd we właściwości każdego elementu div lub tagu na wybranej stronie i rozpocznij edycję na żywo. Jest to idealne rozwiązanie do eksperymentowania z projektami. Sprawdź układ - niezależnie od tego, czy używasz Flexbox czy Grid - i przyjrzyj się pokrewnym czcionkom z przykładami i obejrzyj animacje.
W innym miejscu możesz przeglądać i zmieniać CSS. Karta Style w panelu Elementy zawiera listę reguł CSS stosowanych do aktualnie wybranego elementu w drzewie DOM. Włączaj i wyłączaj właściwości (lub dodawaj nowe wartości), aby eksperymentować z projektami. Jest to idealne narzędzie do zapewnienia, że wszystko działa zgodnie z oczekiwaniami przed wprowadzeniem jakichkolwiek zmian w projekcie na żywo.
Możesz także debugować JavaScript, optymalizować szybkość strony internetowej i sprawdzać prędkość sieci. Oto krótka wskazówka, której możesz użyć, aby natychmiast przyspieszyć przepływ pracy. Przejdź na kartę Źródła, kliknij Nowy fragment i dodaj często używany kod. Nazwij fragment kodu i zapisz. W razie potrzeby powtórz. Teraz możesz pobrać ten fragment kodu zamiast pisać go ponownie.
Jak każda dobra przeglądarka, Chrome stale się rozwija, a każda nowa wersja zawiera nowe funkcje. Dowiedz się, co się dzieje na platformie stanu Chrome
16. Material Design
Programowanie może być postrzegane jako ulubione dziecko Google, ale cokolwiek tworzysz, tworzysz lub budujesz, musi dobrze wyglądać i dawać użytkownikowi doświadczenie, które sprawi, że będzie chciał z niego korzystać. Materiał jest nowszym dodatkiem do stabilnej wersji Google, ale jest to system projektowania, który stał się istotnym elementem zestawu projektowego.
Jak każdy dobry system projektowania, ma swój własny zestaw wytycznych, którym należy się przyjrzeć, zanim przejdziemy do bardziej ekscytujących rzeczy. Zapoznaj się z omówieniem, jak używać różnych elementów, czym jest materiał, jak zaimplementować motyw i przewodnikami użyteczności, w tym ułatwieniami dostępu. W innym miejscu można zapoznać się z Material Foundation, która obejmuje kluczowe obszary projektowania, takie jak układ, nawigacja, kolor, typografia, dźwięk, ikonografia, ruch i interakcja. Każda kategoria zawiera informacje o zaleceniach i zakazach oraz miejscach, w których należy zachować ostrożność. Aby dać wyobrażenie o tym, czego się spodziewać, kategoria Układ oferuje sekcje dotyczące zrozumienia układu, gęstości pikseli, sposobu pracy z układem responsywnym, w tym kolumn, odstępów i marginesów, punktów przerwania, regionów interfejsu użytkownika i metod odstępów, aby wymienić tylko kilka.
Poza sekcją Projekt znajduje się sekcja Komponenty, która zapewnia fizyczne bloki konstrukcyjne potrzebne do stworzenia projektu. Co jest tutaj zawarte? Przyciski, banery, karty, okna dialogowe, separatory, listy, menu, wskaźniki postępu, suwaki, paski przekąsek (są to krótkie komunikaty o procesach aplikacji na dole ekranu), zakładki, pola tekstowe i podpowiedzi. Niewątpliwie obszerny zbiór komponentów.
Nie zapomniano także o programistach, ze szczegółami i samouczkami na temat tworzenia na różne platformy - Android, iOS, Web i Flutter. I wreszcie, jest strona poświęcona wielu zasobom, które pomogą Ci zrealizować wybrany projekt.
Ten artykuł ukazał się pierwotnie w magazynie net. Kup numer 326.
