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, potrai iterare la progettazione, apportando modifiche per migliorare l'esperienza utente e aggiungere funzionalità. Al termine di questo workshop, sarai in grado di utilizzare Gemini per creare pagine web utilizzabili e intuitive utilizzando Material Design o una libreria simile senza la necessità di scrivere CSS.
Prerequisiti
- Conoscenza di HTML, CSS e JavaScript
- Una conoscenza di base della progettazione web
Cosa imparerai
- Come implementare librerie di stili con Gemini Code Assist
- Come iterare un design utilizzando Gemini Code Assist anziché modificare manualmente il CSS
- Come richiedere 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 in Google Cloud abilitato
- Una pagina web da stilizzare 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 da stilizzare. Puoi attivare Gemini in un nuovo progetto facendo clic sul pulsante Gemini in alto a destra della console Cloud e facendo clic su Attiva nel riquadro sottostante.
Per quanto riguarda la pagina web da stilizzare, puoi utilizzare qualsiasi pagina web a portata di mano. In alternativa, poiché Gemini è attivo, puoi chiedere di generarne una. Se invii a Gemini una richiesta come Write me a web page with a form to gather profile information, il risultato dovrebbe essere simile a questo:
<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 di questo tipo:Can you apply material design styles to this page?
NOTA: tutti i prompt forniti in questo codelab sono esempi. Puoi utilizzarle come fonte di ispirazione per le tue citazioni e includere il contesto del tuo progetto per ottenere risultati ottimali.
La risposta dovrebbe essere simile a questa:
Material Design viene utilizzato ai fini di questo lab, ma puoi chiedere a Gemini di implementare la libreria che preferisci. Se Gemini importa una versione di Material diversa da quella che ti aspettavi, prova a fornire la versione desiderata nel prompt.
4. Iterazione sul design
Gemini può anche aiutarti a perfezionare il design di una pagina web senza dover analizzare manualmente il CSS. Crea un prompt personalizzato per chiedere a Gemini di iterare su questo design. Per ottenere i migliori risultati in attività come questa, concentrati sulla descrizione degli elementi che ti interessano 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 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 modo più utile per il nostro progetto. In questo caso, poiché l'attenzione è rivolta all'iterazione sul design in questo file, un tag style è l'ideale. Chiedi a Gemini di inserire le sue risposte in un tag di stile per evitare di dover applicare le 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 gli 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
Congratulazioni per aver completato questo codelab. Hai imparato a utilizzare Gemini per implementare Material Design in una pagina web. Hai anche imparato a iterare la progettazione e a organizzare il codice generato. Questa nuova competenza ti consentirà di creare pagine web utilizzabili e intuitive utilizzando Material Design o librerie simili con una configurazione minima.