1. Başlamadan önce
Bu codelab'de, bir web sitesinde Materyal Tasarım'ı uygulamak için Gemini Code Assist'in nasıl kullanılacağı gösterilmektedir. Materyal Tasarım uygulandıktan sonra, kullanıcı deneyimini iyileştirmek ve işlevsellik eklemek için tasarım üzerinde yinelemeler yaparak değişiklikler yaparsınız. Bu atölye çalışmasının sonunda, CSS yazmaya gerek kalmadan Materyal Tasarım veya benzer bir kitaplık kullanarak kullanılabilir ve kullanıcı dostu web sayfaları oluşturmak için Gemini'ı kullanabileceksiniz.
Ön koşullar
- HTML, CSS ve JavaScript hakkında bilgi sahibi olmak
- Web tasarımıyla ilgili temel bilgiler
Öğrenecekleriniz
- Gemini Code Assist ile stil kitaplıklarını uygulama
- CSS'yi manuel olarak ayarlamak yerine Gemini Code Assist'i kullanarak tasarım üzerinde nasıl yineleme yapılır?
- Gemini Code Assist'i istediğiniz tarzda kod katkısında bulunmaya etkili bir şekilde yönlendirme
İhtiyacınız olanlar
- Google Cloud için Gemini'ın etkinleştirildiği bir Google Cloud projesine erişim
- Stil uygulamak için bir web sayfası veya en azından bir web sayfası oluşturabileceğiniz bir klasör
2. Kurulum
Bu codelab için iki şey gereklidir: Gemini'ın etkinleştirildiği bir Google Cloud projesine erişim ve stil uygulayacağımız bir web sayfası. Cloud Console'un sağ üst kısmındaki Gemini düğmesini tıklayıp aşağıdaki panelde etkinleştir'i tıklayarak yeni bir projede Gemini'ı etkinleştirebilirsiniz.
Stil verilecek web sayfası için elinizin altında bulunan herhangi bir web sayfasını kullanabilirsiniz. Alternatif olarak, Gemini etkin olduğundan Gemini'dan sizin için bir özet oluşturmasını isteyebilirsiniz. Gemini'a Write me a web page with a form to gather profile information gibi bir istem girerseniz sonuç şu şekilde olmalıdır:
<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. Uygulama Materyali
Gemini'dan aşağıdaki gibi bir istemle web sayfamızda Materyal Tasarım'ı uygulamasını isteyerek başlayın:Can you apply material design styles to this page?
NOT: Bu kod laboratuvarında sağlanan tüm istemler örnektir. Bu alıntıları kendi alıntılarınız için ilham kaynağı olarak kullanabilir ve en iyi sonuçları elde etmek için projenizden bağlam ekleyebilirsiniz.
Yanıt şu şekilde olmalıdır:
Bu laboratuvarda Materyal Tasarım kullanılır ancak Gemini'a istediğiniz kitaplığı uygulamasını isteyebilirsiniz. Gemini, Material'ın beklediğinizden farklı bir sürümünü içe aktarıyorsa isteminizde istediğiniz sürümü sağlamayı deneyin.
4. Tasarım üzerinde yineleme yapma
Gemini, CSS'ye manuel olarak bakmanıza gerek kalmadan bir web sayfasının tasarımını yinelemenize de yardımcı olabilir. Gemini'dan bu tasarım üzerinde yineleme yapmasını istemek için kendi isteminizi oluşturun. Bu tür görevlerde en iyi sonuçları elde etmek için değiştirmek istediğiniz öğeleri ve bunların istenen sonucunu mümkün olduğunca kısa ve öz bir şekilde açıklamaya odaklanın:
Can we center the content on this page?
Gemini'dan sayfamıza işlevsel öğeler eklemesini de isteyebilirsiniz. Gemini'dan forma daha fazla alan eklemesini veya ek işlevler sunmasını isteyin:
Can we add some more fields to this form, like phone number, email address?
5. Kurumsal
Gemini'ın sonuçlarını projeniz için en kullanışlı olacak şekilde düzenlemesini de sağlayabilirsiniz. Bu durumda, odak noktası bu tek dosyadaki tasarım üzerinde yineleme yapmak olduğundan style etiketi idealdir. Gemini'dan, değişikliklerini ilerledikçe birkaç yere uygulamanız gerekmemesi için yanıtlarını bir stil etiketi içinde vermesini isteyin:
Can you put this css in a style tag? I'd like to keep everything in this HTML page.
6. Erişilebilirlik
Materyal Tasarım'da belirtildiği gibi erişilebilirlik ve kullanılabilirlik, tasarımın temel unsurlarıdır. Bu nedenle, Gemini'dan girişlerimizin doğru türleri kullandığından emin olmasını isteyebilirsiniz. Bu sayede, ekran okuyucular gibi erişilebilirlik araçları tarafından düzgün bir şekilde okunmaları sağlanır.
Can you make sure to use the right types of inputs for each field? Tel for telephone, email for email, etc.
7. Sonuç
Bu Codelab'i tamamladığınız için tebrikler. Gemini'ı kullanarak bir web sayfasında Materyal Tasarım'ı nasıl uygulayacağınızı öğrendiniz. Ayrıca tasarımı nasıl yineleyeceğinizi ve oluşturulan kodu nasıl düzenleyeceğinizi de öğrendiniz. Bu yeni beceri, Materyal Tasarım veya benzer kitaplıkları kullanarak minimum kurulumla kullanılabilir ve kullanıcı dostu web sayfaları oluşturmanıza olanak tanır.