Vodvil Kültür Sanat ve Sinema Sosyal Medya Web Sitesi

Nurullah Kılıç

İstanbul Üniversitesi
İnternet Sitesi

www.vodvilapp.com kültür sanat ve sinema konseptli bir sosyal medya uygulaması web sitesidir. Beta sürümünde olan proje, halihazırda veri tabanında bulunan 20 bin adet film, dizi ve buna ilaveten projeye özgü Detaylı İçerik Sorgusu kapsamında veri tabanına eklenecek sınırsız içerik hakkında kullanıcıların etkileşimde olacağı ve konsept dahilinde makaleler yazabileceği bir sosyal mecradır.

Siteye ait önemli kısımların görselleri:

ARAMA ALANI

DETAYLI İÇERİK SORGUSU

KULLANICI PROFİLİ

BİLDİRİMLER

MAKALE EKLEME PANELİ

MAKALE ALANI

LİSTE SATIR GÖRÜNÜMLÜ

LİSTE TABLO GÖRÜMLÜ

ZAMAN TÜNELİ

ZAMAN TÜNELİ 2

HESAP AYARLARI

HESAP AYALARI 2

İÇERİK GÖRÜNTÜSÜ

SİTENİN VERİTABANI TASARIMI

 

Proje temel olarak birkaç ana kısımdan oluşmaktadır.

  • Arama Alanı: Temel olarak 3 kısımdan oluşan arama sayfasının birinci kısmı büyüteç butonuna basıldığında erişilen sayfadır. Birinci kısımdaki arama sayfası muadili olan birçok sosyal medya sitesi gibi içerisinde makale, kullanıcı alanı, dizi ve film içeriğini halihazırda bulundurarak kullanıcıya siteyi keşfedebileceği bir alan tanır. Bu kısımda Live Search yazılımı ile arama kutucuğuna yazılan herhangi bir terim farklı bir aksiyona girilmeksizin saniyeler içinde aranan parametreyle alakalı makale, kişi bilgisi, dizi ve film içeriğini sayfada zaten bulunmakta olan yerleri güncelleyerek kullanıcıya sunar. Birinci kısım kullanıcıya hızlı bir sonuç sağlar. İkinci kısım aramada ise sayfadaki TÜMÜNÜ GÖR aksiyonu ile erişilir. Bu alanda kullanıcı girdiği parametredeki bütün sonuçları elde etme imkânı kazanır. Sonuçların aynanda ekrana yazılması performans kaybına neden olacağı için infitive scroll özelliği ile kullanıcı aşağı doğru indikçe daha fazla sonuç ekrana yazılamaya devam eder. Üçüncü kısım arama ise Detaylı İçerik Sorgusudur.
  • Detaylı İçerik Sorgusu: Detaylı İçerik Sorgusu, sadece dizi ve film aramalarını kapsar. Web sitesinin veri tabanında halihazırda 20 bine yakın içerik vardır. Her bir içerik, varsa Türkçe isim, orijinal isim, yönetmen, yapım yılı, kısa özeti, posteri, arka plan posteri ve unique(eşsiz) bir id’ye sahiptir. Bağlı olduğu id’ye ilişkili olarak kullanıcı bazı aksiyonlara -görüş belirtme, listesine ekleme vb.- girer. Fakat veri tabanında tüm zamanların tüm içerikleri kayıtlı olmadığı için bu sorgu kullanılmalıdır. Bu sayfada yapılan sorgu diğer aramalardan farklı olarak TheMovieDB sitesinin API adresine sorguda bulunur. Gelen içerik verileri kullanıcı ekranına yansıtılır. Kullanıcının ekranda tıkladığı içerik veri tabanında varsa direkt o sayfaya erişilir. Eğer yoksa yazılım saniyeler içerisinde o içeriği veri tabanına ekler. Böylelikle site içerisinde bulunmayan dizi-film içerikleri yok denecek kadar azdır.
  • Görüş Belirtme: Web sitesi içerisinde bulunan dizi ve film içeriklerine, yaklaşık 30-500 kelime aralığında görüşlerini belirttikleri kısımdır. Görüş içerisinde spoiler (süprizbozan) içeriyorsa o kısım bulanıklaştırılarak tercihen açılması amaçlanmıştır. Belirtilen her görüş kullanıcısı tarafından düzenlenebilir veya kaldırılabilir. Tekdüze fikirlerin ve papağan misali tekrarlanan basma kalıp lafların türediği sosyal mecraların aksine içerikler hakkında özgün fikirlerin ve görüşlerin bulunduğu bir mecra olması amaçlanmaktadır. Kayıtlı olan veya olmayan herhangi bir kişinin o içerik hakkındaki farklı görüşleri bulması, kendine fikir edinmesi önceliğimizdir.
  • Liste Oluşturma: Kullanıcı; yakın zamanda izlediği, ileriki bir vakitte izlemek istediği veya takipçileriyle paylaşmak istediği dizi-film içeriklerini listeleyebileceği görsel açıdan zengin bir listeleme özelliğine sahiptir. Profil sayfasındaki Yeni Liste Oluştur butonu ile kolaylık bir liste oluşturur. Satırlardan oluşan listede dizi-film içeriklerinin isim bilgisi, yönetmen bilgisi, yayın tarihi, posteri, arka plan görseli ve listeye eklenme tarihi bulunmaktadır. Aynı zamanda aynı liste elemanlarının tablolar halinde daha görsel ağırlıklı haline yönlendiren buton bulunmaktadır. Kullanıcı oluşturduğu listeye arka plan görseli ve açıklama da ekleyerek daha efektif listeler hazırlayabilir ve takipçilerinin beğenisine sunabilir. Herhangi bir kullanıcı hazırlanan listeyi favorilerine ekleyerek etkileşimde bulunabilir. Kullanıcı oluşturduğu listeyi istediği gibi kaldırabilir, isim ve açıklama bilgisini değiştirebilir veya liste arka plan görselini düzenleyebilir. Buna ek olarak herhangi liste elemanını istediği gibi kaldırabilir. Listeye eleman ekleme aşaması, oldukça kolay ve işlevsel bir arayüze sahip olması açısından popuplar ile sağlanmaktadır. Popuplar, spesifik olarak bir dizi-film içeriği sayfasındaki Listene Ekle butonuna veya kullanıcıya ait olan-olmayan herhangi bir listedeki Listeye Ekle butonuna basıldığında ortaya çıkarak aktif kullanıcının listelerini ekrana yansıtır. Böylelikle kullanıcı aynı anda birçok listesine içerik ekleme imkânı ve kolaylığı kazanır.
  • Takip Sistemi: Kullanıcı, yakın çevresi veya site içerisinde paylaşımlarından keyif aldığı başka kullanıcıları takip ederek etkileşim içerisinde bulunabilir. Kullanıcı, hesap ayarları kısmında bulunan bu projeye özgü Geri Bildirim özelliği ile kendisini takip etme veya takipten çıkma aksiyonunda bulunan diğer kullanıcının üst kısımdan aldığı geri bildirim metnini – “Başarıyla takip edildi!”, “Takipten çıkıldı!” - kendi özgün ifadeleri ile değiştirerek özelleştirme imkanına sahiptir.
  • Makale Yazma: Az karakterler ile görüş belirtmenin yanı sıra kullanıcının karakter sınırı olmaksızın film-dizi okuması, detaylı içerik analizi, film-dizi eleştirisi veya konsept dahilinde birçok konuda oldukça zengin metin editörü ile makaleler yazabileceklerdir. Web sitesi, okunabilirlik açısından performansı arttırmak adına makalelerinde fotoğraf, resim, video barındırabilecek buna ilaveten yazının belirli kısımlarını vurgulayacak aksiyonlara girebileceği zengin bir metin editörüne sahiptir. Makale ekleme paneli, yazının çıktısı ile aynı tasarlanarak kullanıcının makaleyi daha yayına almadan çıktı olarak görebileceği ve düzenleyebileceği bir şekildedir. Kullanıcı makaleyi taslak olarak kaydetme seçeneği ile yazıyı istediği bir vakitte yayınlama fırsatı kazanır. Kullanıcı yayınladığı makaleyi istediği her vakitte düzenleme seçeneğine sahiptir. Makale paylaşıldığı andan itibaren sayfanın altında bulunan yorum panelinde diğer kullanıcıların yorumlarına tamamen açıktır. Ayrıca yayınlanan makale siteye özgü Değer Ver butonu ile diğer kullanıcılardan değer görecektir. Web sitesinin belirli bir konsepte odaklı olması kültür sanat sinema adına kaliteli ve özgün makalelerin buluşacağı bir çatı olmasına imkân sağlayacaktır.
  • Profil Oluşturma: Her bir kullanıcının paylaştığı makalelerin, görüşte bulunduğu içeriklerin, oluşturduğu listelerin, izlenecekler kısmının, takipçilerinin, takip ettiği kişilerin ve buna benzer kullanıcı aktivitelerinin bulunduğu eşsiz bir profil alanları bulunmaktadır. Profil fotoğrafı ve kapak fotoğraflarını kendi görsel zevkleri dahilinde düzenleyebileceklerdir. Böylelikle oldukça benzersiz ve ziyaret edilesi bir kullanıcı alanı oluşturabileceklerdir. Profil alanı birçok popup ile farklı bir adrese yönlendirmeden aynı adres üzerinde daha işlevsel ve hızlı hale getirilmiştir. Örneğin takipçiler ve takip edilenler, yeni liste oluşturma, profil resmi vb. alanlar popuplar sayesinde hızlıca kullanıcıya sunulur.
  • Bildirimler: Kullanıcı ile alakalı her bir aksiyona karşılık oluşan bir bildirim sistemi vardır. Bir diğer kullanıcı takip ettiğinde, makalesine yorum yaptığında, makalesine değer verdiğinde ve listesini favorilerine eklediğinde tetiklenerek kullanıcıya ulaşır. Kullanıcının oluşan her aksiyonu görmesi ve erişebilmesi açısından önemli bir değer sahiptir.
  • Zaman Tüneli: 3 kısımdan oluşan zaman tüneli aktif kullanıcının takipçi aktivitelerini görebildiği alandır. Kullanıcının, takip ettiği kişilerin eklediği görüşleri, listelerine ekledikleri içerikleri ve yayınladıkları makaleleri anlık olarak takip etmesini sağlar.

 

Projenin Teknik Kısımları:

  • Kullanıcı deneyimini en üst düzeye çıkarmak adına, her bir sayfa tek tek figma.com üzerinden UI/UX tasarımları yapılmıştır. Tasarım açısından özgünlük sağlamak adına birçok farklı deneme yapılmıştır. Site içerisinde belirli kısımlarda -giriş yap, kayıt ol, yeni liste oluşturma- konuyla alakalı dizi-film görsellerine yer vererek daha samimi bir hava katılmak istenmiştir. Blog UI/UX – Figma
  • Web sitesi frontend’i tamamen responsive olup her türlü mobil cihazda tasarımda bozulma olmaksızın çalışmaktadır.
  • Veri tabanı sorgularının sunucuyu sekteye uğratmaması adına bütün veri tabanı haritası önceden çizilmiş olup ekte sunulmaktadır. Untitled - dbdiagram.io
  • Sayfa üzerinde kullanıcının daha hızlı işlem yapması adına birçok aksiyon sayfa yenilenmeksizin Fetch API ve POST request’ler ile yapılmıştır. Bir çok kısımda da infitive scroll ile kullanıcı hız performansı arttırılması amaçlanmıştır.
  • İleriye dönük web sitesi ile kalmayarak mobil uygulama, masaüstü uygulaması veya televizyon uygulamasına hızlıca dönüşebilmesi adına sitenin birçok aksiyonu kendi API’si ile sağlanmaktadır. Örn. ‘/web/api/notifications’

Projede İleriye Yönelik Fikirler:

  • Puanlama sistemi eklenerek dizi film içeriklerine her bir kullanıcı kendi değerlendirmesini yapabilecek.
  • Girilen görüşlere yorum yapma özelliği ekleyerek bir tartışma ortamı yaratmak.
  • Etkinlik takvimi eklenerek kullanıcının konsept dahilindeki Zoom, Skype veya sahne etkinliklerini -yönetmen daveti, film okuması vb.- oluşturup diğer kullanıcıları davet edeceği ve böylelikle etkinliklerin daha fazla kişi ve doğru kitleye iletilmesini sağlayan bir çatı oluşturmak.
  • Yazılım ekibi genişletildiği taktirde site içi mesajlaşma yani direkt mesaj özelliği eklenebilir.

NOT: Web sitesi bu yarışmaya odaklı bir şekilde yaklaşık 2.5 ay gibi bir sürede tek bir kişi tarafından hazırlanmıştır.

EK:

UI-UX: Blog UI/UX – Figma

Veri Tabanı Tasarımı:  Untitled - dbdiagram.io

İnternet Sitesi