1. Hinweis
In diesem Codelab erfahren Sie, wie Sie mit Gemini Code Assist Material Design auf einer Website implementieren. Nach der Implementierung von Material Design optimieren Sie das Design, nehmen Änderungen vor, um die Nutzerfreundlichkeit zu verbessern, und fügen Funktionen hinzu. Am Ende dieses Workshops können Sie mit Gemini nutzerfreundliche Webseiten mit Material Design oder einer ähnlichen Bibliothek erstellen, ohne CSS-Code schreiben zu müssen.
Vorbereitung
- Grundlegende Kenntnisse in HTML, CSS und JavaScript
- Grundlegende Kenntnisse im Webdesign
Lerninhalte
- Styling-Bibliotheken mit Gemini Code Assist implementieren
- Design mit Gemini Code Assist optimieren, anstatt CSS manuell anzupassen
- Gemini Code Assist effektiv auffordern, Code im gewünschten Stil beizutragen
Voraussetzungen
- Zugriff auf ein Google Cloud-Projekt mit aktiviertem Gemini for Google Cloud
- Eine Webseite, die Sie gestalten möchten, oder mindestens ein Ordner, in dem Sie eine erstellen können
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 rechts oben in der Cloud Console auf die Gemini-Schaltfläche klicken und im folgenden Bereich auf „Aktivieren“ klicken.
Sie können jede beliebige Webseite verwenden, die Sie zur Hand haben. Alternativ können Sie Gemini bitten, eine für Sie zu generieren. Wenn Sie Gemini mit einer Anfrage wie Write me a web page with a form to gather profile information auffordern, 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
Bitten Sie Gemini, Material Design auf unserer Webseite zu implementieren, indem Sie einen Prompt wie diesen verwenden:Can you apply material design styles to this page?
HINWEIS: Alle in diesem Codelab angegebenen Prompts sind Beispiele. Sie können sie als Inspiration für Ihre eigenen Prompts verwenden und Kontext aus Ihrem Projekt einbeziehen, um die besten Ergebnisse zu erzielen.
Die Antwort sollte in etwa so aussehen:
Material Design wird für dieses Lab verwendet, aber Sie können Gemini auch bitten, die 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 optimieren
Gemini kann Ihnen auch dabei helfen, das Design einer Webseite zu optimieren, ohne dass Sie CSS manuell bearbeiten müssen. Erstellen Sie einen eigenen Prompt, um Gemini zu bitten, dieses Design zu optimieren. Um bei solchen Aufgaben die besten Ergebnisse zu erzielen, beschreiben Sie die Elemente, die Sie ändern möchten, und das gewünschte Ergebnis so präzise wie möglich:
Can we center the content on this page?
Sie können Gemini auch bitten, funktionale Elemente zu unserer Seite hinzuzufügen. Bitten Sie Gemini, dem Formular weitere Felder hinzuzufügen 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 Gemini auch bitten, die Ergebnisse an dem Ort zu organisieren, der für unser Projekt am besten geeignet ist. In diesem Fall ist ein style-Tag ideal, da der Schwerpunkt auf der Optimierung des Designs in dieser einen Datei liegt. Bitten Sie Gemini, die Antworten in ein Style-Tag einzufügen, damit Sie die Änderungen nicht einzeln anwenden 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 Bedienungshilfen und Nutzerfreundlichkeit wesentliche Elemente des Designs. Bitten Sie Gemini, darauf zu achten, dass für unsere Eingaben die richtigen Typen verwendet werden. So wird sichergestellt, dass sie von Bedienungshilfen wie Screenreadern richtig erfasst werden.
Can you make sure to use the right types of inputs for each field? Tel for telephone, email for email, etc.
7. Fazit
Sie haben dieses Codelab abgeschlossen. Sie haben gelernt, wie Sie mit Gemini Material Design auf einer Webseite implementieren. Außerdem haben Sie gelernt, wie Sie das Design optimieren und den generierten Code organisieren. Mit diesen neuen Kenntnissen können Sie mit minimalem Aufwand nutzerfreundliche Webseiten mit Material Design oder ähnlichen Bibliotheken erstellen.