Inhoud
- 01. Vuurtoren
- 02. Polymeer
- 03. APIs Explorer
- 04. Fladderen
- 05. Google GitHub
- 06. Poppenspeler
- 07. Werkbox
- 08. Codelabs
- 09. Kleurgereedschap
- 10. Ontwerp Sprints
- 11. Mensen + AI-handboek
- 12. Google Assistent
- 13. PageSpeed Insights
- 14. AMP op Google
- 15. Google DevTools
- 16. Materiaalontwerp
Als u op internet werkt, betekent dit meestal dat u in een of andere vorm met Google werkt. En aangezien Google Chrome de concurrentie een straat voor is, moeten ontwerpers en ontwikkelaars nadenken over hoe hun project met de browser zal werken. Hoe ziet het eruit? Welke technologieën ondersteunt het, hoe veilig is het en hoe zal het presteren?
Gelukkig biedt Chrome tools om ervoor te zorgen dat elke site of app op zijn best zal zijn. DevTools stellen ontwerpers en ontwikkelaars in staat om inzicht te krijgen in een webpagina: u kunt de DOM manipuleren, CSS controleren, experimenteren met ontwerpen met live bewerking, JavaScript debuggen en de prestaties controleren. (Bekijk hier meer over het gebruik van deze Google-webtools en als u helemaal opnieuw begint, raadpleegt u ook onze lijst met topwebbouwers).
Maar Google biedt meer dan alleen de browser. Het heeft tools en bronnen om bijna elk aspect van uw ontwerp- en ontwikkelingsleven te ondersteunen. Wilt u weten hoe u de prestaties kunt verbeteren? Lighthouse is hier om te helpen. Wilt u beter presterende mobiele sites bouwen? Zeg dan hallo tegen AMP. Wilt u mooie PWA's bouwen? Dan zijn Flutter, Material Design en Workbox klaar om in te grijpen.
Het mooie van het gebruik van Google-tools, bronnen, bibliotheken en frameworks is dat u weet dat ze goed werken met de Chrome-browser, de populairste browser ter wereld. Zie onze verzameling webontwerptools voor meer tools.
01. Vuurtoren
Prestaties zijn een sleutelfactor voor het succes van een site en Lighthouse is de tool van Google om de kwaliteit van webpagina's te verbeteren (de juiste webhostingservice helpt ook). Dus hoe gebruik je Lighthouse en wat kan het doen? In de eenvoudigste vorm kunt u Lighthouse uitvoeren vanaf het tabblad Audits en kiezen uit een selectie van opties, waaronder desktop of mobiel, naast selectievakjes voor prestaties, toegankelijkheid en SEO, om een eindrapport met voorgestelde verbeteringen te genereren.
02. Polymeer
Polymer staat bekend om zijn werk met webcomponenten, maar het project heeft zijn repertoire nu uitgebreid met een verzameling bibliotheken, tools en standaarden. Wat zit er in? LitElement is een editor waarmee u eenvoudig webcomponenten kunt definiëren, terwijl lit-html een HTML-sjabloonbibliotheek is waarmee gebruikers next-gen HTML-sjablonen in JS kunnen schrijven. Bovendien vindt u hier ook een PWA-starterkit, de originele polymeerbibliotheek en sets webcomponenten.
03. APIs Explorer
Google heeft een enorme bibliotheek met API's beschikbaar voor ontwikkelaars, maar het is geen gemakkelijke taak om te vinden wat u nodig hebt. Dit is waar Google's API's Explorer tussenkomt om een helpende hand te bieden. Er is een lange lijst waar doorheen kan worden gescrolld, maar voor snellere toegang is er een zoekvak om de API-lijst te filteren. Elk item linkt naar een referentiepagina met meer details over het gebruik van de API.
04. Fladderen
Als u op zoek bent naar mooie applicaties voor mobiel, internet en desktop vanuit één codebase, dan is Flutter wellicht iets voor u. De site is een complete verwijzing naar het werken met en bouwen met Flutter. Heb je geen idee wat je moet doen? De documenten nemen een gebruiker mee van installatie tot creatie, bijgestaan door tal van voorbeelden en tutorials.
05. Google GitHub
Zoals de meesten zullen weten, is GitHub het hostingplatform / de repository om code en bestanden op te slaan en te delen. En gelukkig heeft Google een eigen plek op het platform met meer dan 260 repositories om doorheen te zoeken. Gebruik het filter om uw zoektijd te verkorten en dichter bij de repository te komen waarmee u wilt spelen of waaraan u wilt bijdragen.
06. Poppenspeler
Puppeteer is ingebouwd in Node en biedt een API op hoog niveau waarmee u Chrome zonder hoofd kunt openen - in feite Chrome zonder de gebruikersinterface, die ontwikkelaars vervolgens via de opdrachtregel kunnen bedienen. Dus wat kun je doen met Puppeteer? Er zijn een paar opties beschikbaar om schermafbeeldingen en pdf's van pagina's te genereren, het indienen van formulieren te automatiseren en een geautomatiseerde testomgeving te creëren.
07. Werkbox
Als u een PWA wilt bouwen, is dit een goed startpunt. Workbox biedt een verzameling JavaScript-bibliotheken voor het toevoegen van offline ondersteuning aan webapps. Een selectie van diepgaande handleidingen laat zien hoe u een servicemedewerkerbestand maakt en registreert, verzoeken routeert, plug-ins gebruikt en bundlers gebruikt met Workbox. En er is ook een reeks voorbeelden van cachingstrategieën om uit te checken.
08. Codelabs
Praktische begeleiding nodig voor een Google-product? Codelabs biedt "een begeleide, praktische, praktische codeerervaring". De site is netjes onderverdeeld in categorieën en evenementen, zodat u snel en gemakkelijk kunt vinden wat u zoekt. Het omvat Analytics, Android, Assistant, augmented reality, Flutter, G Suite, Search, TensorFlow en virtual reality. Selecteer een optie en ontvang de code en instructies die u nodig hebt om kleine applicaties te bouwen.
09. Kleurgereedschap
Color Tool is een eenvoudige tool waarmee u naast het controleren van de toegankelijkheid ook een palet kunt maken, delen en toepassen. Gebruikers kunnen een voorgedefinieerd palet kiezen uit het Materiaalpalet. Kies gewoon een kleur en pas deze toe op het primaire kleurenschema, schakel over naar de secundaire optie en kies opnieuw. Kies tenslotte tekstkleuren voor beide schema's. U kunt ook overschakelen naar Aangepast om uw kleuren te kiezen. Schakel vervolgens over naar Toegankelijkheid om te controleren of alles in orde is voordat u het palet ten slotte exporteert.
10. Ontwerp Sprints
De Design Sprint Kit is voor degenen die leren hoe ze kunnen deelnemen aan design sprints of deze kunnen uitvoeren. Het lijkt alle kennisbanken te omvatten, van beginners tot ervaren sprintbegeleiders. Leer meer over de methodologie of spring direct in de planningsfase, inclusief het schrijven van briefs, het verzamelen van gegevens en onderzoek, en ook wat je na de sprint moet doen. Bevat ook een groot aantal bronnen, zoals tools, sjablonen, recepten en de mogelijkheid om uw eigen methode in te dienen. Je hebt waarschijnlijk ook een plek nodig om bronnen op te slaan en te delen, dus zorg ervoor dat je keuze voor cloudopslag klopt.
11. Mensen + AI-handboek
Deze gids is het werk van het People + AI Research-initiatief van Google en is bedoeld om hulp te bieden aan mensen die op de mens gerichte AI-producten willen bouwen. De uitgebreide handleiding is opgesplitst in zes hoofdstukken die de gebruikersbehoeften, het verzamelen en evalueren van gegevens, mentale modellen, vertrouwen, feedback en gracieus falen behandelen. Elk hoofdstuk gaat vergezeld van oefeningen, werkbladen en de tools en bronnen die nodig zijn om het te realiseren.
12. Google Assistent
Dit is het ontwikkelaarsplatform van de Google Assistent en biedt een handleiding voor het integreren van uw inhoud en services met de Google Assistent. Het laat je zien hoe je je mobiele app kunt uitbreiden, content op rijke manieren kunt presenteren voor Search en Assistant, lampen, koffiemachines en andere apparaten in huis kunt bedienen en spraak- en visuele ervaringen kunt opbouwen voor slimme luidsprekers, beeldschermen en telefoons.
13. PageSpeed Insights
PageSpeed Insights analyseert webinhoud en biedt vervolgens suggesties om deze sneller te laten laden. Voeg gewoon een URL toe, klik op de knop Analyseren en wacht tot de magie gebeurt. Bekijk de documenten om een beter inzicht te krijgen in hoe de PageSpeed API werkt en hoe u deze kunt gaan gebruiken.
14. AMP op Google
AMP is de tool van Google voor het maken van snelladende mobiele pagina's die (hopelijk) bovenaan de zoekresultaten komen te staan. Leer hoe u snelle sites maakt die de gebruiker centraal stellen, AMP integreert in Google-producten, Google AMP Cache gebruikt om AMP-pagina's sneller te maken en inkomsten genereert met AMP-pagina's met andere Google-producten.
15. Google DevTools
Elke ontwerper en ontwikkelaar weet (of zou in ieder geval moeten weten) dat Chrome wordt geleverd met een reeks tools die rechtstreeks in de browser zijn ingebouwd. De DevTools van Chrome zijn ideaal voor het inspecteren van de elementen waaruit een pagina bestaat, het controleren van CSS, het direct bewerken van pagina's en nog veel meer.
Het tabblad Elementen is de inleiding tot DevTools. Het toont de HTML-code waaruit de geselecteerde pagina bestaat. Krijg inzicht in de eigenschappen van elke div of tag van de geselecteerde pagina en start met live bewerken. Dit is perfect om te experimenteren met ontwerpen. Controleer de lay-out - of u nu Flexbox of Grid gebruikt - en bekijk gerelateerde lettertypen met voorbeelden en bekijk animaties.
Elders kunt u CSS bekijken en wijzigen. Het tabblad Stijlen in het deelvenster Elementen toont de CSS-regels die worden toegepast op het momenteel geselecteerde element in de DOM-structuur. Schakel eigenschappen aan en uit (of voeg nieuwe waarden toe) om te experimenteren met ontwerpen. Dit is de perfecte tool om ervoor te zorgen dat alles werkt zoals verwacht voordat wijzigingen in het live-ontwerp worden aangebracht.
U kunt ook JavaScript debuggen, de websitesnelheid optimaliseren en de netwerksnelheid inspecteren. Hier is een snelle tip die u kunt gebruiken om uw workflow onmiddellijk te versnellen. Ga naar het tabblad Bronnen, klik op Nieuw fragment en voeg veelgebruikte code toe. Geef het codefragment een naam en sla het op. Herhaal indien nodig. Nu kunt u dit codefragment pakken in plaats van het opnieuw te schrijven.
Zoals elke goede browser, evolueert Chrome voortdurend en elke nieuwe release brengt nieuwe functies met zich mee. Lees wat er gebeurt op het Chrome-statusplatform
16. Materiaalontwerp
Ontwikkeling kan worden gezien als het favoriete kind van Google, maar wat je ook maakt, maakt of bouwt, het moet er goed uitzien en de gebruiker een ervaring geven waardoor hij er gebruik van wil maken. Materiaal is een recentere toevoeging aan de Google-stal, maar is een ontwerpsysteem dat is uitgegroeid tot een essentieel stuk ontwerpkit.
Zoals elk goed ontwerpsysteem, heeft het zijn eigen set richtlijnen, waar je naar moet kijken voordat je in de meer opwindende dingen stapt. Krijg een overzicht van hoe u verschillende elementen kunt gebruiken, wat Materiële thema's zijn, hoe u een thema kunt implementeren en bruikbaarheidshandleidingen inclusief toegankelijkheid. Elders is er inzicht in Material Foundation, dat de belangrijkste ontwerpgebieden omvat, zoals lay-out, navigatie, kleur, typografie, geluid, iconografie, beweging en interactie. Elke categorie onthult de do's en don'ts en waar u op moet letten. Om een idee te geven van wat u kunt verwachten, biedt de categorie Lay-out secties over het begrijpen van lay-out, pixeldichtheid, hoe u kunt werken met een responsieve lay-out inclusief kolommen, rugmarge en marges, breekpunten, UI-regio's en afstandsmethoden om er maar een paar te noemen.
Naast de sectie Design is er Components, die de fysieke bouwstenen biedt die nodig zijn om een ontwerp te maken. Wat is hier inbegrepen? Knoppen, banners, kaarten, dialoogvensters, verdelers, lijsten, menu's, voortgangsindicatoren, schuifregelaars, snackbalken (dit zijn korte berichten over app-processen onder aan het scherm), tabbladen, tekstvelden en tooltips. Ongetwijfeld een uitgebreide verzameling componenten.
En ontwikkelaars zijn niet vergeten, met details en tutorials over hoe te bouwen voor verschillende platforms - Android, iOS, Web en Flutter. En tot slot is er een pagina gewijd aan een groot aantal bronnen om u te helpen het door u gekozen ontwerp te realiseren.
Dit artikel is oorspronkelijk verschenen in net magazine. Koop nummer 326.
