Kandungan
- 01. Rumah Api
- 02. Polimer
- 03. Penjelajah API
- 04. Bergetar
- 05. Google GitHub
- 06. Boneka
- 07. Peti Kerja
- 08. Codelab
- 09. Alat Warna
- 10. Reka Bentuk Pecut
- 11. Buku Panduan People + AI
- 12. Pembantu Google
- 13. Wawasan PageSpeed
- 14. AMP di Google
- 15. Google DevTools
- 16. Reka Bentuk Bahan
Bekerja di web biasanya bermaksud anda akan bekerjasama dengan Google dalam pelbagai bentuk atau bentuk. Dan memandangkan Google Chrome berada di hadapan persaingan, pereka dan pembangun perlu memikirkan bagaimana projek mereka akan berfungsi dengan penyemak imbas. Bagaimana ia akan kelihatan? Teknologi apa yang disokongnya, seberapa selamatnya dan bagaimana cara kerjanya?
Nasib baik, Chrome menyediakan alat untuk memastikan mana-mana laman web atau aplikasi berada di tahap terbaik. DevTools membolehkan pereka dan pembangun memperoleh pandangan tentang halaman web: anda boleh memanipulasi DOM, memeriksa CSS, bereksperimen pada reka bentuk dengan penyuntingan langsung, debug JavaScript dan periksa prestasi. (Lihat lebih lanjut tentang cara menggunakan alat web Google ini di sini, dan jika anda mulai dari awal lihat juga senarai pembangun web teratas kami).
Tetapi Google menawarkan lebih daripada sekadar penyemak imbas. Ia mempunyai alat dan sumber untuk membantu hampir semua aspek kehidupan reka bentuk dan pembangunan anda. Ingin tahu bagaimana meningkatkan prestasi? Rumah Api sedia membantu. Ingin membina laman web mudah alih dengan prestasi lebih baik? Kemudian bertanya khabar AMP. Adakah anda ingin membina PWA yang cantik? Kemudian Flutter, Material Design dan Workbox siap melangkah masuk.
Keindahan menggunakan alat, sumber, perpustakaan dan kerangka kerja Google adalah anda tahu bahawa alat ini akan berfungsi dengan baik dengan penyemak imbas Chrome - penyemak imbas paling popular di planet ini. Untuk lebih banyak alat, lihat rangkuman alat reka bentuk web kami.
01. Rumah Api
Prestasi adalah faktor utama kejayaan laman web dan Lighthouse adalah alat Google untuk meningkatkan kualiti laman web (perkhidmatan web hosting yang tepat juga akan membantu). Oleh itu, bagaimana anda menggunakan Rumah Api dan apa yang boleh dilakukannya? Dalam bentuknya yang paling mudah, anda boleh menjalankan Rumah Api dari tab Audit dan memilih dari pilihan pilihan termasuk desktop atau mudah alih, selain kotak centang untuk prestasi, kebolehcapaian dan SEO, untuk menghasilkan laporan akhir dengan cadangan penambahbaikan.
02. Polimer
Polimer terkenal dengan kerjanya dengan komponen web tetapi projek ini kini telah memperluas repertoarnya untuk merangkumi koleksi perpustakaan, alat dan piawaian. Apa yang disertakan? LitElement adalah editor yang memudahkan untuk menentukan komponen web, sementara lit-html adalah perpustakaan templat HTML yang memungkinkan pengguna untuk menulis templat HTML generasi berikutnya di JS. Selain itu, anda juga akan menjumpai PWA Starter kit, perpustakaan Polimer asli dan set komponen web.
03. Penjelajah API
Google mempunyai banyak pustaka API yang tersedia untuk pembangun tetapi mencari apa yang anda perlukan bukanlah tugas yang mudah. Di sinilah Penjelajah API Google melangkah untuk memberikan bantuan. Ada senarai panjang yang dapat ditelusuri tetapi, untuk akses lebih cepat, ada kotak pencarian untuk menyaring daftar API. Setiap entri memaut ke halaman rujukan dengan perincian lebih lanjut mengenai cara menggunakan API.
04. Bergetar
Sekiranya anda ingin membina aplikasi yang menarik untuk mudah alih, web dan desktop dari satu pangkalan data, maka Flutter dapat digunakan untuk anda. Laman web ini adalah rujukan lengkap untuk bekerja dan membangun dengan Flutter. Tidak faham apa yang perlu dilakukan? Dokumen membawa pengguna dari pemasangan hingga pembuatan, dibantu oleh banyak sampel dan tutorial.
05. Google GitHub
Seperti yang diketahui ramai, GitHub adalah platform / repositori hosting untuk menyimpan dan berkongsi kod dan fail. Dan dengan senang hati Google mempunyai tempat tersendiri di platform dengan lebih dari 260 repositori untuk diselesaikan. Gunakan penapis untuk mengurangkan masa carian anda dan mendekati repositori yang ingin anda mainkan atau sumbangkan.
06. Boneka
Dibina dalam Node, Puppeteer menawarkan API tahap tinggi yang membolehkan anda mengakses Chrome tanpa kepala - berkesan Chrome tanpa UI, yang kemudiannya dapat dikawal oleh pembangun melalui baris perintah. Jadi apa yang boleh anda lakukan dengan Puppeteer? Beberapa pilihan tersedia untuk menghasilkan tangkapan skrin dan PDF halaman, mengautomasikan penyerahan borang dan membuat persekitaran ujian automatik.
07. Peti Kerja
Sekiranya anda ingin membina PWA maka ini adalah titik permulaan yang baik. Workbox menyediakan koleksi perpustakaan JavaScript untuk menambahkan sokongan luar talian ke aplikasi web. Pilihan panduan mendalam menunjukkan cara membuat dan mendaftarkan fail pekerja perkhidmatan, permintaan laluan, menggunakan plugin dan menggunakan bundler dengan Workbox. Dan ada juga satu set strategi cache contoh untuk diperiksa.
08. Codelab
Memerlukan panduan praktikal untuk produk Google? Codelabs memberikan "pengalaman pengkodan berpandu, tutorial, langsung". Laman web ini dipecah rapi menjadi kategori dan acara, menjadikannya cepat dan mudah untuk mencari apa yang anda mahukan. Ia merangkumi Analitis, Android, Assistant, augmented reality, Flutter, G Suite, Search, TensorFlow dan realiti maya. Pilih satu pilihan dan dapatkan kod dan arahan yang anda perlukan untuk membina aplikasi kecil.
09. Alat Warna
Color Tool adalah alat mudah yang membolehkan anda membuat, berkongsi dan menggunakan palet selain memeriksa kebolehaksesan. Pengguna boleh memilih palet yang telah ditentukan dari palet Bahan. Cukup pilih warna dan kemudian terapkan pada skema warna utama, beralih ke pilihan sekunder dan pilih lagi. Akhirnya, pilih warna teks untuk kedua-dua skema. Sebagai alternatif, beralih ke Custom untuk memilih warna anda. Kemudian beralih ke Aksesibilitas untuk memeriksa semuanya baik sebelum akhirnya mengeksport palet.
10. Reka Bentuk Pecut
Design Sprint Kit adalah untuk mereka yang belajar bagaimana untuk mengambil bahagian dalam atau menjalankan sprint reka bentuk. Ia nampaknya merangkumi semua pangkalan pengetahuan, dari pemula hingga fasilitator pecut yang berpengalaman. Ketahui mengenai metodologi atau lompat langsung ke peringkat perancangan, termasuk menulis taklimat, mengumpulkan data dan penyelidikan, serta apa yang harus dilakukan selepas berlari. Juga termasuk sejumlah sumber seperti alat, templat, resipi dan pilihan untuk menghantar kaedah anda sendiri. Juga, anda mungkin memerlukan tempat untuk menyimpan dan berkongsi sumber jadi pastikan pilihan penyimpanan awan anda tepat pada masanya.
11. Buku Panduan People + AI
Panduan ini adalah hasil inisiatif People + AI Research di Google dan kelihatan memberi pertolongan kepada mereka yang ingin membina produk AI yang berpusatkan manusia. Buku panduan komprehensif dibahagikan kepada enam bab yang merangkumi keperluan pengguna, pengumpulan dan penilaian data, model mental, kepercayaan, maklum balas dan kegagalan yang baik. Setiap bab disertakan dengan latihan, lembaran kerja dan alat dan sumber yang diperlukan untuk mewujudkannya.
12. Pembantu Google
Ini adalah platform pembangun Google Assistant, yang menawarkan panduan mengenai cara mengintegrasikan kandungan dan perkhidmatan anda dengan Google Assistant. Ini menunjukkan kepada anda cara memperluas aplikasi mudah alih anda, mempersembahkan kandungan dengan cara yang kaya untuk Cari dan Pembantu, lampu kawalan, mesin kopi dan peranti lain di sekitar rumah dan membina pengalaman suara dan visual untuk pembesar suara, paparan dan telefon pintar.
13. Wawasan PageSpeed
PageSpeed Insights menganalisis kandungan web dan kemudian memberikan cadangan bagaimana membuatnya dimuat lebih cepat. Cukup tambahkan URL, tekan butang Analisis dan tunggu keajaiban berlaku. Periksa Dokumen untuk mendapatkan gambaran yang lebih baik tentang bagaimana API PageSpeed berfungsi dan bagaimana mula menggunakannya.
14. AMP di Google
AMP adalah alat Google untuk membuat halaman mudah alih yang memuat dengan pantas yang (semoga) sampai ke kedudukan teratas carian. Pelajari cara membuat laman cepat, pengguna pertama, mengintegrasikan AMP di seluruh produk Google, menggunakan Google AMP Cache untuk menjadikan halaman AMP lebih pantas dan mengewangkan halaman AMP dengan produk Google yang lain.
15. Google DevTools
Setiap pereka dan pembangun tahu (atau sekurang-kurangnya harus tahu) bahawa Chrome dilengkapi dengan sekumpulan alat yang dibina terus ke penyemak imbas. DevTools Chrome sangat sesuai untuk memeriksa elemen yang membentuk halaman, memeriksa CSS, mengedit halaman dengan cepat dan banyak lagi.
Tab Elemen adalah pengenalan kepada DevTools. Ia memaparkan kod HTML yang membentuk halaman yang dipilih. Dapatkan gambaran mengenai sifat setiap div atau tag dari halaman yang dipilih dan mulakan penyuntingan secara langsung. Ini sangat sesuai untuk bereksperimen dengan reka bentuk. Periksa Tata Letak - sama ada anda menggunakan Flexbox atau Grid - dan perhatikan fon yang berkaitan dengan contoh dan periksa animasi.
Di tempat lain, anda boleh melihat dan menukar CSS. Tab Gaya pada panel Elemen menyenaraikan peraturan CSS yang diterapkan pada elemen yang sedang dipilih di DOM Tree. Hidupkan dan matikan sifat (atau tambah nilai baru) untuk bereksperimen dengan reka bentuk. Ini adalah alat yang sempurna untuk memastikan bahawa semuanya berfungsi seperti yang diharapkan sebelum menerapkan sebarang perubahan pada rancangan langsung.
Anda juga dapat men-debug JavaScript, mengoptimumkan kelajuan laman web dan memeriksa kelajuan rangkaian. Inilah petua ringkas yang boleh anda gunakan untuk mempercepat aliran kerja anda dengan segera. Pergi ke tab Sumber, klik Coretan Baru dan tambahkan kod yang sering digunakan. Namakan coretan kod dan simpan. Ulangi mengikut keperluan. Sekarang anda boleh mengambil coretan kod ini dan bukannya menulisnya lagi.
Seperti setiap penyemak imbas yang baik, Chrome sentiasa berkembang dan setiap pelepasan baru membawa ciri baru. Ketahui apa yang berlaku di platform status Chrome
16. Reka Bentuk Bahan
Pembangunan mungkin dilihat sebagai anak pilihan Google tetapi, apa sahaja yang anda buat, buat atau buat, ia perlu kelihatan baik dan memberi pengguna pengalaman yang membuat mereka ingin menggunakannya. Bahan adalah tambahan terbaru kepada stabil Google tetapi merupakan sistem reka bentuk yang telah matang menjadi alat reka bentuk yang penting.
Seperti sistem reka bentuk yang baik, ia mempunyai pedoman tersendiri, yang perlu anda perhatikan sebelum melangkah ke perkara yang lebih menarik. Dapatkan gambaran keseluruhan tentang cara menggunakan elemen yang berbeza, apa itu tema Bahan, cara melaksanakan tema dan panduan kegunaan termasuk kebolehaksesan. Di tempat lain, terdapat pandangan mengenai Material Foundation, yang merangkumi bidang reka bentuk utama seperti susun atur, navigasi, warna, tipografi, suara, ikonografi, gerakan dan interaksi. Setiap kategori menunjukkan dos dan yang tidak boleh dilakukan dan di mana anda harus berhati-hati. Untuk memberi idea tentang apa yang diharapkan, kategori Tata Letak menawarkan bahagian mengenai susun atur pemahaman, ketumpatan piksel, cara bekerja dengan susun atur responsif termasuk lajur, selokan dan margin, titik putus, wilayah UI dan kaedah jarak untuk beberapa nama.
Di luar bahagian Reka Bentuk adalah Komponen, yang menyediakan blok bangunan fizikal yang diperlukan untuk membuat reka bentuk. Apa yang disertakan di sini? Butang, sepanduk, kad, dialog, pembahagi, senarai, menu, petunjuk kemajuan, slaid, bar snek (ini adalah pesanan ringkas mengenai proses aplikasi di bahagian bawah skrin), tab, medan teks dan petua alat. Tidak diragukan lagi koleksi komponen yang komprehensif.
Dan pembangun tidak dilupakan, dengan perincian dan tutorial mengenai bagaimana membina platform yang berbeza - Android, iOS, Web dan Flutter. Dan akhirnya, ada halaman yang dikhaskan untuk sejumlah sumber untuk membantu mewujudkan reka bentuk pilihan anda.
Artikel ini mula-mula muncul di majalah net. Isu beli 326.
