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 в правом верхнем углу облачной консоли, нажав «Включить» на панели ниже.
Что касается оформления веб-страницы, вы можете использовать любую имеющуюся у вас под рукой веб-страницу. В качестве альтернативы, поскольку 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?
ПРИМЕЧАНИЕ. Все подсказки, представленные в этой лаборатории кода, являются примерами. Не стесняйтесь использовать их в качестве вдохновения для собственных цитат и включать контекст из вашего проекта для достижения наилучших результатов.
Ответ должен быть примерно таким:
Для целей этой лабораторной работы используется материальный дизайн, но вы можете попросить Gemini реализовать библиотеку по вашему выбору. Если Gemini импортирует версию материала, отличную от той, которую вы ожидали, попробуйте указать нужную версию в командной строке.
4. Итерация дизайна
Gemini также может работать с вами над дизайном веб-страницы без необходимости вручную копаться в CSS. Придумайте собственную подсказку и попросите Близнецов повторить этот дизайн. Для достижения наилучших результатов в подобных задачах сосредоточьтесь на максимально кратком описании элементов, которые вы хотите изменить, и их желаемого результата:
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 или аналогичных библиотек с минимальной настройкой.