1. לפני שמתחילים
ה-Codelab הזה מראה איך להשתמש ב-Gemini Code Assist כדי להטמיע Material Design באתר. לאחר יישום העיצוב Material Design, יש לבצע איטרציה בעיצוב שלו, לבצע שינויים כדי לשפר את חוויית המשתמש ולהוסיף פונקציונליות. בסוף הסדנה תוכלו להשתמש ב-Gemini כדי ליצור דפי אינטרנט ידידותיים למשתמש וקלים לשימוש באמצעות Material Design או ספרייה דומה, ללא צורך בכתיבת CSS.
דרישות מוקדמות
- הבנה של HTML, CSS ו-JavaScript
- הבנה בסיסית של עיצוב אתרים
מה לומדים
- איך מטמיעים ספריות עיצוב באמצעות Gemini Code Assist
- איך לבצע איטרציה בעיצוב באמצעות Gemini Code Assist במקום לבצע התאמה ידנית של CSS
- איך להנחות את Gemini Code Assist ביעילות כדי להוסיף קוד בסגנון הרצוי
מה צריך
- גישה לפרויקט ב-Google Cloud עם הפעלה של Gemini ל-Google Cloud
- דף אינטרנט לסגנון, או לפחות תיקייה שבה תיווצר טיוטה
2. הגדרה
לצורך ה-Codelab הזה נחוצים שני דברים: גישה לפרויקט ב-Google Cloud עם Gemini מופעל, ודף אינטרנט כדי שנוכל לעצב. כדי להפעיל את Gemini בפרויקט חדש, צריך ללחוץ על הלחצן של Gemini בפינה השמאלית העליונה של מסוף Cloud, בלחיצה על 'הפעלה' בחלונית שלמטה.
לגבי עיצוב דף האינטרנט, אתם יכולים להשתמש בכל דף אינטרנט שיש לכם. לחלופין, מכיוון ש-Gemini מופעל, אפשר לבקש ממנו ליצור בשבילך נכס כזה. אם שולחים ל-Gemini בקשה כמו Write me a web page with a form to gather profile information, התוצאה אמורה להיות דומה לזו:
<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. חומר הטמעה
כדי להתחיל, מבקשים מ-Gemini להטמיע עיצוב Material Design בדף האינטרנט שלנו, עם הנחיה בהנחיות הבאות:Can you apply material design styles to this page?
הערה: כל ההנחיות שמסופקות ב-Codelab הזה הן דוגמאות. אתם מוזמנים להשתמש בהן כהשראה להצעות מחיר משלכם, ולכלול הקשר מהפרויקט שלכם כדי לקבל את התוצאות הטובות ביותר.
התגובה אמורה להיות דומה לזו:
למטרה של שיעור ה-Lab הזה נעשה שימוש בעיצוב חומרים, אבל אתם יכולים לבקש מ-Gemini להטמיע ספרייה לבחירתכם. אם מערכת Gemini מייבאת גרסה של 'חומר' שונה מזו שציפיתם לקבל, נסו לספק בהנחיה את הגרסה הרצויה.
4. איטרציה בעיצוב
Gemini יכול גם לעבוד איתכם באיטרציה לעיצוב של דף אינטרנט, בלי שתצטרכו להתעמק ב-CSS באופן ידני. אפשר ליצור הנחיה משלכם ולבקש מ-Gemini לבצע איטרציה בעיצוב הזה. כדי לקבל את התוצאות הכי טובות במשימות כאלה, התמקדו בתיאור תמציתי ככל האפשר של האלמנטים שאתם רוצים לשנות ואת התוצאה הרצויה:
Can we center the content on this page?
אפשר גם לבקש מ-Gemini להוסיף רכיבים פונקציונליים לדף שלנו. מבקשים מ-Gemini להוסיף עוד שדות לטופס או להוסיף עוד פונקציונליות:
Can we add some more fields to this form, like phone number, email address?
5. ארגון
אפשר גם לבקש מ-Gemini לסדר את התוצאות במקום המתאים ביותר לפרויקט שלנו. במקרה הזה, מכיוון שההתמקדות היא באיטרציה על העיצוב בקובץ הזה, התג style אידיאלי. צריך לבקש מ-Gemini להכיל את התשובות שלו בתג סגנון, כדי שלא יהיה צורך להחיל את השינויים שלו בכמה דרכים:
Can you put this css in a style tag? I'd like to keep everything in this HTML page.
6. נגישות
כפי שצוין ב-Material Design, נגישות ונוחות השימוש הן אלמנטים חיוניים בעיצוב. לכן, אפשר לבקש מ-Gemini לוודא שהקלט שלנו כולל את הסוגים הנכונים. כך תבטיחו שהם קולטים אותם בצורה נכונה באמצעות כלי נגישות, כמו קוראי מסך.
Can you make sure to use the right types of inputs for each field? Tel for telephone, email for email, etc.
7. סיכום
מזל טוב, השלמת את ה-Codelab הזה! למדת איך להשתמש ב-Gemini כדי להטמיע עיצוב מהותי בדף אינטרנט. למדתם גם איך לחזור על העיצוב ולארגן את הקוד שנוצר. המיומנות החדשה הזו תאפשר לכם ליצור דפי אינטרנט ידידותיים למשתמש ושימושיים באמצעות Material Design או ספריות דומות, עם הגדרה מינימלית.