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 для Google Cloud.
- Веб-страница для оформления, или хотя бы папка, в которой её можно создать.
2. Настройка
Для выполнения этого практического задания необходимы две вещи: доступ к проекту 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?
ПРИМЕЧАНИЕ: Все предложенные в этом практическом задании примеры. Вы можете использовать их в качестве источника вдохновения для собственных цитат, и для достижения наилучших результатов добавьте контекст из вашего проекта.
Ответ должен быть примерно таким:
В рамках этой лабораторной работы используется Material Design, но вы можете попросить Gemini реализовать библиотеку по вашему выбору. Если Gemini импортирует другую версию Material Design, чем вы ожидали, попробуйте указать желаемую версию в командной строке.
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 поместить свои ответы в тег <style>, чтобы избежать необходимости применять изменения к нескольким файлам по мере работы:
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. Заключение
Поздравляем с завершением этого практического занятия! Вы научились использовать Gemini для реализации Material Design на веб-странице. Вы также освоили итеративный подход к дизайну и организацию сгенерированного кода. Этот новый навык позволит вам создавать удобные и практичные веб-страницы с использованием Material Design или аналогичных библиотек с минимальными затратами на настройку.