NộI Dung
- 01. Ngọn hải đăng
- 02. Polyme
- 03. Trình khám phá API
- 04. Rung động
- 05. Google GitHub
- 06. Người múa rối
- 07. Hộp làm việc
- 08. Codelabs
- 09. Công cụ màu
- 10. Thiết kế Sprint
- 11. Sách hướng dẫn về Con người + AI
- 12. Trợ lý Google
- 13. Thông tin chi tiết về tốc độ trang
- 14. AMP trên Google
- 15. Google DevTools
- 16. Thiết kế Vật liệu
Làm việc trên web thường có nghĩa là bạn sẽ làm việc với Google theo một số hình thức hoặc hình thức. Và khi Google Chrome đi trước đối thủ, các nhà thiết kế và nhà phát triển cần phải suy nghĩ về cách dự án của họ sẽ hoạt động với trình duyệt. Nó sẽ trông như thế nào? Nó hỗ trợ những công nghệ nào, độ an toàn ra sao và nó sẽ hoạt động như thế nào?
May mắn thay, Chrome cung cấp các công cụ để đảm bảo mọi trang web hoặc ứng dụng sẽ ở trạng thái tốt nhất. DevTools cho phép các nhà thiết kế và nhà phát triển hiểu rõ hơn về một trang web: bạn có thể thao tác DOM, kiểm tra CSS, thử nghiệm trên các thiết kế với chỉnh sửa trực tiếp, gỡ lỗi JavaScript và kiểm tra hiệu suất. (Xem thêm về cách sử dụng các công cụ web này của Google tại đây và nếu bạn đang bắt đầu từ đầu, hãy xem danh sách các nhà xây dựng web hàng đầu của chúng tôi).
Nhưng Google không chỉ cung cấp trình duyệt. Nó có các công cụ và tài nguyên để hỗ trợ gần như mọi khía cạnh của cuộc sống thiết kế và phát triển của bạn. Bạn muốn biết cách cải thiện hiệu suất? Lighthouse ở đây để giúp đỡ. Bạn muốn xây dựng các trang web di động hoạt động tốt hơn? Sau đó, hãy gửi lời chào đến AMP. Bạn đang muốn xây dựng các PWA đẹp? Sau đó, Flutter, Material Design và Workbox đã sẵn sàng để tham gia.
Vẻ đẹp của việc sử dụng các công cụ, tài nguyên, thư viện và khuôn khổ của Google là bạn biết chúng sẽ hoạt động tốt với trình duyệt Chrome - trình duyệt phổ biến nhất trên hành tinh. Để biết thêm các công cụ, hãy xem tổng hợp các công cụ thiết kế web của chúng tôi.
01. Ngọn hải đăng
Hiệu suất là yếu tố quan trọng trong sự thành công của một trang web và Lighthouse là công cụ của Google để cải thiện chất lượng của các trang web (dịch vụ lưu trữ web phù hợp cũng sẽ giúp ích). Vậy bạn sử dụng Lighthouse như thế nào và nó có thể làm gì? Ở dạng đơn giản nhất, bạn có thể chạy Lighthouse từ tab Kiểm tra và chọn trong số các tùy chọn bao gồm máy tính để bàn hoặc thiết bị di động, ngoài các hộp đánh dấu cho hiệu suất, khả năng truy cập và SEO, để tạo báo cáo cuối cùng với các cải tiến được đề xuất.
02. Polyme
Polymer nổi tiếng với công việc của mình với các thành phần web nhưng dự án hiện đã mở rộng danh mục của mình để bao gồm một bộ sưu tập các thư viện, công cụ và tiêu chuẩn. Bao gồm những gì? LitElement là một trình soạn thảo giúp bạn dễ dàng xác định các thành phần web, trong khi lit-html là một thư viện tạo khuôn mẫu HTML cho phép người dùng viết các mẫu HTML thế hệ tiếp theo bằng JS. Ngoài ra, bạn cũng sẽ tìm thấy bộ PWA Starter, thư viện Polymer gốc và các bộ thành phần web.
03. Trình khám phá API
Google có một thư viện API rộng lớn dành cho các nhà phát triển nhưng việc tìm kiếm thứ bạn cần không phải là nhiệm vụ dễ dàng. Đây là nơi Trình khám phá API của Google bước vào để giúp đỡ. Có một danh sách dài có thể được cuộn qua, nhưng để truy cập nhanh hơn, có một hộp tìm kiếm để lọc danh sách API. Mỗi mục nhập liên kết đến một trang tham chiếu với nhiều chi tiết hơn về cách sử dụng API.
04. Rung động
Nếu bạn đang tìm cách xây dựng các ứng dụng đẹp mắt cho thiết bị di động, web và máy tính để bàn từ một cơ sở mã duy nhất thì Flutter có thể dành cho bạn. Trang web là tài liệu tham khảo đầy đủ về cách làm việc và xây dựng với Flutter. Không có một manh mối để làm gì? Tài liệu đưa người dùng từ cài đặt đến tạo, được hỗ trợ bởi rất nhiều mẫu và hướng dẫn.
05. Google GitHub
Như hầu hết mọi người đều biết, GitHub là nền tảng / kho lưu trữ để lưu trữ và chia sẻ mã và tệp. Và thật hạnh phúc khi Google có vị trí của riêng mình trên nền tảng với hơn 260 kho lưu trữ để sàng lọc. Sử dụng bộ lọc để cắt giảm thời gian tìm kiếm của bạn và tiến gần hơn đến kho lưu trữ mà bạn muốn chơi cùng hoặc đóng góp.
06. Người múa rối
Được xây dựng trong Node, Puppeteer cung cấp API cấp cao cho phép bạn truy cập Chrome không đầu - hiệu quả là Chrome không có giao diện người dùng, sau đó các nhà phát triển có thể kiểm soát thông qua dòng lệnh. Vậy bạn có thể làm gì với Puppeteer? Một số tùy chọn có sẵn để tạo ảnh chụp màn hình và tệp PDF của các trang, tự động hóa việc gửi biểu mẫu và tạo môi trường kiểm tra tự động.
07. Hộp làm việc
Nếu bạn đang muốn xây dựng một PWA thì đây là một điểm khởi đầu tuyệt vời. Workbox cung cấp một bộ sưu tập các thư viện JavaScript để thêm hỗ trợ ngoại tuyến cho các ứng dụng web. Tuyển tập các hướng dẫn chuyên sâu trình bày cách tạo và đăng ký tệp service worker, định tuyến các yêu cầu, sử dụng plugin và sử dụng các gói với Workbox. Và cũng có một tập hợp các chiến lược bộ nhớ đệm ví dụ để kiểm tra.
08. Codelabs
Bạn cần hướng dẫn thực tế cho một sản phẩm của Google? Codelabs cung cấp “trải nghiệm viết mã có hướng dẫn, hướng dẫn, thực hành”. Trang web được chia nhỏ thành các danh mục và sự kiện, giúp bạn nhanh chóng và dễ dàng tìm thấy những gì bạn muốn. Nó bao gồm Analytics, Android, Trợ lý, thực tế tăng cường, Flutter, G Suite, Tìm kiếm, TensorFlow và thực tế ảo. Chọn một tùy chọn và nhận mã và hướng dẫn bạn cần để xây dựng các ứng dụng nhỏ.
09. Công cụ màu
Color Tool là một công cụ đơn giản cho phép bạn tạo, chia sẻ và áp dụng một bảng màu ngoài việc kiểm tra khả năng truy cập. Người dùng có thể chọn một bảng màu được xác định trước từ bảng Vật liệu. Chỉ cần chọn một màu và sau đó áp dụng nó vào bảng màu chính, chuyển sang tùy chọn phụ và chọn lại. Cuối cùng, chọn màu văn bản cho cả hai chương trình. Ngoài ra, hãy chuyển sang Tùy chỉnh để chọn màu của bạn. Sau đó, chuyển sang Accessibility để kiểm tra tất cả trước đó là tốt, cuối cùng, xuất bảng màu.
10. Thiết kế Sprint
Bộ công cụ chạy nước rút thiết kế dành cho những người đang học cách tham gia hoặc chạy nước rút thiết kế. Nó có vẻ bao gồm tất cả các cơ sở kiến thức, từ những người lần đầu đến những người hỗ trợ chạy nước rút có kinh nghiệm. Tìm hiểu về phương pháp luận hoặc tiến thẳng vào giai đoạn lập kế hoạch, bao gồm viết tóm tắt, thu thập dữ liệu và nghiên cứu, cũng như những việc cần làm sau sprint. Cũng bao gồm một loạt các tài nguyên như công cụ, mẫu, công thức nấu ăn và tùy chọn để gửi phương pháp của riêng bạn. Ngoài ra, bạn có thể sẽ cần một nơi nào đó để lưu trữ và chia sẻ tài nguyên, vì vậy hãy đảm bảo lựa chọn lưu trữ đám mây của bạn phù hợp.
11. Sách hướng dẫn về Con người + AI
Hướng dẫn này là công trình của sáng kiến Nghiên cứu Con người + Trí tuệ nhân tạo tại Google và mong muốn cung cấp trợ giúp cho những người muốn xây dựng các sản phẩm AI lấy con người làm trung tâm. Cuốn sách hướng dẫn toàn diện được chia thành sáu chương bao gồm các nhu cầu của người dùng, thu thập và đánh giá dữ liệu, các mô hình tinh thần, sự tin tưởng, phản hồi và thất bại duyên dáng. Mỗi chương đều có các bài tập, trang tính kèm theo các công cụ và tài nguyên cần thiết để biến nó thành hiện thực.
12. Trợ lý Google
Đây là nền tảng dành cho nhà phát triển của Trợ lý Google, cung cấp hướng dẫn về cách tích hợp nội dung và dịch vụ của bạn với Trợ lý Google. Nó chỉ cho bạn cách mở rộng ứng dụng dành cho thiết bị di động của mình, trình bày nội dung theo nhiều cách phong phú cho Tìm kiếm và Trợ lý, điều khiển đèn, máy pha cà phê và các thiết bị khác trong nhà và xây dựng trải nghiệm giọng nói và hình ảnh cho loa, màn hình và điện thoại thông minh.
13. Thông tin chi tiết về tốc độ trang
PageSpeed Insights phân tích nội dung web và sau đó đưa ra các đề xuất về cách làm cho nó tải nhanh hơn. Chỉ cần thêm một URL, nhấn nút Phân tích và đợi điều kỳ diệu xảy ra. Kiểm tra Tài liệu để có cái nhìn sâu sắc hơn về cách hoạt động của API Tốc độ trang và cách bắt đầu sử dụng nó.
14. AMP trên Google
AMP là công cụ của Google để tạo các trang di động tải nhanh (hy vọng) sẽ lên đầu bảng xếp hạng tìm kiếm. Tìm hiểu cách tạo các trang web nhanh, ưu tiên người dùng, tích hợp AMP trên các sản phẩm của Google, sử dụng Google AMP Cache để làm cho các trang AMP nhanh hơn và kiếm tiền từ các trang AMP với các sản phẩm khác của Google.
15. Google DevTools
Mọi nhà thiết kế và nhà phát triển đều biết (hoặc ít nhất nên biết) rằng Chrome đi kèm với một bộ công cụ được tích hợp trực tiếp vào trình duyệt. Công cụ dành cho nhà phát triển của Chrome là công cụ lý tưởng để kiểm tra các yếu tố tạo nên một trang, kiểm tra CSS, chỉnh sửa trang nhanh chóng và hơn thế nữa.
Tab Elements là phần giới thiệu về DevTools. Nó hiển thị mã HTML tạo nên trang đã chọn. Nhận thông tin chi tiết về các thuộc tính của từng div hoặc thẻ từ trang đã chọn và bắt đầu chỉnh sửa trực tiếp. Điều này là hoàn hảo để thử nghiệm với các thiết kế. Kiểm tra Bố cục - cho dù bạn đang sử dụng Flexbox hay Grid - và xem các phông chữ có liên quan với các ví dụ và kiểm tra các hoạt ảnh.
Ở những nơi khác, bạn có thể xem và thay đổi CSS. Tab Kiểu trên bảng Thành phần liệt kê các quy tắc CSS đang được áp dụng cho phần tử hiện được chọn trong Cây DOM. Bật và tắt các thuộc tính (hoặc thêm các giá trị mới) để thử nghiệm với các thiết kế. Đây là công cụ hoàn hảo để đảm bảo rằng mọi thứ hoạt động như mong đợi trước khi áp dụng bất kỳ thay đổi nào cho thiết kế trực tiếp.
Bạn cũng có thể gỡ lỗi JavaScript, tối ưu hóa tốc độ trang web và kiểm tra tốc độ mạng. Đây là một mẹo nhanh mà bạn có thể sử dụng để tăng tốc ngay lập tức quy trình làm việc của mình. Đi tới tab Nguồn, nhấp vào Đoạn mã mới và thêm mã được sử dụng thường xuyên. Đặt tên cho đoạn mã và lưu. Lặp lại khi cần thiết. Bây giờ bạn có thể lấy đoạn mã này thay vì viết lại.
Giống như mọi trình duyệt tốt khác, Chrome không ngừng phát triển và mỗi bản phát hành mới lại mang đến những tính năng mới. Tìm hiểu điều gì đang xảy ra trên nền tảng trạng thái Chrome
16. Thiết kế Vật liệu
Sự phát triển có thể được coi là đứa con ưu ái của Google nhưng dù bạn đang làm gì, sáng tạo hay xây dựng, nó cần phải trông đẹp mắt và mang đến cho người dùng trải nghiệm khiến họ muốn sử dụng nó. Material là một bổ sung gần đây hơn cho Google ổn định nhưng là một hệ thống thiết kế đã phát triển thành một phần quan trọng của bộ thiết kế.
Giống như bất kỳ hệ thống thiết kế tốt nào, nó có một bộ hướng dẫn riêng mà bạn cần xem xét trước khi bước vào những thứ thú vị hơn. Tìm hiểu tổng quan về cách sử dụng các phần tử khác nhau, chủ đề Vật liệu là gì, cách triển khai chủ đề và hướng dẫn về khả năng sử dụng bao gồm khả năng tiếp cận. Ở những nơi khác, có một cái nhìn sâu sắc về Material Foundation, bao gồm các lĩnh vực thiết kế chính như bố cục, điều hướng, màu sắc, kiểu chữ, âm thanh, hình tượng, chuyển động và tương tác. Mỗi danh mục tiết lộ những điều nên làm và không nên làm và những nơi bạn nên cân nhắc thận trọng. Để cung cấp ý tưởng về những gì mong đợi, danh mục Bố cục cung cấp các phần về cách hiểu bố cục, mật độ điểm ảnh, cách làm việc với bố cục đáp ứng bao gồm cột, rãnh và lề, điểm ngắt, vùng giao diện người dùng và các phương pháp giãn cách để đặt tên nhưng một số.
Ngoài phần Thiết kế là Thành phần, cung cấp các khối xây dựng vật lý cần thiết để tạo ra một thiết kế. Bao gồm những gì ở đây? Các nút, biểu ngữ, thẻ, hộp thoại, dải phân cách, danh sách, menu, chỉ báo tiến trình, thanh trượt, thanh nhanh (đây là những thông báo ngắn gọn về các quy trình ứng dụng ở cuối màn hình), tab, trường văn bản và chú giải công cụ. Không nghi ngờ gì nữa, một bộ sưu tập toàn diện của các thành phần.
Và các nhà phát triển đã không bị lãng quên, với các chi tiết và hướng dẫn về cách xây dựng cho các nền tảng khác nhau - Android, iOS, Web và Flutter. Và, cuối cùng, có một trang dành riêng cho một loạt các tài nguyên để giúp thực hiện thiết kế bạn đã chọn.
Bài báo này ban đầu xuất hiện trên tạp chí net. Mua số báo 326.
