1. Prima di iniziare
Questo codelab mostra come utilizzare Gemini Code Assist per implementare Material Design su un sito web. Una volta implementato Material Design, esegui l'iterazione del design apportando modifiche per migliorare l'esperienza utente e aggiungere funzionalità. Al termine di questo workshop, potrai utilizzare Gemini per creare pagine web utilizzabili e facili da usare utilizzando Material Design o una libreria simile senza dover scrivere CSS.
Prerequisiti
- Conoscenza di HTML, CSS e JavaScript
- Conoscenza di base del web design
Cosa imparerai
- Come implementare le librerie di stili con Gemini Code Assist
- Come eseguire l'iterazione su un design utilizzando l'Assistente codice Gemini anziché modificare manualmente il CSS
- Come chiedere in modo efficace a Gemini Code Assist di contribuire con codice nello stile che preferisci
Cosa serve
- Accesso a un progetto Google Cloud con Gemini for Google Cloud abilitato
- Una pagina web da stilare o almeno una cartella in cui crearne una
2. Configurazione
Per questo codelab sono necessari due elementi: l'accesso a un progetto Google Cloud con Gemini abilitato e una pagina web a cui applicare lo stile. Puoi attivare Gemini in un nuovo progetto facendo clic sul pulsante Gemini in alto a destra nella console Cloud e poi su Attiva nel riquadro di seguito.
Per quanto riguarda la pagina web a cui applicare lo stile, puoi utilizzare qualsiasi pagina web a portata di mano. In alternativa, poiché Gemini è abilitato, puoi chiedergli di crearne uno per te. Se chiedi a Gemini una richiesta come Write me a web page with a form to gather profile information, il risultato dovrebbe essere simile al seguente:
<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. Materiale di implementazione
Inizia chiedendo a Gemini di implementare Material Design nella nostra pagina web con un prompt del tipo:Can you apply material design styles to this page?
NOTA: tutti i prompt forniti in questo codelab sono esempi. Non esitare a utilizzarle come fonte di ispirazione per le tue citazioni e a includere il contesto del tuo progetto per ottenere risultati ottimali.
La risposta dovrebbe essere simile a questa:
Ai fini di questo lab viene utilizzato Material Design, ma puoi chiedere a Gemini di implementare la libreria che preferisci. Se Gemini importa una versione di Material diversa da quella prevista, prova a fornire la versione desiderata nel prompt.
4. Iterazione sul design
Gemini può anche collaborare con te per eseguire l'iterazione del design di una pagina web senza dover esaminare manualmente il CSS. Crea il tuo prompt per chiedere a Gemini di eseguire l'iterazione su questo design. Per ottenere i risultati migliori in attività come questa, concentrati sulla descrizione degli elementi che ti interessa modificare e del risultato desiderato nel modo più conciso possibile:
Can we center the content on this page?
Puoi anche chiedere a Gemini di aggiungere elementi funzionali alla nostra pagina. Chiedi a Gemini di aggiungere altri campi al modulo o di aggiungere funzionalità aggiuntive:
Can we add some more fields to this form, like phone number, email address?
5. Organizzazione
Puoi anche chiedere a Gemini di organizzare i risultati nel luogo più utile per il nostro progetto. In questo caso, poiché l'obiettivo è eseguire l'iterazione del design in un unico file, un tag style è ideale. Chiedi a Gemini di includere le sue risposte in un tag di stile per evitare di dover applicare le sue modifiche a più elementi man mano che procedi:
Can you put this css in a style tag? I'd like to keep everything in this HTML page.
6. Accessibilità
Come indicato in Material Design, l'accessibilità e l'usabilità sono elementi essenziali del design. Tenendo presente questo, prova a chiedere a Gemini di assicurarsi che i nostri input utilizzino i tipi corretti. In questo modo, verranno rilevati correttamente dagli strumenti di accessibilità come gli screen reader.
Can you make sure to use the right types of inputs for each field? Tel for telephone, email for email, etc.
7. Conclusione
Complimenti per aver completato questo codelab. Hai imparato a utilizzare Gemini per implementare Material Design in una pagina web. Hai anche imparato a eseguire l'iterazione sul design e a organizzare il codice generato. Questa nuova competenza ti consentirà di creare pagine web utilizzabili e facili da usare utilizzando Material Design o librerie simili con una configurazione minima.