Build with AI: From Zero to Your First App · Modül 4: AI ile ilk web sayfan
Mobil Tasma ve Form Etiketleri
Yeni baslayan sayfalarini batan iki ariza: telefondan genis icerik ve tamamlanamayan formlar. Bu ders ikisini kalici cozer.
10 dk okuma
Kazanımlar
- 360px telefon genisliginde yatay tasmayi bulup duzeltir
- Her form alanini gercek label ogesiyle etiketler
- Sayfayi iki genislikte gozle ve tek dokunusla sınar
- Yer tutucunun neden etiket olmadigini aciklar
Neden onemli
Ziyaretcilerin cogu telefonla gelir, yeni baslayan testi cogu masaustunde olur. Hic gormedigin tasma telefon ziyaretcisini engeller; etiketsiz alan ekran okuyucuyu ve kararsiz dokunusu yener. Iki duzeltme kucuk, ikisi sonsuz: bir kez ogren, yaptigin her sayfa gecer.
Kavramlar
Tasma avi. Tarayiciyi 360px yap. Asagi kaydir; sonra yana kaydirmayi dene. Yana her hareket hatadir. Klasik supheliler: sarilmayan metin (M03L9 menusu), ekrandan genis sabit genislikli gorsel, bolunmeyen uzun dizgiler (adres, baglanti), sabit genislikli form girdileri. Duzeltmeler: metin sarsin, gorsel kapsayiciyi gecmesin, girdiler kapsayiciyi doldursun. Her duzeltmeden sonra yeniden kontrol: daralt, iki yone kaydir, yalniz dikey oldugunu dogrula.
Her alana etiket. Alani adlandiran ("Adin", "Teslim saati"), yazmadan once, yazarken ve yazdiktan sonra gorunur label ogesi. Yer tutucu ipucu etikete eslik edebilir ama asla yerine gecemez: yer tutucu yazinca kaybolur, bircok yardimci aracta okunmaz ve dolmus formu gozden gecirilemeyen adsiz kutulara cevirir. Kontrol: formu doldur, her degeri gorunur etiketiyle geri oku.
Iki genislik testi. Her gorsel degisiklik 360px (telefon) ve masaustunde gozle arti ana butona tek dokunusla kontrol edilir. Otuz saniye, iki boyut, tek etkilesim. M02L8 gorsel olcutleri burada yasar: "360px'te yana kaydirma yok", "butona kaydirmadan ulasilir", "degerler doluyken etiketler gorunur".
Uygulamali ornek
360px'te firin menusu: yemek satiri ekrandan tasiyor (sarilmaz), fotograf 360px sutunda 900px, siparis girdileri 500px sabit. Uc tek satirlik duzeltme: sarma acik, gorsel sinirli, girdiler akiskan. Form: etiketsiz iki yer tutucu, iki etiket arti kisa yer tutucu olur. Toplam degisen bes satir; sayfa iki genislikte ve ekran okuyucuda gecer.
Beklenen sonuc: sayfan iki genislik testini etiketli alanlarla geciyor; uc evet/hayir satiri not edilmis.
Sik yapilan yanlis
Tasmayi sigana kadar yaziyi kucultmek ("yazi tipi 8px"). Kucuk metin sigar ve kimse okuyamaz. Sarma ve akiskan genislik okunurlugu korur; kucultme yok eder.
Lab ve sonraki adim
Lab A11 verilen sayfada tasma avi arti etiket onarimi calistirir. Sirada 16. ders: ekran goruntusunde tam noktayi gosteren gorsel duzeltme isteme.
Mini kontrol
4 soruluk isteğe bağlı öz kontrol. Yanıtlar cihazından çıkmaz, saklanmaz ve hiçbir değerlendirmeye sayılmaz.
Ders geri bildirimi
Henüz yayında geri bildirim yok.
Geri bildirim yazmak için giriş yap ve dersi tamamla.
Alıştırma
Sayfanda 360px'te tasma avi yap: bulunan her yana-kaydirma nedenini ve tek satirlik duzeltmesini listele. Sonra her alani etiketle, formu doldurarak sina.
Geçme kriterleri
Tasma nedenleri duzeltmeleriyle listeli (sarma, sinirlama, akiskan); 360px'te yana kaydirma sifir dogrulanmis; her alan etiketli ve doldur-geri-oku testi kaydedilmis.