Contenu
- 01. Phare
- 02. Polymère
- 03. Explorateur d'API
- 04. Flutter
- 05. Google GitHub
- 06. Marionnettiste
- 07. Boîte de travail
- 08. Codelabs
- 09. Outil de couleur
- 10. Sprints de conception
- 11. Guide People + AI
- 12. Assistant Google
- 13. PageSpeed Insights
- 14. AMP sur Google
- 15. Google DevTools
- 16. Conception matérielle
Travailler sur le Web signifie généralement que vous travaillerez avec Google sous une forme ou une autre. Et comme Google Chrome a une longueur d'avance sur la concurrence, les concepteurs et les développeurs doivent réfléchir à la manière dont leur projet fonctionnera avec le navigateur. À quoi cela ressemblera-t-il? Quelles technologies prend-il en charge, dans quelle mesure est-il sécurisé et comment fonctionnera-t-il?
Heureusement, Chrome fournit des outils pour garantir que tout site ou application sera à son meilleur. DevTools permet aux concepteurs et aux développeurs d'avoir un aperçu d'une page Web: vous pouvez manipuler le DOM, vérifier le CSS, expérimenter des conceptions avec l'édition en direct, déboguer JavaScript et vérifier les performances. (Pour en savoir plus sur l'utilisation de ces outils Web Google, cliquez ici, et si vous partez de zéro, consultez également notre liste des meilleurs créateurs de sites Web).
Mais Google offre plus que le simple navigateur. Il dispose d'outils et de ressources pour vous aider dans presque tous les aspects de votre vie de conception et de développement. Vous voulez savoir comment améliorer les performances? Lighthouse est là pour vous aider. Vous souhaitez créer des sites mobiles plus performants? Alors dites bonjour à AMP. Cherchez-vous à créer de belles PWA? Ensuite, Flutter, Material Design et Workbox sont prêts à intervenir.
L'avantage d'utiliser les outils, ressources, bibliothèques et frameworks de Google est que vous savez qu'ils fonctionneront bien avec le navigateur Chrome, le navigateur le plus populaire de la planète. Pour plus d'outils, consultez notre tour d'horizon des outils de conception Web.
01. Phare
La performance est un facteur clé du succès d'un site et Lighthouse est l'outil de Google pour améliorer la qualité des pages Web (le bon service d'hébergement Web aidera également). Alors, comment utilisez-vous Lighthouse et que peut-il faire? Dans sa forme la plus simple, vous pouvez exécuter Lighthouse à partir de l'onglet Audits et choisir parmi une sélection d'options, y compris bureau ou mobile, en plus des cases à cocher pour les performances, l'accessibilité et le référencement, pour générer un rapport final avec des améliorations suggérées.
02. Polymère
Polymer est bien connu pour son travail avec les composants Web, mais le projet a maintenant élargi son répertoire pour englober une collection de bibliothèques, d'outils et de normes. Ce qui est inclu? LitElement est un éditeur qui facilite la définition des composants Web, tandis que lit-html est une bibliothèque de modèles HTML qui permet aux utilisateurs d'écrire des modèles HTML de nouvelle génération dans JS. De plus, vous trouverez également un kit de démarrage PWA, la bibliothèque Polymer originale et des ensembles de composants Web.
03. Explorateur d'API
Google propose une vaste bibliothèque d'API aux développeurs, mais trouver ce dont vous avez besoin n'est pas une tâche facile. C'est là que l'explorateur d'API de Google intervient pour offrir un coup de main. Il existe une longue liste qui peut être parcourue mais, pour un accès plus rapide, il existe une zone de recherche pour filtrer la liste des API. Chaque entrée renvoie à une page de référence avec plus de détails sur l'utilisation de l'API.
04. Flutter
Si vous cherchez à créer de belles applications pour mobile, Web et bureau à partir d'une seule base de code, Flutter pourrait être pour vous. Le site est une référence complète au travail et à la construction avec Flutter. Vous ne savez pas quoi faire? Les documents emmènent un utilisateur de l'installation à la création, assisté par de nombreux exemples et didacticiels.
05. Google GitHub
Comme la plupart le savent, GitHub est la plate-forme / référentiel d'hébergement pour stocker et partager du code et des fichiers. Et heureusement, Google a sa propre place sur la plate-forme avec plus de 260 référentiels à parcourir. Utilisez le filtre pour réduire votre temps de recherche et vous rapprocher du référentiel avec lequel vous souhaitez jouer ou contribuer.
06. Marionnettiste
Construit dans Node, Puppeteer propose une API de haut niveau qui vous permet d'accéder à Chrome sans tête - effectivement Chrome sans l'interface utilisateur, que les développeurs peuvent ensuite contrôler via la ligne de commande. Alors, que pouvez-vous faire avec Puppeteer? Quelques options sont disponibles pour générer des captures d'écran et des PDF de pages, automatiser la soumission de formulaires et créer un environnement de test automatisé.
07. Boîte de travail
Si vous cherchez à créer une PWA, c'est un excellent point de départ. Workbox fournit une collection de bibliothèques JavaScript pour ajouter une prise en charge hors ligne aux applications Web. Une sélection de guides détaillés montre comment créer et enregistrer un fichier de service worker, acheminer les demandes, utiliser des plugins et utiliser des bundlers avec Workbox. Et il existe également un ensemble d'exemples de stratégies de mise en cache à vérifier.
08. Codelabs
Besoin de conseils pratiques sur un produit Google? Codelabs fournit «une expérience de codage guidée, didactique et pratique». Le site est soigneusement divisé en catégories et événements, ce qui permet de trouver rapidement et facilement ce que vous voulez. Il comprend Analytics, Android, Assistant, réalité augmentée, Flutter, G Suite, Search, TensorFlow et la réalité virtuelle. Sélectionnez une option et obtenez le code et les instructions dont vous avez besoin pour créer de petites applications.
09. Outil de couleur
Color Tool est un outil simple qui vous permet de créer, partager et appliquer une palette en plus de vérifier l'accessibilité. Les utilisateurs peuvent choisir une palette prédéfinie dans la palette des matériaux. Choisissez simplement une couleur, puis appliquez-la à la palette de couleurs principale, passez à l'option secondaire et choisissez à nouveau. Enfin, choisissez les couleurs de texte pour les deux modèles. Vous pouvez également passer à Personnalisé pour choisir vos couleurs. Passez ensuite à Accessibilité pour vérifier que tout va bien avant, enfin, d'exporter la palette.
10. Sprints de conception
Le kit Design Sprint est destiné à ceux qui apprennent à participer ou à exécuter des sprints de conception. Il cherche à couvrir toutes les bases de connaissances, des débutants aux animateurs de sprint expérimentés. Apprenez-en davantage sur la méthodologie ou passez directement à la phase de planification, y compris la rédaction de briefs, la collecte de données et de recherches, ainsi que ce qu'il faut faire après le sprint. Comprend également une foule de ressources telles que des outils, des modèles, des recettes et la possibilité de soumettre votre propre méthode. De plus, vous aurez probablement besoin d'un endroit pour stocker et partager des ressources, alors assurez-vous que votre choix de stockage dans le cloud est à point.
11. Guide People + AI
Ce guide est l'œuvre de l'initiative People + AI Research de Google et vise à offrir de l'aide à ceux qui souhaitent créer des produits d'IA centrés sur l'humain. Le guide complet est divisé en six chapitres couvrant les besoins des utilisateurs, la collecte et l'évaluation des données, les modèles mentaux, la confiance, la rétroaction et l'échec gracieux. Chaque chapitre est accompagné d'exercices, de fiches de travail et des outils et ressources nécessaires pour y parvenir.
12. Assistant Google
Il s'agit de la plate-forme de développement de l'Assistant Google, offrant un guide sur la façon d'intégrer votre contenu et vos services à l'Assistant Google. Il vous montre comment étendre votre application mobile, présenter du contenu de manière riche pour la recherche et l'assistant, contrôler les lumières, les machines à café et autres appareils dans la maison et créer des expériences vocales et visuelles pour les haut-parleurs, les écrans et les téléphones intelligents.
13. PageSpeed Insights
PageSpeed Insights analyse le contenu Web, puis propose des suggestions pour accélérer son chargement. Ajoutez simplement une URL, cliquez sur le bouton Analyser et attendez que la magie se produise. Consultez la documentation pour mieux comprendre le fonctionnement de l'API PageSpeed et comment commencer à l'utiliser.
14. AMP sur Google
AMP est l'outil de Google pour créer des pages mobiles à chargement rapide qui (espérons-le) arriveront en tête des classements de recherche. Découvrez comment créer des sites rapides et axés sur l'utilisateur, intégrer AMP dans les produits Google, utiliser Google AMP Cache pour accélérer les pages AMP et monétiser les pages AMP avec d'autres produits Google.
15. Google DevTools
Chaque concepteur et développeur sait (ou du moins devrait savoir) que Chrome est livré avec un ensemble d'outils intégrés directement dans le navigateur. Les DevTools de Chrome sont parfaits pour inspecter les éléments qui composent une page, vérifier le CSS, éditer des pages à la volée et bien plus encore.
L'onglet Elements est l'introduction à DevTools. Il affiche le code HTML qui compose la page sélectionnée. Obtenez un aperçu des propriétés de chaque div ou balise à partir de la page sélectionnée et démarrez l'édition en direct. C'est parfait pour expérimenter des designs. Vérifiez la mise en page - que vous utilisiez Flexbox ou Grid - et jetez un œil aux polices associées avec des exemples et examinez les animations.
Ailleurs, vous pouvez afficher et modifier le CSS. L'onglet Styles du panneau Eléments répertorie les règles CSS appliquées à l'élément actuellement sélectionné dans l'arborescence DOM. Activez et désactivez les propriétés (ou ajoutez de nouvelles valeurs) pour expérimenter des conceptions. C'est l'outil parfait pour s'assurer que tout fonctionne comme prévu avant d'appliquer des modifications à la conception en direct.
Vous pouvez également déboguer JavaScript, optimiser la vitesse du site Web et inspecter la vitesse du réseau. Voici un petit conseil que vous pouvez utiliser pour accélérer immédiatement votre flux de travail. Accédez à l'onglet Sources, cliquez sur Nouvel extrait et ajoutez le code fréquemment utilisé. Nommez l'extrait de code et enregistrez-le. Répétez au besoin. Vous pouvez maintenant récupérer cet extrait de code au lieu de le réécrire.
Comme tout bon navigateur, Chrome évolue constamment et chaque nouvelle version apporte de nouvelles fonctionnalités. Découvrez ce qui se passe sur la plate-forme d'état de Chrome
16. Conception matérielle
Le développement peut être considéré comme l'enfant préféré de Google, mais quoi que vous fassiez, créez ou construisez, il doit être beau et donner à l'utilisateur une expérience qui lui donne envie de l'utiliser. Le matériel est un ajout plus récent à l'écurie Google, mais il s'agit d'un système de conception qui est devenu un élément essentiel du kit de conception.
Comme tout bon système de conception, il a son propre ensemble de directives, que vous devez examiner avant de vous lancer dans les choses les plus excitantes. Obtenez un aperçu de l'utilisation des différents éléments, de la thématisation des matériaux, de la mise en œuvre d'un thème et des guides d'utilisation, y compris l'accessibilité. Ailleurs, il y a un aperçu de Material Foundation, qui comprend les domaines clés du design tels que la mise en page, la navigation, la couleur, la typographie, le son, l'iconographie, le mouvement et l'interaction. Chaque catégorie révèle ses choses à faire et à ne pas faire et les points à prendre en compte avec prudence. Pour donner une idée de ce à quoi s'attendre, la catégorie Mise en page propose des sections sur la compréhension de la mise en page, la densité de pixels, la façon de travailler avec une mise en page réactive comprenant des colonnes, des gouttières et des marges, des points d'arrêt, des régions d'interface utilisateur et des méthodes d'espacement pour n'en citer que quelques-unes.
Au-delà de la section Conception, il y a les composants, qui fournissent les blocs de construction physiques nécessaires pour créer une conception. Qu'est-ce qui est inclus ici? Boutons, bannières, cartes, boîtes de dialogue, diviseurs, listes, menus, indicateurs de progression, curseurs, barres-collations (ce sont de brefs messages sur les processus de l'application en bas de l'écran), onglets, champs de texte et info-bulles. Sans aucun doute une collection complète de composants.
Et les développeurs n'ont pas été oubliés, avec des détails et des tutoriels sur la façon de construire pour différentes plates-formes - Android, iOS, Web et Flutter. Et, enfin, il existe une page dédiée à une foule de ressources pour vous aider à réaliser le design que vous avez choisi.
Cet article a été initialement publié dans le magazine net. Acheter le numéro 326.
