Tamamen duyarlı (responsive), modern, gelişmiş SEO optimizasyonları ve erişilebilirlik özellikleri içeren dijital pazarlama ajansı web sitesi.
- Genel Bakış
- Özellikler
- Teknoloji Altyapısı
- SEO Optimizasyonları
- Erişilebilirlik
- Başlangıç
- Proje Yapısı
- Özelleştirme
- Performans Optimizasyonları
- Tarayıcı Desteği
- Lisans
- İletişim
inalsoft web sitesi, dijital pazarlama ajansı için modern, duyarlı ve SEO odaklı bir web sitesidir. Site, ajansın hizmetlerini, portfolyosunu, ekibini ve müşteri yorumlarını sergiler. Performans, erişilebilirlik ve SEO en iyi uygulamaları göz önünde bulundurularak tasarlanmıştır.
- Tamamen Duyarlı: Tüm ekran boyutlarına ve cihazlara uyum sağlar
- Karanlık/Aydınlık Mod: Kullanıcı tercih hafızası ile dahili tema değiştirici
- Çoklu Dil Desteği: Dil değiştirme altyapısı (Türkçe/İngilizce)
- Etkileşimli UI Elementleri:
- Animasyonlu sayaçlar
- Portfolyo filtreleme
- Yumuşak kaydırmalı navigasyon
- Typed.js metin animasyonu
- AOS kaydırma animasyonları
- Optimize Edilmiş Formlar: İstemci taraflı doğrulama ile iletişim formu
- KVKK Uyumlu: Çerez izni bildirimi
- Performans Odaklı: Kaynak ön yükleme ve önbelleğe alma ile hızlı yükleme
- HTML5: Semantik işaretleme yapısı
- CSS3: Özel değişkenler ve animasyonlar ile modern stil
- JavaScript: Etkileşimli elementler için ES6+
- Bootstrap 5: Duyarlı grid sistemi ve bileşenler
- Kütüphaneler:
- AOS (Animate On Scroll)
- Typed.js
- Font Awesome
- jQuery (minimal kullanım)
Web sitesi kapsamlı SEO en iyi uygulamalarını içerir:
- Meta Etiketleri: Eksiksiz başlık, açıklama ve anahtar kelime meta etiketleri
- Open Graph ve Twitter Cards: Sosyal medya paylaşım optimizasyonu
- Schema.org İşaretlemesi: Organizasyon, hizmetler ve yerel işletme için zengin snippet'ler
- Semantik HTML: Uygun başlık hiyerarşisi ve referans noktası (landmark) elementleri
- Kanonik URL'ler: Yinelenen içerik sorunlarını önleme
- Yapılandırılmış Veri: Hizmetler ve işletme bilgileri için JSON-LD uygulaması
- Mobil Optimizasyon: Görünüm alanı (viewport) ayarları ve duyarlı tasarım
- Sayfa Hızı: Optimize edilmiş kaynaklar ve gecikmeli yükleme
- Robots.txt: Arama motoru tarayıcıları için doğru yapılandırma
- İç Bağlantılar: İlgili içerikler arasında stratejik bağlantılar
- Görsel Optimizasyonu: Alt etiketleri ve açıklayıcı dosya adları
- Breadcrumbs (Ekmek Kırıntıları): Gezinme yolu göstergeleri
- URL Yapısı: SEO dostu URL kalıpları
Web sitesi, erişilebilirlik için WCAG kurallarını takip eder:
- Semantik HTML5: Referans noktası (landmark) elementleri ve başlık hiyerarşisinin uygun kullanımı
- ARIA Nitelikleri: Gelişmiş ekran okuyucu desteği
- Klavye Navigasyonu: Tam klavye erişilebilirliği
- Odaklanma Stilleri: Klavye kullanıcıları için görünür odak göstergeleri
- İçeriğe Atla: Ekran okuyucu kullanıcıları için gizli bağlantı
- Alt Metin: Görseller için açıklayıcı alternatif metin
- Renk Kontrastı: WCAG AA uyumlu renk kontrastı
- Duyarlı Tasarım: Tüm cihazlarda ve ekran boyutlarında erişilebilir
- Bir web sunucusu veya hosting hizmeti
- Özelleştirme için HTML, CSS ve JavaScript temel bilgisi
-
Depoyu klonlayın:
git clone https://github.com/kullaniciadi/inalsoft-website.git
-
Web sunucunuza yükleyin veya yerel olarak açın:
cd inalsoft-website # index.html dosyasını tarayıcınızda açın veya yerel bir sunucu kullanın
inalsoft-website/
├── index.html # Ana HTML dosyası
├── README.md # Proje dokümantasyonu
├── LICENSE # Apache 2.0 lisansı
├── robots.txt # Arama motoru tarayıcı talimatları
├── site.webmanifest # PWA manifest dosyası
├── sitemap.xml # Arama motorları için XML site haritası
├── src/
│ ├── css/
│ │ └── style.css # Ana stil dosyası
│ ├── js/
│ │ └── script.js # Ana JavaScript dosyası
│ ├── img/ # Görsel varlıklar
│ │ ├── about-us.png
│ │ ├── hero-image.png
│ │ └── ...
│ └── fonts/ # Özel font dosyaları (varsa)
- Metin içeriğini, görselleri ve bağlantıları güncellemek için
index.htmldosyasını düzenleyin. src/img/dizinindeki yer tutucu görselleri kendi görsellerinizle değiştirin.
src/css/style.cssdosyası, kolay özelleştirme için CSS değişkenleriyle birlikte tüm stillendirmeyi içerir.- Dosyanın üst kısmındaki CSS değişkenlerini değiştirerek renk şemasını güncelleyin:
:root {
--primary-color: #ff1616;
--primary-color-light: #ff4444;
--primary-color-dark: #cc0000;
/* diğer değişkenler */
}Web sitesi modüler bir yapıyla oluşturulmuştur. Her bölüm, benzersiz bir ID'ye sahip bir <section> elementi içinde bulunur. Bölüm eklemek veya kaldırmak için:
index.htmldosyasındaki mevcut bir bölümü kopyalayın ve gerektiği gibi değiştirin- Navbar'daki navigasyon bağlantılarını güncelleyin
style.cssdosyasına gerekli CSS stillerini ekleyin
Web sitesi birkaç performans optimizasyonu içerir:
- Kaynak Ön Yükleme: Kritik CSS ve fontlar önceden yüklenir
- Gecikmeli Yükleme: Görseller
loading="lazy"niteliğini kullanır - Küçültülmüş Kütüphaneler: Tüm harici kütüphaneler CDN'lerden yüklenir
- Ertelenmiş JavaScript: Kritik olmayan komut dosyaları ertelenir
- Önbelleğe Alma Başlıkları: Statik varlıklar için Cache-Control başlıkları
- Duyarlı Görseller: Farklı ekran boyutları için optimize edilmiş görseller
- CSS Değişkenleri: CSS özel özellikleriyle verimli stillendirme
- İçerik Güvenliği Politikası: CSP başlıklarıyla geliştirilmiş güvenlik
Web sitesi aşağıdakilerle uyumludur:
- Chrome (en son sürüm)
- Firefox (en son sürüm)
- Safari (en son sürüm)
- Edge (en son sürüm)
- Opera (en son sürüm)
- Mobil tarayıcılar (iOS Safari, Android Chrome)
Bu proje Apache Lisansı 2.0 altında lisanslanmıştır - detaylar için LICENSE dosyasına bakın.
Destek veya sorular için:
- E-posta: info@inalsoft.com
- Telefon: +90 530 743 22 39
© 2025 inalsoft. Tüm hakları saklıdır.