1. Hinweis
In diesem Codelab erfahren Sie, wie Sie mit Gemini Code Assist Material Design auf einer Website implementieren. Sobald Material Design implementiert ist, iterieren Sie das Design und nehmen Änderungen vor, um die User Experience zu verbessern und Funktionen hinzuzufügen. Nach Abschluss dieses Workshops wirst du in der Lage sein, brauchbare, nutzerfreundliche Webseiten mit Material Design oder einer ähnlichen Bibliothek mit Gemini zu erstellen, ohne CSS schreiben zu müssen.
Vorbereitung
- Grundkenntnisse in HTML, CSS und JavaScript
- Ein grundlegendes Verständnis des Webdesigns
Lerninhalte
- Stilbibliotheken mit Gemini Code Assist implementieren
- Wie Sie ein Design mit Gemini Code Assist iterieren, anstatt CSS manuell zu optimieren
- Gemini Code Assist effektiv auffordern, Code im gewünschten Stil beizutragen
Voraussetzungen
- Zugriff auf ein Google Cloud-Projekt mit aktiviertem Gemini für Google Cloud
- Eine Webseite zum Gestalten oder mindestens ein Ordner, in dem eine erstellt werden soll
2. Einrichtung
Für dieses Codelab sind zwei Dinge erforderlich: Zugriff auf ein Google Cloud-Projekt mit aktiviertem Gemini und eine Webseite, die wir gestalten können. Sie können Gemini in einem neuen Projekt aktivieren, indem Sie oben rechts in der Cloud Console auf die Gemini-Schaltfläche klicken und im Bereich unten auf „Aktivieren“ klicken.
Für die Gestaltung der Webseite können Sie eine beliebige Webseite verwenden, die Sie zur Hand haben. Da Gemini aktiviert ist, können Sie Gemini auch bitten, eines für Sie zu generieren. Wenn Sie Gemini eine Anfrage wie Write me a web page with a form to gather profile information senden, sollte das Ergebnis in etwa so aussehen:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get Profile Information</title>
</head>
<body>
<h2>Get Profile Information</h2>
<form method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="address">Address:</label>
<input type="text" id="address" name="address" required>
<input type="submit" value="Save Profile">
</form>
</body>
</html>
3. Material implementieren
Bitte Gemini als Erstes mit einem Prompt in folgender Zeile, Material Design auf unserer Webseite zu implementieren:Can you apply material design styles to this page?
HINWEIS: Alle in diesem Codelab bereitgestellten Prompts sind Beispiele. Sie können sie als Inspiration für Ihre eigenen Zitate verwenden und den Kontext aus Ihrem Projekt einbeziehen, um die besten Ergebnisse zu erzielen.
Die Antwort sollte in etwa so aussehen:
In diesem Lab wird Material Design verwendet. Sie können Gemini aber auch bitten, eine Bibliothek Ihrer Wahl zu implementieren. Wenn Gemini eine andere Version von Material importiert als erwartet, geben Sie die gewünschte Version in Ihrem Prompt an.
4. Design iterieren
Gemini kann auch mit Ihnen zusammenarbeiten, um das Design einer Webseite zu iterieren, ohne sich manuell mit CSS befassen zu müssen. Überlegen Sie sich einen eigenen Prompt, um Gemini zu bitten, dieses Design zu iterieren. Um bei solchen Aufgaben die besten Ergebnisse zu erzielen, konzentrieren Sie sich darauf, die Elemente, die Sie ändern möchten, und ihr gewünschtes Ergebnis so prägnant wie möglich zu beschreiben:
Can we center the content on this page?
Sie können Gemini auch funktionale Elemente auf Ihrer Seite einfügen lassen. Bitten Sie Gemini, dem Formular weitere Felder oder zusätzliche Funktionen hinzuzufügen:
Can we add some more fields to this form, like phone number, email address?
5. Organisation
Sie können die Ergebnisse von Gemini auch an der Stelle organisieren, die für unser Projekt am besten geeignet ist. In diesem Fall ist ein style-Tag ideal, da der Schwerpunkt auf der Iteration des Designs in dieser Datei liegt. Bitten Sie Gemini, die Antworten in einem Stil-Tag aufzunehmen, damit die Änderungen nicht gleichzeitig auf mehrere Stil-Tags angewendet werden müssen:
Can you put this css in a style tag? I'd like to keep everything in this HTML page.
6. Bedienungshilfen
Wie in Material Design angegeben, sind Barrierefreiheit und Nutzerfreundlichkeit wesentliche Designelemente. Bitten Sie Gemini daher, dafür zu sorgen, dass unsere Eingaben die richtigen Typen verwenden. So wird sichergestellt, dass sie von Bedienungshilfen wie Screenreadern richtig erkannt werden.
Can you make sure to use the right types of inputs for each field? Tel for telephone, email for email, etc.
7. Fazit
Herzlichen Glückwunsch zum Abschluss dieses Codelabs! Sie haben gelernt, wie Sie mit Gemini Material Design auf einer Webseite implementieren können. Sie haben auch gelernt, wie Sie das Design iterieren und den generierten Code organisieren. Mit dieser neuen Fähigkeit können Sie nutzungsfreundliche, benutzerfreundliche Webseiten mit Material Design oder ähnlichen Bibliotheken mit minimalem Aufwand erstellen.