1. לפני שמתחילים
בשיעור הזה תלמדו איך להשתמש ב-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 for 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 הזה הן דוגמאות. אתם יכולים להשתמש בהם כמקור השראה לציטוטים משלכם, ולכלול הקשר מהפרויקט שלכם כדי לקבל את התוצאות הטובות ביותר.
התגובה אמורה להיראות כך:
אנחנו משתמשים ב-Material Design למטרות של המעבדה הזו, אבל אפשר לבקש מ-Gemini להטמיע את הספרייה שבחרתם. אם Gemini מייבא גרסה שונה של Material מזו שציפיתם, נסו לציין את הגרסה הרצויה בהנחיה.
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 על כמה תגים לאורך הדרך, כדאי לבקש מ-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 בדף אינטרנט. למדתם גם איך לבצע שינויים בעיצוב ולארגן את הקוד שנוצר. בעזרת המיומנות החדשה הזו תוכלו ליצור דפי אינטרנט שימושיים ונוחים למשתמש באמצעות Material Design או ספריות דומות, עם הגדרה מינימלית.