Çaycuma Sözlük projesini geliştirirken HTML5, CSS3, JavaScript, PHP ve MySQL web teknolojilerini kullandık. Sitedeki seslendirme işlemleri için Web Speech API kullandık. Kodlama işlemleri bittikten sonra Web Hosting & Alan Adı Yönetimi işlemlerini gerçekleştirdik.

HTML5 Sayfa Yapısı ve Anlamsal İçerik HTML5 ile Oluşturuldu

Kullanıcıların ekranda gördüğü sayfaların iskeleti ve içerikleri (başlıklar, paragraflar, listeler, bağlantılar, formlar, görseller vb.) HTML5 kullanılarak oluşturuldu. Projede ana sayfa, sözlük sayfaları, kelime önerme sayfaları, oyun sayfaları, iletişim formları vb. gibi her ekran HTML5 ile yapılandırıldı.

CSS3 Sayfaların Görünümü ve Düzeni CSS3 ile Ayarlandı

HTML ile oluşturulan sayfaların ve içeriklerin nasıl görüneceği (renkler, yazı tipleri, boşluklar, kenarlıklar, gölgeler, hizalama ve çok sütunlu düzen vb.) CSS3 ile ayarlandı. Projede sayfaların mobil telefon, tablet ve masaüstünde düzgün görünmesi için esnek tasarım (responsive design) kuralları CSS3 ile yazıldı ve ortak görünüm style.css adlı stil dosyasında toplandı.

JavaScript Tarayıcı ile Etkileşim ve Dinamik Davranışlar İçin JavaScript Kullanıldı

JavaScript, kodların kullanıcının bilgisayarında çalışan web tarayıcısı içinde işletildiği, sayfa yüklendikten sonra kullanıcı etkileşimini sağlayan bir betik dildir. Sunucudan gelen HTML ve CSS ile oluşturulan sayfalar bir kez yüklendikten sonra; tıklama, yazma, kaydırma gibi olaylara (event) anında yanıt vermek, ekranın bir bölümünü yenilemeden güncellemek için JavaScript kullanıldı.

Projede kelime oyunlarında soru-cevap, süre, puan ve ekran güncellemeleri, sözlük sayfasında açılan kelime detay pencereleri, tıklanınca açılıp kapanan kutular ve sayfa içi bölümler, kelime arama kutusunda yazarken çıkan öneriler, iletişim ve kelime öneri formlarında anlık kontroller (boş alan, e-posta biçimi, güvenlik sorusu vb.) JavaScript kullanılarak gerçekleştirildi.

PHP Sunucu Taraflı Programlama PHP ile Gerçekleştirildi

Sitemizin içerik kısmını HTML5, görsel kısmını CSS3 ile tasarladıktan sonra, sitedeki veri trafiği yönetimini, dinamik içerik üretimini, güvenlik ve kontrol mekanizmalarını, admin yönetim panelini PHP ile kodladık.

Arama kutusuna bir kelime yazıldığında, PHP bu isteği alarak MySQL veritabanı sunucusuna bağlandık ve kelime ile ilgili bilgileri veritabanındaki tablolardan bulup çekerek kelime detay pencerelerinde hazırladık. Sitemizde yüzlerce kelime olmasına rağmen biz yüzlerce ayrı HTML sayfası hazırlamadık. PHP sayesinde; kullanıcı hangi kelimeye ararsa PHP o kelimenin içeriğini saniyeler içinde veritabanından çekerek kelime detay sayfasında gösterilmesini sağladık. Kelime öner veya kelime düzeltme öner formlarında girilen bilgilerin güvenliği PHP ile sağlandı. Sitemizin arka planındaki admin yönetim panelini PHP ile kodladık. Bu sayede kod bilmeyen bir editör bile sisteme kolayca yeni kelime ekleyebiliyor, silebiliyor veya güncelleyebiliyor.

MySQL İlişkisel Veritabanı Tasarımı İçin MySQL ve Veritabanını Yönetmek İçin phpMyAdmin Kullanıldı

MySQL, projede ilişkisel veritabanını tasarlamak için, PhpMyAdmin veritabanını yönetmek için kullanıldı. Çaycuma' ya ait yöresel kelimeler, anlamları, örnek cümleleri, yönetici hesapları, site ayarları, beğeni, oylama, görüntüleme kayıtları ve benzeri tüm kalıcı veriler veritabanında tablolarda tutuldu. Tablolar arasında (örneğin kelime ile beğeni) ilişkiler tanımlanarak, veri bütünlüğünü sağlandı.

Kodlarla veri tabanı yönetmek zor olduğundan dolayı, biz bu süreci kolaylaştırmak ve hatasız yönetmek için phpMyAdmin arayüzünü kullandık.

Hosting Web Hosting ve Alan Adı Yönetimi İşlemleri Gerçekleştirildi

Kodlama işlemleri tamamlandıktan sonra projeyi internet ortamında yayınlamak için Güzel Hosting ve İnternet Hizmetleri firmasına ait olan https://www.guzel.net.tr/ web sitesi üzerinden web hosting hizmeti satın aldık ve www.caycumasozluk.com alan adını tahsis ettik.

Web Speech API Sitedeki Ses Çalma İşlemleri Web Speech API ile Gerçekleştirildi

Sitede seslerin duyulması, sunucuya yüklenmiş ayrı ses dosyaları oynatılarak değil; ziyaretçinin kullandığı web tarayıcısının yerleşik konuşma sentezi (Text-to-Speech) özelliği ile yapıldı. Web Speech API, kısaca web sayfasındaki JavaScript kodunun tarayıcıya yazılmış metni sesle okutmasını sağlayan, modern tarayıcılarda hazır bulunan standart bir arayüzdür; ekstra bir ses programı kurulmasını gerektirmez, metin doğrudan tarayıcı ve cihazın sunduğu seslerle okunur. Bu yapı üzerinden kelime metni tarayıcıya iletildi ve tarayıcı, cihazda yüklü Türkçe seslerden uygun olanı seçerek kelimeler seslendirildi.