WTK207U-WEB TABANLI KODLAMA
Ünite 3: Çokluortam Öğelerinin Sunumu
Giriş
Html, özellikle 2000’li yılların başında teknolojik araç- gereçlerin gelişmesi ile hızlı bir gelişim göstermiş, html ifadesi içerisinde yer alan Hyper Text’in dışına çıkarak yazının yanında ses, video gibi öğeleri de kapsar hâle gelmiştir. Çoklu ortam, dijital ortamlarda etkileşimli yazının yanında resim, video, animasyonlar, ses gibi çok sayıda nesnenin birlikte kullanımını ifade eden bir kavramdır.
Html5 video ve ses başta olmak üzere çok sayıda denetimi ile çoklu ortam öğelerinin kullanımını kolaylaştıran yeni bir html sürümüdür.
Resimlerin Görüntülenmesi
Çoklu ortam öğeleri olarak metinden sonra en sık kullanılan öğelerin başında resim gelmektedir. Görsellik olarak gerek içerik sunumunu kolaylaştırması, gerek kolay bir şekilde kullanılabilmesi resimlerin web sayfalarında yer bulmasını sağlamıştır. Html’de resimlerin gösterimi için img etiketi aşağıdaki şekilde kullanılmaktadır.
<img src=”resmin bulunduğu konum ve resim dosyasının adı” width=”x” height=”y”>
Resmin bulunduğu konum, oluşturulan html sayfasının bulunduğu konum esas alınarak ifade edilir. Örneğin masaüstünde web sayfam isimli bir klasör olduğunu varsayalım. Bunun içerisinde de iletisim.html isimli bir sayfayı tasarladığımızı düşünelim. Bu sayfada resim göstermek istiyorsak (ör: foto.jpg) resmin iletisim.html dosyası ile aynı yerde yani web sayfam isimli klasörün içerisinde olması gerekir. Bu durumda src=”foto.jpg” olarak yazılması gerekir. Ancak genellikle web sitelerinde karmaşayı önlemek adına ve tercihen çoklu ortam öğeleri ayrı klasörler altında tutulur. Bu açıdan web sayfam klasörünün içerisinde resimler, sesler, videolar gibi klasörler oluşturulur ve foto.jpg dosyası resimler klasörünün içerisinde saklanır. Bu durumda resim dosyasının konumu için yine iletisim.html dosyası dikkate alınarak alt klasör konumu da belirtilir. Sonuç olarak dosya konumu için src=”resimler/foto.jpg” şeklinde bir tanımlama yapılmalıdır. Width ve Height ise kullanımı zorunlu olmamakla birlikte resmin sayfa içerisindeki büyüklüğünü pixel olarak ifade etmektedir. Bir tasarımcı resmin boyutlarını program aracılığı ile hiç değiştirmeden sayfasında bu iki parametreyi kullanarak istediği ebatlarda gösterebilir.
Resim etiketi olan <img> etiketinin alabileceği birkaç önemli parametresi daha bulunmaktadır. Bunlara örnek olarak border, alt, align ve usemap parametreleri verilebilir. Eğer resme çerçeve verilecekse border parametresine değer atanmalıdır (ör: border= “4”). Atanan değer 0 olursa çizgi olmayacağı anlamına geleceği gibi, bu değer ne kadar fazla olursa çizginin kalınlığı da o kadar artacaktır. Alt resmin açılmaması durumunda veya üzerine gelinmesi durumunda görünmesi istenilen metnin
görüntülenmesi, align ise resmin sayfaya göre hizalanması (sağa-right ya da sola-left ) amacıyla kullanılır.
<img> etiketinin parametre olarak align parametresi sadece sol-left ve sağ-right değerlerini almaktadır. Ortalama işlemi için bu parametre çalışmamaktadır. Ancak resmi ortalamak isteyen bir tasarımcı img parametresinin önünde kullanacağı <center> ve sonunda kullanacağı </center> etiketleri ile bu sorunu aşağıdaki şekilde çözebilir.
<center> <img src=”resimler/manzara.jpg” width=200 height=120 > </center>
<img> etiketinin alacağı bir diğer parametre ise usemap olup, resim haritalarının oluşturulmasında kullanılmaktadır.
Resim Haritalarının Oluşturulması
Resim haritaları (image maps) resimlerin üzerindeki bir veya daha fazla noktaya link verme amacı ile kullanılmaktadır. Örnek olarak yedi coğrafi bölgeden oluşan Türkiye Coğrafi Bölgesi haritası göz önünde bulundurulur ve bolgeler.html sayfasında kullanıldığı varsayılırsa, her bir bölge için resim üzerinde resim haritası ile belirli alan link olarak oluşturulabilir ve yedi bölgeden herhangi birini oluşturan alana tıklanması durumunda kendi bölgesine ait html (örneğin marmara.html, akdeniz.html, vb.) dosyasının açılması sağlanabilir. Resim haritalarının oluşturulmasında <img> etiketi usemap parametresi ile kullanılmalıdır. Bu kullanımda ilişkilendirme değeri kullanılırken önüne # işareti unutulmamalıdır. Sonrasında ise <map> etiketi ile resim haritalarının alanları ve link işlemleri atanır.
Shape parametresi, resim üzerinde işaretlenecek alan veya alanların şekillerinin belirlenmesi için kullanılır ve rect (dikdörtgen), circle (daire), poly (çok kenarlı) olmak üzere üç farklı değer alabilmektedir. Coords parametresi ise resim üzerinde işaretlenecek alanın genişliğini pixel olarak belirlemek için kullanılmakla beraber kullanım şekli tercih edilen shape seçeneğine göre değişmektedir. shape=“rect” yani dikdörtgen alan oluşturmak için 2 nokta tanımlanmalıdır. Bunlar sol üst ve sağ alt noktadır (coords=X1,Y1,X2,Y2) ve tanımlama <area shape=”rect” coords=”0,0,30,20”) şeklinde olacaktır. Büyüklük için dairesel yani shape=“circle” şeklinde bir alan belirlenecek olursa bu durumda coords parametresinde (coords=X1,Y1,r) koordinatlar dairenin merkezini ve çapını gösterir tanımlama ise <area shape=”rect” coords=”50,50,25”) şeklinde olacaktır. Serbest olarak bir alan belirlenecekse bu durumda X ve Y koordinatları istenilen sayıda kullanılabilir (coords=X1,Y1,…,Xn,Yn) ve en son seçimdeki koordinatlar ile ilk koordinatlar birleştirilecektir, tanımlama ise <area shape=”poly” coords=”0,0,25,50,48,78,75,100”) şeklindedir.
Son olarak area etiketi ile oluşturulan her bir seçenek yani link verilmiş bölgeye tıklanması durumunda ne olacağını belirlemek için href parametresi kullanılır ve link verilir.
href parametresine atanacak değer ile başka bir html dosyasına yönlendirme yapılabileceği gibi, bir Word dosyasına link verme, müzik dosyasına link verme veya zip dosyası gibi bir dosyaya link verme işlemi de yapılabilir. Tıklanması durumunda da ilgili doküman belgesinin indirme işlemini yerine getirilecektir.
HTML5’in Getirdiği Çoklu Ortam Özellikleri
Web sitesinde kullanılabilecek diğer önemli çoklu ortam öğeleri ise ses ve videodur. Normalde html ile bu iki öğenin de kullanımı gerçekleştirilebilmektedir. Ancak web erişim aracı olarak mobil teknolojilerin önem kazanması html5 teknolojisinin geliştirilmesini sağlamış, getirdiği hazır komutlar ile bu iki öğenin kullanımı çok kolay hâle gelmiştir. Html’in zamanla sürümleri çıktığını, 1999 yılında html 4’ün geliştirildiğini, şu an kullanılmakta olan sürümün 2004 yılında geliştirildiğini ve ajax ve flash desteği sunan xhtlm 2.0 sürümü olduğunu ve html5’in ise en son çıkan ve kendine yönelik standartları ve yenilikleri de beraberinde getirdiğini vurgulamak gerekir. Günümüzde hemen hemen tüm popüler tarayıcılar (firefox, chrome, yandex, internet explorer vb.) hem html4 standartlarında, hem de html5 standartlarında yazılmış etiketleri derleyebilmektedir.
Html5 yeni sürüm olarak eski sürümlere oranla yenilikler getirmekte, buna karşın önceki sürümlerle yazılan kodları da kapsamaktadır. Html5’in getirdiği yenilikler incelendiğinde hata kontrollerinin daha gelişmiş olduğu, daha işlevsel parametreler ile yeni etiketlerin kolaylık sağlaması, yeni uygulamaları desteklemesi, ses ve video için destek sunması, veri girişi için kullanılan input type’lara özellikler eklenmesi, canvas özelliği ile iki boyutlu çizimlerin yapılabilmesi sağladığı yenilikler olarak ifade edilebilir. Özetle vurgulamak gerekirse, daha önceki sürümlerde bulunmayan yeni etiketler eklenmiş veya varolan etiketler parametreler ile zenginleştirilmiş, böylece daha zengin bir tasarım olanağı sunulmuştur. Bu yeniliklerden bir kısmı da video ve ses öğelerinde ön plana çıkmaktadır.
Html5 ile Videoların Eklenmesi
Öncelikli olarak bu işlemin daha önceki sürümlerde <embed> etiketi ile kullanıldığını belirtmek gerekir. Ancak html5 sahip olduğu parametre sayısı ile video ekleme ve kontrol işlemlerini çok daha pratik ve işlevsel hâle getirmiştir. Html5 ile video eklemek için kullanılan etiket <video> etiketi olup </video> etiketi ile kapatılması gerekir. Basit düzeyde video eklemek için sadece <video> etiketinin içerisinde src parametresi ile hedef belirtmek yeterli olacaktır. Ayrıca resim ekleme başlığında anlatıldığı üzere üzerinde çalışılan html’ye göre konum belirtilir. Bir başka ifade ile eğer eklenmek istenen video alt klasör veya klasörler içerisinde ise bu klasör isimleri de belirtilerek adres işaretlenmelidir.
Eğer web sayfanıza bir video eklemek isterseniz, bu video dosyanızı mp4, webM veya ogg uzantılı dosyaya
dönüştürücü programlar aracılığı ile dönüştürmeniz gerekmektedir.
Mime tipi kullanımı zorunlu olmamakla birlikte <video> etiketinde type parametresi kullanılması durumunda atanacak değerdir.
Videolar üzerinde istenilen bir diğer önemli özellik ise video kontrolünün yapılabilmesidir. Bir başka ifade ile durdurulup başlatılabilmesi, sesin kontrol edilebilmesi veya istenilen video bölümüne geçiş yapılabilmesi ve tam ekran gösterim özellikleri önemli olup, html5’de video etiketinin içerisine yazılacak controls parametresi bu işlevleri yerine getirmektedir.
Ayrıca video oynatım süresinin bitmesi durumunda yeniden başlatılabilmesi için video etiketinin içerisine controls’a benzer şekilde sadece loop yazmak yeterli olacaktır. Diğer yandan tasarımcılar için sunulan bir diğer seçenek ise poster parametresidir. Poster parametresi videonun oynatılmasından önce onu temsilen bir resim kullanımı anlamına gelmektedir. Bu özelliğin kullanılması durumunda autoplay özelliğinin kaldırılması gerekir.
Html5 ile Seslerin Eklenmesi
Html5 ile web sayfalarına eklenebilecek ve çok sık kullanılan bir diğer çoklu ortam öğesi ise sestir. Html5 için desteklenen dosya uzantı türleri ise mp3, ogg ve wav’dır. Örnek olarak web sayfasına müzikler klasöründeki muzik1.mp3 isimli ses dosyasını eklemek isteyen bir tasarımcı için bu işlem çok basittir ve <audio> etiketi ile şu şekilde yapılmaktadır. <audio src=”muzikler/muzik1.mp3”> </audio>
Ses, resim ve video bağlamında çoklu ortam öğeleri için html5 ile gelen, sıkça internet örneklerinde karşılaşılan ve düzeni sağlamayı amaçlayan iki önemli etiket olarak <figure> ve <figcaption> etiketlerini kısaca açıklamak yararlı olacaktır. <figure> etiketi birleştirme özelliği taşımaktadır ve içerisinde bir resim, gösterim, diyagram, kod listeleri gibi öğelerin olduğunu belirtir. <figure> elementi ana akış ile ilgili olsa da, konumu ana akıştan bağımsızdır ve çıkarılırsa dökümanın akışını engellemez. <figcaption> etiketi ise <figure> elementinin belirttiği çoklu ortam öğesine başlık eklemeye yarar.
Harici Uygulama ve İçeriklerin Entegrasyonu
Çoklu ortam olarak ses, video ve resim uygulamaları ile metin en çok kullanılan uygulamalar olarak ifade edilebilir. Ancak günümüzde zenginleşen web tasarım destek araçları (animasyonlar), farklı firmaların sunduğu hazır uygulamalar da web ortamında çoklu ortam olarak değerlendirilmektedir.
Flash Animasyonlarının Eklenmesi
Günümüzde animasyonlar web sayfalarına banner eklenmesi, anlatımları eğlenceli ve ilgi çekici hâle getirmesi, kullanıcının kontrol imkânı bulması gibi nedenlerle sıklıkla kullanılan çoklu ortam öğeleridir. Adobe Flash programı tarafından üretilen ve iki boyutlu
tasarım ürünü olan. swf uzantılı animasyon dosyaları, web gömülü değişiklik sayfada geçen tüm <img> etiketi sayfalarında sıklıkla ve yaygın olarak kullanılması adına kullanılan yerlerde etkisini gösterecektir. önemli çoklu ortam öğesi olarak vurgulanmalıdır. Bu border: 1px solid #ccc; stili ile resmi 1px genişliğinde ve kapsamda swf bir dosyanın site içerisinde kullanılması belirtilen renkte kutucuk içerisine alma, padding: 15px; ile mümkün olup, bunu gerçekleştiren html etiketi ise kutucuk ile resim arasındaki mesafeyi belirleme, <embed> etiketidir. background-color:red; ile arkaplanına renk verme ve box- Embed etiketinin yanında kullanılabilecek diğer bazı shadow: 10px 10px 5px #888888; parametresi ile de gölge parametreler ise align, quality, pluginspage’dir. Align verme gibi temel işlemler yapılabilir. parametresi left ve right değerlerini alıp, sadece sola ve sağa hizalamak amacı ile kullanılır. Eğer animasyon ortaya hizalanacaksa daha önce bahsedildiği gibi <embed> etiketi <center> </center> etiketleri arasında kullanılmalıdır. Quality ise animasyonun gösterim kalitesi için kullanılır ve high, medium ve low olmak üzere üç değer alır. Pluginspage ise animasyonun oynatılması için gerekli olan player programı tarayıcı tarafında kurulu değilse, kullanıcıyı uyararak kurması için gerekli olan siteye yönlendirir.
PDF Dosyalarının Eklenmesi
Sitelerde günümüzde doküman dosyalarının doğrudan eklenmesi yerine daha güvenli olduğu düşüncesi ile pdf uzantılı Adobe Acrobat dosyaları paylaşılmaktadır. Web sayfa tasarımcıları da kolaylıkla sayfalarında pdf uzantılı dosyaları paylaşabilirler. Bunun için kullanmaları gereken etiket yine <embed> etiketidir.
Youtube Videolarının Eklenmesi
Youtube videolarının eklenmesi <video> etiketi yerine <embed> etiketi ile kolay bir şekilde yapılmaktadır. Hatta youtube paylaşımları sitede yapabilmek için kendisi ilgili paylaşım ile ilgili <iframe> oluşturmakta, gelen kod doğrudan siteye eklenerek videonun kişisel web sayfasında oynatımı mümkün hâle gelmektedir. Bunun için öncelikli olarak youtube sitesinden paylaşılmak istenen video bulunmalı, aşağıda yer alan Paylaş, Ekle ve e-Posta gönder linklerinden Ekle tıklanmalıdır. Gelen <iframe ile başlayan link kopyalanmalı ve tasarımcının html sayfasına doğrudan kopyalanmalıdır.
Web Sitesine Konum Bilgisinin Eklenmesi
Son dönemlerde özellikle iletişim bölümlerinde kullanımı yaygınlaşan bir diğer uygulama ise adres konum bilgisinin harita olarak eklenmesidir. Aslında bu uygulama da youtube videoları gibi, Google tarafından sunulan maps.google.com hizmetinde konumun işaretlenmesi ve siteye üretilen html kodunun kopyalanıp yapıştırılması şeklindedir.
Çokluortam Öğelerinde Stil Kullanımı
Metinler kadar zengin olmamakla birlikte resim, ses ve video çoklu ortam nesneleri için de stil tanımlamak mümkündür. Öncelikli olarak <img> etiketine yönelik temel CSS stil özellikleri üzerinde durulabilir. Stil tanımlaması style=”özellik:değer;” şeklindedir. Ayrıca değişiklik için daha çok etiketin içerisinde kullanım (inline) yerine gömülü stil kullanımı şeklinde yapılmaktadır. Bir önceki üniteden hatırlanacağı üzere