Bu codelab hakkında
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şlev eklemek için tasarımda iterasyon yaparak değişiklikler yaparsınız. Bu atölyenin sonunda, CSS yazmak zorunda kalmadan Material Design veya benzer bir kitaplığı kullanarak kullanılabilir, kullanıcı dostu web sayfaları oluşturmak için Gemini'yi kullanabileceksiniz.
Ön koşullar
- HTML, CSS ve JavaScript hakkında bilgi sahibi olma
- Web tasarımı hakkında temel düzeyde bilgi
Öğrenecekleriniz
- Gemini Code Assist ile stil kitaplıklarını uygulama
- CSS'de manuel olarak değişiklik yapmak yerine Gemini Code Assist'i kullanarak bir tasarımda iterasyon yapma
- Gemini Code Assist'ten istediğiniz tarzda kod katkısı yapmasını etkili bir şekilde isteme
İhtiyacınız olanlar
- Google Cloud için Gemini'nin etkin olduğu bir Google Cloud projesine erişim
- Stil verilecek bir web sayfası veya en azından bir web sayfası oluşturacağınız bir klasör
2. Kurulum
Bu kod laboratuvarının çalışması için iki şey gereklidir: Gemini'nin etkin olduğu bir Google Cloud projesine erişim ve stil vereceğimiz bir web sayfası. Cloud Console'un sağ üst kısmındaki Gemini düğmesini ve ardından aşağıdaki panelde etkinleştir'i tıklayarak Gemini'yi yeni bir projede etkinleştirebilirsiniz.
Stil verilecek web sayfası için elinizin altındaki herhangi bir web sayfasını kullanabilirsiniz. Alternatif olarak, Gemini etkin olduğu için sizden bir tane oluşturmasını isteyebilirsiniz. Gemini'ye Write me a web page with a form to gather profile information
gibi bir istek gönderirseniz sonuç şuna benzer:
<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'den web sayfamızda Material Design'ı uygulamasını isteyerek başlayın. Bunun için şu yönde bir istem kullanabilirsiniz:Can you apply material design styles to this page?
NOT: Bu kod laboratuvarında sağlanan tüm istemler örnektir. Bu alıntılardan ilham alarak kendi alıntılarınızı oluşturabilir ve en iyi sonuçları elde etmek için projenizle ilgili bağlam bilgisi ekleyebilirsiniz.
Yanıt şuna benzer:
Bu lab için Materyal Tasarım kullanılmıştır ancak Gemini'den istediğiniz kitaplığı uygulamasını isteyebilirsiniz. Gemini, beklediğinizden farklı bir materyal sürümünü içe aktarırsa isteminizde istediğiniz sürümü sağlamayı deneyin.
4. Tasarımda iterasyon yapma
Gemini, CSS'yi manuel olarak incelemenize gerek kalmadan bir web sayfasının tasarımını tekrar tekrar incelemek için sizinle birlikte çalışabilir. Gemini'den bu tasarımı tekrarlaması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 istenen sonucu mümkün olduğunca kısa bir şekilde açıklamaya odaklanın:
Can we center the content on this page?
Gemini'den sayfamıza işlevsel öğeler de eklemesini isteyebilirsiniz. Gemini'den forma daha fazla alan veya ek işlev eklemesini isteyin:
Can we add some more fields to this form, like phone number, email address?
5. Kuruluş
Gemini'nin sonuçlarını projemiz için en kullanışlı şekilde düzenlemesini de sağlayabilirsiniz. Bu durumda, odak bu tek dosyadaki tasarımı yinelemeye odaklandığından style
etiketi idealdir. Gemini'den, değişikliklerini ilerledikçe birden fazla yere uygulamak zorunda kalmamak için yanıtlarını bir stil etiketine yerleştirmesini 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, girişlerimizin doğru türleri kullandığından emin olmak için Gemini'den yardım almayı deneyin. Bu sayede, ekran okuyucular gibi erişilebilirlik araçları tarafından düzgün bir şekilde algılanırlar.
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. Bir web sayfasında Materyal Tasarım'ı uygulamak için Gemini'yi nasıl kullanacağınızı öğrendiniz. Ayrıca tasarımda nasıl iterasyon yapacağınızı ve oluşturulan kodu nasıl düzenleyeceğinizi öğrendiniz. Bu yeni beceriyle, minimum kurulumla Material Design veya benzer kitaplıkları kullanarak kullanılabilir, kullanıcı dostu web sayfaları oluşturabilirsiniz.