Inhalt
- 01. Liichttuerm
- 02. Polymer
- 03. APIen Explorer
- 04. Fladderen
- 05. Google GitHub
- 06. Poppentheater
- 07. Aarbechtskëscht
- 08. Codelabs
- 09. Faarf Tool
- 10. Design Sprints
- 11. Leit + AI Guidebook
- 12. Google Assistent
- 13. PageSpeed Abléck
- 14. AMP op Google
- 15. Google DevTools
- 16. Material Design
Am Internet schaffen heescht normalerweis datt Dir mat Google an enger Form oder Form schafft. A vue datt Google Chrome Stroossen virum Concours ass, mussen Designer an Entwéckler iwwerdenken wéi hire Projet mam Browser funktionnéiert. Wéi wäert et ausgesinn? Wéi eng Technologien ënnerstëtzt se, wéi sécher ass et a wéi funktionnéiert et?
Glécklecherweis gëtt Chrome Tools fir sécherzestellen datt all Site oder App am Beschten ass. DevTools erméiglechen Designer an Entwéckler en Abléck an eng Websäit ze kréien: Dir kënnt den DOM manipuléieren, CSS kontrolléieren, Experimentéiere mat Designen mat Live Editing, JavaScript debuggen a Performance kontrolléieren. (Kuckt méi iwwer wéi Dir dës Google Web Tools benotzt hei, a wann Dir vun Ufank un kuckt eis Lëscht vun Top Web Builder och).
Awer Google bitt méi wéi just de Browser. Et huet Tools a Ressourcen fir bal all Aspekter vun Ärem Design an Entwécklungsliewen ze hëllefen. Wëllt Dir wëssen wéi Dir d'Performance verbessert? Liichttuerm ass hei fir ze hëllefen. Wëllt Dir besser performant Handysäiten opbauen? Da soot Moien dem AMP. Sicht Dir schéin PWAen ze bauen? Da Flutter, Material Design an Workbox si prett fir anzegräifen.
D'Schéinheet vum Benotze vu Google Tools, Ressourcen, Bibliothéiken a Frameworks ass datt Dir wësst datt se gutt mat dem Chrome Browser funktionnéieren - de populärste Browser um Planéit. Fir méi Tools, kuckt eis Webdesign Tools Roundup.
01. Liichttuerm
Performance ass e Schlësselfaktor am Erfolleg vun enger Säit a Lighthouse ass Google säin Tool fir d'Qualitéit vu Websäiten ze verbesseren (de richtege Webhosting Service hëlleft och). Also wéi benotzt Dir Liichttuerm a wat kann et maachen? A senger einfachster Form kënnt Dir Liichttuerm aus dem Audits Tab lafen a wielt aus enger Auswiel vun Optiounen abegraff Desktop oder Handy, zousätzlech zu Tick Boxen fir Performance, Accessibilitéit a SEO, fir e Schlussrapport mat virgeschloene Verbesserungen ze generéieren.
02. Polymer
Polymer ass bekannt fir seng Aarbecht mat Webkomponenten awer de Projet huet elo säi Repertoire ausgebaut fir eng Sammlung vu Bibliothéiken, Tools an Normen unzehuelen. Wat ass abegraff? LitElement ass en Editor deen et einfach mécht Webkomponenten ze definéieren, wärend lit-html eng HTML Templatesbibliothéik ass déi et erméiglecht den nächsten Gen HTML Templates an JS ze schreiwen. Plus fannt Dir och e PWA Starter Kit, déi originell Polymerbibliothéik a Sets vu Webkomponenten.
03. APIen Explorer
Google huet eng grouss Bibliothéik vun APIen verfügbar fir Entwéckler awer ze fannen wat Dir braucht ass keng einfach Aufgab. Dëst ass wou Google APIs Explorer Schrëtt fir eng Hand ze bidden. Et gëtt eng laang Lëscht déi duerch scrollt ka ginn awer fir méi séier Zougang gëtt et eng Sichbox fir d'API Lëscht ze filteren. All Entrée verlinkt op eng Referenz Säit mat méi Detailer wéi Dir den API benotzt.
04. Fladderen
Wann Dir sicht fir gutt ausgesinn Uwendungen fir Handy, Web an Desktop aus enger eenzeger Codebase ze bauen da kéint Flutter fir Iech sinn. De Site ass eng komplett Referenz fir mat Flutter ze schaffen an ze bauen. Hutt Dir keng Ahnung wat ze maachen? D'Docs huelen e Benotzer vun der Installatioun bis zur Schafung, assistéiert vu ville Proben an Tutorials.
05. Google GitHub
Wéi déi meescht wëssen, ass GitHub d'Hosting Plattform / Repository fir Code an Dateien ze späicheren an ze deelen. A glécklech Google huet seng eege Plaz op der Plattform mat iwwer 260 Repositories fir duerchzezéien. Benotzt de Filter fir Är Sichzäit ofzeschneiden a méi no beim Repository mat deem Dir spille wëllt oder dozou bäidréit.
06. Poppentheater
Built in Node, Puppeteer bitt en héijen API deen Iech erlaabt Headless Chrome ze kréien - effektiv Chrome ouni d'UI, déi Entwéckler kënnen dann iwwer d'Command Line kontrolléieren. Also wat kënnt Dir mam Puppeteer maachen? E puer Optiounen si verfügbar fir Screenshots a PDFs vu Säiten ze generéieren, d'Formuléierung ze automatiséieren an en automatiséiert Testëmfeld ze kreéieren.
07. Aarbechtskëscht
Wann Dir sicht eng PWA ze bauen dann ass dat e super Startpunkt. Workbox bitt eng Sammlung vu JavaScript Bibliothéiken fir offline Ënnerstëtzung fir Web Apps derbäi ze maachen. Eng Auswiel vun detailléierte Guiden demonstréiere wéi Dir e Service Aarbechter Datei erstellt a registréiert, Wee Ufroen, Plugins benotzt a Bundler mat Workbox benotzt. An et ass och e Set vu Beispill Cache Strategien fir ze kontrolléieren.
08. Codelabs
Braucht Dir praktesch Guidance fir e Google Produkt? Codelabs bitt "eng guidéiert, Tutorial, praktesch Kodéierungserfarung". De Site ass uerdentlech opgedeelt a Kategorien an Eventer, et mécht et séier an einfach ze fannen wat Dir wëllt. Et enthält Analytics, Android, Assistent, augmentéiert Realitéit, Flutter, G Suite, Sich, TensorFlow a virtuell Realitéit. Wielt eng Optioun a kritt de Code an d'Richtungen déi Dir braucht fir kleng Uwendungen ze bauen.
09. Faarf Tool
Color Tool ass e einfache Tool dat Iech erméiglecht eng Palette ze kreéieren, ze deelen an z'applizéieren niewent der Accessibilitéit. D'Benotzer kënnen eng viraus definéiert Palette aus der Materialpalette wielen. Wielt einfach eng Faarf an da gëlt se op de primäre Faarfschema, wiesselt op déi sekundär Optioun a wielt erëm. Endlech wielt Textfaarwe fir béid Schemen. Alternativ wiesselt op Custom fir Är Faarwen ze wielen. Da wiesselt op Accessibilitéit fir ze kontrolléieren alles ass gutt ier, endlech d'Palette exportéiert.
10. Design Sprints
Den Design Sprint Kit ass fir déi, déi léiere wéi Dir matmaacht oder Design Sprints laaft. Et gesäit aus fir all Wëssensbasen ze decken, vun Ufänger un erfuerene Sprint-Facilitatoren. Léiert iwwer d'Methodik oder sprang direkt an d'Planningsbühn, abegraff Briefe schreiwen, Daten sammelen a Fuerschung, wéi och wat Dir nom Sprint maache musst. Enthält och e Host vu Ressourcen wéi Tools, Templates, Rezepter an d'Méiglechkeet Är eege Method ofzeginn. Och Dir wäert iergendwou iergendwou brauchen fir Ressourcen ze späicheren an ze deelen, also gitt sécher datt Är Cloud Späicher Wiel op der Plaz ass.
11. Leit + AI Guidebook
Dëse Guide ass d'Aarbecht vun der People + AI Fuerschungsinitiativ bei Google a gesäit Hëllef un déi ze bidden, déi mënschlech zentréiert AI Produkter bauen. De kompletten Guidebook ass opgedeelt a sechs Kapitelen déi d'Benotzerbedürfnisser decken, Datenerfaassung an Evaluatioun, mental Modeller, Vertrauen, Feedback a graziéis Versoen. All Kapitel gëtt begleet vun Übungen, Aarbechtsblieder an d'Instrumenter a Ressourcen, déi gebraucht ginn, fir et ze maachen.
12. Google Assistent
Dëst ass d'Entwécklerplattform vum Google Assistant, e Guide ubitt wéi Dir Ären Inhalt a Servicer mam Google Assistent integréiert. Et weist Iech wéi Dir Är mobil App verlängert, Inhalt presentéiert op räich Weeër fir Sich an Assistent, Kontrollluuchten, Kaffismaschinnen an aner Geräter ronderëm d'Haus a baut Stëmm a visuell Erfahrungen fir intelligent Spriecher, Displays an Telefonen.
13. PageSpeed Abléck
PageSpeed Insights analyséiert de Webinhalt a proposéiert duerno Virschléi wéi ee se méi séier luede léisst. Füügt einfach eng URL bäi, klickt op de Knäppchen Analyséieren a waart bis d'Magie geschitt. Kuckt d'Docs fir e besseren Abléck ze kréien wéi d'PageSpeed API funktionnéiert a wéi Dir se benotzt.
14. AMP op Google
AMP ass Google's Tool fir séier luede mobil Säiten ze kreéieren déi (hoffentlech) un d'Spëtzt vun de Sichranglëschte kommen. Léiert wéi Dir séier, user-first Site erstellt, AMP a Google Produkter integréiert, Google AMP Cache benotzt fir AMP Säiten méi séier ze maachen an AMP Säiten mat anere Google Produkter ze monetiséieren.
15. Google DevTools
All Designer an Entwéckler weess (oder op d'mannst sollt wëssen) datt Chrome mat engem Set vun Tools kënnt direkt an de Browser gebaut. Chrome's DevTools sinn ideal fir d'Elementer ze inspizéieren déi eng Säit ausmaachen, CSS kontrolléieren, Säiten um Fluch änneren a villes méi.
Den Elements Tab ass d'Aféierung an DevTools. Et weist den HTML Code deen déi ausgewielte Säit ausmécht. Kritt en Abléck an d'Eegeschafte vun all Div oder Tag vun der gewielter Säit a start Live Editing. Dëst ass perfekt fir mat Designen ze experimentéieren. Kuckt de Layout - egal ob Dir Flexbox oder Grid benotzt - a kuckt op verwandte Schrëfte mat Beispiller an ënnersicht Animatiounen.
Anzwuesch anescht kënnt Dir CSS kucken an änneren. De Styles Tab op der Elements Panel lëscht d'CSS Regelen déi op dat aktuell ausgewielt Element am DOM Tree applizéiert ginn. Schalt Eegeschaften un an aus (oder füügt nei Wäerter bäi) fir mat Designen ze experimentéieren. Dëst ass dat perfekt Instrument fir sécherzestellen datt alles funktionnéiert wéi erwaart ier Dir Ännerunge fir de Live Design applizéiert.
Dir kënnt och JavaScript debuggen, Websäit Geschwindegkeet optimiséieren an Netzgeschwindegkeet inspizéieren. Hei ass e klengen Tipp deen Dir benotze kënnt fir Äre Workflow direkt ze beschleunegen. Head op d'Source Tab, klickt Neie Snippet an füügt dacks benotzte Code derbäi. Numm de Code Stéck a späichert. Widderhuelen wéi néideg. Elo kënnt Dir dëse Code Stéck anstatt et erëm ze schreiwen.
Wéi all gudde Browser entwéckelt sech Chrome ëmmer weider an all nei Verëffentlechung bréngt nei Features. Fannt eraus wat geschitt op der Chrome Status Plattform
16. Material Design
Entwécklung kann als favoriséiert Kand vu Google gesi ginn awer egal wat Dir maacht, erstallt oder baut, et muss gutt ausgesinn an dem Benotzer eng Erfahrung ginn, déi him et wëllt benotze loossen. Material ass eng méi rezent Ergänzung zum Google stabil awer ass en Design System deen zu engem liewege Stéck Design Kit geräift ass.
Wéi all gutt Design System huet et säin eegene Satz u Richtlinnen, op déi Dir kucke musst ier Dir an déi méi spannend Saache gitt. Kritt en Iwwerbléck wéi verschidden Elementer benotzt ginn, wat Materialthema ass, wéi een Thema implementéiert an Usability Guides abegraff Accessibilitéit. Anzwuesch anescht gëtt et en Abléck an d'Material Foundation, déi d'Schlësselberäicher vum Design wéi Layout, Navigatioun, Faarf, Typographie, Toun, Ikonographie, Bewegung an Interaktioun enthält. All Kategorie verréit seng Dosen an Don'ts a wou Dir sollt virsiichteg sinn. Fir eng Iddi ze ginn, wat erwaart gëtt, bitt d'Layout Kategorie Sektiounen iwwer d'Verstoe vu Layout, Pixel Dicht, wéi ee mat engem reaktiounsfäege Layout funktionnéiert mat Kolonnen, Rinnen a Margen, Breakpoints, UI Regiounen a Distanzmethoden fir nëmmen e puer ze nennen.
Iwwert den Design Sektioun ass Komponenten, déi déi physesch Bausteng ubidden, déi gebraucht gi fir en Design ze kreéieren. Wat ass hei abegraff? Buttons, Banneren, Kaarten, Dialoger, Deeler, Lëschten, Menüen, Fortschrëttsindikatoren, Schieberegelen, Snackbars (dës si kuerz Messagen iwwer App Prozesser ënnen um Écran), Tabs, Textfelder an Tooltips. Zweiflech eng ëmfaassend Sammlung vu Komponenten.
An Entwéckler sinn net vergiess ginn, mat Detailer an Tutorials wéi ee fir verschidde Plattforme baut - Android, iOS, Web a Flutter. An, endlech ass et eng Säit déi engem Hellewull vu Ressourcen gewidmet ass fir Äert gewieltent Design ze maachen.
Dësen Artikel erschéngt ursprénglech am Netzmagazin. 326 kafen.
