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 ripetere il design, 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 facili da usare utilizzando Material Design o una libreria simile senza dover scrivere codice CSS.
Prerequisiti
- Comprensione 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 di un progetto utilizzando Gemini Code Assist anziché modificare manualmente il CSS
- Come richiedere in modo efficace a Gemini Code Assist di contribuire al codice nello stile che preferisci
Cosa serve
- Accesso a un progetto Google Cloud con Gemini per Google Cloud abilitato
- Una pagina web da applicare a uno stile o almeno una cartella in cui crearne una
2. Imposta
Per questo codelab, sono necessarie due cose: l'accesso a un progetto Google Cloud con Gemini abilitato e una pagina web da applicare allo stile. Puoi abilitare Gemini in un nuovo progetto facendo clic sul pulsante Gemini in alto a destra nella console Cloud, facendo clic su Abilita nel riquadro in basso.
Per quanto riguarda la pagina web da definire, puoi utilizzare qualsiasi pagina web a tua disposizione. In alternativa, dato che Gemini è abilitato, puoi chiedergli di generarne uno per te. 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. Implementazione del materiale
Inizia chiedendo a Gemini di implementare il Material Design nella nostra pagina web con un prompt in questo modo:Can you apply material design styles to this page?
NOTA: tutti i prompt forniti in questo codelab sono esempi. Usali come fonte di ispirazione per le tue citazioni e includi il contesto del tuo progetto per ottenere i migliori risultati.
La risposta dovrebbe essere simile alla seguente:
Ai fini di questo lab viene utilizzato il 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. Perfezionamento della progettazione
Gemini può anche collaborare con te per iterare la progettazione di una pagina web senza dover accedere manualmente ai CSS. Crea un prompt personalizzato per chiedere a Gemini di ripetere questo design. Per ottenere i migliori risultati in attività come questa, concentrati sulla descrizione degli elementi che ti interessa modificare e dei risultati desiderati 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 ulteriori funzionalità:
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ù utilizzabile per il nostro progetto. In questo caso, poiché l'attenzione è incentrata sull'iterazione del design in questo file, è ideale un tag style. Chiedi a Gemini di contenere le sue risposte in un tag di stile per evitare di dover applicare le modifiche a più cose 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, accessibilità e usabilità sono elementi essenziali del design. Tenendo conto di ciò, prova a chiedere a Gemini di assicurarsi che i nostri input utilizzino i tipi corretti. In questo modo, gli strumenti di accessibilità come gli screen reader potranno rilevarli correttamente.
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 il Material Design su una pagina web. Hai anche imparato a ripetere la progettazione e a organizzare il codice generato. Questa nuova competenza ti consentirà di creare pagine web facili da usare e da usare utilizzando Material Design o librerie simili con una configurazione minima.