Mit Gemini Code Assist stilvoll werden

Mit Gemini Code Assist stilvoller werden

Informationen zu diesem Codelab

subjectZuletzt aktualisiert: Juni 20, 2024
account_circleVerfasst von Aaron Wanjala

1. Hinweis

In diesem Codelab erfahren Sie, wie Sie mit Gemini Code Assist Material Design auf einer Website implementieren. Sobald Material Design implementiert ist, überarbeiten Sie das Design und nehmen Änderungen vor, um die Nutzerfreundlichkeit zu verbessern und Funktionen hinzuzufügen. Am Ende dieses Workshops können Sie mit Gemini anhand von Material Design oder einer ähnlichen Bibliothek nutzerfreundliche Webseiten erstellen, ohne CSS schreiben zu müssen.

  • Grundkenntnisse in HTML, CSS und JavaScript
  • Grundlegende Kenntnisse im Webdesign

Lerninhalte

  • Styling-Bibliotheken mit Gemini Code Assist implementieren
  • Mit Gemini Code Assist ein Design iterieren, anstatt CSS manuell anzupassen
  • Gemini Code Assist effektiv dazu auffordern, Code im gewünschten Stil zu generieren

Voraussetzungen

  • Zugriff auf ein Google Cloud-Projekt mit aktiviertem Gemini for Google Cloud
  • Eine zu stilisierende Webseite oder zumindest ein Ordner, in dem eine solche 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 stylen möchten. Sie können Gemini in einem neuen Projekt aktivieren, indem Sie rechts oben in der Cloud Console auf die Schaltfläche „Gemini“ und dann im Bereich darunter auf „Aktivieren“ klicken.

Gemini aktivieren

Sie können jede beliebige Webseite verwenden, die Ihnen zur Verfügung steht. Da Gemini aktiviert ist, können Sie es auch bitten, eine 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. Implementierungsmaterial

Bitten Sie Gemini, Material Design auf unserer Webseite zu implementieren, und geben Sie dazu einen Prompt in etwa dieser Form ein:
Can you apply material design styles to this page?

HINWEIS: Alle Aufgaben in diesem Codelab sind Beispiele. Sie können sie als Inspiration für Ihre eigenen Zitate verwenden und für optimale Ergebnisse den Kontext aus Ihrem Projekt einbeziehen.

Die Antwort sollte in etwa so aussehen:

Material Design implementieren

In diesem Lab wird Material Design verwendet. Sie können Gemini aber auch bitten, die Bibliothek Ihrer Wahl zu implementieren. Wenn Gemini eine andere Version des Materials importiert, als Sie erwartet haben, geben Sie die gewünschte Version in Ihrem Prompt an.

4. Iterationen am Design

Gemini kann auch mit Ihnen zusammenarbeiten, um das Design einer Webseite zu iterieren, ohne dass Sie sich manuell mit CSS befassen müssen. Erstellen Sie einen eigenen Prompt, um Gemini zu bitten, dieses Design zu iterieren. Um bei solchen Aufgaben die besten Ergebnisse zu erzielen, sollten Sie die Elemente, die Sie ändern möchten, und das gewünschte Ergebnis so prägnant wie möglich beschreiben:

Can we center the content on this page?

Design iterieren

Du kannst auch festlegen, dass Gemini unserer Seite funktionale Elemente hinzufügt. Sie können Gemini bitten, dem Formular weitere Felder oder zusätzliche Funktionen hinzuzufügen:

Can we add some more fields to this form, like phone number, email address?

Der Seite funktionale Elemente hinzufügen

5. Organisation

Sie können auch festlegen, dass Gemini die Ergebnisse an dem Ort ordnet, der für Ihr Projekt am besten geeignet ist. Da in diesem Fall der Schwerpunkt auf der Iteration des Designs in dieser einen Datei liegt, ist ein style-Tag ideal. Sie können Gemini bitten, seine Antworten in einem Style-Tag zu platzieren, damit Sie die Änderungen nicht auf mehrere Elemente anwenden müssen:

Can you put this css in a style tag? I'd like to keep everything in this HTML page.

Material Design implementieren

6. Bedienungshilfen

Wie in Material Design beschrieben, sind Barrierefreiheit und Nutzerfreundlichkeit wesentliche Elemente des Designs. Bitten Sie Gemini daher, zu prüfen, ob für die Eingaben die richtigen Typen verwendet werden. So werden sie von Bedienungshilfen wie Screenreadern richtig erkannt.

Can you make sure to use the right types of inputs for each field? Tel for telephone, email for email, etc.

Änderungen bei Bedienungshilfen

7. Fazit

Endgültige HTML-Datei – Material Design implementierenEndgültige Webseite – Material Design implementieren

Herzlichen Glückwunsch zum Abschluss dieses Codelabs. 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 Material Design oder ähnlichen Bibliotheken nutzbare, nutzerfreundliche Webseiten mit minimaler Einrichtung erstellen.