Conţinut
- 01. Far
- 02. Polimer
- 03. Explorator API
- 04. Flutură
- 05. Google GitHub
- 06. Păpușar
- 07. Cutie de lucru
- 08. Codelabs
- 09. Instrument de culoare
- 10. Sprinturi de proiectare
- 11. Ghid Oameni + AI
- 12. Asistent Google
- 13. PageSpeed Insights
- 14. AMP pe Google
- 15. Google DevTools
- 16. Proiectarea materialelor
Lucrul pe web înseamnă, de obicei, că veți lucra cu Google într-o anumită formă sau formă. Și văzând că Google Chrome se află în fața concurenței, designerii și dezvoltatorii trebuie să se gândească la modul în care proiectul lor va funcționa cu browserul. Cum va arăta? Ce tehnologii acceptă, cât de sigură este și cum va funcționa?
Din fericire, Chrome oferă instrumente pentru a se asigura că orice site sau aplicație va fi la maximum. DevTools permite proiectanților și dezvoltatorilor să obțină informații despre o pagină web: puteți manipula DOM-ul, puteți verifica CSS, puteți experimenta proiecte cu editare live, puteți depana JavaScript și puteți verifica performanța. (Aflați mai multe despre cum să utilizați aceste instrumente web Google aici și, dacă începeți de la zero, consultați și lista cu cei mai buni constructori de web).
Dar Google oferă mai mult decât doar browserul. Are instrumente și resurse care vă ajută aproape fiecare aspect din viața de proiectare și dezvoltare. Doriți să știți cum să îmbunătățiți performanța? Farul este aici pentru a vă ajuta. Doriți să creați site-uri mobile mai performante? Apoi salută AMP. Căutați să construiți PWA-uri frumoase? Apoi Flutter, Material Design și Workbox sunt gata să intervină.
Frumusețea utilizării instrumentelor, resurselor, bibliotecilor și cadrelor Google este că știi că vor funcționa bine cu browserul Chrome - cel mai popular browser de pe planetă. Pentru mai multe instrumente, consultați rezumatul instrumentelor noastre de design web.
01. Far
Performanța este un factor cheie în succesul unui site, iar Lighthouse este instrumentul Google pentru îmbunătățirea calității paginilor web (serviciul potrivit de găzduire web va ajuta și el). Deci, cum folosești Lighthouse și ce poate face? În cea mai simplă formă, puteți rula Lighthouse din fila Audituri și puteți alege dintr-o selecție de opțiuni, inclusiv desktop sau mobil, pe lângă casetele de bifare pentru performanță, accesibilitate și SEO, pentru a genera un raport final cu îmbunătățiri sugerate.
02. Polimer
Polymer este bine-cunoscut pentru munca sa cu componente web, dar proiectul și-a extins acum repertoriul pentru a cuprinde o colecție de biblioteci, instrumente și standarde. Ce este inclus? LitElement este un editor care facilitează definirea componentelor web, în timp ce lit-html este o bibliotecă de șablonare HTML care permite utilizatorilor să scrie șabloane HTML de ultimă generație în JS. În plus, veți găsi și un kit de pornire PWA, biblioteca originală de polimeri și seturi de componente web.
03. Explorator API
Google are o vastă bibliotecă de API-uri disponibile dezvoltatorilor, dar găsirea a ceea ce aveți nevoie nu este o sarcină ușoară. Aici intervine Explorerul API-urilor Google pentru a oferi o mână de ajutor. Există o listă lungă care poate fi parcursă, dar, pentru un acces mai rapid, există o casetă de căutare pentru a filtra lista API. Fiecare intrare se leagă de o pagină de referință cu mai multe detalii despre modul de utilizare a API-ului.
04. Flutură
Dacă doriți să creați aplicații frumoase pentru mobil, web și desktop dintr-o singură bază de cod, atunci Flutter ar putea fi pentru dvs. Site-ul este o referință completă la lucrul și construirea cu Flutter. Nu ai nici o idee despre ce să faci? Documentele duc un utilizator de la instalare la creație, asistat de o mulțime de mostre și tutoriale.
05. Google GitHub
După cum știu majoritatea, GitHub este platforma / depozitul de găzduire pentru stocarea și partajarea codului și a fișierelor. Și, din fericire, Google are propriul său loc pe platformă, cu peste 260 de depozite de trecut. Folosiți filtrul pentru a reduce timpul de căutare și pentru a vă apropia de depozitul cu care doriți să jucați sau la care să contribuiți.
06. Păpușar
Nod încorporat, Puppeteer oferă un API de nivel înalt care vă permite să accesați Chrome fără cap - efectiv Chrome fără interfața de utilizare, pe care dezvoltatorii îl pot controla apoi prin linia de comandă. Deci, ce poți face cu Puppeteer? Câteva opțiuni sunt disponibile pentru generarea de capturi de ecran și PDF-uri ale paginilor, automatizarea trimiterii formularelor și crearea unui mediu de testare automatizat.
07. Cutie de lucru
Dacă doriți să construiți un PWA, atunci acesta este un punct de plecare excelent. Workbox oferă o colecție de biblioteci JavaScript pentru a adăuga suport offline aplicațiilor web. O selecție de ghiduri detaliate demonstrează cum să creați și să înregistrați un fișier de serviciu, să solicitați rutarea, să folosiți plugin-uri și să folosiți pachete cu Workbox. Și există, de asemenea, un set de exemple de strategii de cache care trebuie verificate.
08. Codelabs
Aveți nevoie de îndrumări practice pentru un produs Google? Codelabs oferă „o experiență de codare ghidată, tutorială și practică”. Site-ul este bine împărțit în categorii și evenimente, ceea ce face rapid și ușor să găsiți ceea ce doriți. Include Analytics, Android, Asistent, realitate augmentată, Flutter, G Suite, Căutare, TensorFlow și realitate virtuală. Selectați o opțiune și obțineți codul și instrucțiunile de care aveți nevoie pentru a crea aplicații mici.
09. Instrument de culoare
Color Tool este un instrument simplu care vă permite să creați, să partajați și să aplicați o paletă pe lângă verificarea accesibilității. Utilizatorii pot alege o paletă predefinită din paleta Material. Pur și simplu alegeți o culoare și apoi aplicați-o la schema de culori primară, treceți la opțiunea secundară și alegeți din nou. În cele din urmă, alegeți culori de text pentru ambele scheme. Alternativ, comutați la Personalizat pentru a vă alege culorile. Apoi comutați la Accesibilitate pentru a verifica dacă este bine înainte, în cele din urmă, să exportați paleta.
10. Sprinturi de proiectare
Kitul Design Sprint este destinat celor care învață cum să participe sau să ruleze sprinturi de design. Se pare că acoperă toate bazele de cunoștințe, de la primii la facilitatori sprint experimentați. Aflați despre metodologie sau săriți direct în etapa de planificare, inclusiv scrierea de briefuri, colectarea de date și cercetare, precum și ce să faceți după sprint. Include, de asemenea, o serie de resurse, cum ar fi instrumente, șabloane, rețete și opțiunea de a trimite propria metodă. De asemenea, probabil că veți avea nevoie de un loc unde să stocați și să partajați resurse, așa că asigurați-vă că opțiunea dvs. de stocare în cloud este la punct.
11. Ghid Oameni + AI
Acest ghid este opera inițiativei People + AI Research de la Google și urmărește să ofere ajutor celor care doresc să construiască produse AI centrate pe om. Ghidul cuprinzător este împărțit în șase capitole care acoperă nevoile utilizatorilor, colectarea și evaluarea datelor, modelele mentale, încrederea, feedback-ul și eșecul grațios. Fiecare capitol este însoțit de exerciții, fișe de lucru și instrumentele și resursele necesare pentru ca acest lucru să se întâmple.
12. Asistent Google
Aceasta este platforma dezvoltatorului Asistentului Google, care oferă un ghid despre cum să vă integrați conținutul și serviciile cu Asistentul Google. Vă arată cum să vă extindeți aplicația mobilă, să prezentați conținut în moduri bogate pentru Căutare și Asistent, să controlați luminile, mașinile de cafea și alte dispozitive din casă și să creați experiențe vocale și vizuale pentru difuzoare, afișaje și telefoane inteligente.
13. PageSpeed Insights
PageSpeed Insights analizează conținutul web și apoi oferă sugestii despre cum să îl încărcați mai repede. Pur și simplu adăugați o adresă URL, apăsați butonul Analize și așteptați ca magia să se întâmple. Consultați Documente pentru a obține o perspectivă mai bună despre modul în care funcționează PageSpeed API și despre cum să începeți să îl utilizați.
14. AMP pe Google
AMP este instrumentul Google pentru crearea de pagini mobile cu încărcare rapidă, care (sperăm) să ajungă în topul clasamentelor de căutare. Aflați cum să creați site-uri rapide, primul utilizator, să integrați AMP în toate produsele Google, să utilizați Google AMP Cache pentru a face paginile AMP mai rapide și să monetizați paginile AMP cu alte produse Google.
15. Google DevTools
Fiecare proiectant și dezvoltator știe (sau cel puțin ar trebui să știe) că Chrome vine cu un set de instrumente încorporate direct în browser. DevTools-urile Chrome sunt ideale pentru inspectarea elementelor care alcătuiesc o pagină, verificarea CSS, editarea paginilor din mers și multe altele.
Fila Elemente este introducerea în DevTools. Afișează codul HTML care alcătuiește pagina selectată. Obțineți o perspectivă asupra proprietăților fiecărui div sau etichetă din pagina selectată și începeți editarea live. Acest lucru este perfect pentru a experimenta modele. Verificați aspectul - indiferent dacă utilizați Flexbox sau Grid - și aruncați o privire asupra fonturilor asociate cu exemple și examinați animațiile.
În altă parte, puteți vizualiza și modifica CSS. Fila Stiluri din panoul Elemente enumeră regulile CSS aplicate elementului selectat în prezent în Arborele DOM. Activați și dezactivați proprietățile (sau adăugați valori noi) pentru a experimenta proiectele. Acesta este instrumentul perfect pentru a vă asigura că totul funcționează așa cum era de așteptat înainte de a aplica orice modificare la designul live.
De asemenea, puteți depana JavaScript, optimiza viteza site-ului web și inspecta viteza rețelei. Iată un sfat rapid pe care îl puteți utiliza pentru a vă accelera imediat fluxul de lucru. Accesați fila Surse, faceți clic pe Fragment nou și adăugați codul utilizat frecvent. Denumiți fragmentul de cod și salvați. Repetați după cum este necesar. Acum puteți prelua acest fragment de cod în loc să îl scrieți din nou.
La fel ca orice browser bun, Chrome evoluează constant și fiecare nouă versiune aduce funcții noi. Aflați ce se întâmplă pe platforma de stare Chrome
16. Proiectarea materialelor
Dezvoltarea poate fi văzută ca fiind copilul preferat de Google, dar, indiferent ce faceți, creați sau construiți, trebuie să arate bine și să ofere utilizatorului o experiență care îi face să dorească să o folosească. Materialul este o adăugare mai recentă la Google Stable, dar este un sistem de proiectare care s-a maturizat într-o piesă vitală a kitului de proiectare.
La fel ca orice sistem de proiectare bun, are propriul set de linii directoare, la care trebuie să te uiți înainte de a păși în lucrurile mai interesante. Obțineți o prezentare generală a modului de utilizare a diferitelor elemente, a ceea ce este tematica materialelor, a modului de implementare a unei teme și a ghidurilor de utilizare, inclusiv accesibilitatea. În altă parte, există o perspectivă asupra Fundației materiale, care include domeniile cheie ale designului, cum ar fi aspectul, navigarea, culoarea, tipografia, sunetul, iconografia, mișcarea și interacțiunea. Fiecare categorie dezvăluie ceea ce trebuie și ce nu trebuie și unde trebuie să aveți grijă. Pentru a vă face o idee despre ce să vă așteptați, categoria Layout oferă secțiuni despre înțelegerea aspectului, densitatea pixelilor, modul de lucru cu un aspect receptiv, inclusiv coloane, jgheaburi și margini, puncte de întrerupere, regiuni ale interfeței de utilizare și metode de spațiere pentru a numi doar câteva.
Dincolo de secțiunea Proiectare se află Componente, care oferă elementele fizice necesare pentru a crea un design. Ce este inclus aici? Butoane, bannere, carduri, dialoguri, divizoare, liste, meniuri, indicatori de progres, glisante, snack-baruri (acestea sunt mesaje scurte despre procesele aplicațiilor din partea de jos a ecranului), file, câmpuri de text și sfaturi de instrumente. Fără îndoială, o colecție cuprinzătoare de componente.
Și dezvoltatorii nu au fost uitați, cu detalii și tutoriale despre cum să construim pentru diferite platforme - Android, iOS, Web și Flutter. Și, în cele din urmă, există o pagină dedicată unei serii de resurse pentru a ajuta la realizarea designului ales.
Acest articol a apărut inițial în revista net. Cumpărați numărul 326.
