Çalışma Amacı

Bu projede, Bootstrap framework'ü kullanılarak ISUBÜ’nün ana sayfası sıfırdan yeniden inşa edilmiştir. Amacımız, sayfanın modern ve duyarlı bir tasarıma sahip olmasını sağlamaktır. Bootstrap, duyarlı (responsive) tasarımlar oluşturulmasına olanak tanırken, aynı zamanda geliştiricilerin hızla proje oluşturabilmelerini sağlar. Bu çalışmanın kapsamı, sayfa tasarımının mantıklı bir şekilde yapılandırılması, Bootstrap bileşenlerinin entegrasyonu ve CSS özelleştirmeleri ile sayfanın görsel tasarımına katkı sağlanmasıdır.

Kullanılan Teknolojiler

• HTML5: Web sayfasının temel yapısını oluşturmak için kullanılan işaretleme dilidir. Bu dil, içeriklerin anlamlı bir şekilde sunulmasını sağlar.

• CSS3: Sayfa stilini belirleyen, sayfanın görsel estetiğini yönlendiren stil dilidir.

• Bootstrap: HTML, CSS ve JavaScript bileşenleri içeren açık kaynaklı bir framework’tür. Bootstrap, duyarlı web sayfaları oluşturulmasında oldukça etkili bir araçtır ve bu projede temel şablon olarak kullanılmıştır.

• JavaScript: Sayfada dinamik işlevlerin uygulanmasını sağlar. JavaScript ile, etkileşimli öğeler, animasyonlar ve dinamik içerik güncellemeleri yapılabilir.

Süreç ve Yöntem

Bootstrap Framework’ünün Entegre Edilmesi

Bootstrap, web tasarımında geliştirmeyi hızlandırmak için kullanılan güçlü bir araçtır. Proje başlangıcında, Bootstrap framework'ü, sayfanın temel yapısını oluşturmak için tercih edilmiştir. İlk adımda, Bootstrap’in resmi internet sitesinden gerekli dosyalar manuel olarak indirilmiştir. Bu dosyalar, CSS ve JavaScript dosyalarını içermektedir. Bootstrap framework'ü, genel sayfa düzenini, renk şemalarını, yazı tiplerini ve diğer stil özelliklerini düzenler. Bu dosyalar, sayfanın HTML yapısına entegre edilmiştir. Entegre edilen Bootstrap framework’ü, sayfanın temel yapısını şekillendiren unsurları içerir. Bununla birlikte, Bootstrap’in sunduğu çeşitli bileşenler, kullanıcı etkileşimini ve sayfanın genel tasarımını zenginleştirmek için kullanılmıştır. Bu entegrasyon sayesinde, projeye duyarlı (responsive) bir tasarım kolayca dahil edilmiştir. Böylece, sayfa tüm ekran boyutlarında uyumlu bir şekilde görüntülenebilir.

Sayfa Yapısının Oluşturulması

Bootstrap’in grid sistemi kullanılarak sayfanın temel yapısı oluşturulmuştur. Sayfa tasarımında yer alan ana öğeler, belirli bir düzen içinde konumlandırılmış ve her biri için uygun CSS sınıfları atanmıştır. Bu aşamada, sayfa için gerekli olan ana bölümler belirlenmiştir: başlık, duyuru alanı, görsel galeriler, içerik metinleri, öğrenci ve akademik bilgiler gibi. Her bölüm için, sayfanın her ekran boyutuna uygun şekilde düzenlenebilmesi için Bootstrap’in container, row ve col sınıfları kullanılmıştır. Bu sınıflar sayesinde, her içerik öğesi belirli bir grid yapısına oturtulmuş ve sayfa tüm cihazlarda düzgün bir şekilde görünmesi sağlanmıştır. Özellikle ana sayfa tasarımının ön plana çıkan kısmı, duyarlı navigasyon menüsü olmuştur. Kullanıcıların sayfada rahatça gezinebilmesi için üst menüde gezinme öğeleri yerleştirilmiştir. Bootstrap’in navbar bileşeni, sayfanın üst kısmında gezinme çubuğu (navbar) oluşturmayı mümkün kılmıştır. Bu menü, üniversitenin ana sayfasındaki linklere kolay erişim sağlamaktadır.

Harici CSS Dosyasının Kullanılması

Bootstrap, varsayılan olarak birçok stil ve düzenleme sunar, ancak tasarımın tamamen kişiselleştirilebilmesi için harici bir CSS dosyasına ihtiyaç duyulmuştur. Bu dosya, Bootstrap’in sağladığı stilleri daha da özelleştirmek için kullanılmıştır. Harici CSS dosyasında, yazı tipleri, renkler, buton stilleri, görsel düzenlemeler ve diğer öğeler üzerinde detaylı değişiklikler yapılmıştır. CSS özelleştirmeleri sayesinde, sayfa daha modern ve estetik bir görünüme kavuşturulmuştur. Örneğin, başlık ve metinler için farklı font aileleri seçilerek sayfanın görsel kimliği güçlendirilmiştir. Aynı zamanda, görsellerin boyutları ve hizalanmaları üzerinde yapılan düzenlemeler ile sayfanın daha dengeli bir görünüme sahip olması sağlanmıştır. CSS ile yapılan özelleştirmelerin yanı sıra, sayfa üzerinde kullanıcı deneyimini artıran efektler de eklenmiştir. Resim galerileri ve duyuru kutuları gibi öğeler, kullanıcı etkileşimini teşvik eden animasyonlarla desteklenmiştir. Böylece, sayfa sadece işlevsel değil, aynı zamanda görsel açıdan da çekici hale getirilmiştir.

Dinamik Öğeler ve JavaScript Kullanımı

Web sayfalarında yalnızca statik içerik değil, aynı zamanda dinamik öğeler de büyük bir öneme sahiptir. Kullanıcıların sayfa ile etkileşimde bulunabilmesi, sayfanın dinamik özelliklere sahip olmasını gerektirir. Bu projede, sayfada kullanılan bazı bileşenlerin etkileşimli hale gelmesi için JavaScript kullanılmıştır. Özellikle sayfada kullanılan carousel (kaydırıcı) bileşeni, JavaScript yardımıyla aktif hale getirilmiştir. Resim galerilerinin ve slider’ların dinamik geçişleri, kullanıcıların sayfa içeriğiyle etkileşime girmesini kolaylaştırmaktadır. JavaScript kodları, kullanıcı etkileşimini daha akıcı ve verimli hale getirmiştir. Diğer bir dinamik öğe ise, açılır menülerdir. Bu tür etkileşimli öğeler, sayfanın genel kullanımını kolaylaştırmış ve kullanıcı dostu bir deneyim yaratmıştır.

Performans ve Optimizasyon

Web sayfasının tasarım süreci yalnızca estetik ve işlevsellik üzerine değil, aynı zamanda sayfanın hız optimizasyonuna da odaklanmıştır. Sayfa, Bootstrap’in sunduğu performans odaklı özellikler sayesinde hızlı yüklenmektedir. Ayrıca, kullanılan resimlerin boyutları optimize edilerek sayfa yüklenme süreleri kısaltılmıştır. Sayfanın hızlı yüklenmesi, kullanıcı deneyimini doğrudan etkileyen bir faktördür. Bu nedenle, sayfa içeriği, gereksiz yüklemelerden kaçınılarak sadeleştirilmiş ve hız optimizasyonuna önem verilmiştir.

Sonuç

Bu çalışmada, Isparta Uygulamalı Bilimler Üniversitesi’nin ana sayfası, Bootstrap framework’ü kullanılarak sıfırdan yeniden tasarlanmıştır. Bootstrap’in sunduğu avantajlarla, duyarlı ve modern bir tasarım oluşturulmuş, harici CSS dosyalarıyla özelleştirmeler yapılmış ve JavaScript ile sayfanın dinamik öğeleri güçlendirilmiştir. Sonuç olarak, ortaya çıkan tasarım, sadece fonksiyonel değil, aynı zamanda estetik açıdan da tatmin edici bir yapı ortaya koymuştur. Bu projede elde edilen bilgiler, gelecekteki web tasarımı projeleri için önemli bir referans olmuştur.

Gelecek Çalışmalar

İlerleyen zamanlarda, bu tasarımın daha da geliştirilmesi ve kullanıcı etkileşiminin artırılması hedeflenmektedir. , Sayfanın içerik yönetimi sistemiyle entegre edilmesi, daha fazla dinamik bileşenin eklenmesi ve sayfa hızının daha da optimize edilmesi planlanmaktadır. Ayrıca, SEO (Arama Motoru Optimizasyonu) stratejilerinin uygulanarak sayfanın görünürlüğü artırılabilir ve daha geniş bir kullanıcı kitlesine hitap etmesi sağlanabilir. Bu proje, Bootstrap framework'ü ile tasarım yapma becerisini geliştirmeyi sağlayan önemli bir adımdır ve daha ileri seviye web tasarımı tekniklerine geçiş için sağlam bir temel oluşturmaktadır.