gömülü sistemler, embed ve iframe
Yeniden merhaba! Nasılsın? Umarım iyisindir. Bugün, Embed ve iFrame sistemini nasıl kullanabileceğin ve bu araçlardan nasıl daha fazla verim alabileceğin konusunda bazı bilgiler paylaşmak istiyorum.
iFrame, kelime anlamıyla “çerçeve” demektir. Bir web sayfasının içine başka bir web sayfasını yerleştirmeni sağlar. Bunu, bir tabloyu başka bir yere sabitlemek gibi düşünebilirsin. Örneğin, sitene YouTube videosu eklemek istediğinde, videoyu doğrudan yüklemek yerine, iFrame kullanarak videoyu daha işlevsel bir şekilde entegre edebilirsin. Bu, sayfanın yüklenme süresini ve kaynak kullanımını da optimize eder.
Bir iFrame eklemek oldukça basittir. Örneğin, YouTube’dan bir video eklemek için kullanabileceğin temel bir kod şöyle olabilir:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/oQ-QHjAlQhg"
frameborder="0" allowfullscreen></iframe>
Bu kodda, width ve height ile iFrame’in boyutlarını belirleyebilirsin. src ise yerleştirilmek istenen içeriğin URL’sini gösterir. Ayrıca, allowfullscreen özelliği sayesinde kullanıcıların videoyu tam ekran izlemelerine olanak tanırsın.
iFrame’lerin birçok kullanım alanı var. Örneğin, Google Maps’i sitene entegre edebilirsin. Harita eklemek, kullanıcıların lokasyon bilgilerini kolayca görmesine yardımcı olur. Bunun için kullanabileceğin bir kod örneği şöyle olabilir:
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8354345093315!2d144.95373531531695!3d-37.81627997975139!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11b63f%3A0x5045675218ce6e0!2sFederation%20Square!5e0!3m2!1sen!2sau!4v1601438730414!5m2!1sen!2sau"
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
Ayrıca, sosyal medya içeriklerini de entegre etmek için kullanabilirsin. Örneğin, bir Tweet’i gömmek istediğinde, Twitter’ın sağladığı embed kodunu kullanabilirsin:
<blockquote class="twitter-tweet">
<p lang="tr" dir="ltr">Bu bir örnek gönderi <a href="https://twitter.com/twitter/status/123456789">Twitter’da</a></p>
— Kullanıcı Adı (@kullaniciadi) <a href="https://twitter.com/twitter/status/123456789">Tarih</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Güvenlik de iFrame kullanırken önemli bir konu. Güvenilmeyen kaynaklardan gelen içerikler, kötü amaçlı yazılımlar içerebilir. Bu nedenle, her zaman güvenilir siteleri tercih etmelisin. Ayrıca, sandbox özelliğini kullanarak bazı işlemleri kısıtlayabilirsin. Bu, özellikle kullanıcı güvenliği açısından faydalıdır. Örneğin:
<iframe src="https://example.com" sandbox="allow-same-origin allow-scripts"></iframe>
Performans konusuna gelirsek, iFrame kullanımı sayfanın yüklenme süresini etkileyebilir. Bu yüzden, gereksiz iFrame’lerden kaçınmalısın. Eğer bir iFrame’in yalnızca görünür olduğunda yüklenmesini istiyorsan, loading="lazy" özelliğini ekleyebilirsin. Böylece, sayfa daha hızlı yüklenecek ve kullanıcı deneyimi artacaktır:
<iframe src="https://example.com" loading="lazy"></iframe>
Son olarak, bazı web siteleri, güvenlik nedeniyle iFrame’lerde yer almayı reddedebilir(kullanacağın site SSL/TLS gibi güvenlik önlemlerine sahip ise). Bu durumda, bu sitelerin politikalarını kontrol etmen önemlidir. Bazı platformlar, içeriklerini direkt olarak JavaScript kodu ile yerleştirmeni sağlar. Bu yöntem, daha esnek ve özelleştirilebilir bir entegrasyon sunar.
Bu yazımda sana iFrame etiketi, alabileceği değerler ve sınıflardan bahsettim.
Görüşmek üzere
İyi şanslar…