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 Console ואז לוחצים על 'הפעלה' בחלונית שמופיעה למטה.
לגבי דף האינטרנט שרוצים להחיל עליו סגנון, אפשר להשתמש בכל דף אינטרנט שזמין לכם. לחלופין, אפשר לבקש מ-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. Implementing Material
מתחילים בבקשה מ-Gemini להטמיע Material Design בדף האינטרנט שלנו באמצעות הנחיה בסגנון הבא:Can you apply material design styles to this page?
הערה: כל ההנחיות שמופיעות ב-Codelab הזה הן דוגמאות. אתם יכולים להשתמש בהן כהשראה לציטוטים משלכם, ולכלול הקשר מהפרויקט כדי לקבל את התוצאות הכי טובות.
התגובה אמורה להיות דומה לזו:
במעבדה הזו נעשה שימוש ב-Material Design, אבל אפשר לבקש מ-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 בדף אינטרנט. בנוסף, למדתם איך לשפר את העיצוב ולארגן את הקוד שנוצר. הכישורים החדשים האלה יאפשרו לכם ליצור דפי אינטרנט שמישים וידידותיים למשתמשים באמצעות Material Design או ספריות דומות, עם הגדרה מינימלית.