{"slug": "tv-yayin-akisi-sitesi-gelistirirken-ogrendigim-teknik-dersler", "title": "TV Yayın Akışı Sitesi Geliştirirken Öğrendiğim Teknik Dersler", "summary": "The article details the technical challenges encountered while developing a TV broadcast schedule website, which initially seemed simple but required significant optimization for mobile traffic, performance, and SEO. Key solutions included separating data from the interface using JSON, implementing lazy loading for channel logos, and using structured data to improve search engine understanding. The author emphasizes that reducing DOM size, requests, and JavaScript often yields better results than adding more code, especially for mobile-heavy projects.", "body_md": "Televizyon yayın akışı sitesi geliştirmeye başladığımda bunun basit bir içerik projesi olacağını düşünmüştüm. İlk bakışta mantık oldukça düz görünüyordu:\nKanal listesi\nYayın saatleri\nProgram başlıkları\nKullanıcıya hızlı erişim\nFakat iş geliştirme tarafına geçince durum farklılaştı.\nÖzellikle mobil trafik, performans, SEO ve sürekli güncellenen veriler bir araya gelince küçük görünen bir proje zamanla ciddi optimizasyon gerektiren bir sisteme dönüştü.\nBu yazıda TV yayın akışı projesi geliştirirken karşılaştığım teknik sorunları ve uyguladığım çözümleri paylaşacağım.\nYayın akışları statik içerik değil.\nHer gün:\nyeni programlar ekleniyor\nsaatler değişiyor\nözel yayınlar geliyor\niçerikler güncelleniyor\nBaşta verileri doğrudan HTML içine yazmayı denedim. Fakat kısa sürede yönetilemez hale geldi.\nİlk yaklaşım:\n<div class=\"program\">\n<span>20:00</span>\n<span>Ana Haber</span>\n</div>\n<div class=\"program\">\n<span>22:00</span>\n<span>Film Kuşağı</span>\n</div>\nBu yöntem küçük ölçek için çalışıyor ancak kanal sayısı arttığında bakım zorlaşıyor.\nDaha sürdürülebilir yapı JSON tabanlı veri modeli oldu:\n[\n{\n\"time\":\"20:00\",\n\"title\":\"Ana Haber\"\n},\n{\n\"time\":\"22:00\",\n\"title\":\"Film Kuşağı\"\n}\n]\nFrontend tarafında:\nschedule.forEach(item=>{\ncontainer.innerHTML += `\n<div class=\"program\">\n<span>${item.time}</span>\n<span>${item.title}</span>\n</div>\n`\n});\nArayüzü veriden ayırmak bakım sürecini ciddi şekilde kolaylaştırdı.\nTV projelerinde genelde çok sayıda kanal logosu bulunuyor.\nİlk çözüm klasik yatay kaydırma alanıydı:\n.channels{\noverflow-x:auto;\nwhite-space:nowrap;\n}\nBaşlangıçta çalışıyordu fakat kanal sayısı büyüdükçe mobil cihazlarda bazı sorunlar ortaya çıktı:\nfazla DOM yükü\nkaydırma takılmaları\ndüşük FPS\ngereksiz render işlemleri\nSonrasında görünmeyen öğeleri yüklememeye başladım.\nÖrnek:\nconst visibleItems = channels.slice(start,end);\nBasit görünse de özellikle düşük donanımlı cihazlarda fark hissedildi.\nKanal sitelerinde logo sayısı çok yüksek olabiliyor.\nİlk sürüm:\n<img src=\"kanal-logo.png\">\nYüzlerce logo yüklenmeye başladığında ağ yükü hızla arttı.\nDaha sonra:\n<img\nloading=\"lazy\"\nsrc=\"kanal-logo.png\"\nalt=\"kanal logosu\">\nTarayıcının yerleşik lazy loading desteği ciddi fayda sağladı.\nEkstra JavaScript kullanmadan ilk yükleme süresi azaldı.\nİlk sürümlerde her kanal kartı manuel yazılıyordu:\n<div class=\"channel\">\n<img src=\"kanald-logo.png\">\n<h3>Kanal D</h3>\n</div>\nBir süre sonra yüzlerce tekrar oluştu.\nDaha sonra yapı fonksiyonlaştırıldı:\nfunction channelCard(channel) {\nreturn `\n<div class=\"channel\">\n<img src=\"kanald-logo.png\">\n<h3>Kanal D</h3>\n</div>\n`;\n}\nBu yaklaşım:\nkod tekrarını azalttı\nbakım sürecini kolaylaştırdı\nölçeklenebilirliği artırdı\nAyrıca Dev.to editöründe bazı template literal örneklerinin sorun çıkarabildiğini fark ettim. Bu yüzden örnek kodlarda sade yapı kullanmak daha güvenli olabiliyor.\nYayın akışı siteleri her gün değişiyor.\nBurada temel soru şuydu:\nArama motorları sürekli güncellenen içeriği ne kadar sağlıklı algılıyor?\nBazı çözümler:\nanlamlı URL yapıları\nyapılandırılmış veriler\nsitemap güncellemeleri\nhızlı sayfa yüklenmesi\ngereksiz JavaScript azaltılması\nÖrnek:\n<script type=\"application/ld+json\">\n{\n\"@context\":\"https://schema.org\",\n\"@type\":\"TVSeries\",\n\"name\":\"Örnek Program\"\n}\n</script>\nYapısal veriler küçük görünse de arama motorlarının içeriği anlamasında yardımcı olabiliyor.\nBir noktada fark ettiğim önemli şeylerden biri:\nSorunların çoğu daha fazla JavaScript eklenerek çözülmüyor.\nBazen:\ndaha az DOM\ndaha az istek\ndaha küçük CSS\ndaha sade yapı\nçok daha iyi sonuç verebiliyor.\nÖzellikle mobil ağırlıklı projelerde hafiflik önemli hale geliyor.\nSonuç\nTV yayın akışı sitesi ilk bakışta basit görünüyor.\nAncak kullanıcı sayısı ve veri miktarı arttığında:\nperformans\nveri yönetimi\nSEO\nmobil optimizasyon\nölçeklenebilirlik\nbir anda projenin merkezine yerleşiyor.\nKüçük görünen projeler bazen büyük sistemlerden daha fazla optimizasyon gerektirebiliyor.\nKullanılan Kaynaklar:\n• Schema.org — BroadcastService: https://schema.org/BroadcastService\n• Schema.org — TelevisionChannel: https://schema.org/TelevisionChannel\n• Örnek Çalışma - TV Yayın Akışı\n• Google Search Central — Video Structured Data: https://developers.google.com/search/docs/appearance/structured-data/video", "url": "https://wpnews.pro/news/tv-yayin-akisi-sitesi-gelistirirken-ogrendigim-teknik-dersler", "canonical_source": "https://dev.to/yayin/tv-yayin-akisi-sitesi-gelistirirken-ogrendigim-teknik-dersler-1gea", "published_at": "2026-05-22 14:54:33+00:00", "updated_at": "2026-05-22 15:03:47.390729+00:00", "lang": "en", "topics": ["developer-tools", "data", "products"], "entities": [], "alternates": {"html": "https://wpnews.pro/news/tv-yayin-akisi-sitesi-gelistirirken-ogrendigim-teknik-dersler", "markdown": "https://wpnews.pro/news/tv-yayin-akisi-sitesi-gelistirirken-ogrendigim-teknik-dersler.md", "text": "https://wpnews.pro/news/tv-yayin-akisi-sitesi-gelistirirken-ogrendigim-teknik-dersler.txt", "jsonld": "https://wpnews.pro/news/tv-yayin-akisi-sitesi-gelistirirken-ogrendigim-teknik-dersler.jsonld"}}