เนื้อหา
- 01. ประภาคาร
- 02. พอลิเมอร์
- 03. APIs Explorer
- 04. กระพือปีก
- 05. Google GitHub
- 06. หุ่นเชิด
- 07. กล่องทำงาน
- 08. Codelabs
- 09. คัลเลอร์ทูล
- 10. ออกแบบ Sprints
- 11. People + AI ไกด์บุ๊ค
- 12. Google Assistant
- 13. ข้อมูลเชิงลึกของ PageSpeed
- 14. AMP บน Google
- 15. Google DevTools
- 16. การออกแบบวัสดุ
โดยปกติการทำงานบนเว็บหมายความว่าคุณจะทำงานกับ Google ในรูปแบบหรือรูปแบบบางอย่าง และเมื่อเห็นว่า Google Chrome เป็นถนนนำหน้าคู่แข่งนักออกแบบและนักพัฒนาจึงต้องคิดว่าโครงการของพวกเขาจะทำงานร่วมกับเบราว์เซอร์อย่างไร จะเป็นยังไงไปดู มันรองรับเทคโนโลยีอะไรมีความปลอดภัยแค่ไหนและจะทำงานอย่างไร?
โชคดีที่ Chrome มีเครื่องมือเพื่อให้แน่ใจว่าไซต์หรือแอปใด ๆ จะทำงานได้ดีที่สุด DevTools ช่วยให้นักออกแบบและนักพัฒนาได้รับข้อมูลเชิงลึกเกี่ยวกับหน้าเว็บ: คุณสามารถปรับแต่ง DOM, ตรวจสอบ CSS, ทดลองการออกแบบด้วยการแก้ไขแบบสด, ดีบัก JavaScript และตรวจสอบประสิทธิภาพ (ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้เครื่องมือเว็บของ Google ที่นี่และหากคุณเริ่มต้นตั้งแต่ต้นโปรดดูรายชื่อผู้สร้างเว็บชั้นนำของเราด้วย)
แต่ Google มีมากกว่าเบราว์เซอร์ มีเครื่องมือและทรัพยากรที่จะช่วยชีวิตการออกแบบและการพัฒนาของคุณเกือบทุกด้าน ต้องการทราบวิธีการปรับปรุงประสิทธิภาพหรือไม่? ประภาคารพร้อมให้ความช่วยเหลือ ต้องการสร้างไซต์บนมือถือที่มีประสิทธิภาพดีขึ้นหรือไม่? จากนั้นทักทายกับ AMP คุณต้องการสร้าง PWA ที่สวยงามหรือไม่? จากนั้น Flutter, Material Design และ Workbox ก็พร้อมที่จะก้าวเข้ามา
ความสวยงามของการใช้เครื่องมือทรัพยากรไลบรารีและเฟรมเวิร์กของ Google คือคุณรู้ว่ามันจะทำงานได้ดีกับเบราว์เซอร์ Chrome ซึ่งเป็นเบราว์เซอร์ที่ได้รับความนิยมมากที่สุดในโลก สำหรับเครื่องมือเพิ่มเติมโปรดดูบทสรุปเกี่ยวกับเครื่องมือออกแบบเว็บไซต์ของเรา
01. ประภาคาร
ประสิทธิภาพเป็นปัจจัยสำคัญในความสำเร็จของไซต์และ Lighthouse เป็นเครื่องมือของ Google ในการปรับปรุงคุณภาพของหน้าเว็บ (บริการเว็บโฮสติ้งที่เหมาะสมจะช่วยได้เช่นกัน) คุณใช้ Lighthouse ได้อย่างไรและทำอะไรได้บ้าง? ในรูปแบบที่ง่ายที่สุดคุณสามารถเรียกใช้ Lighthouse จากแท็บการตรวจสอบและเลือกจากตัวเลือกต่างๆรวมถึงเดสก์ท็อปหรืออุปกรณ์เคลื่อนที่นอกเหนือจากกล่องกาเครื่องหมายสำหรับประสิทธิภาพการเข้าถึงและ SEO เพื่อสร้างรายงานขั้นสุดท้ายพร้อมการปรับปรุงที่แนะนำ
02. พอลิเมอร์
พอลิเมอร์เป็นที่รู้จักกันดีในเรื่องการทำงานร่วมกับส่วนประกอบของเว็บ แต่ตอนนี้โครงการได้ขยายการแสดงละครเพื่อรวบรวมไลบรารีเครื่องมือและมาตรฐานต่างๆ มีอะไรให้บ้าง? LitElement เป็นโปรแกรมแก้ไขที่ช่วยให้กำหนดส่วนประกอบของเว็บได้ง่ายในขณะที่ lit-html เป็นไลบรารีเทมเพลต HTML ที่ช่วยให้ผู้ใช้สามารถเขียนเทมเพลต HTML รุ่นต่อไปใน JS ได้ นอกจากนี้คุณยังจะได้พบกับชุด PWA Starter ไลบรารีโพลิเมอร์ดั้งเดิมและชุดส่วนประกอบของเว็บ
03. APIs Explorer
Google มีไลบรารี API มากมายสำหรับนักพัฒนา แต่การค้นหาสิ่งที่คุณต้องการไม่ใช่เรื่องง่าย นี่คือจุดที่ APIs Explorer ของ Google ก้าวเข้ามาเพื่อให้ความช่วยเหลือ มีรายการยาว ๆ ที่สามารถเลื่อนดูได้ แต่เพื่อการเข้าถึงที่รวดเร็วยิ่งขึ้นมีช่องค้นหาเพื่อกรองรายการ API แต่ละรายการเชื่อมโยงไปยังหน้าอ้างอิงพร้อมรายละเอียดเพิ่มเติมเกี่ยวกับวิธีใช้ API
04. กระพือปีก
หากคุณต้องการสร้างแอปพลิเคชันที่ดูดีสำหรับมือถือเว็บและเดสก์ท็อปจากโค้ดเบสเดียว Flutter อาจเหมาะกับคุณ ไซต์นี้เป็นข้อมูลอ้างอิงที่สมบูรณ์เกี่ยวกับการทำงานและการสร้างกับ Flutter ยังไม่ได้เบาะแสว่าจะทำอย่างไร? เอกสารนำผู้ใช้ตั้งแต่การติดตั้งไปจนถึงการสร้างโดยได้รับความช่วยเหลือจากตัวอย่างและแบบฝึกหัดมากมาย
05. Google GitHub
อย่างที่คนส่วนใหญ่ทราบกันดีว่า GitHub เป็นแพลตฟอร์ม / พื้นที่เก็บข้อมูลสำหรับจัดเก็บและแชร์โค้ดและไฟล์ และมีความสุขที่ Google มีจุดของตัวเองบนแพลตฟอร์มที่มีที่เก็บมากกว่า 260 แห่งให้ค้นหา ใช้ตัวกรองเพื่อลดเวลาในการค้นหาของคุณและเข้าใกล้พื้นที่เก็บข้อมูลที่คุณต้องการเล่นหรือมีส่วนร่วมมากขึ้น
06. หุ่นเชิด
Puppeteer สร้างขึ้นในโหนดมี API ระดับสูงที่ช่วยให้คุณสามารถเข้าถึง Chrome ที่ไม่มีหัว - Chrome ได้อย่างมีประสิทธิภาพโดยไม่ต้องใช้ UI ซึ่งนักพัฒนาสามารถควบคุมผ่านบรรทัดคำสั่งได้ แล้วคุณจะทำอะไรกับ Puppeteer ได้บ้าง? มีตัวเลือกบางอย่างสำหรับการสร้างภาพหน้าจอและ PDF ของหน้าการส่งแบบฟอร์มอัตโนมัติและการสร้างสภาพแวดล้อมการทดสอบอัตโนมัติ
07. กล่องทำงาน
หากคุณต้องการสร้างกปภ. นี่เป็นจุดเริ่มต้นที่ดี Workbox มีคอลเลกชันของไลบรารี JavaScript สำหรับเพิ่มการสนับสนุนออฟไลน์ให้กับเว็บแอป คำแนะนำเชิงลึกที่เลือกจะแสดงวิธีสร้างและลงทะเบียนไฟล์ผู้ปฏิบัติงานบริการคำขอกำหนดเส้นทางใช้ปลั๊กอินและใช้บันเดิลเลอร์กับ Workbox และยังมีชุดของตัวอย่างกลยุทธ์การแคชเพื่อตรวจสอบ
08. Codelabs
หากต้องการคำแนะนำที่เป็นประโยชน์สำหรับผลิตภัณฑ์ Google Codelabs นำเสนอ "ประสบการณ์การเขียนโค้ดแบบมีคำแนะนำและแบบลงมือปฏิบัติ" ไซต์ถูกแบ่งออกเป็นหมวดหมู่และเหตุการณ์ต่างๆอย่างเรียบร้อยทำให้ค้นหาสิ่งที่คุณต้องการได้อย่างรวดเร็วและง่ายดาย ซึ่งรวมถึง Analytics, Android, Assistant, Augmented Reality, Flutter, G Suite, Search, TensorFlow และความเป็นจริงเสมือน เลือกตัวเลือกและรับรหัสและเส้นทางที่คุณต้องการเพื่อสร้างแอปพลิเคชันขนาดเล็ก
09. คัลเลอร์ทูล
Color Tool เป็นเครื่องมือตรงไปตรงมาที่ช่วยให้คุณสร้างแชร์และใช้จานสีนอกเหนือจากการตรวจสอบความสามารถในการเข้าถึง ผู้ใช้สามารถเลือกจานสีที่กำหนดไว้ล่วงหน้าจากจานสีวัสดุ เพียงแค่เลือกสีแล้วใช้กับโทนสีหลักเปลี่ยนเป็นตัวเลือกรองแล้วเลือกอีกครั้ง สุดท้ายเลือกสีข้อความสำหรับทั้งสองรูปแบบ หรือเปลี่ยนเป็นกำหนดเองเพื่อเลือกสีของคุณ จากนั้นเปลี่ยนไปใช้การช่วยการเข้าถึงเพื่อตรวจสอบทั้งหมดก่อนหน้านี้ในที่สุดก็ส่งออกจานสี
10. ออกแบบ Sprints
Design Sprint Kit มีไว้สำหรับผู้ที่กำลังเรียนรู้วิธีเข้าร่วมหรือใช้งาน Design Sprint ดูเหมือนว่าจะครอบคลุมฐานความรู้ทั้งหมดตั้งแต่ผู้เริ่มต้นไปจนถึงผู้อำนวยความสะดวกในการวิ่งที่มีประสบการณ์ เรียนรู้เกี่ยวกับวิธีการหรือเข้าสู่ขั้นตอนการวางแผนโดยตรงรวมถึงการเขียนบรีฟการรวบรวมข้อมูลและการวิจัยตลอดจนสิ่งที่ต้องทำหลังการวิ่ง นอกจากนี้ยังมีแหล่งข้อมูลมากมายเช่นเครื่องมือเทมเพลตสูตรอาหารและตัวเลือกในการส่งวิธีการของคุณเอง นอกจากนี้คุณอาจต้องมีที่เก็บและแบ่งปันทรัพยากรดังนั้นตรวจสอบให้แน่ใจว่าตัวเลือกพื้นที่เก็บข้อมูลบนคลาวด์ของคุณตรงจุด
11. People + AI ไกด์บุ๊ค
คู่มือนี้เป็นผลงานของโครงการ People + AI Research ที่ Google และมีวัตถุประสงค์เพื่อให้ความช่วยเหลือแก่ผู้ที่ต้องการสร้างผลิตภัณฑ์ AI ที่เน้นมนุษย์เป็นศูนย์กลาง หนังสือแนะนำที่ครอบคลุมแบ่งออกเป็นหกบทซึ่งครอบคลุมความต้องการของผู้ใช้การรวบรวมและการประเมินข้อมูลแบบจำลองทางจิตใจความไว้วางใจข้อเสนอแนะและความล้มเหลวอย่างสง่างาม แต่ละบทจะมาพร้อมกับแบบฝึกหัดแผ่นงานและเครื่องมือและทรัพยากรที่จำเป็นในการทำให้เกิดขึ้น
12. Google Assistant
นี่คือแพลตฟอร์มสำหรับนักพัฒนาซอฟต์แวร์ของ Google Assistant ซึ่งนำเสนอคำแนะนำเกี่ยวกับวิธีผสานรวมเนื้อหาและบริการของคุณกับ Google Assistant แสดงวิธีขยายแอปบนอุปกรณ์เคลื่อนที่นำเสนอเนื้อหาในรูปแบบที่หลากหลายสำหรับ Search และ Assistant ไฟควบคุมเครื่องชงกาแฟและอุปกรณ์อื่น ๆ ในบ้านและสร้างประสบการณ์เสียงและภาพสำหรับลำโพงอัจฉริยะจอแสดงผลและโทรศัพท์
13. ข้อมูลเชิงลึกของ PageSpeed
PageSpeed Insights วิเคราะห์เนื้อหาเว็บแล้วเสนอคำแนะนำเกี่ยวกับวิธีทำให้โหลดเร็วขึ้น เพียงเพิ่ม URL กดปุ่มวิเคราะห์และรอให้เวทมนตร์เกิดขึ้น ตรวจสอบเอกสารเพื่อรับข้อมูลเชิงลึกที่ดีขึ้นเกี่ยวกับการทำงานของ PageSpeed API และวิธีเริ่มใช้งาน
14. AMP บน Google
AMP เป็นเครื่องมือของ Google ในการสร้างหน้าเว็บบนมือถือที่โหลดเร็วซึ่ง (หวังว่า) จะขึ้นสู่อันดับต้น ๆ ของการค้นหา เรียนรู้วิธีสร้างไซต์ที่รวดเร็วสำหรับผู้ใช้รวม AMP ในผลิตภัณฑ์ต่างๆของ Google ใช้ Google AMP Cache เพื่อทำให้หน้า AMP เร็วขึ้นและสร้างรายได้จากหน้า AMP ด้วยผลิตภัณฑ์อื่น ๆ ของ Google
15. Google DevTools
นักออกแบบและนักพัฒนาทุกคนรู้ (หรืออย่างน้อยก็ควรรู้) ว่า Chrome มาพร้อมกับชุดเครื่องมือที่สร้างขึ้นโดยตรงในเบราว์เซอร์ DevTools ของ Chrome เหมาะอย่างยิ่งสำหรับการตรวจสอบองค์ประกอบที่ประกอบกันเป็นเพจตรวจสอบ CSS แก้ไขหน้าได้ทันทีและอื่น ๆ อีกมากมาย
แท็บ Elements เป็นข้อมูลเบื้องต้นเกี่ยวกับ DevTools จะแสดงโค้ด HTML ที่ประกอบเป็นหน้าที่เลือก รับข้อมูลเชิงลึกเกี่ยวกับคุณสมบัติของแต่ละ div หรือแท็กจากหน้าที่เลือกและเริ่มการแก้ไขจริง เหมาะอย่างยิ่งสำหรับการทดลองออกแบบ ตรวจสอบเค้าโครง - ไม่ว่าคุณจะใช้ Flexbox หรือ Grid - ดูแบบอักษรที่เกี่ยวข้องพร้อมตัวอย่างและตรวจสอบภาพเคลื่อนไหว
ที่อื่นคุณสามารถดูและเปลี่ยน CSS ได้ แท็บสไตล์ในแผงองค์ประกอบจะแสดงรายการกฎ CSS ที่ใช้กับองค์ประกอบที่เลือกในปัจจุบันในโครงสร้าง DOM เปิดและปิดคุณสมบัติ (หรือเพิ่มค่าใหม่) เพื่อทดลองออกแบบ นี่เป็นเครื่องมือที่สมบูรณ์แบบในการตรวจสอบให้แน่ใจว่าทุกอย่างทำงานตามที่คาดไว้ก่อนที่จะใช้การเปลี่ยนแปลงใด ๆ กับการออกแบบที่ใช้งานจริง
คุณยังสามารถแก้จุดบกพร่อง JavaScript เพิ่มความเร็วของเว็บไซต์และตรวจสอบความเร็วเครือข่าย นี่คือเคล็ดลับสั้น ๆ ที่คุณสามารถใช้เพื่อเร่งเวิร์กโฟลว์ของคุณได้ทันที ไปที่แท็บ Sources คลิก New Snippet และเพิ่มโค้ดที่ใช้บ่อย ตั้งชื่อข้อมูลโค้ดและบันทึก ทำซ้ำตามต้องการ ตอนนี้คุณสามารถคว้าข้อมูลโค้ดนี้แทนการเขียนอีกครั้ง
เช่นเดียวกับเบราว์เซอร์ที่ดีทุกตัว Chrome มีการพัฒนาอย่างต่อเนื่องและแต่ละรุ่นใหม่จะนำเสนอคุณลักษณะใหม่ ๆ ดูว่าเกิดอะไรขึ้นบนแพลตฟอร์มสถานะ Chrome
16. การออกแบบวัสดุ
การพัฒนาอาจถูกมองว่าเป็นเด็กที่ Google ชื่นชอบ แต่ไม่ว่าคุณจะสร้างสร้างหรือสร้างอะไรก็ตามจำเป็นต้องดูดีและให้ประสบการณ์แก่ผู้ใช้ที่ทำให้พวกเขาต้องการใช้งาน Material เป็นส่วนเสริมล่าสุดของ Google Stable แต่เป็นระบบการออกแบบที่เติบโตเป็นชุดการออกแบบที่สำคัญแล้ว
เช่นเดียวกับระบบการออกแบบที่ดีมันมีแนวทางของตัวเองซึ่งคุณต้องพิจารณาก่อนที่จะก้าวไปสู่สิ่งที่น่าตื่นเต้นยิ่งขึ้น ดูภาพรวมเกี่ยวกับวิธีใช้องค์ประกอบต่างๆธีมวัสดุคืออะไรวิธีใช้ธีมและคู่มือการใช้งานรวมถึงการช่วยสำหรับการเข้าถึง ที่อื่นมีข้อมูลเชิงลึกเกี่ยวกับ Material Foundation ซึ่งรวมถึงส่วนสำคัญของการออกแบบเช่นเค้าโครงการนำทางสีตัวอักษรเสียงสัญลักษณ์การเคลื่อนไหวและการโต้ตอบ แต่ละหมวดหมู่จะเปิดเผยสิ่งที่ควรทำและไม่ควรทำและจุดที่คุณควรพิจารณาอย่างระมัดระวัง เพื่อให้ทราบถึงสิ่งที่จะเกิดขึ้นหมวดหมู่เลย์เอาต์จะนำเสนอส่วนต่างๆเกี่ยวกับการทำความเข้าใจเลย์เอาต์ความหนาแน่นของพิกเซลวิธีการทำงานกับรูปแบบที่ตอบสนองรวมถึงคอลัมน์รางน้ำและระยะขอบเบรกพอยต์ขอบเขต UI และวิธีการเว้นวรรคเพื่อตั้งชื่อ
นอกเหนือจากส่วนการออกแบบคือส่วนประกอบซึ่งมีส่วนประกอบทางกายภาพที่จำเป็นในการสร้างการออกแบบ มีอะไรรวมอยู่ที่นี่บ้าง? ปุ่มแบนเนอร์การ์ดกล่องโต้ตอบวงเวียนรายการเมนูตัวบ่งชี้ความคืบหน้าแถบเลื่อนแถบสแน็คบาร์ (เป็นข้อความสั้น ๆ เกี่ยวกับกระบวนการของแอปที่ด้านล่างของหน้าจอ) แท็บช่องข้อความและคำแนะนำเครื่องมือ ชุดส่วนประกอบที่ครอบคลุมอย่างไม่ต้องสงสัย
และนักพัฒนายังไม่ถูกลืมด้วยรายละเอียดและบทช่วยสอนเกี่ยวกับวิธีการสร้างสำหรับแพลตฟอร์มต่างๆ - Android, iOS, เว็บและ Flutter และในที่สุดก็มีเพจที่ทุ่มเทให้กับแหล่งข้อมูลมากมายเพื่อช่วยให้การออกแบบที่คุณเลือกเกิดขึ้น
บทความนี้เคยปรากฏในนิตยสารเน็ต ซื้อฉบับที่ 326.
