BİL205U-WEB ARAYÜZ PROGRAMLAMA
Ünite 3: CSS Gelişmiş
Giriş
Günümüzde web sayfaları, mobil, tablet, bilgisayar hatta televizyonlarla bile ziyaret edilebilmektedir. Web sayfalarının kullanışlı olabilmesi için, kullanıcının sayfayı ziyaret ederken kullandığı tüm cihazlara uyum sağlaması gerekir. CSS kuralları ile HTML ögelerinin stillendirilmesi önceki bölümde incelendi. Ögelerin stillendirilmesi gibi web sayfaları da CSS ile stillendirilmelidir. Hazırlanan içerik, kullanıcıların cihazlarına göre kolay ve anlaşılır şekilde uyum sağlamalıdır.
CSS Değişkenleri
Değişkenler, yazılım dillerinin temel yapı taşıdır. Geliştiriciler için uygulamadaki gereksiz görevleri azaltır. Diğer dillerde olduğu gibi CSS yazımında da değişkenleri kullanarak bazı görevleri kolaylaştırabiliriz. Örneğin birden fazla yerde kullanılmak istenen renk kodu için bir değişken adı belirlenebilir ve projenin tamamında bu renge sadece değişken adı yazarak ulaşılabilir. CSS ile değişken tanımlarken değişkenin kullanılacağı kapsamı belirtmeniz gerekir. Değişken tüm HTML dosyasında kullanılacaksa :root pseudo sınıfı altında tanımlanabilir. Değişken tanımlanırken “--” işareti ile başlanmalı ve “--degiskenadi” olarak oluşturulmalı. Değişkeni kullanırken ise “var(-- degiskenadi)” şeklinde çağrılmalıdır.
CSS Değişkenleri
Günümüzde neredeyse tüm web sayfaları bilgisayarlarda, tabletlerde ve cep telefonlarında kullanılabiliyor. Birbirlerinden tamamen farklı boyutlarda olan bu cihazların her biri için yeni bir tasarım yapmak uygulamaların geliştirilmesini ve bakımını zorlaştırır. Yalnızca bir cihaza uygun tasarımlar yapmak ise diğer cihazları kullanan kullanıcıların uygulamaya girmesini zorlaştıracaktır. Ziyaretçilerin kullanabilecekleri farklı cihazlar göz önünde bulundurulmadan tasarlanan sayfalar kullanıcı kaybetmenize neden olacaktır.
Duyarlı Web Tasarımı Nedir?
Web sayfaları farklı cihazlarda, ekran boyutuna göre yeniden boyutlandırılabilir veya bazı bölümleri gizlenip gösterilebilir. Bu özelliği öne süren yaklaşıma duyarlı web tasarımı denilmektedir. Kullanıcılar bilgisayarlardan veya telefondan web sayfasını ziyaret ettiklerinde, web sayfaları otomatik olarak çözünürlük, görüntü boyutu gibi değişiklikleri yapabilmelidir. Başka bir deyişle web sayfaları kullanıcıların ihtiyaçlarına doğrudan cevap verebilmelidir.
Cep telefonu ve tablet kullanımının yaygınlaşmasından önce web sayfaları sadece bilgisayarlar için tasarlanıyordu. Görünüm alanlarının boyutları tam olarak aynı olmasa da çok fazla değişiklik olmadığı için sayfaların ekrana duyarlı olmasına gerek yoktu. Web sayfalarında internet kullanımının yaygınlaşması ile birlikte farklı tek bir tasarıma sahip web sayfaları yetersiz gelmeye başladı. Bu sorunu çözmek için başlarda aynı amaca hizmet eden iki web sitesi tasarlanarak farklı adreslerde kullanıma
açılıyordu. Örneğin bir site bilgisayarlar için www.orneksite.com adresinde yayımlanırken, mobil cihazlar için mobil.orneksite.com adresiyle yayımlanmaktaydı. Bu hem yetersiz hem de yönetimi zor bir çözümdü. Duyarlı web sitesi tasarımı ile bütün cihazlar için bir sayfa tasarımı hazırlayıp kullanıcılara sunmak yeterli oldu. Tek bir web sayfası tüm cihazlara destek verdiği için farklı adres kullanımına gerek kalmadı. Bunun yanı sıra sayfaların bakımı için ayrı ayrı değişiklikler yapmaya gerek kalmadı.
Görünüm Alanı ve Ayarlanması
Kullanıcıların, cihazlarında web sayfasını görüntüledikleri alana görünüm alanı denilmektedir. Her cihazın görünüm alanı farklıdır. Tasarlanan siteler cihazlar arasındaki değişikliğe hemen tepki verebilmeli, kullanıcının bir işlem yapmasına gerek kalmamalıdır. HTML5 ile gelen <meta> etiketlerinden viewport, tasarımcılara sayfalarda ekran kontrolleri yapabilmesine olanak verdi.
Ekran Boyutunu Ayarlama
Cihazların ekranlarının bazıları yatay, bazıları dikey, bazıları ise karedir. Sayfalar tasarlanırken hem yatay hem de dikey kullanıma uygun olması göz önünde bulundurulmalıdır. Küçülen ekranlarda bazı alanları gruplamak, bazılarını ise gizlemek kullanıcıya kolaylık sağlayacaktır. Kullanıcılar mobil cihazlarda ve de bilgisayarlarda kaydırma işlemini dikey olarak yaparlar. Tasarlanan sayfaların dikey olarak tasarlanması kullanıcı deneyimi için önemlidir. Kullanıcılar yatay kaydırmaya zorlanmamalıdır. Büyük ve sabit genişlikli ögeler kullanılırken dikkat edilmelidir. Örneğin resimler görüntü alanında büyük yerleştirilirse kullanıcı yatay kaydırmaya zorlanır. Bu tarz içerikler görüntü alanıyla değişen boyutta olmalıdır. Cihazların ekran boyutları arasında büyük fark vardır. Tasarladığınız sayfa veya bölümleri sabit bir ekran boyutuna dayandırmanız sayfanızın farklı boyutlardaki cihazlara uyum sağlamasına engel olabilir. Tasarladığınız sayfaları farklı ekran boyutlarında yeniden biçimlendirmek için CSS’nin bir özelliği olan medya sorgularını takip etmelisiniz. Komponentlere sabit bir boyut vermek yerine, sayfaya duyarlı boyut vermek boyutlandırmayı kolaylaştıracaktır. Örneğin bir komponente 500px yerine 100% boyutunda değer vermek tasarımlarınızı kolaylaştıracaktır.
Medya Sorguları (Media Queries)
Medya sorguları, uygulama tarafından kullanıcının cihaz bilgileri alınarak, sayfa görünümü, uygulama tasarımı gibi değişikliklerin yapılabilmesini sağlar. Cihazlar temel olarak mobil cihaz, tablet, masaüstü ve tv ekranları olarak gruplara ayrılır. Tasarımın ihtiyacına göre gruplar arasındaki ekranlarda sınır değerleri olarak alınabilir. Tasarımın ekran türüne göre değişeceği sınır değerleri belirlendikten sonra medya sorguları kullanılarak farklı stil kuralları uygulanabilir. Aşağıdaki kod bloğu ile medya sorgusunun yazım şeklini inceleyebilirsiniz. Medya sorgusu ekran boyutu 600px’den büyük olduğunda yeni stil kurallarını uygulayacaktır.
Sayfa Düzenleri
Tasarımcılar tarafından web sayfalarının tasarımları oluşturulabilir ve geliştiricilerin bu tasarımları koda dökmesi beklenebilir. Geliştirici olarak sayfanın yapısına, genişliğine ve yüksekliğine dikkat ederek kullanacağınız CSS yapısına karar vermelisiniz. CSS ile yerleşim problemlerini yatay eksende, dikey eksende veya her ikisinde çözebilmek için çeşitli yollar vardır. Sayfaları geliştirirken sadece bir yönteme bağımlı olmak yerine gerektiği yerlerde diğer yapılara geçmek işimizi kolaylaştırır. Bu bölümde CSS ile kullanılan fex ve grid kavramını inceleyeceğiz. Sayfa tasarımları için HTML’nin ilk zamanları tablo elemanları kullanılıyordu. CSS ile birlikte float yapısı geldi. Ancak float yapısının farklı zorlukları ve kısıtlamaları bulunuyordu.
Modern web sayfalarının tasarımında bu konuya kadar anlatılan özellikler farklı zorluklara sahip olduğu için yetersiz kalmaktadır. Bu zorlukları aşmak için flexbox ve grid yapıları sayfa düzenlemesinde kullanılmak için geliştirildi. İki yapı da sayfa düzenlemesi için kullanılsa da, farklı yerleşim sorunlarını çözmek için tasarlanmıştır.
Flexbox Yapısı
Flexbox (esnek kutu modeli), tek boyutlu içerik yerleştirmek için tasarlanmış bir düzen modelidir. Farklı boyutlara sahip bir grup ögeyi alıp bu ögeler için en iyi düzeni oluşturmakta başarılıdır.
Grid Terimleri
Grid, tamamen sayfa düzenlemek için duyurulan ilk yapıdır. Bu yüzden daha önce kullanılmayan bazı terimlerle birlikte duyrulmuştur.
• Grid Item, yerleştirilmek istenen elemanları ifade eden terimdir. • Grid Container, yerleştirilecek ögeleri kapsayan elemandır. Grid özellikleri bu eleman ile belirtilir. • Grid çizgileri, yatay ve dikey olarak uzanan çizgilerdir. 3 sütundan oluşan bir gridde 4 adet dikey uzanan grid çizgisi vardır. • Grid hattı, iki grid çizgisi arasında uzanan hücrelerin oluşturduğu hattır. • Grid hücresi, yatay ve dikey grid çizgileri arasında kalan her bir alan grid hücresidir. • Grid alanı, bir veya daha fazla grid hücresi birleştirilerek oluşturulan alandır. • Grid gap, yatay ve dikey grid hatları arasında oluşturulan boşluktur.
CSS ile Uygulama: Kitap Listeleme Uygulaması Örneği
İlk bölümde, yalnızca HTML kullanarak hazırladığımız kitap uygulamasını, CSS kullanarak stillendirebiliriz. Stil kurallarını uygulamadan önce HTML dosyasında bazı değişiklikler yapabiliriz.
Sayfa Düzeninin Oluşturulması
İlk olarak sayfadaki eleman düzenini belirlemeliyiz. Belirlemeyi yaptıktan sonra grid yapısını oluşturabiliriz.
Basit bir sayfamız olacağı için elemanların yerleşimi kolay olacaktır. Başılık alanı en üstü kaplayacak, yan menü sol tarafa yerleşecek, ekranın kalan alanını da içerik alanı dolduracaktır. Sayfamızdaki yerleşim için aşağıdaki kod bloğunda bulunan grid yapısını kullanabiliriz. Grid yapısını belirlerken alanlar için kullanılacak isimlendirmeleri de tanımlıyoruz.
Başlık Komponentinin Stillendirilmesi
Grid yapımızı kurduktan sonra sayfadaki komponentleri stillendirmeye başlayabiliriz. HTML kodları ile başlık komponentine .header sınıfını atamıştık. Sınıf seçicisi ile başlık komponentine ulaşıyoruz. Sayfamız için kurduğumuz grid yapısında “header” bölmesine başlığı yerleştirmek için grid-area: header; kuralını uygulayacağız. Grid alanınını belirttiğimiz “header” ile sınıf adında kullandığımız .header isimlerinin birbiri ile alakası yoktur. Farklı isimde kullanabilirsiniz. Başlık için, yazıyı ortalama, arka plan ve yazı rengi belirleme gibi işlemleri yaptıktan sonra komponentimiz hazır olacaktır.
Menü Komponentinin Stillendirilmesi
Başlık stillendirmesini tamamladıktan sonra yan menüyü stillendirmeye başlayabiliriz. Menü komponentinin genişliğini, grid yapısı oluştururken belirtilmişti. Yan menüyü, grid yapısında “menu” alanına, grid-area: menu; komutunu kullanarak yerleştirmemiz yeterli.
Menü alanının gövdesinin stillendirilmesinden sonra menü elemanlarını stillendirebiliriz. Menü elemanlarını oluşturmak için <a> etiketi kullanıldı.Tarayıcı <a> etiketinin display özelliğini “inline” olarak atar. Elemanları alt alta sıralayabilmek için display özelliği değiştiriliyor. Ardından <a> etiketiyle gelen text-decoration özelliği sıfırlanıyor. Elemanların kenarlıklarını oluşturmak için border ve border-radius özelliklerine gerekli değerler atanır.
İçerik Alanının Stillendirilmesi
İçeriklerin gösterileceği alanı HTML dosyasında .container sınıfı ile kapsadık. Bu sayede grid yapısında belirttiğimiz bölgeye yerleştirebiliriz.