1. Hinweis
In diesem Codelab erfahren Sie, wie Sie mit Gemini Code Assist Material Design auf einer Website implementieren. Sobald Material Design implementiert ist, können Sie das Design überarbeiten, um die User Experience zu verbessern und Funktionen hinzuzufügen. Am Ende dieses Workshops können Sie mit Gemini nutzerfreundliche Webseiten mit Material Design oder einer ähnlichen Bibliothek erstellen, ohne CSS schreiben zu müssen.
Vorbereitung
- Grundkenntnisse in HTML, CSS und JavaScript
- Grundlegendes Verständnis von 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 in Ihrem gewünschten Stil beizutragen
Voraussetzungen
- Zugriff auf ein Google Cloud-Projekt mit aktivierter Gemini for Google Cloud
- Eine Webseite, die formatiert werden soll, oder zumindest ein Ordner, in dem eine solche Seite erstellt werden kann
2. Einrichtung
Für dieses Codelab sind zwei Dinge erforderlich: Zugriff auf ein Google Cloud-Projekt mit aktivierter Gemini-Funktion 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 dann im Bereich unten auf „Aktivieren“ klicken.
Sie können für die zu formatierende Webseite eine beliebige Webseite verwenden, die Sie zur Hand haben. Da Gemini aktiviert ist, können Sie auch Gemini bitten, eine für Sie zu generieren. Wenn Sie Gemini mit einem Prompt 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. Implementierungsmaterial
Beginnen Sie damit, Gemini mit einem Prompt wie dem folgenden aufzufordern, Material Design auf unserer Webseite zu implementieren:Can you apply material design styles to this page?
HINWEIS: Alle in diesem Codelab angegebenen Prompts sind Beispiele. Sie können sie gerne als Inspiration für Ihre eigenen Zitate verwenden und für optimale Ergebnisse Kontext aus Ihrem Projekt einfügen.
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 optimieren
Gemini kann Sie auch dabei unterstützen, das Design einer Webseite zu optimieren, ohne dass Sie sich manuell mit CSS befassen müssen. Erstellen Sie einen eigenen Prompt, um Gemini zu bitten, dieses Design zu optimieren. Um bei solchen Aufgaben die besten Ergebnisse zu erzielen, sollten Sie sich darauf konzentrieren, die Elemente, die Sie ändern möchten, und das gewünschte 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 der Seite hinzufügen lassen. Sie können Gemini auffordern, 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 Gemini auch bitten, die Ergebnisse an dem Ort zu organisieren, der für Ihr Projekt am besten geeignet ist. Da der Fokus in diesem Fall auf der Iteration des Designs in dieser einen Datei liegt, ist ein style-Tag ideal. Bitten Sie Gemini, die Antworten in einem Style-Tag zu platzieren, 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 beschrieben, sind Barrierefreiheit und Nutzerfreundlichkeit wesentliche Elemente des Designs. Daher können Sie Gemini bitten, die richtigen Typen für Ihre Eingaben zu verwenden. So wird sichergestellt, dass sie von Tools für 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 iterieren und den generierten Code organisieren. Mit diesem neuen Skill können Sie mit minimalem Einrichtungsaufwand nutzerfreundliche Webseiten mit Material Design oder ähnlichen Bibliotheken erstellen.