Search
  • busranurbekman

Timeline JS ile Zaman Çizelgesi Oluşturma: 1876'dan 1950'ye İstanbul Seçimleri

Gazeteciliği yeni alanlarda geliştirmek için Northwestern Üniversitesi Knight Lab tarafından tasarlanmış olan Timeline JS, kullanıcıların görsel olarak zengin ve etkileşimli zaman çizelgeleri oluşturmasını sağlayan bir araçtır. Dünyanın dört bir yanından milyonlarca kişi tarafıntimeline-js-ile-zaman-çizelgesi-oluşturma-1876-dan-1950-ye-i̇stanbul-seçimleridan ziyaret edilen Timeline JS’de altmıştan fazla dil desteği mevcut. Ayrıca Timeline JS ekibi, Northwestern Üniversitesi ile bağlantılı olarak raporlama, veri yönetimi, araştırma ve hikaye anlatımı için araç prototipleri geliştirmekte.


Kullanıcılar, herhangi bir üyelik kaydı oluşturmadan ve ücretsiz olarak bu aracı kullanabiliyor. Üstelik yalnızca Google E-Tablolar aracılığı ile metin, video, görsel, ses vb. gibi farklı formatlardaki verilerini bir araya getirerek interaktif zaman çizelgeleri oluşturabiliyor! Pek çok akademik projede yer alan, kullanımı oldukça kolay ve sonuçları etkileyici olan bu dijital beşeri bilimler aracını uygulamalı olarak sizlere tanıtıyoruz.

Timeline JS tasarımına başlamadan önce birkaç ipucu ile daha anlamlı bir zaman çizelgesi oluşturabiliriz.
  • İçerik mümkün oldukça kısa tutulmalı. Bununla birlikte, okuyucunun tıklaması için 20'den fazla slayt bulundurulmaması öneriliyor. Güçlü bir kronolojik anlatıya sahip hikâyeler seçilmeli

  • Zaman çizelgesinde atlaması gereken hikâyeler için iyi çalışmayacağı hatırlatılmakta.

  • Her olayı daha büyük bir anlatının parçası olarak yazılmalı,

  • Yalnızca büyük olayları değil, büyük olaylar oluşturan detaylar da dâhil edilmeli.

Uygulama aşamaları


Öncelikle zaman çizelgesi uygulaması için Timeline JS web sitesine tıklayınız.

Açıklamalar ve uygulama örneklerinden sonra kendi zaman çizelgenizi oluşturacağınız ilk aşama ile karşılaşacaksınız.


İşte şimdi "Make a Timeline" butonuna tıklayarak zaman çizelgenizi yalnızca dört adımda oluşturabilirsiniz!

1. Adım: Veri tabanı Oluşturma


“Get the SpreadSheet Template” butonundan ulaşılan örnek şablonu kullanarak yeni bir Google E-Tablosu oluşturun.


Karşınıza çıkan sayfada "Bir Kopya Oluştur" düğmesini tıklayarak şablonu kendi Google Drive hesabınıza kopyalayabilirsiniz.

İşte zaman çizelgenizin veri tabanı şablonu karşınızda! Bu örnek dosyanın içeriği kullanıcılara fikir vermesi amacıyla oluşturulmuş bilgilerdir. Bu sebeple, veri tabanızın satırlarında mevcut bilgileri silerek uygulamaya geçmenizi öneririz.


UYARI: Tablonuzda yer alan sütun başlıklarını değiştirilmemeli, sütunlar kaldırılmamalı ve e-tabloda boş satır bırakılmamalıdır.

Başlamadan önce sütun başlıklarımızın özelliklerine göz atalım
  1. A-B-C-D sütunları, veri tabanınızda yer alacak tarihleri sırasıyla “Yıl-Ay-Gün-Saat” (Year-Month-Day-Time) olarak görünmesini sağlıyor. Ancak verinizde yalnızca yıl bilgisi varsa çizelgenizi sadece yılları belirterek oluşturabilirsiniz.

E-F-G-H sütunları ise elinizdeki verilerin bitiş tarihlerini “Yıl-Ay-Gün-Saat-Görüntüleme Tarihi” olarak gösterilmesini temsil etmektedir. Ancak bu kategorilerin doldurulmak zorunda olmadığını hatırlatmak isteriz. Ayrıca Timeline JS'de Milattan önceye ait tarihleri rahatlıkla çizelgenize ekleyebilirisiniz. Bunun için tarihleri negatif bir değer kullanmanız yeterlidir. (örneğin -500 gibi) Elbette, gerekirse ay ve tarih de girebilirsiniz. Ancak, Milattan öncesinin gösterilmesi için web sitesinin sağladığı destek nispeten yenidir. Bu nedenle, herhangi bir problemle karşılaşıldığında Timeline JS ekibi ile iletişime geçmenizi öneririz.

  1. J sütununda yer alan Başlık (Headline) zaman çizelgenizde görülecek kısa başlığı göstermektedir. K sütunundaki Metin (Text) ise başlığınızın detaylarının ekleneceği bölümdür.

  2. L sütunu (Media) Twitter, Flickr, YouTube, Vimeo, Vine, Dailymotion, Google Haritalar, Wikipedia, SoundCloud, Document Cloud gibi pek çok medyayı link olarak ekleyebilceğiniz bölümdür. Böylece, zaman çizelgenizi çeşitli görseller, loksasyonlar, videolar vb. gibi içeriklerle zenginleştirebilirsiniz.

  3. M sütunu (Media Credit) medyanın kaynak referansını ekleyeceğiniz yer, N sütunu (Media Caption) ise medyanıza alt yazı ekleyebileceğini bölümü temsil etmektedir. O sütunu (Media Thumbnail) ile 32px x 32px'den büyük olmaması koşulu ile bir resim dosyasına bağlantı verebilirsiniz.

  4. P sütunu (Type) slaytların başlıklarını göstermektedir. Bu sütunla dönem (era) slaytlarını da ayarlayabilirsiniz. Ancak dönem slaytlarının yalnızca başlıkları ve tarihleri görüntüleneceğini unutulmamalıdır.

  5. Q sütunu (Group) birbiriyle ilişkili olayları göstermektedir. Bu sayede, zaman çizelgenizdeki verileri kategorik olarak ayırabilir, aynı kategoride yer alan verilerinizi etiketleyebilirsiniz.

  6. Son olarak R sütunu (Background) sayesinde bir renk kodu (#333333 gibi) veya bir resim URL'sini girerek zaman çizelgenizin arka planını değiştirebilirsiniz.

Zaman çizelgemizin veri tabanı özelliklerini ve sütunların detaylarını inceledik. Gelin şimdi uygulama ile sonuçlara daha detaylı bakalım!

Bu blog yazısı kapsamında Antik Çağ’dan XXI. Yüzyıla Büyük İstanbul Tarihi adlı eser içerisinde yayımlanan “1876’dan 1950’ye İstanbul’un Seçim Tarihi[1] isimli makaleyi dijitalleştirerek bir zaman çizelgesinin nasıl yapıldığını keşfedeceğiz!


Veri tabanımızın ikinci satırı itibariyle zaman çizelgemizin bilgilerini girmeye başlıyoruz.

Tablonuzdaki ikinci satır, zaman çizelgenizin ana sayfasında görünecek bilgilere aittir.


Bu sebeple zaman çizelgenizin başlığını ve içeriğini bu sütunda belirtmelisiniz.

Artık üçüncü satır ile zaman çizelgemizin tüm bilgilerini veri tabanımıza ekleyebiliriz! Eğer veri tabınımızda satır kalmadıysa sayfanın sol alt kısmındaki “En Alta …. satır daha ekle” bölümünden dilediğiniz kadar satırı rakamla yazıp “Enter” tuşuna basarak kolayca yeni satır ekleyebilirsiniz.


Zaman çizelgesine görsel ekleme:

Daha önce de ifade edildiği üzere zaman çizelgenize Youtube, Vimeo, Soundcloud, Dailymotion, Instagram, Twit Pic, Twitter Durumu, Google Plus Durumu, Wikipedia veya bilgisayarınızdaki görsellerin linkini ekleyebilirsiniz. Bunun için herhangi bir web sayfasından eriştiğiniz görsellere sağ tıklayarak “Resim adresini kopyala” diyerek linklerinin kopyalanması yeterlidir.



Bu işlemden sonra zaman çizelgenizin veri tabında L (Media) sütunundaki ilgili satıra linki yapıştırmanız gerekmektedir.


Yine çeşitli web sayfalarından URL adresini kopyalayarak aynı yöntemle veri tabanınıza video formatında medya ekleyebilirsiniz.



Son olarak, Google Haritalar aracılığı zaman çizelgenize lokasyon eklemeniz de mümkün.



Bunun için Google Haritalar’a gittikten sonra “Google Haritaları’nda Ara” bölümünden lokasyonu aramanız gerekmektedir.



Daha sonra lokasyonun URL adresini kopyalayın.



Yukarıda anlatıldığı üzere medya ekleme bölümündeki işlemlerin aynısını burada da yaparak, veri tabanımızdaki L sütundaki ilgili satıra linki yapıştırmanız yeterlidir.



Peki web sitelerinde yer almayan görselleri zaman çizelgesine nasıl ekleyeceğiz?

Bunun için arşivinizde bulunan resmin web uzantısına ihtiyacınız bulunmakta. Günümüzde bu uygulama için pek çok web sitesi mevcut. Biz zaman çizelgemiz için ResimLink sitesini kullandık.




Siteye herkese açık veya kapalı olarak ayarlayacağınız resimlerinizi ücretsiz şekilde yükleyebilirsiniz. Bununla birlikte, site yükleme yapılığında çeşitli gizlilik özellikleri sunulmakta. Ancak siteye yükleyebileceğiniz içerikler için muhakkak Kullanım Şartları politikasını okumanızı tavsiye ederiz.

İşte yüklediğiniz görselin linkleri karşınızda! Linki veri tabanınıza ekleyerek kolayca zaman çizelgenizde görebilirsiniz.


Bu aşamada “Media Caption” bölümünden görselinizin açıklamasını, “Media Credit” kısmından ise medyanın kaynağını eklemenizi öneririz. Böylece, zaman çizelgenizde kullandığınız medya hakkında okuyucuları kısaca bilgilendirmeniz ve referansa yönlendirmeniz faydalı olacaktır.


Artık ikinci adıma geçerek çizelgemizin diğer metinsel verilerini veri tabanımıza ekleyebiliriz!


2. Adım: Veri tabanını Web Erişimine Açma


Öncelikle veri tabanımızı erişime açarken tablomuzu web üzerinden erişilebilir ve tıklanabilir hale getirmemiz gerekmektedir. Bunun için E-tablonuzunda "Dosya > Paylaş > “Web’de Yayınla” kısmına gidebilirsiniz.


Açılan pencerede, "Yayınla" düğmesini tıklayınız. "Emin misin...?" diye sorulduğunda Tamam'ı tıklayın ve pencereyi kapatın.


ÖNEMLİ: E Tablonuzu"bağlantıya sahip olan herkes düzenleyebilir" olarak ayarlamayın. Bu başkalarının sizin izniniz olmadan zaman çizelgenizi değiştirmesine neden olabilir.

3. Adım: Veritabanınızı Timeline JS websitesine entegre edin


Zaman çizelgenizi oluşturmak için veri tabanızın URL'sini ikinci adımda anlatıldığı üzere web üzerinde yayınladığınızdan emin olun ve Timeline JS sayfasına giderek aşağıdaki kutuya kopyalayın ve yapıştırın.


Aynı zamanda aşağıdaki görseldeki gibi “Optional Setting” bölümünden Show butonuna tıklayarak zaman çizelgenizi farklı dillere çevirebilir, yazı fontlarını değiştirebilirsiniz. Bu noktada, Türkçe karakterlerin görünmesi için muhakkak yazı fontunu değiştirmenizi öneririz.



4. Adım Zaman Çizelgenizi Online Olarak Paylaşın


Üçüncü adımı tamamladıktan sonra artık zaman çizelgenizi tamamlamak için son adıma geldiniz. Veritabanınızın URL’sini Timeline JS sayfasına giderek aşağıdaki kutuya kopyalayın ve yapıştırın.



Dilerseniz zaman çizelgenizin ön izlemesini “Preview” butonuna tıklayarak görebilirsiniz.



İşte son adım!


“Open Preview in a new window” sekmesine tıklayarak zaman çizelgenizin son halini görüntüleyebilirsiniz.


Zaman çizeleginizi online olarak paylaşmak için URL adresini kopyalamanız yeterli.


TimelineJS, interaktif zaman çizelgesi araçları içerisinde kullanıcı dostu arayüze sahip olan oldukça kapsamlı ve ücretsiz bir uygulama olarak önemli bir yere sahip. Araç, dijital beşeri bilimlerin imkanlarından yararlanılarak, farklı disiplinlerdeki pek çok akademik araştırmanın interaktif kronolojisinin oluşturulmasına imkan tanıyor. Bu kapsamda araştırmaların çıktıları ve süreci herkes tarafından takip edilebilir ve daha çok kişiye erişilebilir hale gelmektedir.


Bu blog yazısında uygulama olarak yaptığımız 1876'dan 1950'ye İstanbul'da seçim Kronolojisi için tıklayınız.[1]


Kaynakça:


Eraslan, Cezmi. ve Kenan Olgun, ‘1876’dan 1950’ye İstanbul’un Seçim Tarihi’, in Antik Çağ’dan XXI. Yüzyıla Büyük İstanbul Tarihi, cilt. 3 (İstanbul: İstanbul Büyükşehir Belediyesi Kültür A.Ş., 2015), 328–45.

Büşranur Bekman

Sakarya Üniversitesi

Osmanlı Araştırmaları Merkezi