Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, Yücel Solak tarafından sunulan bir web geliştirme eğitim dersidir.
- Videoda, web sitesi geliştirme sürecinde galeri sistemi oluşturma konusu ele alınmaktadır. İlk bölümde Fancybox kütüphanesi kullanılarak resimler sayfasının yan yana dizilmesi ve ileri-geri geçilebilmesi gösterilirken, ikinci bölümde jQuery ile galeri oluşturma süreci detaylı olarak anlatılmaktadır.
- Eğitim, div'lerin oluşturulması, FastStone PhotoResizer programı ile resimlerin hazırlanması, şablon dosyasının düzenlenmesi ve görsel düzenlemelerin yapılması gibi adımları içermektedir. Ayrıca farklı jQuery geçiş tarzları da gösterilmektedir. Video, bir sonraki derste daha fazla jQuery örneği gösterileceğini belirterek sona ermektedir.
- 00:01Resim Galerisi Tasarımı
- Yücel Solak, geçen derste kaldığı siteyi devam ettirecek ve resimler sayfasını yan yana resimlere dizip fancybox kullanarak galeri sistemi oluşturacak.
- Resimlerin yan yana dizilmesi için 150 piksel genişliğinde, 150 piksel yüksekliğinde div'ler oluşturulacak ve float left özelliği ile yan yana dizilecek.
- Div'lerin kenarlık özellikleri ayarlanarak görsel bir tasarım oluşturulacak.
- 02:23Resimlerin Hazırlanması
- Civata ile ilgili 9 adet büyük boyutlu (1380x1700 gibi) resim kullanılacak ve bunları önce küçültmek gerekiyor.
- FastStone PhotoResizer programı kullanılarak resimler 150x150 piksel küçük boyuta ve 1000 piksel genişliğe dönüştürülecek.
- Program ayrıca resimlere gölge, watermark, yazı ekleme, parlaklık ve kontrast ayarı gibi çeşitli özellikler sunuyor.
- 06:52Resimlerin HTML'e Eklenmesi
- Div'lerin içine img src koduyla küçük resimler eklenecek ve bu resimlere link verilecek.
- Resimlere link vermek için a etiketi kullanılarak "href" özelliği ile büyük resimlerin yolu tanımlanacak.
- Resimlere tıklandığında büyük resimlerin yeni sayfada açılması sorunu çözülecek.
- 09:53Fancybox Kullanımı
- Fancybox sistemi kullanılarak resimlerin yeni sayfada değil, aynı sayfada ileri geri geçiş yapabilmesi sağlanacak.
- Fancybox'un farklı tarzları bulunuyor: tek resim, ileri geri geçişli galeri, büyüyerek açılıp küçülerek kapanan gibi.
- Fancybox'un kodları incelenerek, resimlere "rel" özelliği eklenerek ve script kodları head taglerinin arasına yerleştirilerek sistem kurulacak.
- 12:52jQuery Kullanımı ve Sorun Çözümü
- Şablonda link: fansbox ve style: gs tanımlamaları yapılmış, ancak resimde kayma oluşmuş.
- Kayma sorunu kenarlıklardan kaynaklanıyor olabilir ve daha sonra incelenecek.
- jQuery çalıştırıldığında engellenen içeriğe izin ver seçeneği ile ileri-geri hareket edilebiliyor ve çarpıya basıldığında kapanıyor.
- 13:34jQuery Özelliklerinin Kullanımı
- jQuery'nin A kısmında boşluk bırakılması gerekiyor, aksi takdirde çalışmayacaktır.
- Resim bölümünde resmin ismi de yazılabilir, böylece görsel ve kullanışlı bir sonuç elde edilir.
- Border sorunu çözüldüğünde, resmin ve div'in boyutu değiştirilebilir, ancak kenarlık double ve renk verildiğinde boyutlar kaydırılabilir.
- 15:45Farklı jQuery Örnekleri
- Farklı geçiş tarzlarında sitenin belli bir yerine yerleştirilebilecek jQuery örnekleri bulunmaktadır.
- İnternette birçok farklı jQuery çeşidi mevcuttur ve genel mantık sayfayı açıp resimlere verilen linkleri, GSS ve JS kodlarını alarak problemi çözmektir.