Content
- 01. Far
- 02. Polímer
- 03. Explorador d’APIs
- 04. Aletejar
- 05. Google GitHub
- 06. Titellaire
- 07. Caixa de treball
- 08. Codelabs
- 09. Eina de colors
- 10. Disseny Sprints
- 11. Guia People + AI
- 12. Assistent de Google
- 13. PageSpeed Insights
- 14. AMP a Google
- 15. Google DevTools
- 16. Disseny de materials
Treballar al web normalment significa que treballareu amb Google en alguna forma. I veient que Google Chrome està per davant de la competència, els dissenyadors i desenvolupadors han de pensar com funcionarà el seu projecte amb el navegador. Com quedarà? Quines tecnologies admet, quina seguretat té i com funcionarà?
Afortunadament, Chrome proporciona eines per garantir que qualsevol lloc o aplicació estigui al màxim. DevTools permet als dissenyadors i desenvolupadors obtenir informació sobre una pàgina web: podeu manipular el DOM, comprovar CSS, experimentar dissenys amb edició en directe, depurar JavaScript i comprovar el rendiment. (Vegeu més informació sobre com utilitzar aquestes eines web de Google aquí i, si comenceu de zero, consulteu també la nostra llista de constructors web principals).
Però Google ofereix alguna cosa més que el navegador. Té eines i recursos per ajudar a gairebé tots els aspectes de la vostra vida de disseny i desenvolupament. Voleu saber com millorar el rendiment? Far és aquí per ajudar-vos. Voleu crear llocs per a mòbils amb un millor rendiment? A continuació, saludeu AMP. Esteu buscant construir belles PWA? A continuació, Flutter, Disseny de materials i Workbox estan a punt per intervenir.
La bellesa d’utilitzar eines, recursos, biblioteques i marcs de Google és que sabeu que funcionaran bé amb el navegador Chrome, el navegador més popular del planeta. Per obtenir més eines, consulteu el resum de les nostres eines de disseny web.
01. Far
El rendiment és un factor clau en l'èxit d'un lloc i Lighthouse és l'eina de Google per millorar la qualitat de les pàgines web (el servei d'allotjament web adequat també us ajudarà). Llavors, com feu servir Lighthouse i què pot fer? En la seva forma més senzilla, podeu executar Lighthouse des de la pestanya Auditories i triar entre una selecció d'opcions, incloses les d'escriptori o mòbils, a més de les caselles de rendiment, accessibilitat i SEO, per generar un informe final amb les millores suggerides.
02. Polímer
Polymer és coneguda pel seu treball amb components web, però el projecte ha ampliat el seu repertori per incloure una col·lecció de biblioteques, eines i estàndards. Què inclou? LitElement és un editor que facilita la definició de components web, mentre que lit-html és una biblioteca de plantilla HTML que permet als usuaris escriure plantilles HTML de nova generació a JS. A més, també trobareu un kit d’inici PWA, la biblioteca original de polímers i conjunts de components web.
03. Explorador d’APIs
Google té una àmplia biblioteca d’APIs disponibles per als desenvolupadors, però no és fàcil trobar allò que necessiteu. Aquí és on intervé l'Explorador d'APIs de Google per donar un cop de mà. Hi ha una llarga llista que es pot desplaçar, però, per accedir-hi més ràpidament, hi ha un quadre de cerca per filtrar la llista d'API. Cada entrada enllaça a una pàgina de referència amb més detalls sobre com utilitzar l'API.
04. Aletejar
Si voleu crear aplicacions atractives per a mòbils, web i ordinadors des d’una única base de codis, Flutter pot ser el vostre cas. El lloc és una referència completa per treballar i construir amb Flutter. No teniu ni idea de què fer? Els documents porten un usuari des de la instal·lació fins a la creació, ajudats per un munt de mostres i tutorials.
05. Google GitHub
Com la majoria sabran, GitHub és la plataforma / dipòsit d’allotjament per emmagatzemar i compartir codi i fitxers. I, feliçment, Google té el seu propi lloc a la plataforma amb més de 260 repositoris per examinar. Utilitzeu el filtre per reduir el temps de cerca i acostar-vos al dipòsit amb el qual voleu jugar o contribuir.
06. Titellaire
Construït al node, Puppeteer ofereix una API d’alt nivell que us permet accedir a Chrome sense cap, efectivament a Chrome sense la interfície d’usuari, que els desenvolupadors poden controlar a través de la línia d’ordres. Llavors, què podeu fer amb Titellaire? Hi ha algunes opcions disponibles per generar captures de pantalla i PDF de pàgines, automatitzar l'enviament de formularis i crear un entorn de proves automàtic.
07. Caixa de treball
Si voleu construir un PWA, aquest és un gran punt de partida. Workbox proporciona una col·lecció de biblioteques JavaScript per afegir suport offline a les aplicacions web. Una selecció de guies detallades mostren com crear i registrar un fitxer de treballador de serveis, encaminar les sol·licituds, utilitzar connectors i utilitzar els empaquetadors amb Workbox. I també hi ha un conjunt d’exemples d’estratègies d’emmagatzematge a la memòria cau.
08. Codelabs
Necessiteu directrius pràctiques per a un producte de Google? Codelabs proporciona "una experiència de codificació pràctica guiada, tutorial". El lloc es divideix perfectament en categories i esdeveniments, cosa que facilita la cerca del que voleu. Inclou Analytics, Android, Assistent, realitat augmentada, Flutter, G Suite, Cerca, TensorFlow i realitat virtual. Seleccioneu una opció i obteniu el codi i les indicacions que necessiteu per crear petites aplicacions.
09. Eina de colors
Color Tool és una eina senzilla que us permet crear, compartir i aplicar una paleta a més de comprovar l'accessibilitat. Els usuaris poden triar una paleta predefinida de la paleta Material. Simplement escolliu un color i, a continuació, apliqueu-lo a l’esquema de colors primari, canvieu a l’opció secundària i torneu a escollir-lo. Finalment, escolliu els colors del text per a tots dos esquemes. També podeu canviar a Personalitzat per triar els colors. A continuació, canvieu a Accessibilitat per comprovar que tot està bé abans, finalment, d'exportar la paleta.
10. Disseny Sprints
El kit Sprint de disseny és per a aquells que aprenen a participar o executar sprints de disseny. Sembla que cobreixi totes les bases de coneixement, des dels primers a facilitadors d’esprint experimentats. Obteniu més informació sobre la metodologia o aneu directament a l’etapa de planificació, inclosos l’escriptura d’informes, la recopilació de dades i la investigació, així com el que cal fer després del sprint. També inclou una gran quantitat de recursos com eines, plantilles, receptes i l'opció d'enviar el vostre propi mètode. A més, és probable que necessiteu algun lloc per emmagatzemar i compartir recursos, així que assegureu-vos que la vostra opció d’emmagatzematge al núvol estigui a punt.
11. Guia People + AI
Aquesta guia és el treball de la iniciativa People + AI Research de Google i busca oferir ajuda a aquells que vulguin construir productes d’IA centrats en els humans. La completa guia es divideix en sis capítols que cobreixen les necessitats dels usuaris, recopilació i avaluació de dades, models mentals, confiança, retroalimentació i fracàs elegant. Cada capítol s’acompanya d’exercicis, fulls de treball i les eines i recursos necessaris per fer-ho realitat.
12. Assistent de Google
Aquesta és la plataforma per a desenvolupadors de l'Assistent de Google, que ofereix una guia sobre com integrar el vostre contingut i serveis amb l'Assistent de Google. T’explica com ampliar la teva aplicació mòbil, presentar contingut de maneres riques per a la cerca i l’assistent, controlar llums, màquines de cafè i altres dispositius a casa i crear experiències de veu i visuals per a altaveus, pantalles i telèfons intel·ligents.
13. PageSpeed Insights
PageSpeed Insights analitza el contingut web i, a continuació, ofereix suggeriments sobre com fer-lo carregar més ràpidament. Simplement afegiu un URL, premeu el botó Analitza i espereu que passi la màgia. Consulteu Documents de Google per obtenir una millor comprensió del funcionament de l'API PageSpeed i de com començar a utilitzar-la.
14. AMP a Google
AMP és l'eina de Google per crear pàgines mòbils de càrrega ràpida que (esperem) arribin a la part superior de les classificacions de cerca. Obteniu més informació sobre com crear llocs ràpids i amb primers usuaris, integrar AMP a tots els productes de Google, utilitzar la memòria cau de Google AMP per fer que les pàgines AMP siguin més ràpides i obtenir ingressos amb altres productes de Google.
15. Google DevTools
Tots els dissenyadors i desenvolupadors saben (o almenys ho han de saber) que Chrome inclou un conjunt d’eines integrades directament al navegador. Els DevTools de Chrome són ideals per inspeccionar els elements que formen una pàgina, comprovar CSS, editar pàgines sobre la marxa i molt més.
La pestanya Elements és la introducció a DevTools. Mostra el codi HTML que conforma la pàgina seleccionada. Obteniu informació sobre les propietats de cada div o etiqueta de la pàgina seleccionada i comenceu a editar-la en directe. És perfecte per experimentar amb dissenys. Comproveu el disseny (tant si utilitzeu Flexbox com Grid) i mireu els tipus de lletra relacionats amb exemples i examineu les animacions.
En altres llocs, podeu veure i canviar CSS. La pestanya Estils del tauler Elements llista les regles CSS que s’estan aplicant a l’element seleccionat actualment a l’arbre DOM. Activeu i desactiveu les propietats (o afegiu nous valors) per experimentar amb dissenys. Aquesta és l'eina perfecta per garantir que tot funcioni com s'esperava abans d'aplicar qualsevol canvi al disseny en viu.
També podeu depurar JavaScript, optimitzar la velocitat del lloc web i inspeccionar la velocitat de la xarxa. Aquí teniu un consell ràpid que podeu utilitzar per accelerar immediatament el vostre flux de treball. Aneu a la pestanya Fonts, feu clic a Fragment nou i afegiu codi d’ús freqüent. Poseu un nom al fragment de codi i deseu-lo. Repetiu si cal. Ara podeu agafar aquest fragment de codi en lloc de tornar-lo a escriure.
Com tots els bons navegadors, Chrome està en constant evolució i cada nova versió aporta noves funcions. Esbrineu què passa a la plataforma d'estat de Chrome
16. Disseny de materials
Es pot considerar que el desenvolupament és el fill preferit de Google, però, sigui el que estigueu creant, creant o construint, ha de tenir un bon aspecte i donar a l’usuari una experiència que li doni ganes d’utilitzar-lo. El material és una addició més recent a l’estable de Google, però és un sistema de disseny que s’ha convertit en una peça vital del kit de disseny.
Com qualsevol bon sistema de disseny, té el seu propi conjunt de pautes, que heu de tenir en compte abans d’entrar en les coses més emocionants. Obteniu una visió general de com utilitzar diferents elements, què és la temàtica de materials, com implementar un tema i guies d’usabilitat, inclosa l’accessibilitat. En altres llocs, hi ha una visió de Material Foundation, que inclou les àrees clau del disseny, com ara el disseny, la navegació, el color, la tipografia, el so, la iconografia, el moviment i la interacció. Cada categoria revela els seus dosos i els que no s’han de fer i on s’ha de tenir precaució. Per fer una idea de què podeu esperar, la categoria Disseny ofereix seccions sobre la comprensió del disseny, la densitat de píxels, la forma de treballar amb un disseny sensible que inclou columnes, canalons i marges, punts d’interrupció, regions d’interfície d’usuari i mètodes d’espai entre d’altres.
Més enllà de la secció Disseny hi ha Components, que proporciona els blocs físics necessaris per crear un disseny. Què inclou aquí? Botons, pancartes, targetes, diàlegs, separadors, llistes, menús, indicadors de progrés, control lliscant, barres de refrigeris (són missatges breus sobre processos d'aplicacions a la part inferior de la pantalla), pestanyes, camps de text i consells d'informació. Sens dubte, una completa col·lecció de components.
I els desenvolupadors no s’han oblidat, amb detalls i tutorials sobre com construir per a diferents plataformes: Android, iOS, Web i Flutter. I, finalment, hi ha una pàgina dedicada a una gran quantitat de recursos per ajudar a fer realitat el vostre disseny escollit.
Aquest article va aparèixer originalment a la revista net. Compra el número 326.
