Inhalt
- 01. Leuchtturm
- 02. Polymer
- 03. APIs Explorer
- 04. Flattern
- 05. Google GitHub
- 06. Puppenspieler
- 07. Arbeitsbox
- 08. Codelabs
- 09. Farbwerkzeug
- 10. Sprints entwerfen
- 11. People + AI Guidebook
- 12. Google Assistant
- 13. PageSpeed Insights
- 14. AMP bei Google
- 15. Google DevTools
- 16. Materialdesign
Wenn Sie im Web arbeiten, bedeutet dies normalerweise, dass Sie in irgendeiner Form mit Google arbeiten. Da Google Chrome der Konkurrenz weit voraus ist, müssen Designer und Entwickler darüber nachdenken, wie ihr Projekt mit dem Browser funktioniert. Wie wird es aussehen? Welche Technologien werden unterstützt, wie sicher ist es und wie wird es funktionieren?
Glücklicherweise bietet Chrome Tools, mit denen sichergestellt wird, dass jede Website oder App optimal ist. Mit DevTools erhalten Designer und Entwickler Einblick in eine Webseite: Sie können das DOM bearbeiten, CSS überprüfen, mit Live-Bearbeitung an Designs experimentieren, JavaScript debuggen und die Leistung überprüfen. (Weitere Informationen zur Verwendung dieser Google-Web-Tools finden Sie hier. Wenn Sie bei Null anfangen, lesen Sie auch unsere Liste der besten Web-Builder.)
Google bietet jedoch mehr als nur den Browser. Es verfügt über Tools und Ressourcen, die nahezu jeden Aspekt Ihres Design- und Entwicklungslebens unterstützen. Möchten Sie wissen, wie Sie die Leistung verbessern können? Lighthouse ist hier um zu helfen. Möchten Sie leistungsstärkere mobile Websites erstellen? Dann grüßen Sie AMP. Möchten Sie schöne PWAs bauen? Dann können Flutter, Material Design und Workbox einspringen.
Das Schöne an der Verwendung von Google-Tools, -Ressourcen, -Bibliotheken und -Frameworks ist, dass Sie wissen, dass sie mit dem Chrome-Browser - dem beliebtesten Browser der Welt - gut funktionieren. Weitere Tools finden Sie in unserer Zusammenfassung der Webdesign-Tools.
01. Leuchtturm
Die Leistung ist ein Schlüsselfaktor für den Erfolg einer Website. Lighthouse ist Googles Tool zur Verbesserung der Qualität von Webseiten (der richtige Webhosting-Service hilft ebenfalls). Wie benutzt man Lighthouse und was kann es? In der einfachsten Form können Sie Lighthouse auf der Registerkarte Audits ausführen und aus einer Auswahl von Optionen auswählen, einschließlich Desktop oder Mobile. Zusätzlich zu den Kontrollkästchen für Leistung, Barrierefreiheit und SEO können Sie einen Abschlussbericht mit Verbesserungsvorschlägen erstellen.
02. Polymer
Polymer ist bekannt für seine Arbeit mit Webkomponenten, aber das Projekt hat sein Repertoire jetzt um eine Sammlung von Bibliotheken, Tools und Standards erweitert. Was ist inbegriffen? LitElement ist ein Editor, mit dem Webkomponenten einfach definiert werden können, während lit-html eine HTML-Vorlagenbibliothek ist, mit der Benutzer HTML-Vorlagen der nächsten Generation in JS schreiben können. Außerdem finden Sie ein PWA Starter Kit, die Original-Polymerbibliothek und Sätze von Webkomponenten.
03. APIs Explorer
Google verfügt über eine umfangreiche Bibliothek von APIs, die Entwicklern zur Verfügung stehen. Es ist jedoch keine leichte Aufgabe, das zu finden, was Sie benötigen. Hier greift der API-Explorer von Google ein, um Ihnen zu helfen. Es gibt eine lange Liste, durch die gescrollt werden kann, aber für einen schnelleren Zugriff gibt es ein Suchfeld zum Filtern der API-Liste. Jeder Eintrag verweist auf eine Referenzseite mit weiteren Details zur Verwendung der API.
04. Flattern
Wenn Sie gut aussehende Anwendungen für Mobilgeräte, Web und Desktop aus einer einzigen Codebasis erstellen möchten, ist Flutter genau das Richtige für Sie. Die Site ist eine vollständige Referenz zum Arbeiten mit und Bauen mit Flutter. Sie haben keine Ahnung, was Sie tun sollen? Die Dokumente führen einen Benutzer von der Installation bis zur Erstellung, unterstützt von zahlreichen Beispielen und Tutorials.
05. Google GitHub
Wie die meisten wissen, ist GitHub die Hosting-Plattform / das Hosting-Repository zum Speichern und Freigeben von Code und Dateien. Glücklicherweise hat Google einen eigenen Platz auf der Plattform mit über 260 Repositories, die durchsucht werden müssen. Verwenden Sie den Filter, um Ihre Suchzeit zu verkürzen und sich dem Repository zu nähern, mit dem Sie spielen oder zu dem Sie beitragen möchten.
06. Puppenspieler
Puppeteer ist in Node integriert und bietet eine API auf hoher Ebene, mit der Sie auf kopfloses Chrome zugreifen können - effektiv auf Chrome ohne die Benutzeroberfläche, die Entwickler dann über die Befehlszeile steuern können. Was können Sie mit Puppenspieler tun? Es stehen einige Optionen zum Generieren von Screenshots und PDFs von Seiten, zum Automatisieren der Formularübermittlung und zum Erstellen einer automatisierten Testumgebung zur Verfügung.
07. Arbeitsbox
Wenn Sie eine PWA erstellen möchten, ist dies ein guter Ausgangspunkt. Workbox bietet eine Sammlung von JavaScript-Bibliotheken zum Hinzufügen von Offline-Unterstützung zu Webanwendungen. Eine Auswahl ausführlicher Anleitungen zeigt, wie Sie eine Service Worker-Datei erstellen und registrieren, Anforderungen weiterleiten, Plugins verwenden und Bundler mit Workbox verwenden. Außerdem gibt es eine Reihe von Beispiel-Caching-Strategien zum Auschecken.
08. Codelabs
Benötigen Sie praktische Anleitungen für ein Google-Produkt? Codelabs bietet „eine geführte, praktische Anleitung zum Codieren“. Die Website ist übersichtlich in Kategorien und Ereignisse unterteilt, sodass Sie schnell und einfach finden, was Sie möchten. Es umfasst Analytics, Android, Assistent, Augmented Reality, Flutter, G Suite, Suche, TensorFlow und Virtual Reality. Wählen Sie eine Option aus und erhalten Sie den Code und die Anweisungen, die Sie zum Erstellen kleiner Anwendungen benötigen.
09. Farbwerkzeug
Das Farbwerkzeug ist ein einfaches Werkzeug, mit dem Sie zusätzlich zur Überprüfung der Barrierefreiheit eine Palette erstellen, freigeben und anwenden können. Benutzer können eine vordefinierte Palette aus der Materialpalette auswählen. Wählen Sie einfach eine Farbe aus und wenden Sie sie dann auf das primäre Farbschema an. Wechseln Sie zur sekundären Option und wählen Sie sie erneut aus. Wählen Sie schließlich die Textfarben für beide Schemata aus. Alternativ können Sie zu Benutzerdefiniert wechseln, um Ihre Farben auszuwählen. Wechseln Sie dann zu Eingabehilfen, um zu überprüfen, ob alles in Ordnung ist, bevor Sie schließlich die Palette exportieren.
10. Sprints entwerfen
Das Design Sprint Kit ist für diejenigen gedacht, die lernen, wie man an Design Sprints teilnimmt oder diese durchführt. Es soll alle Wissensdatenbanken abdecken, vom Anfänger bis zum erfahrenen Sprint-Moderator. Erfahren Sie mehr über die Methodik oder springen Sie direkt in die Planungsphase, einschließlich des Schreibens von Briefs, des Sammelns von Daten und Recherchen sowie der Maßnahmen nach dem Sprint. Enthält auch eine Vielzahl von Ressourcen wie Tools, Vorlagen, Rezepte und die Option, Ihre eigene Methode einzureichen. Außerdem benötigen Sie wahrscheinlich einen Ort zum Speichern und Freigeben von Ressourcen. Stellen Sie daher sicher, dass Ihre Cloud-Speicherauswahl richtig ist.
11. People + AI Guidebook
Dieser Leitfaden ist die Arbeit der People + AI-Forschungsinitiative bei Google und soll denjenigen helfen, die auf den Menschen ausgerichtete KI-Produkte entwickeln möchten. Der umfassende Leitfaden ist in sechs Kapitel unterteilt, in denen die Bedürfnisse der Benutzer, die Datenerfassung und -auswertung, mentale Modelle, Vertrauen, Feedback und ein ordnungsgemäßes Versagen behandelt werden. Jedes Kapitel wird von Übungen, Arbeitsblättern und den Tools und Ressourcen begleitet, die erforderlich sind, um dies zu erreichen.
12. Google Assistant
Dies ist die Entwicklerplattform von Google Assistant, die eine Anleitung zur Integration Ihrer Inhalte und Dienste in Google Assistant bietet. Es zeigt Ihnen, wie Sie Ihre mobile App erweitern, Inhalte für Search and Assistant auf vielfältige Weise präsentieren, Lichter, Kaffeemaschinen und andere Geräte im ganzen Haus steuern und Sprach- und visuelle Erlebnisse für intelligente Lautsprecher, Displays und Telefone erstellen können.
13. PageSpeed Insights
PageSpeed Insights analysiert Webinhalte und bietet Vorschläge, wie diese schneller geladen werden können. Fügen Sie einfach eine URL hinzu, klicken Sie auf die Schaltfläche Analysieren und warten Sie, bis die Magie einsetzt. Überprüfen Sie die Dokumente, um einen besseren Einblick in die Funktionsweise der PageSpeed-API und deren Verwendung zu erhalten.
14. AMP bei Google
AMP ist Googles Tool zum Erstellen schnell ladender mobiler Seiten, die (hoffentlich) an die Spitze der Suchrankings gelangen. Erfahren Sie, wie Sie schnelle Websites erstellen, AMP für alle Google-Produkte integrieren, den AMP-Cache von Google verwenden, um AMP-Seiten schneller zu machen und AMP-Seiten mit anderen Google-Produkten zu monetarisieren.
15. Google DevTools
Jeder Designer und Entwickler weiß (oder sollte zumindest wissen), dass Chrome mit einer Reihe von Tools ausgestattet ist, die direkt in den Browser integriert sind. Die DevTools von Chrome eignen sich ideal zum Überprüfen der Elemente einer Seite, zum Überprüfen von CSS, zum Bearbeiten von Seiten im laufenden Betrieb und vielem mehr.
Die Registerkarte Elemente ist die Einführung in DevTools. Es zeigt den HTML-Code an, aus dem die ausgewählte Seite besteht. Erhalten Sie auf der ausgewählten Seite einen Einblick in die Eigenschaften der einzelnen Divs oder Tags und starten Sie die Live-Bearbeitung. Dies ist perfekt zum Experimentieren mit Designs. Überprüfen Sie das Layout - unabhängig davon, ob Sie Flexbox oder Grid verwenden - und sehen Sie sich verwandte Schriftarten mit Beispielen an und untersuchen Sie Animationen.
An anderer Stelle können Sie CSS anzeigen und ändern. Auf der Registerkarte Stile im Bedienfeld Elemente werden die CSS-Regeln aufgelistet, die auf das aktuell ausgewählte Element in der DOM-Struktur angewendet werden. Schalten Sie die Eigenschaften ein und aus (oder fügen Sie neue Werte hinzu), um mit Designs zu experimentieren. Dies ist das perfekte Tool, um sicherzustellen, dass alles wie erwartet funktioniert, bevor Änderungen am Live-Design vorgenommen werden.
Sie können auch JavaScript debuggen, die Geschwindigkeit der Website optimieren und die Netzwerkgeschwindigkeit überprüfen. Hier ist ein kurzer Tipp, mit dem Sie Ihren Workflow sofort beschleunigen können. Gehen Sie zur Registerkarte Quellen, klicken Sie auf Neues Snippet und fügen Sie häufig verwendeten Code hinzu. Benennen Sie das Code-Snippet und speichern Sie es. Wiederholen Sie diesen Vorgang nach Bedarf. Jetzt können Sie dieses Code-Snippet abrufen, anstatt es erneut zu schreiben.
Wie jeder gute Browser entwickelt sich Chrome ständig weiter und jede neue Version bringt neue Funktionen. Erfahren Sie, was auf der Chrome-Statusplattform passiert
16. Materialdesign
Entwicklung kann als das bevorzugte Kind von Google angesehen werden, aber was auch immer Sie machen, erstellen oder bauen, es muss gut aussehen und dem Nutzer eine Erfahrung bieten, die ihn dazu bringt, es zu nutzen. Material ist eine neuere Ergänzung des Google-Stalls, aber ein Design-System, das sich zu einem wichtigen Teil des Design-Kits entwickelt hat.
Wie jedes gute Designsystem hat es seine eigenen Richtlinien, die Sie beachten müssen, bevor Sie sich mit den aufregenderen Dingen befassen. Verschaffen Sie sich einen Überblick über die Verwendung verschiedener Elemente, das Materialthema, die Implementierung eines Themas und Usability-Anleitungen einschließlich der Barrierefreiheit. An anderer Stelle gibt es einen Einblick in Material Foundation, der die wichtigsten Bereiche des Designs wie Layout, Navigation, Farbe, Typografie, Ton, Ikonografie, Bewegung und Interaktion umfasst. Jede Kategorie enthüllt ihre Vor- und Nachteile und wo Sie Vorsicht walten lassen sollten. Um eine Vorstellung davon zu geben, was Sie erwartet, bietet die Kategorie Layout Abschnitte zum Verständnis von Layout, Pixeldichte und zur Arbeit mit einem reaktionsschnellen Layout, einschließlich Spalten, Rinnen und Rändern, Haltepunkten, UI-Bereichen und Abstandsmethoden, um nur einige zu nennen.
Jenseits des Entwurfsbereichs befindet sich Komponenten, die die physischen Bausteine bereitstellen, die zum Erstellen eines Entwurfs erforderlich sind. Was ist hier enthalten? Schaltflächen, Banner, Karten, Dialoge, Teiler, Listen, Menüs, Fortschrittsanzeigen, Schieberegler, Snackbars (dies sind kurze Meldungen zu App-Prozessen am unteren Bildschirmrand), Registerkarten, Textfelder und QuickInfos. Zweifellos eine umfassende Sammlung von Komponenten.
Und Entwickler wurden nicht vergessen, mit Details und Tutorials zum Erstellen für verschiedene Plattformen - Android, iOS, Web und Flutter. Und schließlich gibt es eine Seite, die einer Vielzahl von Ressourcen gewidmet ist, um das von Ihnen gewählte Design zu verwirklichen.
Dieser Artikel erschien ursprünglich im Netzmagazin. Ausgabe 326 kaufen.
